/* ============================================================
   BioSans — Mondria custom typeface
   ============================================================ */
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-ExtraLightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-SemiBoldItalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'BioSans'; src: url('fonts/BioSans-ExtraBoldItalic.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; }

/* ============================================================
   Design tokens
   ------------------------------------------------------------
   Light is the default theme and lives on :root.
   Dark overrides ride on body.rv-dark (and :root:has(...) so the
   html element's canvas colour follows too, avoiding a flash).

   Colour strategy: RESTRAINED. A neutral canvas with a whisper of
   the brand's navy hue, white surfaces, hairline borders, and one
   accent — Mondria orange — reserved for primary actions, the
   current selection, and state. Never decoration.

   Two oranges on purpose:
     --rv-brand   #FF4200  identity. Fills, rails, icons. Never text.
     --rv-primary #D93800  actions. Passes 4.5:1 with white labels.
   ============================================================ */
:root {
    /* Brand */
    --rv-brand:            #FF4200;
    --rv-brand-rgb:        255, 66, 0;
    --rv-primary:          #D93800;
    --rv-primary-hover:    #C43200;
    --rv-primary-active:   #AD2B00;
    --rv-primary-soft:     rgba(255, 66, 0, 0.09);
    --rv-primary-ink:      #C43200;   /* orange as text — AA on surface + canvas */

    /* Navy — the sidebar and hero surface. Brand anchor. */
    --rv-navy:             #031D2A;
    --rv-navy-2:           #0A3348;

    /* Surfaces */
    --rv-canvas:           #F5F6F8;
    --rv-surface:          #FFFFFF;
    --rv-surface-2:        #F0F2F5;   /* table heads, toolbars, wells */
    --rv-surface-3:        #E9ECF1;   /* pressed / selected rows */
    --rv-input-bg:         #FFFFFF;
    --rv-hover:            rgba(15, 20, 25, 0.04);
    --rv-selected:         rgba(255, 66, 0, 0.07);

    /* Ink ramp */
    --rv-ink:              #0F1419;
    --rv-ink-2:            #48525E;
    --rv-ink-3:            #5C6672;   /* muted body / helper text — 5.4:1 on canvas */
    --rv-ink-4:            #6B7683;   /* timestamps, meta */
    --rv-ink-disabled:     #98A1AC;

    /* Borders */
    --rv-border:           #E4E7EB;
    --rv-border-mid:       #D2D7DE;
    --rv-border-strong:    #B4BCC6;

    /* Semantic — text-safe on surface, with matching soft fills */
    --rv-success:          #0E7C55;
    --rv-success-soft:     #E8F7F0;
    --rv-success-border:   #B6E3CE;
    --rv-warning:          #9A5B00;
    --rv-warning-soft:     #FDF3E3;
    --rv-warning-border:   #EFD5A8;
    --rv-error:            #C42B30;
    --rv-error-soft:       #FDEEEE;
    --rv-error-border:     #F0C4C4;
    --rv-info:             #1F6FD0;
    --rv-info-soft:        #EDF4FD;
    --rv-info-border:      #C3DBF5;
    --rv-neutral-soft:     #F0F2F5;

    /* Tooltip — an inverse surface, so it reads as an object floating
       above the page rather than another sheet of paper. 18.4:1. */
    --rv-tooltip-bg:       #031D2A;
    --rv-tooltip-ink:      #FFFFFF;

    /* Radius — tightened for a product register */
    --rv-radius-xs:   4px;
    --rv-radius-sm:   6px;
    --rv-radius-md:   8px;
    --rv-radius-lg:  12px;
    --rv-radius-xl:  16px;
    --rv-radius-full: 9999px;

    /* Elevation — light mode is border-driven; shadow only for what floats */
    --rv-shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.04);
    --rv-shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.06), 0 1px 2px rgba(15, 20, 25, 0.04);
    --rv-shadow-md: 0 4px 12px rgba(15, 20, 25, 0.07), 0 1px 3px rgba(15, 20, 25, 0.05);
    --rv-shadow-lg: 0 12px 32px rgba(15, 20, 25, 0.10), 0 2px 6px rgba(15, 20, 25, 0.05);

    /* Focus */
    --rv-focus-ring:   0 0 0 2px var(--rv-surface), 0 0 0 4px rgba(255, 66, 0, 0.55);
    --rv-focus-ring-flat: 0 0 0 2px rgba(255, 66, 0, 0.55);

    /* Motion — product register: fast, state-carrying, no choreography */
    --rv-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --rv-dur-fast:    120ms;
    --rv-dur:         160ms;
    --rv-dur-slow:    220ms;

    /* Z-index scale. Ordered by what has to float over what: a dropdown
       is spawned from the chrome, so it outranks the chrome. Having it
       below the drawer and the app bar is how a menu ends up hidden
       behind the thing that opened it. */
    --rv-z-sticky:   200;
    --rv-z-drawer:   300;
    --rv-z-dropdown: 400;
    --rv-z-backdrop: 500;
    --rv-z-modal:    600;
    --rv-z-toast:    700;
    --rv-z-tooltip:  800;

    /* ── Back-compat aliases ──────────────────────────────────
       Page markup references --gcb-* inline in many places.
       Keep them pointing at the new scale so nothing drifts. */
    --gcb-primary:        var(--rv-primary);
    --gcb-primary-dark:   var(--rv-primary-hover);
    --gcb-primary-light:  #FF6840;
    --gcb-primary-soft:   var(--rv-primary-soft);
    --gcb-accent:         var(--rv-navy-2);
    --gcb-accent-dark:    var(--rv-navy);
    --gcb-bg:             var(--rv-canvas);
    --gcb-bg-secondary:   var(--rv-surface-2);
    --gcb-surface:        var(--rv-surface);
    --gcb-elevated:       var(--rv-surface);
    --gcb-input-bg:       var(--rv-input-bg);
    --gcb-bg-sidebar:     var(--rv-navy);
    --gcb-bg-hover:       var(--rv-hover);
    --gcb-bg-active:      var(--rv-selected);
    --gcb-text-primary:   var(--rv-ink);
    --gcb-text-secondary: var(--rv-ink-2);
    --gcb-text-muted:     var(--rv-ink-3);
    --gcb-text-subtle:    var(--rv-ink-4);
    --gcb-border:         var(--rv-border);
    --gcb-border-mid:     var(--rv-border-mid);
    --gcb-border-strong:  var(--rv-border-strong);
    --gcb-success:        var(--rv-success);
    --gcb-warning:        var(--rv-warning);
    --gcb-error:          var(--rv-error);
    --gcb-info:           var(--rv-info);
    --gcb-radius-sm:      var(--rv-radius-sm);
    --gcb-radius-md:      var(--rv-radius-md);
    --gcb-radius-lg:      var(--rv-radius-lg);
    --gcb-radius-xl:      var(--rv-radius-xl);
    --gcb-radius-full:    var(--rv-radius-full);
    --gcb-shadow-sm:      var(--rv-shadow-sm);
    --gcb-shadow-md:      var(--rv-shadow-md);
    --gcb-shadow-lg:      var(--rv-shadow-lg);
    --gcb-transition:     var(--rv-dur-fast) var(--rv-ease);
    --gcb-transition-md:  var(--rv-dur) var(--rv-ease);
}

/* ── Dark theme ──────────────────────────────────────────── */
:root:has(body.rv-dark),
body.rv-dark {
    --rv-canvas:           #04202E;
    --rv-surface:          #0A2E40;
    --rv-surface-2:        #0F3A4F;
    --rv-surface-3:        #14455C;
    --rv-input-bg:         #072B3D;
    --rv-hover:            rgba(220, 243, 249, 0.06);
    --rv-selected:         rgba(255, 66, 0, 0.14);

    --rv-ink:              #FFFFFF;
    --rv-ink-2:            #DCE8EF;
    --rv-ink-3:            #A9BCC7;
    --rv-ink-4:            #93A8B4;
    --rv-ink-disabled:     rgba(220, 243, 249, 0.38);

    --rv-border:           rgba(220, 243, 249, 0.10);
    --rv-border-mid:       rgba(220, 243, 249, 0.17);
    --rv-border-strong:    rgba(220, 243, 249, 0.28);

    --rv-primary-ink:      #FF7A4D;
    --rv-primary-soft:     rgba(255, 66, 0, 0.14);

    --rv-success:          #34D399;
    --rv-success-soft:     rgba(52, 211, 153, 0.13);
    --rv-success-border:   rgba(52, 211, 153, 0.28);
    --rv-warning:          #FBBF4A;
    --rv-warning-soft:     rgba(251, 191, 74, 0.13);
    --rv-warning-border:   rgba(251, 191, 74, 0.28);
    --rv-error:            #FF7A7F;
    --rv-error-soft:       rgba(255, 122, 127, 0.13);
    --rv-error-border:     rgba(255, 122, 127, 0.28);
    --rv-info:             #6BAEF5;
    --rv-info-soft:        rgba(107, 174, 245, 0.13);
    --rv-info-border:      rgba(107, 174, 245, 0.28);
    --rv-neutral-soft:     rgba(220, 243, 249, 0.08);

    /* Inverse still means inverse: navy-on-navy would vanish against
       the dark canvas, so the bubble flips to light. 13.5:1. */
    --rv-tooltip-bg:       #DCE8EF;
    --rv-tooltip-ink:      #031D2A;

    --rv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
    --rv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
    --rv-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.34);
    --rv-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.44);

    --rv-focus-ring: 0 0 0 2px var(--rv-canvas), 0 0 0 4px rgba(255, 122, 61, 0.7);
    --rv-focus-ring-flat: 0 0 0 2px rgba(255, 122, 61, 0.7);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    background-color: var(--rv-canvas);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'BioSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--rv-canvas);
    color: var(--rv-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

/* Mondria geometric marks — dark theme only. In light they read as
   broken grey blocks, so the light canvas stays clean. */
body.rv-dark {
    background-image:
        linear-gradient(rgba(255, 66, 0, 0.06), rgba(255, 66, 0, 0.06)),
        linear-gradient(rgba(255, 66, 0, 0.045), rgba(255, 66, 0, 0.045)),
        linear-gradient(rgba(255, 66, 0, 0.05), rgba(255, 66, 0, 0.05)),
        linear-gradient(rgba(255, 66, 0, 0.035), rgba(255, 66, 0, 0.035)),
        linear-gradient(rgba(255, 66, 0, 0.035), rgba(255, 66, 0, 0.035));
    background-size: 180px 180px, 90px 90px, 160px 160px, 90px 90px, 100px 100px;
    background-position:
        -30px -30px,
        128px 128px,
        calc(100% - 60px) calc(100% + 30px),
        calc(100% + 30px) calc(100% - 100px),
        calc(100% + 50px) 44%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

::selection {
    background: rgba(255, 66, 0, 0.18);
    color: var(--rv-ink);
}

/* ============================================================
   Focus — visible, consistent, keyboard-only.

   Scoped to things a user actually operates. Blazor parks focus on the
   page <h1 tabindex="-1"> after each navigation so screen readers
   announce it; a ring there is not a focus affordance, it's noise, so
   programmatic focus targets are excluded.
   ============================================================ */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-chip:focus-visible,
.mud-table-row-clickable:focus-visible {
    outline: none;
    box-shadow: var(--rv-focus-ring-flat) !important;
    border-radius: var(--rv-radius-xs);
}

/* Programmatic focus targets and scroll containers never show a ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus, h2:focus, h3:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible,
div:focus-visible, section:focus-visible, main:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* The text field owns its own focus treatment (border + soft glow), so
   the inner input must not draw a second ring on top of it. */
.mud-input input:focus-visible,
.mud-input textarea:focus-visible,
.mud-input-slot:focus-visible {
    box-shadow: none !important;
}

/* ============================================================
   Text colour roles

   `Color.Secondary` is used across the app for helper and supporting
   copy. The palette's Secondary is the brand navy, which made every
   caption read as blue link text. Supporting copy is muted ink, not an
   accent — the navy stays for surfaces (sidebar, hero).
   ============================================================ */
.mud-secondary-text,
.mud-typography.mud-secondary-text { color: var(--rv-ink-3) !important; }
.mud-secondary-text .mud-icon-root { color: var(--rv-ink-4) !important; }

/* The drawer is always dark, so the light-mode ink ramp would vanish on
   it. Anything muted inside the drawer uses the on-navy ramp instead. */
.mud-drawer .mud-secondary-text,
.mud-drawer .mud-typography.mud-secondary-text,
.mud-drawer .mud-typography-caption { color: #A9BCC7 !important; }
.mud-drawer .mud-secondary-text .mud-icon-root { color: #8FA5B2 !important; }

/* ============================================================
   Links
   ============================================================ */
a {
    color: var(--rv-primary-ink);
    text-decoration: none;
    transition: color var(--rv-dur) var(--rv-ease);
}
a:hover {
    color: var(--rv-primary-active);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.rv-dark a:hover { color: #FF9470; }

/* ============================================================
   App bar — quiet chrome. Content is the subject, not the frame.
   ============================================================ */
.mud-appbar {
    background: var(--rv-surface) !important;
    border-bottom: 1px solid var(--rv-border) !important;
    box-shadow: none !important;
    z-index: var(--rv-z-sticky) !important;
}
body.rv-dark .mud-appbar {
    background: var(--rv-navy) !important;
    border-bottom-color: rgba(220, 243, 249, 0.10) !important;
}
.mud-appbar .mud-toolbar { min-height: 64px; }

/* ── Brand lockup ─────────────────────────────────────────
   Mondria is the company; RendezVous is this product. The
   wordmark carries the company, the text carries the product,
   and a hairline keeps them distinct instead of blended. */
.rv-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: 6px;
    flex-shrink: 0;
    text-decoration: none !important;
    border-radius: var(--rv-radius-sm);
}
.rv-brand-logo {
    height: 32px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.rv-brand-sep {
    width: 1px;
    height: 20px;
    background: var(--rv-border-mid);
    flex-shrink: 0;
}
body.rv-dark .rv-brand-sep { background: rgba(220, 243, 249, 0.22); }
.rv-brand-product {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1;
    color: var(--rv-ink);
    white-space: nowrap;
}
body.rv-dark .rv-brand-product { color: #FFFFFF; }
.rv-brand-lockup:hover .rv-brand-product { color: var(--rv-ink); }

/* Below sm the product name alone is enough; the wordmark would
   crowd the menu button and the actions. */
@media (max-width: 599.95px) {
    .rv-brand-logo { height: 26px; }
    .rv-brand-lockup { gap: 9px; margin-left: 2px; }
    .rv-brand-product { font-size: 0.875rem; }
}
@media (max-width: 399px) {
    .rv-brand-sep, .rv-brand-product { display: none; }
}

/* ============================================================
   Drawer / sidebar — always navy. The brand anchor.
   ============================================================ */
.mud-drawer {
    background: var(--rv-navy) !important;
    color: #FFFFFF;
    border-right: 1px solid rgba(220, 243, 249, 0.08) !important;
    box-shadow: none !important;
    z-index: var(--rv-z-drawer) !important;
}
.mud-drawer-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
}

/* ── Navigation ─────────────────────────────────────────── */
.mud-nav-link {
    position: relative !important;
    border-radius: var(--rv-radius-md) !important;
    margin: 1px 0 !important;
    padding: 9px 12px !important;
    border-left: none !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #B3C6D1 !important;
    white-space: normal !important;
    transition: background var(--rv-dur-fast) var(--rv-ease), color var(--rv-dur-fast) var(--rv-ease) !important;
}
.mud-nav-link:hover:not(.active) {
    background: rgba(220, 243, 249, 0.07) !important;
    color: #FFFFFF !important;
}
.mud-nav-link.active {
    background: rgba(255, 66, 0, 0.15) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}
/* Selection rail. Full-height marker on the drawer edge — a state
   indicator, not a decorative stripe on a card. */
.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--rv-brand);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}
.mud-nav-link .mud-icon-root {
    font-size: 18px !important;
    color: #8FA5B2 !important;
    transition: color var(--rv-dur-fast) var(--rv-ease) !important;
}
.mud-nav-link:hover:not(.active) .mud-icon-root { color: #CFDDE5 !important; }
.mud-nav-link.active .mud-icon-root { color: var(--rv-brand) !important; }

/* Sidebar footer */
.sidebar-footer {
    margin: 0 4px 6px;
    padding: 12px 12px 4px;
    border-top: 1px solid rgba(220, 243, 249, 0.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar-footer-logo { display: flex; align-items: center; gap: 7px; }
.sidebar-footer-brand {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #8FA5B2;
    text-transform: uppercase;
}
.sidebar-footer-version { font-size: 0.625rem; color: #6E8492; margin-left: auto; }
.sidebar-footer-copy {
    font-size: 0.6875rem;
    color: #8FA5B2;   /* 4.5:1 on the navy drawer */
    padding-left: 21px;
}

/* ============================================================
   Surfaces — hairline borders carry the structure, not shadows
   ============================================================ */
.mud-paper {
    background-color: var(--rv-surface);
    background-image: none;
    color: var(--rv-ink);
}
.mud-paper-outlined,
.mud-paper.mud-elevation-2 {
    background: var(--rv-surface) !important;
    border: 1px solid var(--rv-border) !important;
    border-radius: var(--rv-radius-lg) !important;
    box-shadow: none !important;
    transition: border-color var(--rv-dur) var(--rv-ease), box-shadow var(--rv-dur) var(--rv-ease) !important;
}
body:not(.rv-dark) .mud-paper-outlined {
    box-shadow: var(--rv-shadow-xs) !important;
}
.mud-paper-outlined:hover { border-color: var(--rv-border-mid) !important; }

/* Floating surfaces are the only things that get real elevation.
   :not(.mud-tooltip) is load-bearing. MudTooltip shares this very node
   — the bubble carries both .mud-popover and .mud-tooltip — and it is
   the one member of the family MudBlazor paints light-on-dark. Giving
   it the surface colour here put white text on a white pill. */
.mud-popover:not(.mud-tooltip), .mud-menu-popover, .mud-list.mud-menu-list, .mud-picker-popover {
    border: 1px solid var(--rv-border) !important;
    border-radius: var(--rv-radius-md) !important;
    box-shadow: var(--rv-shadow-lg) !important;
    background: var(--rv-surface) !important;
    z-index: var(--rv-z-dropdown);
}

/* Tooltips are inverse surfaces, not paper. They sit above the drawer
   and the app bar, so they claim the top of the z scale. */
.mud-tooltip.mud-tooltip-default {
    background-color: var(--rv-tooltip-bg);
    color: var(--rv-tooltip-ink);
    border: none;
    border-radius: var(--rv-radius-sm);
    box-shadow: var(--rv-shadow-md);
    max-width: 22rem;
    z-index: var(--rv-z-tooltip);
}
.mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
    border-color: var(--rv-tooltip-bg) transparent transparent transparent;
}
.mud-dialog {
    border: 1px solid var(--rv-border) !important;
    border-radius: var(--rv-radius-xl) !important;
    box-shadow: var(--rv-shadow-lg) !important;
    background: var(--rv-surface) !important;
}
.mud-dialog-title {
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--rv-ink);
    padding-bottom: 8px !important;
}
.mud-overlay-dark { background: rgba(4, 16, 24, 0.55) !important; }

/* ============================================================
   Page header
   ============================================================ */
.mia-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.mia-page-title {
    margin: 0 0 3px;
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.021em;
    color: var(--rv-ink);
    line-height: 1.22;
    text-wrap: balance;
}
.mia-page-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rv-ink-3);
    max-width: 68ch;
}
.mia-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Section label — used sparingly, above grouped regions only. */
.rv-section-label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--rv-ink);
    margin-bottom: 10px;
}

/* ============================================================
   Hero — the one Committed surface. Navy gradient, Mondria's own.
   ============================================================ */
.mia-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--rv-navy) 0%, #0B3247 62%, #14506C 100%);
    border-radius: var(--rv-radius-xl);
    padding: 26px 28px;
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid transparent;
}
/* On the dark canvas the navy gradient is nearly the same value as the
   page, so the hero needs its own edge and a brighter ramp to still read
   as a raised surface. */
body.rv-dark .mia-hero {
    background: linear-gradient(135deg, #0A3348 0%, #14506C 60%, #1C6588 100%);
    border-color: rgba(220, 243, 249, 0.14);
    box-shadow: var(--rv-shadow-md);
}
/* One quiet brand mark instead of three rotated squares. */
.mia-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 200px at 88% -30%, rgba(255, 66, 0, 0.28), transparent 70%);
    pointer-events: none;
}
.mia-hero > * { position: relative; z-index: 1; }
.mia-hero-title {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: #FFFFFF;
    line-height: 1.2;
    text-wrap: balance;
}
.mia-hero-sub {
    margin: 0;
    font-size: 0.875rem;
    /* Clears 4.5:1 against the lightest stop of both hero gradients. */
    color: #D3E3EC;
    max-width: 62ch;
}

/* Status pills inside the hero */
.rv-hero-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: var(--rv-radius-full);
    padding: 5px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #EAF2F7;
}
.rv-hero-pill .mud-icon-root { font-size: 14px !important; }
.rv-hero-pill-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ADE9E;
    flex-shrink: 0;
}
.rv-hero-pill--warn .rv-hero-pill-dot { background: #FBBF4A; }

/* ============================================================
   Metric strip — one bordered row, hairline-divided.
   Replaces four identical floating cards.
   ============================================================ */
.rv-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}
body:not(.rv-dark) .rv-metrics { box-shadow: var(--rv-shadow-xs); }

.rv-metric {
    padding: 16px 18px;
    border-right: 1px solid var(--rv-border);
    min-width: 0;
}
.rv-metric:last-child { border-right: none; }

.rv-metric-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rv-ink-3);
    margin-bottom: 8px;
}
.rv-metric-label .mud-icon-root {
    font-size: 15px !important;
    color: var(--rv-ink-4) !important;
}
.rv-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--rv-ink);
    font-variant-numeric: tabular-nums;
}
.rv-metric-value--sm { font-size: 1.25rem; letter-spacing: -0.02em; }
.rv-metric-value .rv-unit {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--rv-ink-3);
    letter-spacing: 0;
}
.rv-metric-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 0.75rem;
    color: var(--rv-ink-4);
}
.rv-metric-foot .mud-icon-root { font-size: 13px !important; }
.rv-metric-foot--success { color: var(--rv-success); }
.rv-metric-foot--warning { color: var(--rv-warning); }

@media (max-width: 599px) {
    .rv-metrics { grid-template-columns: 1fr; }
    .rv-metric { border-right: none; border-bottom: 1px solid var(--rv-border); }
    .rv-metric:last-child { border-bottom: none; }
}


/* ============================================================
   Entity card — header / definition rows / footer actions.
   No accent stripes, no tinted icon tiles: the label-value pairs
   carry the information and the eye scans one column.
   ============================================================ */
.rv-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius-lg);
    overflow: hidden;
    transition: border-color var(--rv-dur) var(--rv-ease), box-shadow var(--rv-dur) var(--rv-ease);
}
body:not(.rv-dark) .rv-card { box-shadow: var(--rv-shadow-xs); }
.rv-card:hover { border-color: var(--rv-border-mid); }
.rv-card--muted { background: var(--rv-canvas); }

.rv-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
}
.rv-card-ident { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rv-mono-tile {
    width: 36px; height: 36px;
    border-radius: var(--rv-radius-md);
    background: var(--rv-surface-2);
    border: 1px solid var(--rv-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9375rem; font-weight: 700;
    color: var(--rv-ink-2);
    flex-shrink: 0;
}
.rv-mono-tile--brand {
    background: var(--rv-primary-soft);
    border-color: rgba(255, 66, 0, 0.20);
    color: var(--rv-primary-ink);
}
.rv-mono-tile .mud-icon-root { font-size: 19px !important; color: inherit !important; }
.rv-card-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--rv-ink);
    letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-card-sub {
    font-size: 0.75rem;
    color: var(--rv-ink-3);
    margin-top: 1px;
}

/* Definition rows */
.rv-defs {
    border-top: 1px solid var(--rv-border);
    padding: 4px 18px;
    flex: 1;
}
.rv-def {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--rv-border);
}
.rv-def:last-child { border-bottom: none; }
.rv-def-key { color: var(--rv-ink-3); flex-shrink: 0; }
.rv-def-val {
    color: var(--rv-ink);
    font-weight: 500;
    text-align: right;
    min-width: 0;
}
.rv-def-val small {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--rv-ink-4);
    margin-top: 1px;
}
.rv-def-val--muted { color: var(--rv-ink-3); font-weight: 400; }

.rv-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--rv-border);
    background: var(--rv-surface-2);
}
body.rv-dark .rv-card-foot { background: rgba(220, 243, 249, 0.03); }

/* Section bar inside a settings card — icon + title, one line.
   Icons stay neutral: a different hue per section is confetti, not
   information. */
.rv-card-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--rv-border);
    background: var(--rv-surface-2);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rv-ink);
}
body.rv-dark .rv-card-bar { background: rgba(220, 243, 249, 0.03); }
.rv-card-bar .mud-icon-root {
    font-size: 17px !important;
    color: var(--rv-ink-4) !important;
    flex-shrink: 0;
}
.rv-card-bar > span {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
}
.rv-card-bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Section header inside a settings card */
.rv-card-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--rv-border);
    background: var(--rv-surface-2);
}
body.rv-dark .rv-card-section { background: rgba(220, 243, 249, 0.03); }
.rv-card-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--rv-ink);
    text-transform: none;
}
.rv-card-section-title .mud-icon-root {
    font-size: 17px !important;
    color: var(--rv-ink-4) !important;
}

/* ============================================================
   Status badges — one vocabulary, everywhere
   ============================================================ */
.rv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--rv-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.55;
    white-space: nowrap;
    border: 1px solid transparent;
}
.rv-badge .mud-icon-root { font-size: 13px !important; }
.rv-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.rv-badge--success { background: var(--rv-success-soft); color: var(--rv-success); border-color: var(--rv-success-border); }
.rv-badge--warning { background: var(--rv-warning-soft); color: var(--rv-warning); border-color: var(--rv-warning-border); }
.rv-badge--error   { background: var(--rv-error-soft);   color: var(--rv-error);   border-color: var(--rv-error-border); }
.rv-badge--info    { background: var(--rv-info-soft);    color: var(--rv-info);    border-color: var(--rv-info-border); }
.rv-badge--neutral { background: var(--rv-neutral-soft); color: var(--rv-ink-2);   border-color: var(--rv-border); }
.rv-badge--brand   { background: var(--rv-primary-soft); color: var(--rv-primary-ink); border-color: rgba(255, 66, 0, 0.22); }

/* Clickable template token — literal syntax, so it looks literal */
.mud-chip.rv-token-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    background: var(--rv-surface-2) !important;
    color: var(--rv-ink-2) !important;
    border: 1px solid var(--rv-border-mid) !important;
    cursor: pointer;
}
.mud-chip.rv-token-chip:hover {
    background: var(--rv-primary-soft) !important;
    color: var(--rv-primary-ink) !important;
    border-color: rgba(255, 66, 0, 0.28) !important;
}

/* Monospace value chip — codes, tokens, template diffs */
.rv-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    background: var(--rv-surface-2);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius-xs);
    padding: 1px 6px;
    color: var(--rv-ink-2);
}

/* ============================================================
   Buttons — one shape, one vocabulary
   ============================================================ */
.mud-button-root {
    border-radius: var(--rv-radius-md) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
    transition: background-color var(--rv-dur-fast) var(--rv-ease),
                border-color var(--rv-dur-fast) var(--rv-ease),
                color var(--rv-dur-fast) var(--rv-ease) !important;
}
.mud-button-filled {
    box-shadow: none !important;
}
.mud-button-filled.mud-button-color-primary {
    background-color: var(--rv-primary) !important;
    color: #FFFFFF !important;
}
.mud-button-filled.mud-button-color-primary:hover {
    background-color: var(--rv-primary-hover) !important;
    box-shadow: none !important;
    transform: none !important;
}
.mud-button-filled.mud-button-color-primary:active {
    background-color: var(--rv-primary-active) !important;
}
.mud-button-outlined {
    border-color: var(--rv-border-mid) !important;
    color: var(--rv-ink) !important;
    background-color: var(--rv-surface) !important;
}
.mud-button-outlined:hover {
    background-color: var(--rv-hover) !important;
    border-color: var(--rv-border-strong) !important;
}
.mud-button-outlined.mud-button-color-error { color: var(--rv-error) !important; border-color: var(--rv-error-border) !important; }
.mud-button-outlined.mud-button-color-error:hover { background-color: var(--rv-error-soft) !important; }
.mud-button-text { color: var(--rv-ink-2) !important; }
.mud-button-text:hover { background-color: var(--rv-hover) !important; color: var(--rv-ink) !important; }
/* Disabled *labelled* buttons keep a filled, obviously-inert surface.
   Icon buttons are excluded: giving them a box makes disabled pager
   arrows louder than the enabled controls around them. */
.mud-button.mud-button-root:disabled,
.mud-button.mud-button-root.mud-disabled {
    opacity: 1 !important;
    background-color: var(--rv-surface-2) !important;
    border-color: var(--rv-border) !important;
    color: var(--rv-ink-disabled) !important;
    box-shadow: none !important;
}
.mud-icon-button:disabled:not(.mud-button-outlined),
.mud-icon-button.mud-disabled:not(.mud-button-outlined) {
    background-color: transparent !important;
    border: none !important;
    color: var(--rv-ink-disabled) !important;
    box-shadow: none !important;
}

/* Initials avatar — identity, not emphasis */
.mud-avatar.rv-avatar {
    background-color: var(--rv-primary-soft) !important;
    color: var(--rv-primary-ink) !important;
    border: 1px solid rgba(255, 66, 0, 0.20);
}
.mud-icon-button {
    border-radius: var(--rv-radius-md) !important;
    transition: background-color var(--rv-dur-fast) var(--rv-ease),
                border-color var(--rv-dur-fast) var(--rv-ease) !important;
}
.mud-icon-button:hover { background-color: var(--rv-hover) !important; }

/* Inline actions inside a dense row or panel header have to stay
   visually small or they break the row's rhythm — but a 24px target is
   the bare WCAG 2.5.8 minimum, not a comfortable one on touch. The
   pseudo-element claims 40px of hit area without occupying any layout,
   so the button looks unchanged and lands every time. */
.rv-inline-action { position: relative; }
.rv-inline-action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

/* An outlined icon button needs a boundary, or it reads as bare chrome
   and the disabled state ends up looking more solid than the enabled one. */
.mud-icon-button.mud-button-outlined {
    border: 1px solid var(--rv-border-mid) !important;
    background-color: var(--rv-surface) !important;
    color: var(--rv-ink-2) !important;
}
.mud-icon-button.mud-button-outlined:hover {
    border-color: var(--rv-border-strong) !important;
    background-color: var(--rv-hover) !important;
}
.mud-icon-button.mud-button-outlined.mud-button-color-error {
    color: var(--rv-error) !important;
    border-color: var(--rv-error-border) !important;
}
.mud-icon-button.mud-button-outlined.mud-button-color-error:hover {
    background-color: var(--rv-error-soft) !important;
}
.mud-icon-button.mud-button-outlined:disabled,
.mud-icon-button.mud-button-outlined.mud-disabled {
    border-color: var(--rv-border) !important;
    background-color: var(--rv-surface) !important;
    color: var(--rv-ink-disabled) !important;
}

/* ============================================================
   Segmented control — Mois / Semaine / Jour

   A view switch is not a primary action. The selected segment is
   indicated by a filled neutral surface, not by the brand colour.
   ============================================================ */
.mud-button-group-root {
    border: 1px solid var(--rv-border-mid);
    border-radius: var(--rv-radius-md);
    overflow: hidden;
    box-shadow: none !important;
    background: var(--rv-surface);
    padding: 2px;
    gap: 2px;
    display: inline-flex;
}
.mud-button-group-root > .mud-button-root {
    border: none !important;
    border-radius: var(--rv-radius-sm) !important;
    box-shadow: none !important;
    min-width: 0;
    padding: 5px 14px !important;
    background-color: transparent !important;
    color: var(--rv-ink-3) !important;
    font-weight: 500 !important;
}
.mud-button-group-root > .mud-button-root:hover {
    background-color: var(--rv-hover) !important;
    color: var(--rv-ink) !important;
}
/* The filled variant marks the active segment. */
.mud-button-group-root > .mud-button-filled {
    background-color: var(--rv-surface-3) !important;
    color: var(--rv-ink) !important;
    font-weight: 600 !important;
}
body.rv-dark .mud-button-group-root > .mud-button-filled { color: #FFFFFF !important; }

/* ============================================================
   Calendar toolbar — navigation chrome stays quiet
   ============================================================ */
.mud-cal-toolbar .mud-button-filled,
.mud-cal-toolbar .mud-button-filled-primary,
.mud-cal-toolbar .mud-picker-input-button .mud-button-filled {
    background-color: var(--rv-surface) !important;
    color: var(--rv-ink) !important;
    border: 1px solid var(--rv-border-mid) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
.mud-cal-toolbar .mud-button-filled:hover,
.mud-cal-toolbar .mud-picker-input-button .mud-button-filled:hover {
    background-color: var(--rv-hover) !important;
    border-color: var(--rv-border-strong) !important;
}
.mud-cal-toolbar .mud-icon-button.mud-button-filled { color: var(--rv-ink-2) !important; }
.mud-cal-toolbar-nav { gap: 6px; }
/* Restore the segmented control's own treatment inside the toolbar. */
.mud-cal-toolbar .mud-button-group-root > .mud-button-filled {
    background-color: var(--rv-surface-3) !important;
    border: none !important;
    font-weight: 600 !important;
}

/* ============================================================
   Chips
   ============================================================ */
.mud-chip {
    border-radius: var(--rv-radius-full) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    height: auto !important;
    min-height: 24px;
    transition: background-color var(--rv-dur-fast) var(--rv-ease), border-color var(--rv-dur-fast) var(--rv-ease);
}
.mud-chip.mud-chip-filled.mud-chip-color-primary,
.mud-chip.mud-chip-color-primary {
    background: var(--rv-primary-soft) !important;
    color: var(--rv-primary-ink) !important;
    border: 1px solid rgba(255, 66, 0, 0.22) !important;
}
.mud-chip.mud-chip-color-success { background: var(--rv-success-soft) !important; color: var(--rv-success) !important; border: 1px solid var(--rv-success-border) !important; }
.mud-chip.mud-chip-color-warning { background: var(--rv-warning-soft) !important; color: var(--rv-warning) !important; border: 1px solid var(--rv-warning-border) !important; }
.mud-chip.mud-chip-color-error   { background: var(--rv-error-soft) !important;   color: var(--rv-error) !important;   border: 1px solid var(--rv-error-border) !important; }
.mud-chip.mud-chip-color-info    { background: var(--rv-info-soft) !important;    color: var(--rv-info) !important;    border: 1px solid var(--rv-info-border) !important; }
.mud-chip.mud-chip-color-default,
.mud-chip.mud-chip-color-secondary { background: var(--rv-neutral-soft) !important; color: var(--rv-ink-2) !important; border: 1px solid var(--rv-border) !important; }
/* A disabled chip still has to be readable — it carries information. */
.mud-chip.mud-disabled, .mud-chip:disabled {
    opacity: 1 !important;
    background: var(--rv-surface-2) !important;
    color: var(--rv-ink-3) !important;
    border: 1px solid var(--rv-border) !important;
}

/* Links inside dense data (tables, lists) stay neutral until hovered —
   a column of orange addresses is noise, not hierarchy. */
.mud-table-root .mud-link,
.mud-table-root a {
    color: var(--rv-ink-2) !important;
    text-decoration: none;
}
.mud-table-root .mud-link:hover,
.mud-table-root a:hover {
    color: var(--rv-primary-ink) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   Alerts — tinted surface, no side stripe
   ============================================================ */
.mud-alert {
    border-radius: var(--rv-radius-md) !important;
    box-shadow: none !important;
    border: 1px solid transparent;
    font-size: 0.8125rem;
}
.mud-alert-outlined-info, .mud-alert-filled-info, .mud-alert-text-info {
    background: var(--rv-info-soft) !important;
    border-color: var(--rv-info-border) !important;
    color: var(--rv-ink-2) !important;
}
.mud-alert-outlined-success, .mud-alert-filled-success, .mud-alert-text-success {
    background: var(--rv-success-soft) !important;
    border-color: var(--rv-success-border) !important;
    color: var(--rv-ink-2) !important;
}
.mud-alert-outlined-warning, .mud-alert-filled-warning, .mud-alert-text-warning {
    background: var(--rv-warning-soft) !important;
    border-color: var(--rv-warning-border) !important;
    color: var(--rv-ink-2) !important;
}
.mud-alert-outlined-error, .mud-alert-filled-error, .mud-alert-text-error {
    background: var(--rv-error-soft) !important;
    border-color: var(--rv-error-border) !important;
    color: var(--rv-ink-2) !important;
}
.mud-alert .mud-alert-icon { align-items: flex-start; padding-top: 2px; }
.mud-alert-outlined-info .mud-alert-icon .mud-icon-root { color: var(--rv-info) !important; }
.mud-alert-outlined-success .mud-alert-icon .mud-icon-root { color: var(--rv-success) !important; }
.mud-alert-outlined-warning .mud-alert-icon .mud-icon-root { color: var(--rv-warning) !important; }
.mud-alert-outlined-error .mud-alert-icon .mud-icon-root { color: var(--rv-error) !important; }

/* ============================================================
   Forms — one control vocabulary: outlined, 8px, hairline
   ============================================================ */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--rv-radius-md) !important;
    border-color: var(--rv-border-mid) !important;
    transition: border-color var(--rv-dur-fast) var(--rv-ease), box-shadow var(--rv-dur-fast) var(--rv-ease);
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--rv-border-strong) !important;
}
.mud-input-control.mud-input-required .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 1px !important;
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--rv-primary) !important;
    box-shadow: 0 0 0 3px var(--rv-primary-soft) !important;
}
.mud-input-root, .mud-input-slot, .mud-input input, .mud-input textarea {
    color: var(--rv-ink) !important;
    font-size: 0.875rem !important;
}
.mud-input input::placeholder,
.mud-input textarea::placeholder {
    color: var(--rv-ink-3) !important;
    opacity: 1 !important;
}
.mud-input-label, .mud-input-label-inputcontrol {
    color: var(--rv-ink-3) !important;
    font-size: 0.8125rem !important;
}
.mud-input-control.mud-focused .mud-input-label { color: var(--rv-primary-ink) !important; }
.mud-input-helper-text {
    color: var(--rv-ink-3) !important;
    font-size: 0.75rem !important;
    margin-top: 5px !important;
}
.mud-input-helper-text.mud-input-error { color: var(--rv-error) !important; }
.mud-input-error .mud-input-outlined-border { border-color: var(--rv-error) !important; }

/* Underline inputs are retired — normalise any that remain so the
   form vocabulary stays uniform. */
.mud-input.mud-input-underline::before,
.mud-input.mud-input-underline::after { display: none !important; }
.mud-input.mud-input-underline {
    background: var(--rv-input-bg);
    border: 1px solid var(--rv-border-mid);
    border-radius: var(--rv-radius-md);
    padding-left: 12px !important;
    padding-right: 12px !important;
    transition: border-color var(--rv-dur-fast) var(--rv-ease), box-shadow var(--rv-dur-fast) var(--rv-ease);
}
.mud-input.mud-input-underline:hover { border-color: var(--rv-border-strong); }
.mud-input.mud-input-underline.mud-focused {
    border-color: var(--rv-primary);
    box-shadow: 0 0 0 3px var(--rv-primary-soft);
}

/* Switches — MudBlazor owns the on-state colour; we only make the
   off-state track legible and give the thumb a real edge. */
.mud-switch .mud-switch-track { opacity: 1; }
.mud-switch .mud-switch-base:not(.mud-checked) + .mud-switch-track {
    background-color: var(--rv-border-strong);
    opacity: 1;
}
.mud-switch-thumb { box-shadow: var(--rv-shadow-sm); }

/* Checkboxes / radios — no brand colour on inactive states */
.mud-checkbox .mud-button-root:not(.mud-checked):not(.mud-indeterminate) .mud-icon-root,
.mud-radio .mud-button-root:not(.mud-checked) .mud-icon-root {
    color: var(--rv-border-strong) !important;
}

/* ============================================================
   Tables & data grid
   ============================================================ */
.mud-table, .mud-table-container { background: transparent !important; }
.mud-table.mud-table-outlined {
    border: 1px solid var(--rv-border) !important;
    border-radius: var(--rv-radius-lg) !important;
    overflow: hidden;
}
.mud-table-root { border-collapse: separate; border-spacing: 0; }
.mud-table-root .mud-table-head th {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--rv-ink-3) !important;
    background: var(--rv-surface-2) !important;
    border-bottom: 1px solid var(--rv-border) !important;
    padding: 10px 16px !important;
    white-space: nowrap;
}
.mud-table-row td {
    border-bottom: 1px solid var(--rv-border) !important;
    padding: 11px 16px !important;
    font-size: 0.8125rem !important;
    color: var(--rv-ink-2);
}
.mud-table-body .mud-table-row:last-child td { border-bottom: none !important; }
.mud-table-row:hover td { background: var(--rv-hover) !important; }
.mud-table-row.mud-table-row-clickable { cursor: pointer; }
.mud-table-toolbar,
.mud-table.mud-data-grid .mud-toolbar,
.mud-table.mud-data-grid .mud-toolbar-gutters,
.mud-table.mud-data-grid .mud-table-toolbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--rv-border);
}
.mud-table-pagination,
.mud-table.mud-data-grid .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 10px 16px !important;
    border-top: 1px solid var(--rv-border);
    color: var(--rv-ink-3);
    font-size: 0.8125rem;
}
.mud-table-container { background-color: transparent !important; }
.mud-table-cell-header-sortable:hover { color: var(--rv-ink) !important; }

/* ── Stacked table (below sm) ─────────────────────────────
   MudBlazor turns each row into label/value pairs and prints the
   header text via ::before. Cells that carry a control instead of a
   value (row checkbox, row menu) have no data-label, so they rendered
   as full-height rows with an empty label. Collapse them into one
   compact action line at the end of the record. */
@media (max-width: 599.95px) {
    /* The row becomes a record card: label/value pairs stacked, then the
       control cells collected onto one right-aligned action line. */
    .mud-table-body .mud-table-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 2px solid var(--rv-border);
        padding-bottom: 6px;
    }
    .mud-table-body td[data-label] {
        flex: 1 0 100%;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
    }
    .mud-table-body td[data-label]::before {
        color: var(--rv-ink-3);
        font-weight: 500;
        flex-shrink: 0;
    }
    /* Control cells (row checkbox, row menu) carry no label. */
    .mud-table-body td:not([data-label]) {
        order: 99;
        flex: 0 0 auto;
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        border-bottom: none !important;
        padding: 4px 2px !important;
    }
    .mud-table-body td:not([data-label]):first-of-type { margin-left: auto; }
    .mud-table-body td:not([data-label])::before { display: none !important; }
    /* Empty value cells still deserve a placeholder so the pair reads. */
    .mud-table-body td[data-label]:empty::after {
        content: "—";
        color: var(--rv-ink-disabled);
    }
}

/* ============================================================
   Tabs
   ============================================================ */
.mud-tabs-toolbar { border-bottom: 1px solid var(--rv-border) !important; }
.mud-tab {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--rv-ink-3) !important;
    min-height: 42px !important;
}
.mud-tab.mud-tab-active { color: var(--rv-ink) !important; font-weight: 600 !important; }
.mud-tab-slider { background: var(--rv-brand) !important; height: 2px !important; }

/* ============================================================
   Breadcrumbs
   ============================================================ */
.mud-breadcrumbs {
    padding: 0 !important;
    margin-bottom: 14px;
    font-size: 0.8125rem;
}
.mud-breadcrumb-item a { color: var(--rv-ink-3) !important; }
.mud-breadcrumb-item a:hover { color: var(--rv-ink) !important; text-decoration: none; }
.mud-breadcrumb-item.mud-disabled p,
.mud-breadcrumb-item:last-child { color: var(--rv-ink) !important; font-weight: 500; }
.mud-breadcrumb-separator { color: var(--rv-ink-disabled) !important; }

/* ============================================================
   Empty states — teach the interface, don't just say "nothing"
   ============================================================ */
.rv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 3rem 2rem;
    text-align: center;
}
.rv-empty-icon {
    width: 44px; height: 44px;
    border-radius: var(--rv-radius-md);
    background: var(--rv-surface-2);
    border: 1px solid var(--rv-border);
    display: flex; align-items: center; justify-content: center;
}
.rv-empty-icon .mud-icon-root { font-size: 21px !important; color: var(--rv-ink-4) !important; }
.rv-empty-title { font-weight: 600; font-size: 0.9375rem; color: var(--rv-ink); }
.rv-empty-body { font-size: 0.8125rem; color: var(--rv-ink-3); max-width: 46ch; margin-top: 3px; }

/* ============================================================
   Loading — skeletons, not spinners inside content
   ============================================================ */
.mia-skeleton {
    min-height: 96px;
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius-lg);
    position: relative;
    overflow: hidden;
}
.mia-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--rv-hover) 45%, transparent 90%);
    background-size: 200% 100%;
    animation: rv-shimmer 1.4s var(--rv-ease) infinite;
}
@keyframes rv-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -150% 0; }
}
.mud-progress-linear { border-radius: var(--rv-radius-full); overflow: hidden; }

/* ============================================================
   Page entrance — one short fade. State, not choreography.
   ============================================================ */
.page-enter { animation: rv-page-enter var(--rv-dur-slow) var(--rv-ease) both; }
@keyframes rv-page-enter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   Calendar
   ============================================================ */
.rv-cal-layout { display: flex; gap: 16px; align-items: flex-start; }
.rv-cal-main { flex: 1; min-width: 0; }

.mud-cal-toolbar, .mud-calendar-toolbar { border-bottom: 1px solid var(--rv-border); }
.mud-cal-cell, .mud-cal-week-layout .mud-cal-cell { border-color: var(--rv-border) !important; }
.mud-cal-header-cell, .mud-cal-month-cell-title {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--rv-ink-2) !important;
}

/* Event cells. Tinted surface + a left keyline that belongs to the
   time axis, kept to 2px so it reads as a time marker, not a stripe. */
.rv-cal-event {
    cursor: pointer;
    height: 100%;
    overflow: hidden;
    transition: background-color var(--rv-dur-fast) var(--rv-ease);
}
.rv-cal-event--week,
.rv-cal-event--day {
    background: rgba(255, 66, 0, 0.10);
    border-left: 2px solid var(--rv-brand);
    border-radius: 0 var(--rv-radius-xs) var(--rv-radius-xs) 0;
    padding: 3px 7px;
}
.rv-cal-event--week:hover,
.rv-cal-event--day:hover { background: rgba(255, 66, 0, 0.17); }
.rv-cal-event--online.rv-cal-event--week,
.rv-cal-event--online.rv-cal-event--day {
    background: rgba(31, 111, 208, 0.10);
    border-left-color: var(--rv-info);
}
.rv-cal-event--online.rv-cal-event--week:hover,
.rv-cal-event--online.rv-cal-event--day:hover { background: rgba(31, 111, 208, 0.17); }
.rv-cal-event--month {
    background: rgba(255, 66, 0, 0.10);
    border-left: 2px solid var(--rv-brand);
    border-radius: 0 var(--rv-radius-xs) var(--rv-radius-xs) 0;
    padding: 1px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}
.rv-cal-event--online.rv-cal-event--month {
    background: rgba(31, 111, 208, 0.10);
    border-left-color: var(--rv-info);
}
.rv-cal-event-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rv-ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rv-cal-event-loc {
    font-size: 0.6875rem;
    color: var(--rv-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

/* Event detail panel */
.rv-event-panel {
    width: 280px;
    min-width: 280px;
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius-lg);
    padding: 18px;
    position: sticky;
    top: 84px;
    box-shadow: var(--rv-shadow-sm);
    overflow: hidden;
    animation: rv-panel-in var(--rv-dur) var(--rv-ease) both;
}
@keyframes rv-panel-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: none; }
}
.rv-panel-subject {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rv-ink);
    line-height: 1.35;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.rv-panel-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--rv-ink-3);
    margin-bottom: 8px;
    line-height: 1.45;
}
.rv-panel-row .mud-icon-root { color: var(--rv-ink-4) !important; }
.rv-panel-body {
    font-size: 0.8125rem;
    color: var(--rv-ink-3);
    line-height: 1.55;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rv-border);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 959px) {
    .rv-cal-layout { flex-direction: column; }
    .rv-event-panel { width: 100%; min-width: 0; position: static; }
}

/* ============================================================
   Snackbar
   ============================================================ */
.mud-snackbar {
    border-radius: var(--rv-radius-md) !important;
    box-shadow: var(--rv-shadow-lg) !important;
    font-size: 0.875rem;
    z-index: var(--rv-z-toast);
}

/* ============================================================
   Layout
   ============================================================ */
.mud-main-content {
    min-height: 100vh;
    background: transparent;
}
/* The content does not animate its own reflow. Animating padding here
   relayouts and repaints the entire main column for the whole duration;
   the drawer already slides under its own transform, so the gesture
   stays legible while the content simply lands. */
.mud-drawer + .mud-main-content { transition: none; }

/* ============================================================
   Scrollbars — standard-sized and neutral
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--rv-border-strong);
    border-radius: var(--rv-radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--rv-ink-disabled); background-clip: content-box; }
* { scrollbar-color: var(--rv-border-strong) transparent; scrollbar-width: thin; }

/* ============================================================
   Blazor infrastructure
   ============================================================ */
#blazor-error-ui {
    background: var(--rv-warning-soft);
    color: var(--rv-ink);
    border-top: 1px solid var(--rv-warning-border);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    font-size: 0.875rem;
    z-index: var(--rv-z-toast);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.6rem; }
.blazor-error-boundary::after { content: "Une erreur s'est produite."; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--rv-success); }
.invalid { outline: 1px solid var(--rv-error); }
.validation-message { color: var(--rv-error); font-size: 0.75rem; }

/* ============================================================
   SMS preview — deliberately theme-independent
   ------------------------------------------------------------
   This box stands in for a phone's message bubble, so it holds its
   own light appearance in both themes rather than following the
   canvas. The values are fixed on purpose; that is why they are
   named here instead of being wired to the theme tokens.
   ============================================================ */
.rv-sms-preview {
    background-color: #F5F5F5 !important;
    border: 1px solid #DDDDDD !important;
    border-radius: var(--rv-radius-md) !important;
    box-shadow: none !important;
}
.rv-sms-preview .rv-sms-preview-body {
    white-space: pre-wrap;
    color: #1A1A1A;
}

/* ============================================================
   Reduced motion — movement goes, feedback stays
   ------------------------------------------------------------
   Reduce, don't remove. A blanket `transition-duration: 0.01ms`
   takes hover, focus, disabled and selection feedback down along
   with the motion, which costs the people who set this preference
   more than the motion ever did.

   So: restrict what may animate instead of how long it may take.
   Properties that carry state still ease; transform, width and
   padding are simply absent from the list, so they settle
   instantly without being forced to `none` — which matters,
   because MudBlazor positions tooltips and their arrows with
   transform and would break if we nulled it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        transition-property: color, background-color, border-color,
                             box-shadow, opacity, fill, stroke !important;
        transition-duration: var(--rv-dur-fast) !important;
    }

    /* The authored entrances and the shimmer are the actual motion
       in this app, and they go. Note what is NOT killed here: the
       twelve indeterminate spinners. Their movement is the only
       signal that work is in flight, and a frozen one reads as a
       hung app. */
    .page-enter, .rv-event-panel { animation: none; opacity: 1; transform: none; }
    .mia-skeleton::after { animation: none; }
}