/* DDEL Portfolio Solution design system — the only stylesheet this app owns.
   Assembled from design-system/tokens/*.css (vendored from "…update 2.zip") in the
   import order of design-system/styles.css. Do not diverge these values by hand: change
   them upstream, re-extract, and re-assemble. Only the @font-face src paths differ, since
   the fonts are served from wwwroot/fonts rather than the kit’s assets folder. */

/* DDEL Portfolio Solution — Webfonts
   Clear Sans (Intel, Apache 2.0), self-hosted from assets/fonts/.
   Only Regular (400) and Bold (700) binaries were supplied, so 500 maps to
   Regular and 600 maps to Bold (headings read crisp, never synthesised-thin).
   Work Sans remains the websafe fallback in the font stack. */

@font-face {
    font-family: "Clear Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ClearSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Clear Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ClearSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Clear Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ClearSans-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Clear Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/ClearSans-Bold.ttf") format("truetype");
}

/* DDEL Portfolio Solution — Color tokens
   Brand palette is calm, precise, restrained. Navy is the workhorse for text and
   dark surfaces; green is reserved for fills, CTAs and active states; green-dark
   is used for links and small green text (bright green fails contrast under 24px).
   Cyan is a JOYFUL ACCENT — use sparingly for decorative step/number markers and
   light active touches, never as the primary CTA or for body text.
   RETIRED — never use: teal #1EC8A5, old deep green #00A046. */

:root {
    /* ---- Brand base palette ---- */
    --ddel-navy: #19223D; /* primary text, dark sections, headers, CTA label */
    --ddel-green: #26A736; /* CTA fills, active states, accents, icons (FILLS only) */
    --ddel-green-dark: #1F7A4D; /* links & small green text (<24px) */
    --ddel-anthracite: #004965; /* secondary dark, info, data accent */
    --ddel-cyan: #00ACE6; /* JOYFUL ACCENT — decorative markers/steps, light active states (FILLS w/ white text). Not a CTA, not body text. */
    --ddel-cyan-text: #0A7FB0; /* accessible cyan for small text/icons on light */
    --ddel-cyan-surface: #E1F4FC; /* tint background for cyan accents */
    --ddel-ice: #E6ECF2; /* light surfaces */
    --ddel-ice-border: #DBE5EE; /* borders / hairlines */
    --ddel-orange: #FF8019; /* sparing highlight (fill) */
    --ddel-orange-text: #B85600; /* accessible orange text */
    --ddel-red: #D83842; /* loss / error (fill) */
    --ddel-red-text: #C42E37; /* accessible red text */
    --ddel-white: #FFFFFF;
    /* ---- Neutral ramp (navy-tinted greys for borders, muted text, fills) ---- */
    --ddel-grey-900: #19223D;
    --ddel-grey-700: #3A445C;
    --ddel-grey-500: #5B6B7B; /* muted body / secondary text (also chart slot 8) */
    --ddel-grey-400: #8A97A6; /* placeholder, disabled text */
    --ddel-grey-200: #DBE5EE;
    --ddel-grey-100: #E6ECF2;
    --ddel-grey-050: #F4F7FA; /* app canvas / zebra rows */
    /* ---- Semantic: surfaces ---- */
    --surface-canvas: #F9FAFB; /* app background */
    --surface-card: #FFFFFF; /* cards, panels, table bg */
    --surface-sunken: #E6ECF2; /* inset / wells / hovered rows */
    --surface-dark: #19223D; /* dark sections, top bar */
    --surface-dark-alt: #004965; /* secondary dark / info banners */
    /* ---- Semantic: text ---- */
    --text-strong: #19223D; /* headings, key figures */
    --text-body: #2C3754; /* default body on light */
    --text-muted: #494A52; /* secondary, captions, table meta (reconciled) */
    --text-disabled: #8A97A6;
    --text-on-dark: #FFFFFF; /* body on navy/anthracite */
    --text-on-dark-muted: #AEBBCE; /* secondary text on dark */
    --text-link: #1F7A4D; /* links (green-dark) */
    --text-on-cta: #FFFFFF; /* white label on green CTA */
    /* ---- Semantic: borders & lines ---- */
    --border-subtle: #DBE5EE; /* 0.5–1px hairlines */
    --border-strong: #C4D0DE; /* emphasized dividers, input borders */
    --border-dark: #2E3A57; /* dividers on dark surfaces */
    --focus-ring: #004965; /* focus outline (anthracite) */
    --accent: #00ACE6; /* shared accent (cyan) for decorative joyful touches */
    /* ---- Semantic: status / financial ---- */
    --gain: #26A736; /* gains — always paired with ▲ / + */
    --gain-text: #1F7A4D; /* small gain text */
    --gain-surface: #E7F4E9; /* gain pill background */
    --loss: #D83842; /* losses — always paired with ▼ / − */
    --loss-text: #C42E37; /* small loss text */
    --loss-surface: #FBE7E8; /* loss pill background */
    --info: #004965;
    --info-surface: #E2EDF2;
    --warn: #FF8019;
    --warn-text: #B85600;
    --warn-surface: #FFEEDD;
    --danger: #D83842;
    --danger-text: #C42E37;
    --danger-surface: #FBE7E8;
    --neutral-surface: #E6ECF2;
}

/* DDEL Portfolio Solution — Chart / data-visualization tokens
   Categorical palette is ORDERED — use slots in sequence so series stay distinct.
   Gains are green, losses red; ALWAYS pair gain/loss with an arrow or sign,
   never rely on colour alone (accessibility + clarity). */

:root {
    --chart-1: #004965; /* anthracite */
    --chart-2: #26A736; /* green */
    --chart-3: #FF8019; /* orange */
    --chart-4: #6CA6C1; /* steel blue */
    --chart-5: #1F7A4D; /* green-dark */
    --chart-6: #C9A227; /* gold */
    --chart-7: #8E6FB0; /* muted violet */
    --chart-8: #5B6B7B; /* slate */

    --chart-gain: #26A736;
    --chart-loss: #D83842;
    --chart-grid: #DBE5EE; /* gridlines / axes */
    --chart-axis-text: #5B6B7B;
    --chart-track: #E6ECF2; /* empty bar / progress track */
}

/* DDEL Portfolio Solution — Typography tokens
   Clear Sans (fallback Work Sans). Headings in navy, weight 600–700.
   Body 400 at 16px (14px for dense tables). Never lighter than 400.
   Sentence case for buttons and labels — not all-caps. */

:root {
    /* ---- Families ---- */
    --font-sans: "Clear Sans", "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-tabular: "Clear Sans", "Work Sans", system-ui, sans-serif; /* use with font-variant-numeric: tabular-nums for figures */
    /* ---- Weights ---- */
    --fw-regular: 400; /* @kind font */
    --fw-medium: 500; /* @kind font */
    --fw-semibold: 600; /* @kind font */
    --fw-bold: 700; /* @kind font */
    /* ---- Type scale (px) — compact, data-app oriented ---- */
    --fs-display: 40px; /* page hero figure / big number */
    --fs-h1: 30px; /* page title */
    --fs-h2: 24px; /* section title (green text safe at/above this) */
    --fs-h3: 20px; /* card / panel title */
    --fs-h4: 17px; /* sub-heading */
    --fs-body: 16px; /* default body */
    --fs-body-sm: 14px; /* dense tables, secondary */
    --fs-caption: 13px; /* meta, captions */
    --fs-micro: 12px; /* labels, legal — minimum size */
    /* ---- Line heights ---- */
    --lh-tight: 1.15; /* @kind font */ /* large headings, figures */
    --lh-snug: 1.3; /* @kind font */ /* sub-heads */
    --lh-normal: 1.5; /* @kind font */ /* body */
    --lh-relaxed: 1.6; /* @kind font */ /* long-form prose */
    /* ---- Letter spacing ---- */
    --ls-tight: -0.01em; /* @kind font */ /* large display figures */
    --ls-normal: 0; /* @kind font */
    --ls-label: 0.01em; /* @kind font */ /* small labels (sentence case, NOT uppercase) */
}

/* DDEL Portfolio Solution — Spacing, radii, borders, elevation, layout, motion
   Dense data-application rhythm on a 4px base. Subtle borders, light elevation,
   NO gradients. 8px radius for buttons/inputs, 12px for cards. */

:root {
    /* ---- Spacing scale (4px base) ---- */
    --space-0: 0;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 20px;
    --space-7: 24px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;
    --space-12: 64px;
    /* ---- Radii ---- */
    --radius-sm: 4px; /* chips, small inputs, table cell accents */
    --radius-md: 8px; /* buttons, inputs, selects */
    --radius-lg: 12px; /* cards, panels, dialogs */
    --radius-xl: 16px; /* large feature panels */
    --radius-pill: 999px; /* badges, avatars, status pills */
    /* ---- Border widths ---- */
    --border-hair: 0.5px;
    --border-thin: 1px;
    --border-med: 1.5px;
    /* ---- Elevation — light, low-spread; no harsh shadows ---- */
    --elev-0: none;
    --elev-1: 0 1px 2px rgba(25, 34, 61, 0.06); /* resting cards */
    --elev-2: 0 1px 3px rgba(25, 34, 61, 0.08), 0 1px 2px rgba(25, 34, 61, 0.04); /* hovered cards, dropdowns */
    --elev-3: 0 6px 16px rgba(25, 34, 61, 0.10), 0 2px 4px rgba(25, 34, 61, 0.06); /* popovers, menus */
    --elev-4: 0 16px 40px rgba(25, 34, 61, 0.16), 0 4px 10px rgba(25, 34, 61, 0.08); /* dialogs, modals */
    /* ---- Focus ---- */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: #004965;
    /* ---- Layout ---- */
    --app-sidebar-w: 248px;
    --app-topbar-h: 60px;
    --app-content-max: 1280px;
    --container-pad: 24px;
    /* ---- Motion — quiet, no bounce ---- */
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
    --dur-fast: 120ms; /* @kind other */
    --dur-base: 180ms; /* @kind other */
    --dur-slow: 260ms; /* @kind other */
}

/* DDEL Portfolio Solution — Base element layer
   Sensible, brand-correct defaults so consumers and specimen cards inherit the
   right font, colours and rhythm without extra wiring. Keep this light. */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--text-body);
    background: var(--surface-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}

/* iOS Safari zooms in on focus into a field under 16px and never zooms back out. */
@media (pointer: coarse) {
    .mud-input > input.mud-input-root,
    .mud-input > textarea.mud-input-root {
        font-size: max(16px, 1em);
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
}

h4 {
    font-size: var(--fs-h4);
}

p {
    margin: 0 0 1em;
    text-wrap: pretty;
}

a {
    color: var(--text-link);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

small {
    font-size: var(--fs-caption);
}

strong, b {
    font-weight: var(--fw-semibold);
}

code, kbd, samp {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

hr {
    border: 0;
    border-top: var(--border-thin) solid var(--border-subtle);
    margin: var(--space-7) 0;
}

::selection {
    background: #cfe8d4;
    color: var(--text-strong);
}

/* ---- Scrollbars ---- */
/* WebKit / Blink (Chrome, Safari, Edge).
   NOTE: keep this BEFORE the standard scrollbar-* properties. In Chromium 121+
   setting scrollbar-width/scrollbar-color disables ::-webkit-scrollbar, so the
   standard props are scoped to Firefox only via @supports below. */
::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

::-webkit-scrollbar-thumb {
    background: var(--ddel-anthracite);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: var(--border-subtle);
    border-radius: 4px;
}

/* Firefox (no ::-webkit-scrollbar support) — standard properties */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--ddel-anthracite) var(--border-subtle);
    }
}

/* ---- app shell (built against design-system/ui_kits/portal/AdminNav.jsx) ----
   The bar is 72px, matching the rendered kit, not the 60px --app-topbar-h token. */

.ddel-topbar {
    height: 72px;
    flex: 0 0 72px;
    background: var(--surface-card);
    border-bottom: var(--border-thin) solid var(--border-subtle);
    box-shadow: var(--elev-1);
    display: flex;
    align-items: center;
    padding: 0 30px;
    gap: var(--space-6);
    z-index: 10;
}

.ddel-topbar-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    cursor: pointer;
}

    .ddel-topbar-logo img {
        height: 38px;
    }

.ddel-topbar-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: clamp(14px, 2.4vw, 42px);
    overflow-x: auto;
    scrollbar-width: none;
}

    .ddel-topbar-nav::-webkit-scrollbar {
        display: none;
    }

.ddel-topbar-tab {
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 26px 2px;
    font: inherit;
    font-size: var(--fs-caption);
    white-space: nowrap;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    transition: color var(--dur-fast) var(--ease-standard);
}

    .ddel-topbar-tab:hover {
        color: var(--text-strong);
    }

    .ddel-topbar-tab[aria-current="page"] {
        color: var(--ddel-green-dark);
        border-bottom-color: var(--ddel-green);
    }

.ddel-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 0 0 auto;
    margin-left: auto;
}

.ddel-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: var(--border-thin) solid transparent;
    background: transparent;
    color: var(--ddel-navy);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease-standard);
}

    .ddel-icon-action:hover {
        background: var(--surface-sunken);
    }

    .ddel-icon-action[aria-current="page"] {
        border-color: color-mix(in srgb, var(--ddel-green) 40%, transparent);
        background: var(--gain-surface);
        color: var(--ddel-green-dark);
    }

.ddel-topbar-logout {
    font-size: var(--fs-body-sm);
    color: var(--text-link);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.ddel-app-canvas {
    background: var(--surface-canvas);
    min-height: 100%;
}

/* Deliberate deviation from the kit's --app-content-max (1280px): on the data-dense back-office
   screens that cap leaves a third of a 1920 monitor unused. The kit token itself stays untouched. */
:root {
    --app-content-max-wide: 1600px;
}

.ddel-content {
    max-width: var(--app-content-max-wide);
    margin: 0 auto;
    padding: var(--space-7) var(--container-pad);
}

@media (max-width: 1280px) {
    .ddel-topbar-nav {
        display: none;
    }
}

/* Below 768px the nested gutters cost more than the content is worth: 24px of page padding plus
   20px of card padding on each side is 88px of a 390px screen. --container-pad has exactly one
   consumer (.ddel-content), so shrinking it here only narrows the page gutter. */
@media (max-width: 767px) {
    :root {
        --container-pad: var(--space-4);
    }

    .ddel-card-header,
    .ddel-card-body {
        padding: var(--space-4);
    }

    /* MudBlazor pins .mud-toolbar to a fixed height and never wraps it, so the toolbar's trailing
     action buttons (create task, create admin task) end up outside the viewport on a phone. */
    .ddel-grid .mud-table-toolbar {
        height: auto;
        flex-wrap: wrap;
        row-gap: var(--space-3);
        padding-block: var(--space-3);
    }

    /* The top bar has to fit the phone: without this the action cluster keeps its
     desktop width and widens the whole document past the viewport. */
    .ddel-topbar {
        padding: 0 var(--space-4);
        gap: var(--space-3);
    }

    .ddel-topbar-logo img {
        height: 30px;
    }

    .ddel-topbar-actions {
        gap: var(--space-2);
        margin-left: auto;
        min-width: 0;
    }

    /* MudBlazor scrolls a too-wide tab bar by translating the wrapper one arrow-click at a time, and
     a click steps further than the tab that was cut off is wide — so on a phone the tab you were
     reaching for skips past the viewport and is never fully visible. DetailTabs in
     AdminCustomerDetail.jsx just lets the strip scroll, which a touch screen does natively. */
    .mud-tabs-tabbar-content {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .mud-tabs-tabbar-content::-webkit-scrollbar {
            display: none;
        }

        .mud-tabs-tabbar-content > .mud-tabs-tabbar-wrapper {
            transform: none !important;
        }

    .mud-tabs-scroll-button {
        display: none;
    }

    /* MudBlazor stacks every cell as its own label/value row on a phone, so the column widths that
     shape the desktop table apply to a full-width row instead — leaving a 130px block holding a
     date broken over three lines. */
    .ddel-grid .mud-table-cell {
        width: auto !important;
    }

    /* Stacked, a cell is as wide as its label plus its value, so one long file name makes the table
     wider than the card it sits in and the right-hand side of every row is cut off. A fixed layout
     hands the table its container's width instead and lets the value truncate. */
    .ddel-grid .mud-table-root {
        table-layout: fixed;
        width: 100%;
    }

    /* Every sticky column is pinned at the same left: 0 — harmless while the table fits, but once it
     scrolls (which on a phone it always does) they stack on top of each other and the frozen
     column paints over the data. The customer documents grid has three of them, which is why that
     page looked empty on a phone. Their fill goes too: stacked, it reads as banded rows. */
    .ddel-grid .mud-table-cell.sticky-left,
    .ddel-grid .mud-table-cell.sticky-right {
        position: static;
        background-color: transparent !important;
    }
}

/* The top bar stays on screen while a phone scrolls. The z-index only has to clear the page
   content: popovers (the full-screen notifications) and the nav drawer must still cover it. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .ddel-topbar {
        position: sticky;
        top: 0;
        z-index: 10;
    }
}

/* MudBlazor's stacked small-device grid (.mud-xs-table, its media query sits at 600px — not our
   767px breakpoint) runs every record together as one long label/value list: empty cells still
   claim a full row, records have no boundary, and the unlabeled action cell floats on its own.
   Reshape each <tr> into a card: first value as title, empty rows gone, actions in the foot. */
@media (max-width: 600px) {
    .ddel-grid .mud-table-body {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding-block: var(--space-4);
        border-top: none;
    }

        /* flex-end only reaches the wrapped line of auto-width action cells; the labeled cells span
     the full row, so a grid with several action columns (customers: edit + delete) gets them
     side by side in the card's foot instead of one stacked row each. */
        .ddel-grid .mud-table-body .mud-table-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            border: var(--border-thin) solid var(--border-subtle);
            border-radius: var(--radius-lg);
            box-shadow: var(--elev-1);
            padding-block: var(--space-4);
            overflow: hidden;
        }

        /* !important because column widths arrive as inline styles (width:130px) and the 767px block
     above already counters them with width:auto !important. */
        .ddel-grid .mud-table-body .mud-table-cell {
            width: 100% !important;
            padding: var(--space-2) var(--space-5);
            border-bottom: none;
            overflow-wrap: anywhere;
        }

        /* The row's overflow is visible (so an action-cluster menu can open), which lets a free-text
     value (an account flag comment, a long URL) push past the card. overflow-wrap: anywhere lowers
     the value's min-content so it wraps; the label keeps its width. */
        .ddel-grid .mud-table-body .mud-table-cell::before {
            flex-shrink: 0;
            font-weight: var(--fw-regular);
            font-size: var(--fs-caption);
            color: var(--text-muted);
        }

        /* An empty cell renders nothing but comment nodes, which :empty ignores — so this removes the
     label/value rows that say nothing (Deadline, Rekening, …) instead of showing a bare label. */
        .ddel-grid .mud-table-body .mud-table-cell:empty {
            display: none;
        }

        /* The first value column is the record's identity (task name, customer, document) — promote it
     to card title and drop its redundant label. The two selectors cover grids with and without a
     leading unlabeled edit/hierarchy column. */
        .ddel-grid .mud-table-body td[data-label]:first-child,
        .ddel-grid .mud-table-body td:not([data-label]) + td[data-label] {
            font-weight: var(--fw-semibold);
            font-size: var(--fs-body);
        }

            .ddel-grid .mud-table-body td[data-label]:first-child::before,
            .ddel-grid .mud-table-body td:not([data-label]) + td[data-label]::before {
                content: none;
            }

        /* Unlabeled cells hold row actions (edit pencil, expand); anchor them at the card's foot. */
        .ddel-grid .mud-table-body td:not([data-label]) {
            order: 99;
            width: auto !important;
            padding-block: 0;
            border-bottom: none;
        }

        /* MudBlazor's last-cell divider selector outranks the border-bottom: none above. */
        .ddel-grid.mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
            border-bottom: none;
        }

    /* Customer documents and to-do read like the messages list on a phone: the card runs edge to
       edge without its chrome and the records are flat rows split by hairlines, not cards inside
       a card. Opt-in per page. Doubled class: the base .ddel-card rule sits further down the file. */
    .ddel-card.ddel-card--flat-phone {
        margin: 0 calc(-1 * var(--container-pad)) !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--surface-card);
    }

        .ddel-card--flat-phone > .ddel-card-body {
            padding: 0;
        }

        .ddel-card--flat-phone .ddel-grid .mud-table-toolbar {
            padding-inline: var(--container-pad);
        }

        .ddel-card--flat-phone .ddel-grid .mud-table-body {
            gap: 0;
            padding-block: 0;
            border-top: var(--border-thin) solid var(--border-subtle);
        }

            .ddel-card--flat-phone .ddel-grid .mud-table-body .mud-table-row {
                border: 0;
                border-bottom: var(--border-thin) solid var(--border-subtle);
                border-radius: 0;
                box-shadow: none;
            }

            .ddel-card--flat-phone .ddel-grid .mud-table-body .mud-table-cell {
                padding-inline: var(--container-pad);
            }

            /* A tap leaves :hover stuck on the row, so the hover fill (and the browser's tap flash)
               would tint it; the row keeps the card colour instead. !important beats the sticky
               column's own hover rule. */
            .ddel-card--flat-phone .ddel-grid .mud-table-body .mud-table-row {
                -webkit-tap-highlight-color: transparent;
            }

            .ddel-card--flat-phone .ddel-grid .mud-table-body .mud-table-row:hover > td.mud-table-cell {
                background-color: var(--surface-card) !important;
            }

    /* A cell whose action the row click already covers, e.g. the to-do's open button. */
    .ddel-grid.mud-xs-table .mud-table-body .mud-table-row .mud-table-cell.ddel-cell-hide-phone {
        display: none;
    }

    /* The negative margin above cancels the page gutter; a ma-4 wrapper would undo that. */
    .ma-4:has(> .ddel-card--flat-phone) {
        margin: 0 !important;
    }
}

.ddel-mobile-nav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) 30px;
    border-top: var(--border-thin) solid var(--border-subtle);
}

/* The drawer under the hamburger is the same navigation as .ddel-topbar-tab, so it carries the
   same language. MudBlazor's own defaults fight that: .mud-nav-link aligns its label to the top
   of the row, .mud-nav-link-text carries a 12px indent meant for an icon these links do not have
   and hard-sets letter-spacing to 0, and .active draws a 2px marker on the trailing edge. */

.ddel-mobile-nav .mud-drawer-header {
    height: 72px;
    align-items: center;
    padding: 0 30px;
    border-bottom: var(--border-thin) solid var(--border-subtle);
}

.ddel-mobile-nav .mud-navmenu {
    padding: 0;
}

.ddel-mobile-nav .mud-nav-link {
    align-items: center;
    min-height: 56px;
    margin: 0;
    padding: 0 30px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: var(--border-thin) solid var(--border-subtle);
}

    .ddel-mobile-nav .mud-nav-link .mud-nav-link-text {
        margin-inline-start: 0;
        letter-spacing: 0.06em;
    }

    .ddel-mobile-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        color: var(--text-strong);
        background: var(--surface-sunken);
    }

    .ddel-mobile-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
        color: var(--ddel-green-dark);
        background: var(--gain-surface);
        border-inline-end-width: 0;
        box-shadow: inset 3px 0 0 var(--ddel-green);
    }

/* ---- wizard step content out of WizardResource.*.resx ----
   That HTML is Tailwind-era markup and is stored in three languages, so it cannot be restyled
   from the markup side. Tailwind is gone and MudBlazor ships almost none of these names, so the
   classes below stopped resolving: cells lost their centring, headings their weight and size,
   and `border` alone only sets border-width (MudBlazor) — with no style it paints nothing.
   These map the names that are still in the resources onto the design tokens. Scoped to the
   wizard content so they cannot leak back into the app as general-purpose utilities. */

.ddel-wizard-html .text-center {
    text-align: center;
}

.ddel-wizard-html .w-auto {
    width: auto;
}

.ddel-wizard-html .container {
    width: 100%;
}

.ddel-wizard-html .border,
.ddel-wizard-html .border-b {
    border-style: solid;
    border-color: var(--border-strong);
}

.ddel-wizard-html .border-gray-300 {
    border-color: var(--border-strong);
}

.ddel-wizard-html .rounded-l {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
}

.ddel-wizard-html .font-bold {
    font-weight: var(--fw-bold);
}

.ddel-wizard-html .leading-relaxed {
    line-height: var(--lh-relaxed);
}

.ddel-wizard-html .opacity-90 {
    opacity: 0.9;
}

.ddel-wizard-html .text-2xl {
    font-size: var(--fs-h2);
}

.ddel-wizard-html .text-lg {
    font-size: var(--fs-h4);
}

.ddel-wizard-html .text-sm {
    font-size: var(--fs-body-sm);
}

.ddel-wizard-html .text-xs {
    font-size: var(--fs-micro);
}

.ddel-wizard-html .text-gray-900 {
    color: var(--text-strong);
}

.ddel-wizard-html .text-gray-800 {
    color: var(--text-body);
}

.ddel-wizard-html .text-gray-700 {
    color: var(--text-body);
}

.ddel-wizard-html .text-gray-500 {
    color: var(--text-muted);
}

.ddel-wizard-html .text-green-700 {
    color: var(--ddel-green-dark);
}

.ddel-wizard-html .m-4 {
    margin: var(--space-5);
}

.ddel-wizard-html .mb-2 {
    margin-bottom: var(--space-3);
}

.ddel-wizard-html .mb-3 {
    margin-bottom: var(--space-4);
}

.ddel-wizard-html .mb-6 {
    margin-bottom: var(--space-7);
}

.ddel-wizard-html .mb-8 {
    margin-bottom: var(--space-8);
}

.ddel-wizard-html .mt-4 {
    margin-top: var(--space-5);
}

.ddel-wizard-html .mt-8 {
    margin-top: var(--space-8);
}

.ddel-wizard-html .ml-5 {
    margin-left: var(--space-6);
}

.ddel-wizard-html .p-4 {
    padding: var(--space-5);
}

.ddel-wizard-html .pb-2 {
    padding-bottom: var(--space-3);
}

/* ---- small utilities MudBlazor does not ship (these were Tailwind) ---- */

.ddel-text-center {
    text-align: center;
}

.ddel-text-nowrap {
    white-space: nowrap;
}

.ddel-w-full {
    width: 100%;
}

.ddel-min-w-0 {
    min-width: 0;
}

.ddel-relative {
    position: relative;
}

.ddel-absolute {
    position: absolute;
}

.ddel-linkbutton {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

.ddel-underline {
    text-decoration: underline;
}

.ddel-flex-none {
    flex: none;
}

.ddel-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}

.ddel-surface-card {
    background: var(--surface-card);
}

.ddel-surface-canvas {
    background: var(--surface-canvas);
}

.ddel-surface-sunken {
    background: var(--surface-sunken);
}

.ddel-text-strong {
    color: var(--text-strong);
}

.ddel-text-body {
    color: var(--text-body);
}

.ddel-text-muted {
    color: var(--text-muted);
}

.ddel-text-disabled {
    color: var(--text-disabled);
}

.ddel-text-link {
    color: var(--text-link);
}

.ddel-text-loss {
    color: var(--loss-text);
}

.ddel-text-gain {
    color: var(--gain-text);
}

.ddel-text-on-dark {
    color: var(--text-on-dark);
}

.ddel-fw-regular {
    font-weight: var(--fw-regular);
}

.ddel-fw-medium {
    font-weight: var(--fw-medium);
}

.ddel-fw-semibold {
    font-weight: var(--fw-semibold);
}

.ddel-fw-bold {
    font-weight: var(--fw-bold);
}

.ddel-fs-micro {
    font-size: var(--fs-micro);
}

.ddel-fs-caption {
    font-size: var(--fs-caption);
}

.ddel-fs-body-sm {
    font-size: var(--fs-body-sm);
}

.ddel-fs-body {
    font-size: var(--fs-body);
}

.ddel-fs-h4 {
    font-size: var(--fs-h4);
}

.ddel-fs-h3 {
    font-size: var(--fs-h3);
}

.ddel-fs-h2 {
    font-size: var(--fs-h2);
}

.ddel-fs-h1 {
    font-size: var(--fs-h1);
}

.ddel-text-strong {
    color: var(--text-strong);
}

.ddel-text-body {
    color: var(--text-body);
}

.ddel-text-muted {
    color: var(--text-muted);
}

.ddel-text-disabled {
    color: var(--text-disabled);
}

.ddel-text-link {
    color: var(--text-link);
}

.ddel-text-loss {
    color: var(--loss-text);
}

.ddel-text-gain {
    color: var(--gain-text);
}

.ddel-text-on-dark {
    color: var(--text-on-dark);
}

.ddel-fw-regular {
    font-weight: var(--fw-regular);
}

.ddel-fw-medium {
    font-weight: var(--fw-medium);
}

.ddel-fw-semibold {
    font-weight: var(--fw-semibold);
}

.ddel-fw-bold {
    font-weight: var(--fw-bold);
}

.ddel-fs-micro {
    font-size: var(--fs-micro);
}

.ddel-fs-caption {
    font-size: var(--fs-caption);
}

.ddel-fs-body-sm {
    font-size: var(--fs-body-sm);
}

.ddel-fs-body {
    font-size: var(--fs-body);
}

.ddel-fs-h4 {
    font-size: var(--fs-h4);
}

.ddel-fs-h3 {
    font-size: var(--fs-h3);
}

.ddel-fs-h2 {
    font-size: var(--fs-h2);
}

.ddel-fs-h1 {
    font-size: var(--fs-h1);
}

.ddel-validation {
    display: block;
    color: var(--ddel-red-text);
    font-size: var(--fs-body-sm);
    text-align: center;
}

/* Status pill — design-system/components/core/Badge.jsx, subtle tones. */
.ddel-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    background: var(--neutral-surface);
    color: var(--text-strong);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    letter-spacing: var(--ls-label);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.ddel-badge--warn {
    background: var(--warn-surface);
    color: var(--warn-text);
}

/* ---- onboarding wizard (built against ui_kits/portal/OnboardingWizard.jsx +
   guidelines/mudblazor-mapping.md §5) ---- */

.ddel-wizard {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.ddel-multiselect-box {
    border: var(--border-thin) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-3) var(--space-2);
    transition: border-color 150ms ease;
}

    .ddel-multiselect-box:focus-within {
        border-color: var(--ddel-green);
    }

.ddel-multiselect-box--disabled {
    border-color: var(--border-subtle);
    background: var(--surface-canvas);
}

.ddel-wizard-dialog-content {
    min-height: 192px;
    height: 100%;
    overflow: hidden;
}

/* MudBlazor caps a dialog at calc(100% - 96px) and scrolls its content area. Giving the wizard
   dialog that height outright lets the rail and the question pane scroll inside it (the kit's
   model, OnboardingWizard.jsx:155 and :204) instead of the whole wizard scrolling as one block. */
@media (min-width: 768px) {
    .ddel-wizard-dialog {
        height: calc(100% - 96px);
    }
}

/* Full-bleed below 768px (the kit's mobile model, OnboardingWizard.jsx:140,:146): without this the
   dialog keeps MudBlazor's floating margins and the nav buttons fall off the viewport. */
@media (max-width: 767px) {
    .ddel-wizard-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
}

.ddel-wizard-rail {
    width: 290px;
    flex: 0 0 290px;
    background: var(--ddel-ice);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width var(--dur-base) var(--ease-standard), flex-basis var(--dur-base) var(--ease-standard);
}

.ddel-wizard-rail--collapsed {
    width: 76px;
    flex-basis: 76px;
}

.ddel-wizard-rail-watermark {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.22;
}

/* The kit puts the language select at the bottom of the rail; DDEL asked for it top-left,
   on the same row as the collapse chevron. */
.ddel-wizard-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) 0 var(--space-6);
    position: relative;
    z-index: 2;
}

.ddel-wizard-rail-language {
    position: relative;
    z-index: 2;
}

.ddel-wizard-rail--collapsed .ddel-wizard-rail-header {
    justify-content: center;
    padding-inline: 0;
}

.ddel-wizard-rail--collapsed .ddel-wizard-rail-language {
    display: none;
}

.ddel-wizard-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ddel-wizard-rail .mud-stepper-nav {
    overflow-y: auto;
}

/* Right padding clears the dialog's close button, which floats over this row. */
.ddel-wizard-step-header {
    display: none;
    padding: 0 var(--space-12) var(--space-2) clamp(16px, 5vw, 40px);
}

.ddel-wizard-step-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.ddel-wizard-step-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.ddel-wizard-step-count {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.ddel-wizard-step-track {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-sunken);
    margin-top: var(--space-3);
    overflow: hidden;
}

.ddel-wizard-step-fill {
    height: 100%;
    background: var(--ddel-green);
    transition: width var(--dur-base) var(--ease-standard);
}

@media (max-width: 767px) {
    .ddel-wizard-rail {
        display: none;
    }

    .ddel-wizard-step-header {
        display: block;
    }
}

/* ---- layout grids (replacing Tailwind's grid utilities) ---- */

/* Edit forms: one column, two side by side on wide screens. */
.ddel-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 1200px) {
    .ddel-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* A read-only value inside a FormItemHolder: same box as an input so a form of
   mixed editable and read-only fields keeps one baseline. */
.ddel-field-value {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-canvas);
    color: var(--text-body);
}

/* The footer of an edit form: the scenario chip on the left, the submit on the right. A nowrap flex
   row here is what put a horizontal scrollbar in the task dialog on a phone — the chip carries a
   sentence and does not shrink, so the row stayed wider than the dialog. */
.ddel-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.ddel-form-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

/* MudChip is nowrap by design; these carry a sentence, so they have to be allowed to wrap. */
.ddel-form-footer .mud-chip {
    height: auto;
    white-space: normal;
    padding-block: var(--space-2);
}

/* An editable checkbox keeps the baseline of the input beside it, but not the read-only box:
   .ddel-field-value around a control renders it as if it were disabled output. */
.ddel-field-check {
    display: flex;
    align-items: center;
    min-height: 40px;
}

/* Client dashboard: cards at one, two then three across. */
.ddel-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: stretch;
    max-width: 100%;
}

@media (min-width: 900px) {
    .ddel-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .ddel-card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

.ddel-card-grid-wide {
    grid-column: 1 / -1;
}

.ddel-card-grid-tall {
    grid-row: span 3;
}

/* Open-tasks tile on the client home — HomeScreen.jsx: compact rows, a green left edge on
   anything urgent, the rest linked away rather than listed. */
.ddel-tasktile-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Every open task carries the same green frame. HomeScreen.jsx tints only the urgent rows and
   leaves the rest grey; DDEL asked for the grey to go, so the flag and the "action needed" badge
   carry the urgency instead of the fill. */
.ddel-tasktile-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-thin) solid color-mix(in srgb, var(--ddel-green) 30%, transparent);
    border-left: 3px solid var(--ddel-green);
    background: color-mix(in srgb, var(--ddel-green) 9%, transparent);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard);
}

    .ddel-tasktile-row:hover {
        background: color-mix(in srgb, var(--ddel-green) 15%, transparent);
    }

.ddel-tasktile-row-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.ddel-tasktile-row-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.ddel-tasktile-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

/* Adviser card — HomeScreen.jsx: round portrait, then name, e-mail and phone stacked. */
.ddel-adviser {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.ddel-adviser-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
}

.ddel-adviser-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* Client documents table — DocumentsScreen.jsx: one search box, ice type chip, file name
   behind its format icon and truncated rather than wrapped. */
.ddel-doc-search {
    max-width: 420px;
}

.ddel-doc-type {
    background: var(--surface-sunken);
    color: var(--text-strong);
}

.ddel-doc-file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 360px;
    min-width: 0;
}

.ddel-doc-file-icon {
    color: var(--ddel-anthracite);
    flex: 0 0 auto;
}

.ddel-doc-file-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.ddel-doc-file-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Client home hero — HomeScreen.jsx: full-bleed photo, navy scrim, brand mark top-right. */
/* Ratio, not a height cap. HomeScreen.jsx caps the hero at 260px, but its page is 1240px wide
   while the portal's content area is wider — at 1440 the kit renders 1186x258 and the app 1392x260.
   Same height in a wider box means object-fit: cover crops further into the photo, which is what
   cut the family off at the waist. Tying height to width keeps the design's framing at any width;
   the floor takes over on narrow screens, where the clamp used to. */
/* width: 100% is load-bearing: with an auto width, aspect-ratio transfers the 180px min-height
   into a minimum width of 180 × 1186/258 = 827px, so on a phone the hero grew to 827px inside a
   366px grid track and handed the client home an 839px-wide document to scroll sideways. */
.ddel-home-hero {
    position: relative;
    grid-column: 1 / -1;
    aspect-ratio: 1186 / 258;
    min-height: 180px;
    width: 100%;
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ddel-home-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.ddel-home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(25, 34, 61, 0.30) 0%, rgba(25, 34, 61, 0.05) 50%, rgba(25, 34, 61, 0.30) 100%);
}

.ddel-home-hero-mark {
    position: absolute;
    right: clamp(16px, 3vw, 22px);
    top: clamp(14px, 3vw, 18px);
    height: clamp(56px, 10vw, 84px);
    opacity: 0.32;
    z-index: 1;
}

/* ---- backend home (built against ui_kits/portal/AdminHome.jsx) ---- */

.ddel-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
}

    .ddel-dashboard-grid > .ddel-dashboard-span-2 {
        grid-column: 1 / -1;
    }

@media (min-width: 900px) {
    .ddel-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* MudExpansionPanel paints its own paper; make the two summary panels read as cards. */
.ddel-summary-panel.mud-expand-panel {
    background: var(--surface-card);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

.ddel-summary-panel .mud-expand-panel-header {
    padding: var(--space-5) var(--space-6);
}

.ddel-summary-panel .mud-expand-panel-text {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

/* ---- settings rows (built against ui_kits/portal/AdminAccountSettings.jsx) ---- */

.ddel-setting-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    text-align: left;
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--surface-card);
    box-shadow: var(--elev-1);
    padding: 22px var(--space-7);
    transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

    .ddel-setting-row:hover {
        background: var(--surface-canvas);
        box-shadow: var(--elev-2);
    }

.ddel-setting-row-icon {
    flex: 0 0 auto;
    color: var(--ddel-navy);
    margin-top: var(--space-1);
}

.ddel-setting-row-title {
    display: block;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.ddel-setting-row-desc {
    display: block;
    font-size: var(--fs-body);
    color: var(--text-muted);
    margin-top: var(--space-2);
    line-height: var(--lh-normal);
}

.ddel-setting-row-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    align-self: center;
    transition: transform var(--dur-fast) var(--ease-standard);
}

.ddel-setting-row:hover .ddel-setting-row-chevron {
    transform: translateX(3px);
}

/* ---- icon actions (built against design-system/ui_kits/portal/Tooltip.jsx IconActionBtn) ---- */

.ddel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--ddel-navy);
    color: var(--ddel-white);
    border: var(--border-thin) solid var(--ddel-navy);
    transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
    /* The fixed 46px above outranks MudBlazor's own size classes, which size an icon button through
   padding. Without these two rules a call site asking for Size.Small still renders 46px. */
    .ddel-action.mud-icon-button-size-small {
        width: 34px;
        height: 34px;
    }

    .ddel-action.mud-icon-button-size-large {
        width: 54px;
        height: 54px;
    }

    .ddel-action:hover {
        background: var(--surface-card);
        color: var(--ddel-navy);
        box-shadow: var(--elev-2);
    }

    .ddel-action .mud-icon-root {
        color: inherit;
    }

.ddel-action--ghost {
    background: transparent;
    color: var(--ddel-navy);
    border-color: var(--border-strong);
}

    .ddel-action--ghost:hover {
        background: var(--surface-sunken);
        color: var(--ddel-navy);
        box-shadow: none;
    }

/* Destructive actions carry the same navy fill as every other action: a grid of red
   buttons reads as alarm, not as weight. The red is held back for the hover state. */
.ddel-action--danger {
    background: var(--ddel-navy);
    border-color: var(--ddel-navy);
}

    .ddel-action--danger:hover {
        background: var(--surface-card);
        color: var(--ddel-red-text);
        border-color: var(--ddel-red);
    }

/* A cluster of icon actions (ActionCluster.razor). Side by side on a desktop; on a phone four
   46px buttons are more than half the screen, so they collapse behind one button and expand
   downwards from the right edge. */
.ddel-action-cluster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.ddel-action-cluster-toggle {
    display: none;
}

.ddel-action-cluster-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 19;
}

.ddel-action-cluster-items {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

/* :has() carries the "two or more" half of the rule: a cluster that renders a single action for
   this role or status keeps that action inline, where hiding it behind a menu would only cost the
   reader a tap. */
@media (max-width: 767px) {
    .ddel-action-cluster:has(.ddel-action-cluster-items > :nth-child(2)) .ddel-action-cluster-toggle {
        display: inline-flex;
    }

    .ddel-action-cluster-items:has(> :nth-child(2)) {
        display: none;
        position: absolute;
        top: calc(100% + var(--space-2));
        right: 0;
        z-index: 20;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-2);
        background: var(--surface-card);
        border: var(--border-thin) solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--elev-3);
    }

    .ddel-action-cluster-items--open:has(> :nth-child(2)) {
        display: flex;
    }

    /* For a cluster near the bottom of its panel (the message thread's admin actions sit right
       above the reply box), the panel opens upwards instead. */
    .ddel-action-cluster--up .ddel-action-cluster-items:has(> :nth-child(2)) {
        top: auto;
        bottom: calc(100% + var(--space-2));
    }

    .ddel-action-cluster-backdrop {
        display: block;
    }
}

/* ---- forms (built against design-system/ui_kits/portal/BackendForm.jsx) ---- */

.ddel-field {
    margin-bottom: 22px;
}

.ddel-field-label {
    display: block;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 7px;
}

.ddel-field-hint {
    margin-top: 7px;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
}

.ddel-field-error {
    display: block;
    margin-top: 7px;
    font-size: var(--fs-body-sm);
    color: var(--ddel-red-text);
}

/* MudBlazor#12046 retired MudGlobal.InputDefaults.Margin, so MudBlazor's dense input metrics are
   pinned here instead: without them a bare MudTextField renders 16px taller than the shared
   EnumCombobox beside it. The label transform has to move with the box. */
.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
}

.mud-input > textarea.mud-input-root-outlined {
    margin-top: 10.5px;
    padding-bottom: 10.5px;
}

.mud-input-label-outlined {
    transform: translate(14px, 12px) scale(1);
}

/* ---- data grids (built against design-system/ui_kits/portal/MudTable.jsx) ---- */

.ddel-grid .mud-table-root {
    font-size: var(--fs-body-sm);
}

.ddel-grid th.mud-table-cell {
    background: transparent;
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    font-size: var(--fs-body-sm);
    padding: 14px var(--space-5) var(--space-4);
    white-space: nowrap;
    vertical-align: bottom;
}

.ddel-grid td.mud-table-cell {
    padding: var(--space-5) var(--space-5);
    border-bottom: var(--border-thin) solid var(--border-subtle);
    color: var(--text-body);
    line-height: var(--lh-snug);
    vertical-align: middle;
    transition: background-color var(--dur-fast) var(--ease-standard);
}

/* Row hover is one fill across the full row, sticky action column included: those cells carry
   their own opaque background (MudBlazor #11997, further down) and a second colour there reads as
   a block hanging off the row's right edge. Both rules fill with --surface-canvas. */
.ddel-grid .mud-table-row:hover > td.mud-table-cell {
    background-color: var(--surface-canvas);
}

/* A short value next to the column that absorbs the grid's slack: without this it is squeezed to
   min-content and a name breaks mid-word. */
.ddel-grid td.ddel-cell-nowrap {
    white-space: nowrap;
}

.ddel-grid th.ddel-cell-center,
.ddel-grid td.ddel-cell-center {
    text-align: center;
}

/* The action group at the end of a row, header and cell alike: one right edge and one gap instead
   of the per-call-site ml-10/ml-16/mr-9 margins that only lined up at one viewport width. */
.ddel-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    white-space: nowrap;
}

/* The collapsed account row — AccountRow in AdminCustomerDetail.jsx: name grows, the meta columns
   keep their own width and the actions hold the right edge. A 12-column grid cannot do that on a
   phone, where xs="1" leaves a Xantus id 8% of the screen wide. */
.ddel-account-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.ddel-account-row-name {
    flex: 1 1 160px;
    min-width: 0;
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.ddel-account-row-meta {
    flex: 0 0 auto;
    color: var(--text-body);
}

.ddel-account-row-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ddel-account-row .ddel-row-actions {
    margin-left: auto;
}

/* One owner or representative inside its card, on the sunken fill AdminCustomerDetail.jsx uses. */
.ddel-detail-block {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.ddel-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ddel-detail-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ddel-detail-block:last-child {
    margin-bottom: 0;
}

/* Former representatives on the account card: one hairline-separated entry per ended representation. */
.ddel-rep-history { margin-top: var(--space-5); }
.ddel-rep-history-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) 0;
    border-top: var(--border-thin) solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--fs-caption);
}
.ddel-rep-history-item strong { color: var(--text-strong); }
.ddel-rep-history-open { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--warn-text); }

/* What erasing a person removes, listed in its confirmation. */
.ddel-erasure-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: var(--space-6); }

/* A date filter carries a full-width picker plus two icon buttons — ~250px to hold a 10-character
   date, which is what pushed the task grids past their container. */
.ddel-grid thead .mud-input-control {
    max-width: 128px;
}

/* A filter that sizes itself to its own column: a fixed 128px control plus a 44px clear button
   overflows a narrow column into its neighbour, which is what the 150px status column did. */
.ddel-grid thead .ddel-filter-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

    .ddel-grid thead .ddel-filter-row .mud-input-control {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .ddel-grid thead .ddel-filter-row .mud-button-root {
        flex: 0 0 auto;
        min-width: 0;
        padding: var(--space-2);
    }

.ddel-grid thead .mud-table-cell .mud-icon-button {
    padding: var(--space-2);
}

.ddel-grid th.mud-table-cell,
.ddel-grid td.mud-table-cell {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.ddel-grid .mud-table-smalldevices-header,
.ddel-grid .mud-table-pagination {
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
}

.ddel-grid .mud-table-pagination-caption {
    color: var(--text-muted);
}

.ddel-scroll-locked {
    overflow-y: hidden;
    height: 100vh;
}

/* ---- impersonation (built against design-system/ui_kits/portal/ImpersonationFab.jsx) ---- */

.ddel-impersonate {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
}

.ddel-impersonate-fab {
    width: 58px;
    height: 58px;
    box-shadow: var(--elev-3);
    background: var(--surface-card);
    color: var(--ddel-anthracite);
}

    .ddel-impersonate-fab.ddel-impersonate-fab--active {
        background: var(--ddel-green);
        color: #fff;
    }

.ddel-impersonate-panel {
    width: min(440px, calc(100vw - 52px));
    max-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-4);
    overflow: hidden;
}

.ddel-impersonate-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-thin) solid var(--border-subtle);
}

.ddel-impersonate-title {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.ddel-impersonate-hint {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.ddel-impersonate-stop {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: none;
    border-bottom: var(--border-thin) solid var(--border-subtle);
    background: transparent;
    font: inherit;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--ddel-green-dark);
    text-align: left;
    cursor: pointer;
}

    .ddel-impersonate-stop:hover {
        background: var(--surface-canvas);
    }

.ddel-impersonate-search {
    padding: var(--space-5) var(--space-6);
}

.ddel-build-info {
    position: fixed;
    left: 8px;
    bottom: 4px;
    z-index: 80;
    display: flex;
    align-items: center;
    max-width: calc(100vw - 16px);
    color: var(--text-muted);
    opacity: 0.5;
    font-size: var(--fs-caption);
    line-height: 1;
    pointer-events: none;
    cursor: default;
}

.ddel-build-info-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- surfaces (built against design-system/components/core/Card.jsx) ---- */

.ddel-card {
    background: var(--surface-card);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    overflow: hidden;
}

.ddel-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--border-thin) solid var(--border-subtle);
}

.ddel-card-title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: var(--lh-snug);
}

.ddel-card-subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
}

.ddel-card-action {
    flex: 0 0 auto;
}

.ddel-card-body {
    padding: var(--space-6);
}

.ddel-card-body--flush {
    padding: 0;
}

/* A MudCardHeader is a flex row, so an <hr> placed inside CardHeaderContent or CardHeaderActions only
   spans that half. Put the rule on the header itself, the way .ddel-card-header does it. */
.ddel-header-rule {
    border-bottom: var(--border-thin) solid var(--border-subtle);
}

.ddel-detail-label {
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
}

.ddel-tile-icon {
    font-size: 3rem;
    color: var(--text-muted);
}

.ddel-tile-value {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

.ddel-tile-value--sm {
    font-size: var(--fs-h4);
}

/* One height for a row of compact tiles, including where they stack on a phone and the shortest of
   them would otherwise be visibly smaller than its neighbours. */
.ddel-tile--compact {
    min-height: 130px;
}

.ddel-tile-label {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
}

.ddel-tile--highlight {
    border-color: color-mix(in srgb, var(--ddel-green) 45%, transparent);
    box-shadow: var(--elev-2);
}

/* ---- auth shell (built against design-system/ui_kits/portal/LoginScreen.jsx) ---- */

.ddel-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 520px) 1fr;
    background: var(--surface-card);
}

.ddel-auth-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-9) 56px;
    overflow-y: auto;
}

.ddel-auth-logo {
    height: 42px;
    align-self: flex-start;
    margin-bottom: var(--space-9);
}

.ddel-auth-title {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: var(--lh-snug);
}

/* Route.razor's <FocusOnNavigate Selector="h1"> focuses the page heading after every
   navigation, which Chrome then matches with :focus-visible. The heading is not
   interactive, so the ring is noise — keyboard users still get it on real controls. */
h1:focus,
h1:focus-visible {
    outline: none;
}

.ddel-auth-subtitle {
    margin: var(--space-2) 0 28px;
    color: var(--text-muted);
    font-size: var(--fs-body);
}

.ddel-auth-form-body {
    width: 100%;
    max-width: 420px;
}

.ddel-auth-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

    .ddel-auth-hero > img.ddel-auth-hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ddel-auth-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(25, 34, 61, 0.12) 0%, rgba(25, 34, 61, 0.55) 100%);
}

.ddel-auth-hero-mark {
    position: absolute;
    right: 28px;
    top: var(--space-7);
    height: 96px;
    opacity: 0.3;
    pointer-events: none;
}

.ddel-auth-hero-copy {
    position: relative;
    padding: 44px var(--space-10);
    max-width: 540px;
}

    .ddel-auth-hero-copy h2 {
        margin: 0;
        color: var(--text-on-dark);
        font-size: var(--fs-display);
        font-weight: var(--fw-semibold);
        line-height: var(--lh-tight);
    }

    .ddel-auth-hero-copy p {
        margin: var(--space-4) 0 0;
        color: rgba(255, 255, 255, 0.9);
        font-size: var(--fs-h4);
        font-weight: var(--fw-regular);
    }

@media (max-width: 899px) {
    .ddel-auth {
        grid-template-columns: 1fr;
    }

    .ddel-auth-hero {
        display: none;
    }

    .ddel-auth-form {
        padding: var(--space-8) var(--space-7);
    }
}

/* ---- ported from Hosts.Web/Styles/index.scss (retokenized) ---- */

.scroll-locked {
    padding-right: 10px;
}

.mud-input-helper-text.mud-input-error {
    font-size: var(--fs-body) !important;
}

.circular-progress {
    flex: 0 0 var(--size);
    --half-size: calc(var(--size) / 2);
    --stroke-width: var(--stroke-width);
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
    --foreground: var(--foreground);
    --background: var(--background);
}

    .circular-progress circle {
        cx: var(--half-size);
        cy: var(--half-size);
        r: var(--radius);
        stroke-width: var(--stroke-width);
        fill: var(--chart-track);
        stroke-linecap: round;
    }

        .circular-progress circle.bg {
            stroke: var(--background);
        }

        .circular-progress circle.fg {
            transform: rotate(-90deg);
            transform-origin: var(--half-size) var(--half-size);
            stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
            transition: stroke-dasharray var(--dur-slow) linear 0s;
            stroke: var(--foreground);
        }

.wizard-table-field-row .mud-radio-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    flex-wrap: nowrap !important;
}

/* The wizard's radio-matrix header row — mudblazor-mapping §2. */
.table-head-color {
    background-color: var(--surface-sunken);
}

/* MudBlazor tables do not collapse their borders, so the matrix cells (which carry a border on
   every side) stacked two grey lines on every interior edge and read as a hard dark rule next to
   the single-line tables elsewhere in the wizard. */
.wizard-table .mud-table-root {
    border-collapse: collapse;
}

/* The HTML content of the wizard steps still carries Tailwind class names that no longer resolve
   since the redesign dropped Tailwind; these two are the ones that change the rendering. */
.wizard-table .text-center {
    text-align: center;
}

.wizard-table .border {
    border: var(--border-thin) solid var(--border-subtle);
}

/* Below 768px the sync script's inline width (the widest label across all matrices) would push
   every option column past the viewport; !important is the only way to beat that inline style. */
@media (max-width: 767px) {
    .wizard-table th:first-child,
    .wizard-table .mud-table-root td:first-child {
        width: auto !important;
        min-width: 120px !important;
        max-width: 40vw;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left;
    }
}

.mud-button-close {
    margin-right: var(--space-5);
}

.mud-button-wizard {
    min-width: 120px;
}

.mud-button-edit-forms {
    min-width: 90px;
}

.mud-button-signing-dialog {
    min-width: 210px;
}

@media screen and (max-width: 580px) {
    .wizard-title .mud-input-helper-text {
        display: none;
    }
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    margin-top: -2px;
}

/* MudBlazor renders the required marker outside the notched legend; these restore it. */
.mud-input-required .mud-input.mud-input-outlined.mud-shrink > .mud-input-outlined-border legend::after,
.mud-input-required .mud-input.mud-input-outlined > .mud-input-outlined-border legend::after {
    content: "*";
}

.mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    font-size: var(--fs-body);
}

.mud-stepper.mud-stepper__vertical .mud-stepper-nav-connector .mud-stepper-nav-connector-line {
    min-height: 2vh;
}

@media screen and (max-height: 660px) {
    .mud-stepper.mud-stepper__vertical .mud-stepper-nav-connector .mud-stepper-nav-connector-line {
        display: none;
    }
}

.mud-typography ul {
    list-style-type: disc;
    padding-left: var(--space-7);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

    .mud-typography ul li {
        margin-left: var(--space-5);
        margin-top: var(--space-2);
        margin-bottom: var(--space-2);
    }

/* MudBlazor #11997 — sticky columns lose their background on scroll. */
.sticky-left,
.sticky-right {
    background-color: var(--surface-card) !important;
}

.mud-table-body .mud-table-cell.sticky-left,
.mud-table-body .mud-table-cell.sticky-right {
    transition: background-color var(--dur-fast) var(--ease-standard);
}

.mud-table-body .mud-table-row:hover .sticky-left,
.mud-table-body .mud-table-row:hover .sticky-right {
    background-color: var(--surface-canvas) !important;
}

.button-none-text-transform {
    text-transform: none !important;
}

.terms-of-conditions-body {
    font-family: var(--font-sans);
    background-color: var(--surface-card);
    margin: 0;
    padding: 0;
    color: var(--text-body);

    .page {
        max-width: 900px;
        margin: var(--space-9) auto;
        padding: var(--space-6) var(--space-9) var(--space-12);
    }

    .header {
        display: flex;
        align-items: flex-start;
        margin-bottom: var(--space-8);
    }

    h1 {
        flex: 1;
        text-align: center;
        font-size: var(--fs-h2);
        font-weight: var(--fw-bold);
        color: var(--ddel-navy);
        margin: 0;
        padding-right: 120px;
    }

    h2 {
        font-size: var(--fs-h4);
        margin: var(--space-7) 0 var(--space-3);
        font-weight: var(--fw-bold);
        color: var(--ddel-navy);
    }

    h3 {
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-bold);
        margin-top: var(--space-6);
    }

    .h3-text {
        text-decoration: underline;
    }

    a {
        color: var(--text-link);
        text-decoration: underline;
    }

    p {
        font-size: var(--fs-body-sm);
        line-height: var(--lh-relaxed);
        margin-top: var(--space-3);
    }

    .title-paragraph {
        font-size: var(--fs-body-sm);
        line-height: var(--lh-relaxed);
        margin-top: 36px;
        text-decoration: underline;
    }

    ul.paragraph-list {
        list-style: none;
        padding-left: 0;
    }

        ul.paragraph-list li::before {
            content: "- ";
        }

    .chapter {
        margin-top: var(--space-5);
        font-weight: var(--fw-bold);
    }

    .table-of-content {
        list-style: none;
        padding: 0;
        margin: var(--space-2) 0 var(--space-5);
    }

        .table-of-content li {
            display: flex;
            align-items: baseline;
            font-size: var(--fs-body-sm);
            line-height: var(--lh-relaxed);
        }

            .table-of-content li::before {
                content: attr(data-number) ".";
                width: 28px;
                text-align: right;
                margin-right: var(--space-2);
                flex-shrink: 0;
            }

    .table-of-content-title {
        white-space: nowrap;
    }

    .table-of-content-dots {
        flex: 1;
        border-bottom: var(--border-thin) dotted var(--border-strong);
        margin: 0 var(--space-2) var(--space-2);
    }

    .chapter-line {
        display: flex;
        align-items: baseline;
        font-weight: var(--fw-bold);
        font-size: var(--fs-body-sm);
    }

        .chapter-line .dots {
            flex: 1;
            border-bottom: var(--border-thin) dotted var(--border-strong);
            margin: 0 var(--space-2) var(--space-2);
        }

    .fee-table {
        border-collapse: collapse;
        width: 100%;
        max-width: 700px;
        margin-top: var(--space-5);
        font-size: var(--fs-body-sm);
    }

        .fee-table th,
        .fee-table td {
            border: var(--border-thin) solid var(--border-subtle);
            padding: var(--space-3) var(--space-4);
            text-align: left;
            vertical-align: top;
        }

        .fee-table th {
            font-weight: var(--fw-bold);
            background-color: var(--surface-card);
        }
}

@media (max-width: 767px) {
    .terms-of-conditions-body {
        overflow-wrap: anywhere;

        .page {
            margin: var(--space-4) 0;
            padding: 0 0 var(--space-8);
        }

        .header {
            margin-bottom: var(--space-5);
        }

        h1 {
            padding-right: 0;
            font-size: var(--fs-h3);
        }

        .table-of-content-title {
            white-space: normal;
            min-width: 0;
        }

        .table-of-content-dots,
        .chapter-line .dots {
            min-width: var(--space-4);
        }

        .fee-table th,
        .fee-table td {
            padding: var(--space-2) var(--space-3);
        }
    }
}

.hidden-important {
    display: none !important;
}

.file-upload-remove {
    background-color: var(--warn);
}

/* itsme is a third-party brand: these two are its brand orange, not DDEL tokens — don't swap them for --ddel-orange. */
.its-me-button {
    --itsme-orange: #FB5524;
    --itsme-orange-hover: #D8410F;
    background-color: var(--itsme-orange);
    color: var(--ddel-white);
}

    .its-me-button:hover {
        background-color: var(--itsme-orange-hover);
    }

.card-gradient-bg {
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--border-subtle);
    background: linear-gradient(324deg, var(--surface-sunken) 5.27%, var(--surface-card) 60.08%);
}

    .card-gradient-bg .mud-table,
    .card-gradient-bg .mud-table td,
    .card-gradient-bg .mud-table th {
        border: none;
        background: transparent;
    }

        .card-gradient-bg .mud-table th,
        .card-gradient-bg .mud-table td {
            padding-top: var(--space-3);
            padding-bottom: var(--space-3);
        }

        .card-gradient-bg .mud-table tr:not(:first-child) td {
            border-top: var(--border-thin) solid var(--border-subtle);
        }

.mud-chart path:hover {
    filter: none !important;
    opacity: 1 !important;
}

.mud-charts-tooltip rect {
    fill: var(--surface-dark) !important;
    stroke: var(--surface-dark) !important;
}

.mud-charts-tooltip polygon {
    display: none !important;
}

.mud-charts-tooltip text {
    fill: var(--text-on-dark) !important;
}

.no-row-lines td {
    border-bottom: none !important;
}

/* Firefox treats MudChart's min-height: fit-content as auto, so the inline 300px height clips the legend. */
.mud-chart-legend-pie {
    height: auto !important;
}

/* A percentage height resolves differently per browser (Firefox draws the ring over the label).
   min-width: 0 lets max-width shrink it on a narrow tile. */
.portfolio-donut {
    min-width: 0;
    max-width: 100%;
}

    .portfolio-donut svg {
        max-width: 100%;
        height: auto;
    }

.portfolio-heading {
    color: var(--text-strong);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: normal;
}

.portfolio-title {
    color: var(--text-strong);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-regular);
    line-height: normal;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.portfolio-value {
    color: var(--text-muted);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: normal;
    letter-spacing: var(--ls-tight);
    white-space: nowrap;
}

.portfolio-detail-value {
    color: var(--text-muted);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: normal;
    letter-spacing: var(--ls-tight);
}

.portfolio-text-link {
    color: var(--text-link);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: normal;
    text-decoration-line: underline;
    text-transform: lowercase !important;
}

.portfolio-title-light {
    color: var(--text-disabled) !important;
    font-size: var(--fs-body-sm);
    line-height: normal;
}

.portfolio-description {
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
    font-style: italic;
    font-weight: var(--fw-regular);
    line-height: var(--space-5);
}

.narrow-arrow-cell {
    width: 1%;
    padding-left: var(--space-2);
    padding-right: 0;
}

.narrow-arrow-btn {
    color: var(--text-disabled);
    min-width: 24px;
    padding: 0;
    margin-right: var(--space-5);
}

.portfolio-period-label {
    color: var(--text-muted);
    text-align: end;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: normal;
}

.portfolio-period-select .mud-input-slot {
    text-decoration: underline;
    text-align: right;
}

.portfolio-period-select .mud-input-underline:before,
.portfolio-period-select .mud-input-underline:after,
.portfolio-period-select .mud-input-outlined-border {
    display: none;
}

.portfolio-period-select .mud-select-input {
    color: var(--text-link);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: normal;
    text-decoration-line: underline;
    text-transform: lowercase !important;
}

.portfolio-period-popover .mud-list-item-text,
.portfolio-period-popover .mud-list-item-text p,
.portfolio-period-popover .mud-typography {
    font-size: var(--fs-body-sm) !important;
}

.see-by-period-divider {
    border-bottom: 2px solid var(--text-strong);
}

.totals-row {
    border-bottom: none;
}

.title-col {
    width: 240px;
}

.value-col {
    width: 120px;
    text-align: right;
}

/* The summed fixed column widths overflow a phone dialog, so proportions apply below 600px. */
@media (max-width: 600px) {
    .see-by-period-table .title-col {
        width: auto;
    }

    .see-by-period-table .value-col {
        width: 30%;
    }

    /* Outranks MudBlazor's .mud-table-dense * .mud-table-row .mud-table-cell (0-3-0), which sets
       the logical paddings as well. */
    .see-by-period-table.mud-table-dense .mud-table-row .mud-table-cell {
        padding-inline: var(--space-2);
    }
}

.unselected-row td {
    color: var(--text-disabled) !important;
}

.account-detail-card {
    height: 235px;
}

.border-color-green {
    border: var(--border-med) solid var(--ddel-green);
}

.portfolio-account-detail-value {
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
}

.equal-height-grid {
    align-items: stretch;
}

    .equal-height-grid .equal-height-item {
        display: flex;
    }

        .equal-height-grid .equal-height-item > * {
            width: 100%;
            height: 100%;
        }

.portfolio-skeleton-container {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.portfolio-skeleton-circle {
    height: 48%;
    width: min(70%, 280px);
    aspect-ratio: 1 / 1;
}

.portfolio-skeleton-title {
    width: clamp(110px, 36%, 200px);
}

.portfolio-skeleton-value {
    width: clamp(80px, 26%, 140px);
}

.portfolio-account-table-hover .mud-table-row:hover {
    cursor: pointer;
}

.portfolio-empty-state-card {
    position: relative;
    min-height: 280px;
    height: 100%;
    padding: var(--space-9) var(--space-10);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.portfolio-empty-state-arrow {
    position: absolute;
    left: var(--space-7);
    top: 50%;
    transform: translateY(-80%);
    width: 120px;
    pointer-events: none;
}

.portfolio-empty-state-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8rem;
    max-width: 540px;
    height: 100%;
}

.portfolio-empty-state-label {
    color: var(--gain-text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.portfolio-empty-state-title {
    color: var(--text-strong);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.deadline-text {
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
    color: var(--text-muted);
}

.empty-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-chart-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: var(--surface-sunken);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

.interaction-type-container {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.interaction-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: var(--border-med) solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    cursor: pointer;
    font-size: var(--fs-body-sm);
    width: 110px;
    color: inherit;
    transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
/* Cyan is a decorative accent, sanctioned for exactly one control: "Resend invite". */
.ddel-btn-accent.mud-button-filled {
    background-color: var(--ddel-cyan);
    color: var(--text-on-dark);
}

    .ddel-btn-accent.mud-button-filled:hover {
        background-color: var(--ddel-cyan-text);
    }

/* NewInteractionModal.jsx renders the type icon at size 26. */
.interaction-button .mud-icon-root {
    font-size: 26px;
    width: 26px;
    height: 26px;
}

.interaction-button:hover {
    border-color: var(--ddel-grey-500);
    background: var(--surface-canvas);
}

.interaction-button--selected {
    border-color: var(--ddel-green);
    background: var(--gain-surface);
    font-weight: var(--fw-semibold);
}

.customer-overview-icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: var(--surface-sunken);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
}

/* One task being created on an interaction. Several of them stacked read as one long form, so
   every task after the first is separated by a rule. */
.ddel-interaction-task + .ddel-interaction-task {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-thin) solid var(--border-subtle);
}

/* Author and timestamp of one interaction, with its delete button: both hold the right edge of the
   card, on a phone as well as next to the remark on a desktop. */
.ddel-interaction-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.compliance-note-icon {
    width: 40px;
    height: 40px;
    background-color: var(--surface-sunken);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    color: var(--ddel-anthracite);
}

.notification-content {
    position: relative;
    width: 100%;
}

.notification-item {
    padding: var(--space-4) var(--space-6);
    min-width: 380px;
    transition: background-color 200ms ease;
}

    .notification-item .mud-avatar {
        width: 40px;
        height: 40px;
    }

    .notification-item .mud-menu-item-text {
        width: 100%;
    }

    .notification-item.unread {
        background: var(--surface-sunken);
        border-left: 4px solid var(--ddel-green);
    }

.notification-dot {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}

.notifications-close {
    display: none;
}

/* Full screen on mobile: the !important overrides beat the inline top/left and max-height
   MudBlazor positions the popover with. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .notifications-popover {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        /* MudBlazor clips the popover and scrolls the inner list, which inherits this max-height;
           "none" would leave the list unbounded and unscrollable. */
        max-height: 100dvh !important;
        border-radius: 0;
    }

    /* A short list neither fills the popover nor overflows, so a swipe on it chains to the page
       behind: the list rubber-bands, then the page scrolls. The list fills the popover and contains
       its own overscroll, and the page is locked while the popover is open. */
    .notifications-popover .mud-menu-list {
        height: 100%;
        overscroll-behavior: contain;
    }

    html:has(.notifications-popover.mud-popover-open),
    html:has(.notifications-popover.mud-popover-open) body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .notifications-close {
        display: inline-flex;
    }

        .notifications-popover .notification-item {
            min-width: 0;
            padding: var(--space-3) var(--space-4);
        }
}

.empty-portfolio-state {
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    min-height: 280px;
    display: flex;
    align-items: center;
    padding: var(--space-10) var(--space-12);
    gap: 80px;
}

.empty-portfolio-illustration {
    flex: 0 0 260px;
    opacity: 0.65;
}

@media (max-width: 900px) {
    .empty-portfolio-state {
        flex-direction: column;
        text-align: center;
        gap: var(--space-8);
        padding: var(--space-8);
    }

    .empty-portfolio-illustration {
        flex: none;
    }

    .portfolio-empty-state-content {
        margin-left: 0;
    }
}

.ddel-signing-confirmed-card {
    width: 50%;
}

@media (max-width: 767px) {
    .ddel-signing-confirmed-card {
        width: 100%;
    }
}

.interaction-overview-icon-wrapper {
    width: 40px;
    height: 40px;
    background-color: var(--surface-sunken);
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
}

.btn-dashed-border {
    width: 100%;
    border: 2px dotted var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-4) !important;
    justify-content: center !important;
    text-transform: none !important;
}

.info-banner {
    background: var(--info-surface);
    border-left: var(--space-2) solid var(--info);
    color: var(--text-strong);
    border-radius: var(--radius-md);
}

/* The wizard's risk-band cards ship their palette in a <style> block inside the localized resource
   HTML; a later resource block's .card-art6 (one class, same specificity) was overriding the
   .level-N fills, leaving white text on grey. Two classes here always outrank both. */
.risk-item.level-1 {
    background-color: #B3DDEE;
}

.risk-item.level-2 {
    background-color: #40AED7;
}

.risk-item.level-3 {
    background-color: #008AB9;
}

.risk-item.level-4 {
    background-color: #006790;
}

.risk-item.level-5 {
    background-color: #004965;
}

/* An icon dropped inside a chip's content renders at its 24px default and pokes out of the
   20-32px chip pill. */
.mud-chip .mud-chip-content .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* A chip in a squeezed flex column collapses to its padding and lets its content spill
   past the pill (compliance score chips). The form-footer scenario chips carry a sentence
   and must keep wrapping instead. */
.mud-chip {
    min-width: max-content;
}

.ddel-form-footer .mud-chip {
    min-width: 0;
}

.ddel-summary-text {
    max-width: 75%;
}

/* A checkbox with its detail field beside it (compliance AML checks). The checkbox keeps a fixed
   column so the fields line up and the field takes the rest of the row; when the row is too narrow
   for both the field wraps under the label instead of squeezing until its error text breaks per word. */
.ddel-check-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-4);
    width: 100%;
}

.ddel-check-field-toggle {
    flex: 0 0 300px;
    max-width: 100%;
}

.ddel-check-field-input {
    flex: 1 1 240px;
    min-width: 0;
}

/* A checkbox with the button or chip that belongs to it (compliance documents, MiFID checks):
   kept on one line so it is clear which download goes with which check, instead of the buttons
   stacking in a column of their own under all the checkboxes on a phone. */
.ddel-check-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
}

    .ddel-check-action > .ddel-check-action-toggle {
        flex: 0 1 300px;
        min-width: 0;
    }

    .ddel-check-action > .ddel-check-action-extra {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: var(--space-2);
    }

    /* The placeholder and info icons are bare MudIconButtons, padded 12px on every side, next to
       34px action buttons and chips carrying their own 4px margin: each started at a different x.
       One 34px footprint and no chip margin keep the column aligned on both edges. */
    .ddel-check-action-extra .mud-icon-button:not(.ddel-action) {
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .ddel-check-action-extra .mud-chip {
        margin: 0;
    }

.ddel-wizard-nav {
    display: flex;
    justify-content: flex-end;
}

/* Upload rows: file identity left, actions right; on a phone the actions drop under the name
   instead of squeezing it to one character per line. */
.ddel-upload-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.ddel-upload-row-file {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.ddel-upload-row-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ddel-mobile-only {
    display: none;
}

/* The status filter above the beheerderstaken card: squeezed between the title and the add button
   it truncated to "Filt…" on a phone; a floor plus wrap-to-own-line keeps the label readable. */
.ddel-status-filter {
    min-width: 160px;
}

/* The three pricing-update actions (NAV's ophalen, fondsdocumenten, uploaden naar Xantus): equal
   columns side by side, stacked full width on a phone where three columns broke every label per word
   and the split upload button pushed the page into horizontal scroll. */
.ddel-tool-actions {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

    .ddel-tool-actions > * {
        display: flex;
        flex: 1 1 0%;
        min-width: 0;
    }

@media (max-width: 600px) {
    .ddel-status-filter {
        flex-basis: 100%;
    }

    .ddel-tool-actions {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .ddel-mobile-only {
        display: flex;
    }

    /* Dialogs keep MudBlazor's floating margins on a phone, which costs ~10% of an already narrow
     screen (nieuwe interactie, taak bewerken). The wizard dialog has its own full-bleed block. */
    .mud-dialog:not(.ddel-wizard-dialog) {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        margin: var(--space-2);
    }

    /* MudBlazor's overflow-y: auto makes overflow-x auto too, so a pixel of stray width lets iOS pan
       the dialog sideways; wide content (tables) scrolls in its own container instead. */
    .mud-dialog:not(.ddel-wizard-dialog) .mud-dialog-content {
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .ddel-setting-row-chevron {
        display: none;
    }

    .ddel-wizard-nav {
        justify-content: center;
    }

    .ddel-summary-text {
        max-width: 100%;
    }

    /* On a phone the field always goes under its checkbox, indented to line up with the label. */
    .ddel-check-field-toggle {
        flex-basis: 100%;
    }

    .ddel-check-field-input {
        margin-left: 44px;
    }

    .ddel-check-action {
        justify-content: space-between;
    }

    .ddel-upload-row {
        flex-wrap: wrap;
    }

    .ddel-upload-row-actions {
        margin-left: auto;
    }

    /* The matrix questions (financiële ervaring, ESG) are wider than any phone; scrolling the table
     inside its own container keeps every option column reachable. */
    .wizard-table .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    /* The localized wizard HTML hardcodes mud-xs-table, whose stacked phone mode hides the header
     row and flexes each cell label/value — meaningless for these matrices and info tables (no
     data-labels): the option headers vanished and values floated loose. Restore real table
     rendering; the container scrolls horizontally instead (see the 767px block). */
    .wizard-table.mud-xs-table .mud-table-root .mud-table-head .mud-table-row {
        display: table-row;
    }

    .wizard-table.mud-xs-table .mud-table-cell {
        display: table-cell;
    }

        .wizard-table.mud-xs-table .mud-table-cell::before {
            content: none;
        }

    /* Label-boven-waarde for the xs=4/xs=8 label pairs in detail cards (rekening, eigenaren,
     vertegenwoordigers): side by side the unbreakable Dutch labels overlap their values. */
    .ddel-card-body .mud-grid > .mud-grid-item.mud-grid-item-xs-4,
    .ddel-card-body .mud-grid > .mud-grid-item.mud-grid-item-xs-8 {
        flex-basis: 100%;
        max-width: 100%;
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .ddel-card-body .mud-typography,
    .ddel-detail-block .mud-typography {
        overflow-wrap: anywhere;
    }

    .ddel-account-row-name {
        flex-basis: 100%;
        order: -1;
    }

    .customer-overview-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    /* The opened action-cluster menu of the last card was clipped by the row's own overflow and
     unreachable; visible overflow lets the page grow and scroll instead. */
    .ddel-grid .mud-table-container {
        overflow: visible;
    }

    .ddel-grid .mud-table-body .mud-table-row {
        overflow: visible;
    }

    /* Air between a card's last labelled row and its action icons (documents download), and one
     baseline for whatever mix of plain icons and filled buttons the row carries. */
    .ddel-grid .mud-table-body td:not([data-label]) {
        padding-top: var(--space-3);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-3);
    }

    /* The no-records and loading rows span the card; left-flush against the card edge they read
     as a defect rather than a message. MudDataGrid renders them as th.mud-table-empty-row. */
    .ddel-grid .mud-table-body .mud-table-empty-row,
    .ddel-grid .mud-table-body td[colspan] {
        display: block;
        width: 100% !important;
        justify-content: center;
        text-align: center;
        color: var(--text-muted);
        padding: var(--space-5);
    }

        .ddel-grid .mud-table-body .mud-table-empty-row b {
            font-weight: var(--fw-regular);
        }

    /* Stacked tiles hug their content; the desktop equal-height floor just leaves a phone card
     two-thirds empty. */
    .ddel-tile--compact {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    /* The toolbar wraps on a phone, dropping the action cluster to its own line; anchored left it
     looks stranded — every other action in the app hangs on the right edge. !important because
     call sites carry MudBlazor's ml-2 utility, which is itself !important. */
    .ddel-grid .mud-table-toolbar .ddel-action-cluster {
        margin-left: auto !important;
    }
}

.message-date {
    color: #9e9e9e;
}

.message-customer-name {
    color: #9e9e9e;
}

.message-body {
    color: #8a8a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-item {
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .message-item:hover {
        background-color: #f5f5f5;
    }

    .message-item.selected {
        background-color: #f3faf4;
        border-left: 3px solid var(--mud-palette-success);
        border-radius: 12px;
    }

.message-thread-account {
    color: #8a8a8a;
}

.thread-messages {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-sizing: border-box;
}

.message-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.outgoing .message-content {
    align-items: stretch;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 6px;
    font-size: 12px;
    color: #999;
}

    .message-meta span:first-child {
        font-weight: 600;
        color: #555;
    }

.outgoing .message-meta {
    align-self: flex-end;
    width: fit-content;
    justify-content: flex-end;
    align-items: flex-end
}

.message-bubble {
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.incoming-bubble {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top-left-radius: 4px;
    color: #333;
    width:70%;
}

.outgoing-bubble {
    background: #55aa42;
    color: #fff;
    border-top-right-radius: 4px;
    align-self: flex-end;
    width: 70%;
}

.messages-overview {
    border-right: 1px solid #e0e0e0;
    padding-right: 16px;
    margin-right: -12px;
    box-sizing: border-box;
    overflow-y: auto;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.messages-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.thread-header {
    flex-shrink: 0;
    border-bottom: 1px solid #e0e0e0;
}

.thread-container {
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.reply-box {
    flex-shrink: 0;
    margin: 0 14px 14px;
    padding: 12px;
    border: 1px solid #e3e6eb;
    border-radius: 14px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.reply-input {
    margin-bottom: 8px;
}

    .reply-input .mud-input-outlined-border {
        border: 0 !important;
    }

    .reply-input .mud-input {
        padding: 4px 2px;
    }

.reply-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 4px;
}

.reply-actions {
    margin-left: auto;
}

.attachment-button {
    border-color: #e3e6eb;
    text-transform: none;
    font-weight: 600;
    cursor: pointer;
}

.attachment-button:disabled {
    cursor: default;
}

.mud-file-upload {
    cursor: pointer;
}

.mud-file-upload input[type="file"]::file-selector-button,
.mud-file-upload input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}

/* Invisible native file input stretched over a drop zone so a click anywhere opens the picker. */
.ddel-file-input-overlay {
    opacity: 0;
    cursor: pointer;
}

.remove-attachments-button {
    color: #8a8f98;
}

.email-notification {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8a8f98;
}

.send-button {
    min-width: 128px;
    text-transform: none;
    font-weight: 600;
}

.ddel-file-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.message-row-admin {
    display: flex;
    width: 100%;
}

.customer-row-admin {
    justify-content: flex-start;
}

.manager-row-admin {
    justify-content: flex-end;
}

.message-bubble-admin {
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    width: 70%;
}

    .message-bubble-admin .mud-typography {
        margin: 0;
        line-height: 1.4;
    }

.customer-bubble-admin {
    background-color: white;
    border: 1px solid #e0e0e0;
    align-self: flex-start;
}

.manager-bubble-admin {
    background-color: #18213b;
    color: white;
    align-self: flex-end;
}

.thread-action-cluster {
    background-color: #fafbfc;
    border: 1px solid #e0e0e0;
}

.messages-list-empty {
    border: 1px dashed #d5d9df;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

.messages-list-empty-title {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
}

.messages-list-empty-description {
    color: var(--text-muted);
}

.thread-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-4);
}

.thread-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background-color: #eaf6e8;
    color: var(--mud-palette-success);
    display: flex;
    align-items: center;
    justify-content: center;
}

.thread-empty-title {
    margin: 0;
}

.thread-empty-description {
    color: var(--text-muted);
    max-width: 480px;
}

.thread-empty-actions {
    margin-top: var(--space-2);
}

    .thread-empty-actions .mud-button-root {
        text-transform: none;
        font-weight: 600;
    }

.thread-empty-quick-topic-button {
    text-transform: none;
    color: var(--text-muted);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-pill);
}

.messages-overview {
    width: 30%;
    flex-shrink: 0;
}

.thread-container {
    width: 70%;
    flex: 1;
    min-width: 0;
}

.thread-back-button {
    display: none;
}

.thread-header-mobile-bar {
    display: none;
}

.thread-close-icon-button {
    display: none;
}

/* Subject/account sat side by side on desktop (ml-4 / mr-4 gave them breathing room from the
   dialog edge), but stacked full-width on a phone that left Subject nudged right and Account
   nudged left instead of both flush with the dialog padding. */
@media (min-width: 901px) {
    .message-subject-field {
        margin-left: var(--space-4);
        margin-right: 0;
    }

    .message-account-field {
        margin-right: var(--space-4);
        margin-left: 0;
    }
}

/* --- Messages: manager/customer overview + thread on a phone -------------------------- */
@media (max-width: 900px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    /* The card's own 20px body padding, stacked on top of the thread's own padding, left the
       message bubbles squeezed into a sliver of the screen on a phone. */
    .ddel-card-body:has(> .messages-page-stack) {
        padding: var(--space-3);
    }

    .messages-page-stack {
        flex-direction: column !important;
    }

    .messages-overview,
    .thread-container {
        width: 100% !important;
        height: auto;
    }

    .messages-overview {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        max-height: 60vh;
    }

    /* height:auto + max-height alone isn't enough here: .thread-messages is a flex child with
       the browser default min-height:auto, so it refuses to shrink below its content size and
       the extra messages overflow past the card's own overflow:hidden instead of scrolling.
       min-height:0 lets it actually shrink and scroll within the capped height. overflow:auto
       (not hidden) is a safety net: if the header/reply box ever don't leave enough room for
       .thread-messages' own min-height on a short phone, the whole panel scrolls instead of
       silently clipping the reply box off the bottom. */
    .thread-container {
        max-height: 85vh;
        min-height: 0;
        overflow: auto;
    }

    /* Only one of the two panels is relevant at a time on a phone: the list until a
       conversation is picked, then the thread, switched back to with the back arrow. */
    .messages-page-stack.has-selection .messages-overview {
        display: none;
    }

    .messages-page-stack:not(.has-selection) .thread-container {
        display: none;
    }

    .thread-back-button {
        display: inline-flex;
    }

    /* On a phone the back arrow and the close action share a top bar of their own; "Close
       conversation" shrinks to an icon so it doesn't compete with the subject for space. */
    .thread-header-mobile-bar {
        display: flex;
    }

    .thread-close-icon-button {
        display: inline-flex;
    }

    /* MudBlazor's own ".mud-chip.mud-chip-size-medium" rule fixes height at 32px, which
       out-specifies a single-class override, so this needs the "mud-chip" pairing (or
       !important on height) to actually let the pill grow for the wrapped text. */
    .mud-chip.thread-closed-chip-mobile {
        max-width: calc(100% - var(--space-4));
        min-width: 0;
        height: auto;
        min-height: 32px;
        white-space: normal;
    }

        .thread-closed-chip-mobile .mud-chip-content {
            overflow-wrap: break-word;
            white-space: normal;
            line-height: 1.3;
            padding-block: 4px;
            height: fit-content;
        }

    .thread-header-row .close-conversation-button {
        display: none;
    }

    .thread-header-row {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    .thread-header-row .thread-header-title {
        flex: 1 1 100%;
        min-width: 0;
    }

    .thread-header-row .mud-spacer {
        display: none;
    }

    /* The header, the "start a task" row and the reply box are all fixed-size siblings that
       don't shrink; on a phone they alone can eat almost the whole capped height above,
       squeezing the actual message bubbles down to a sliver. Force a floor so a couple of
       bubbles are always visible instead of scrolling to nothing. */
    .thread-messages {
        padding: var(--space-4) var(--space-3);
        min-height: 150px;
    }

    .incoming-bubble,
    .outgoing-bubble,
    .message-bubble-admin {
        width: 90%;
    }

    .reply-box-footer {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    /* The send button keeps its desktop spot in the right-hand corner; margin-left: auto (from
       the base rule) holds it there even when the footer wraps. */
    .email-notification {
        display: none;
    }

    .send-button {
        min-width: 0;
    }
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .thread-header .mud-typography-h3,
    .messages-overview .mud-typography-h3 {
        font-size: 1.25rem;
    }
}

/* --- Messages on a phone: a chat app, not a card ----------------------------------------
   The card chrome goes and the panel runs edge to edge. The list becomes flat rows split by
   hairlines; an open conversation takes the whole screen under the top bar, with the bubbles
   sized to their text and the reply box docked at the bottom like a composer. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .ddel-card:has(.messages-page-stack) {
        margin: 0 calc(-1 * var(--container-pad)) !important;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--surface-card);
    }

    .ddel-card-body:has(> .messages-page-stack) {
        padding: 0;
    }

    .messages-overview {
        max-height: none;
        padding: var(--space-5) var(--container-pad) 0;
    }

    .messages-list {
        overflow: visible;
        padding-right: 0;
    }

    .message-item,
    .message-item.selected {
        margin: 0 calc(-1 * var(--container-pad));
        padding: var(--space-4) var(--container-pad);
        border-radius: 0;
        border-left: 0;
        border-bottom: var(--border-thin) solid var(--border-subtle);
    }

    /* An open conversation owns the screen: the page padding and the filter bar step aside. */
    .ddel-content:has(.messages-page-stack.has-selection) {
        padding-top: 0;
        padding-bottom: 0;
    }

    .ddel-content:has(.messages-page-stack.has-selection) .messages-filter-bar {
        display: none;
    }

    /* Only the bubbles scroll; the thread header and the reply box stay put. flex:none because
       the base flex:1 (basis 0%) resolves to the content size inside the column stack, whose
       height is indefinite, so the height below was ignored and a short conversation left the
       reply box floating under the last bubble instead of docked at the bottom. */
    .thread-container {
        flex: none;
        height: calc(100dvh - 72px);
        max-height: none;
        overflow: hidden;
    }

    .thread-header {
        padding-top: var(--space-3);
        background: var(--surface-card);
    }

    .thread-messages {
        min-height: 0;
        padding: var(--space-4) var(--space-4);
        gap: var(--space-4);
    }

    .thread-messages .ddel-adviser-avatar.mud-avatar {
        width: 32px;
        height: 32px;
    }

    .incoming-bubble,
    .outgoing-bubble,
    .message-bubble-admin {
        width: fit-content;
        max-width: 85%;
        padding: var(--space-3) var(--space-4);
        border-radius: 16px;
    }

    .incoming-bubble {
        align-self: flex-start;
        border-top-left-radius: 4px;
    }

    .outgoing-bubble {
        border-top-right-radius: 4px;
    }

    .customer-bubble-admin {
        border-top-left-radius: 4px;
    }

    .manager-bubble-admin {
        border-top-right-radius: 4px;
    }

    .reply-box {
        margin: 0;
        padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
        border: 0;
        border-top: var(--border-thin) solid var(--border-subtle);
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    /* On desktop the negative margin tightens the grid gutter between the avatar and its
       column; on a phone-width row it instead overlaps the avatar and text. Used by the
       overview cards on the customer page (messages, interactions, admin tasks, compliance
       notes, open tasks) that lead each row with an icon avatar. */
    /* The avatar column hugs the avatar and the column after it takes the rest. Margins on the
       percentage columns used to push the row past 100%, so the avatar wrapped onto a line of
       its own and the status chip and actions fell below the task. */
    .overview-card-avatar.mud-grid-item {
        flex: 0 0 auto;
        max-width: none;
    }

        .overview-card-avatar.mud-grid-item + .mud-grid-item {
            flex: 1 1 0;
            max-width: none;
            min-width: 0;
            margin-left: 0 !important;
        }

    /* A long account name (Gezamelijke zichtrekening …) ran its chip past the card edge. */
    .overview-card-content .mud-chip {
        min-width: 0;
        max-width: 100%;
    }

        /* Block, not MudBlazor's inline-flex: an ellipsis needs the text in a block box. */
        .overview-card-content .mud-chip .mud-chip-content {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
}

/* --- Portfolio on a phone -------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The desktop card height clipped the strategic-allocation value once every label/value pair
     wrapped to two lines. */
  .account-detail-card {
    height: auto;
  }

  /* "Gegevens per …" sat above the Overzicht title: MudCardHeader centres the title but pins its
     actions slot to the top (align-self: flex-start, margin-top: -8px). Share one baseline, with
     a gap; where the line is too short for both, the date wraps under the title, right-aligned.
     The vertical utility margins go (mb-n8 would pull a wrapped date over the title); the header
     padding takes over their spacing. */
  .account-detail-card > .mud-card-header {
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    padding-top: var(--space-9);
    padding-bottom: 0;
  }

  .account-detail-card > .mud-card-header .mud-card-header-content {
    flex: 0 1 auto;
    min-width: 0;
  }

  .account-detail-card > .mud-card-header .mud-card-header-actions {
    align-self: baseline;
    margin: 0 0 0 auto;
    min-width: 0;
  }

  .account-detail-card > .mud-card-header .portfolio-heading,
  .account-detail-card > .mud-card-header .portfolio-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Caption size keeps date and stale-data icon beside the title on a 375px phone. */
  .account-detail-card > .mud-card-header .portfolio-title {
    font-size: var(--fs-caption);
  }

  /* Rekeningnummer/waardering and every label/value pair sat side by side; the Dutch labels are
     unbreakable and overprinted their values. */
  .account-detail-header .portfolio-heading {
    margin-top: var(--space-6) !important;
  }

  .portfolio-detail-row {
    flex-direction: column;
    gap: 0;
  }

  .portfolio-account-detail-value {
    margin-left: var(--space-4);
  }

  /* MudTable's stacked phone mode drops the header row, and these figure tables carry no data
     labels: the column headings vanished and the values floated loose under a right-aligned row
     title. They are narrow enough to stay real tables that scroll horizontally instead
     (Breakpoint.None in PortfolioTable.razor). */
  .portfolio-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Scroll shadows: the right-hand edge only darkens while columns remain out of view, so a
       year column cut mid-figure reads as "swipe here" instead of as a rendering fault. */
    background:
      linear-gradient(to right, var(--surface-card) 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface-card) 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(25, 34, 61, 0.12), rgba(25, 34, 61, 0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(25, 34, 61, 0.12), rgba(25, 34, 61, 0)) right center / 10px 100% no-repeat scroll;
  }

  /* The pie charts carry a fixed 300px canvas, wider than the card on a 320px phone. */
  .mud-chart-legend-pie {
    max-width: 100%;
  }

  .mud-chart-legend-pie svg {
    max-width: 100%;
    height: auto;
  }

  .portfolio-table .mud-table-cell {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Smaller figures keep the three-column tables (samenstelling, rendement) inside the card;
     only the five-year evolution table still needs the swipe. */
  .portfolio-table .portfolio-title,
  .portfolio-table .portfolio-title-light,
  .portfolio-table .portfolio-value {
    font-size: var(--fs-caption);
  }

  .portfolio-table .narrow-arrow-btn {
    margin-right: 0;
  }

  .portfolio-detail-grid {
    margin: 0;
    width: 100%;
  }

  .portfolio-detail-grid > .mud-grid-item {
    padding: var(--space-2);
  }

  .portfolio-detail-grid .portfolio-title,
  .portfolio-detail-grid .portfolio-detail-value {
    font-size: var(--fs-caption);
  }

  .portfolio-detail-grid .portfolio-title.ml-4 {
    margin-left: var(--space-3) !important;
  }

  .portfolio-detail-grid .portfolio-detail-value.mr-5 {
    margin-right: var(--space-3) !important;
  }

  /* The dotted arrow is absolutely placed against a desktop-width card; on a phone it landed on
     top of the label it points at. Let it lead the copy instead. */
  .portfolio-empty-state-card {
    display: block;
    min-height: 0;
    height: auto;
    padding: var(--space-6);
  }

  .portfolio-empty-state-content {
    height: auto;
    max-width: 100%;
  }

  .portfolio-empty-state-arrow {
    position: static;
    transform: none;
    width: 72px;
    margin-bottom: var(--space-2);
  }

  .portfolio-empty-state-arrow svg {
    width: 100%;
    height: auto;
  }

  /* The period picker sat on top of the chart title in the header row. */
  .portfolio-line-chart-header {
    flex-direction: column;
    align-items: stretch;
  }

  .portfolio-line-chart-header .mud-card-header-actions {
    align-self: flex-end;
  }

  .portfolio-line-chart-header .portfolio-period-label {
    margin-top: var(--space-4) !important;
  }

  .portfolio-line-chart-header .portfolio-period-select {
    margin-top: var(--space-2) !important;
  }
}

/* The five performance donuts sat on inline 20% widths, which left five slivers on a phone.
   Two per row below md, the desktop five-across above it. */
.portfolio-donut-row > .mud-grid-item {
  flex-basis: 50%;
  max-width: 50%;
}

@media (min-width: 960px) {
  .portfolio-donut-row > .mud-grid-item {
    flex-basis: 20%;
    max-width: 20%;
  }
}

/* A definite width, not fit-content: WebKit sizes a fit-content flex column from its children's
   max-content, so the chips' max-width: 100% never clamps and a long file name widens the dialog
   on iOS until it pans in every direction. */
.attached-files-row {
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
}

.file-name-chip {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto !important;
    padding: 4px 8px;
}

    .file-name-chip .mud-chip-content {
        min-width: 0;
        overflow: hidden;
    }

    /* MudText caption renders an inline span, which ignores text-overflow. */
    .file-name-chip .attachment-name {
        display: block;
        min-width: 0;
    }

    .file-name-chip .mud-chip-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .file-name-chip .mud-chip-close-button {
        width: 20px;
        height: 18px;
        padding: 2px;
        flex-shrink: 0;
    }

        .file-name-chip .mud-chip-close-button .mud-icon-root {
            width: 20px;
            height: 14px;
            font-size: 14px;
        }

/* --- Message thread: attachment count badge + attachment cards ------------------------ */
.attachment-count-badge {
    color: #8a8f98;
}

    .attachment-count-badge .mud-icon-root {
        font-size: 14px;
    }

.message-attachments {
    margin-top: 8px;
    width: 70%;
}

.message-row-admin.customer-row-admin .message-attachments,
.incoming .message-attachments {
    align-self: flex-start;
}

.message-row-admin.manager-row-admin .message-attachments,
.outgoing .message-attachments {
    align-self: flex-end;
}

.attachments-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.attachment-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.attachment-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.attachment-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2430;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-meta {
    font-size: 12px;
    color: #8a8f98;
}

.attachment-download-btn {
    flex-shrink: 0;
}

.ddel-wizard-stepper {
    width: 100%;
}

    .ddel-wizard-stepper .mud-step-label {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

/* ---- Documents overview (back office) — docs/superpowers/specs/2026-10-06-document-management-design.md §3, §8 ---- */

/* Category tints, shared by the tiles, type chips and file badges: a hue of the categorical chart palette per category,
   as a light tint behind text darkened towards navy for contrast. No status colour, so no category reads as an error,
   a gain or a warning. */
.ddel-cat--All { background: var(--surface-sunken); color: var(--text-strong); }
.ddel-cat--Identification { --ddel-cat-hue: var(--chart-1); }
.ddel-cat--AmlKyc { --ddel-cat-hue: var(--chart-7); }
.ddel-cat--Agreements { --ddel-cat-hue: var(--chart-4); }
.ddel-cat--Reporting { --ddel-cat-hue: var(--chart-6); }
.ddel-cat--Correspondence { --ddel-cat-hue: var(--chart-8); }
.ddel-cat--Identification,
.ddel-cat--AmlKyc,
.ddel-cat--Agreements,
.ddel-cat--Reporting,
.ddel-cat--Correspondence {
    background: color-mix(in srgb, var(--ddel-cat-hue) 14%, var(--surface-card));
    color: color-mix(in srgb, var(--ddel-cat-hue) 55%, var(--ddel-navy));
}
.ddel-cat--Other { background: var(--neutral-surface); color: var(--text-muted); }

.ddel-cell-right { text-align: right; }

.ddel-doc-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.ddel-doc-tile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1 1 150px;
    max-width: 200px;
    min-width: 0;
    padding: var(--space-4);
    background: var(--surface-card);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .ddel-doc-tile:hover { border-color: var(--border-strong); }

    .ddel-doc-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ddel-doc-tile--active {
    background: var(--surface-dark);
    border-color: var(--surface-dark);
    color: var(--text-on-dark);
}

.ddel-doc-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

.ddel-doc-tile--active .ddel-doc-tile-icon { background: var(--surface-dark-alt); color: var(--text-on-dark); }

.ddel-doc-tile-text { display: flex; flex-direction: column; min-width: 0; }
.ddel-doc-tile-count { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.1; }
.ddel-doc-tile-label { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ddel-doc-filters {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr));
    gap: var(--space-4);
    align-items: center;
}

.ddel-doc-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
}

.ddel-doc-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ddel-doc-toggle-label { font-size: var(--fs-caption); color: var(--text-muted); }
.ddel-doc-count { margin-left: auto; font-size: var(--fs-caption); color: var(--text-muted); }

.ddel-doc-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--info-surface);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ddel-doc-row--selected > td.mud-table-cell { background: var(--gain-surface); }

.ddel-doc-cell { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }

.ddel-file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
}

.ddel-doc-label {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-strong);
    font: inherit;
    font-weight: var(--fw-semibold);
    text-align: left;
    cursor: pointer;
}

    .ddel-doc-label:hover, .ddel-doc-label:focus-visible { color: var(--text-link); text-decoration: underline; }

.ddel-doc-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

.ddel-doc-blob { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ddel-doc-marker {
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--ddel-cyan-surface);
    color: var(--ddel-cyan-text);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    white-space: nowrap;
}

.ddel-doc-marker--plain { background: var(--surface-sunken); color: var(--text-muted); text-transform: none; }

.ddel-doc-uploaded { display: flex; flex-direction: column; min-width: 0; }
.ddel-doc-uploader { max-width: 200px; font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* MudDataGrid closes every group with an empty row; on a phone it would show as an empty card. */
.ddel-doc-manager .mud-table-body .mud-table-row:empty { display: none; }

.ddel-doc-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ddel-doc-group-line { font-size: var(--fs-caption); color: var(--text-muted); }
.ddel-doc-hidden { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--warn-text); }

.ddel-tag-list, .ddel-tag-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.ddel-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 1px var(--space-4);
    border: var(--border-thin) solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-body);
    font: inherit;
    font-size: var(--fs-micro);
    white-space: nowrap;
}

button.ddel-tag-chip { cursor: pointer; }

.ddel-tag-chip--on { background: var(--surface-dark); border-color: var(--surface-dark); color: var(--text-on-dark); }

/* Dialogs: rows of fields that wrap, the visibility switch and the read-only facts in a sunken well. */
.ddel-doc-dialog-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); }

.ddel-doc-switch, .ddel-doc-facts {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.ddel-doc-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.ddel-doc-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    font-size: var(--fs-caption);
}

    .ddel-doc-facts dt { color: var(--text-muted); }
    .ddel-doc-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.ddel-doc-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    text-align: center;
}

.ddel-doc-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-thin) solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ddel-doc-upload-head { display: flex; align-items: center; gap: var(--space-4); }

/* The preview: the browser's own viewer on a dark well, the document's facts above, the limits below. */
.ddel-viewer-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); outline: none; }
.ddel-viewer-title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.ddel-viewer-details, .ddel-viewer-position { font-size: var(--fs-caption); color: var(--text-muted); }

.ddel-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-5);
    background: var(--ddel-grey-700);
    outline: none;
}

.ddel-viewer-frame { width: 100%; height: 72vh; border: 0; background: var(--surface-card); }
.ddel-viewer-image { max-width: 100%; max-height: 72vh; background: var(--surface-card); }

.ddel-viewer-sheet, .ddel-viewer-text {
    width: 100%;
    max-height: 72vh;
    overflow: auto;
    padding: var(--space-5);
    background: var(--surface-card);
}

    .ddel-viewer-sheet table { border-collapse: collapse; font-size: var(--fs-caption); }
    .ddel-viewer-sheet td { padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--border-subtle); white-space: nowrap; }

.ddel-viewer-sheet-name { margin: var(--space-4) 0 var(--space-2); font-weight: var(--fw-semibold); }
.ddel-viewer-text { margin: 0; white-space: pre-wrap; font-size: var(--fs-body-sm); }
.ddel-viewer-note { font-size: var(--fs-caption); color: var(--text-muted); }

.ddel-viewer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 360px;
    color: var(--text-on-dark);
    text-align: center;
}

.ddel-viewer-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-micro);
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .ddel-doc-count { margin-left: 0; flex-basis: 100%; }
    .ddel-doc-tile { flex: 1 1 calc(50% - var(--space-3)); max-width: none; padding: var(--space-3); }
    .ddel-viewer-newtab { order: -1; }

    /* Inside the customer page's own card, a second frame costs the document cards 21px a side. */
    .ddel-card .ddel-card.ddel-doc-manager { border: none; box-shadow: none; }
    .ddel-card .ddel-doc-manager > .ddel-card-header,
    .ddel-card .ddel-doc-manager > .ddel-card-body { padding-inline: 0; }
}

/* The manager lays itself out on its own width, not the screen's: the customer tab and an account panel give it
   different room, and the table needs about 1080px (the label with its blob name, the type chip, the tags, the
   date, the switch and four actions) before it stops scrolling sideways. */
.ddel-doc-manager > .ddel-card-body { container: doc-manager / inline-size; }

@container doc-manager (max-width: 719px) {
    .ddel-doc-filters { grid-template-columns: 1fr 1fr; }
    .ddel-doc-search { grid-column: 1 / -1; }
}

@container doc-manager (max-width: 479px) {
    .ddel-doc-filters { grid-template-columns: 1fr; }
}

@container doc-manager (max-width: 1079px) {
    /* One card per document (design §3) wherever the table does not fit. The grid only stacks itself below a
       600px screen, and below 768px the fixed table layout of the generic grid rules shares the width among the
       1000 columns a group row spans, a pixel each. So here the table stops being a table: no header, a group
       as a band, a document as a card. */
    .ddel-doc-manager .ddel-grid .mud-table-root { display: block; }
    .ddel-doc-manager .ddel-grid .mud-table-head { display: none; }

    .ddel-doc-manager .ddel-grid .mud-table-body {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding-block: var(--space-3);
        border-top: none;
    }

        .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .mud-datagrid-group) {
            display: block;
            padding: 0;
            border: none;
            box-shadow: none;
        }

            .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .mud-datagrid-group):not(:first-child) { margin-top: var(--space-3); }

        .ddel-doc-manager .ddel-grid .mud-table-body .mud-datagrid-group {
            display: block;
            width: 100% !important;
            padding: var(--space-2) var(--space-3);
            border: none;
            border-radius: var(--radius-md);
        }

        /* The checkbox in a gutter on the left; the label with the actions beside it, then type and tags, then the
           date and the switch. The two pseudo-elements are the line breaks between the three. */
        .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 0 var(--space-3);
            padding: var(--space-4) var(--space-3) var(--space-4) 52px;
            border: var(--border-thin) solid var(--border-subtle);
            border-radius: var(--radius-lg);
            box-shadow: var(--elev-1);
            overflow: visible;
        }

            .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main)::before,
            .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main)::after {
                content: "";
                flex-basis: 100%;
                height: 0;
            }

            .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main)::before { order: 3; }
            .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main)::after { order: 6; }

            .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .mud-table-cell {
                display: block;
                width: auto !important;
                min-width: 0;
                padding: 0;
                border: none;
                background: transparent;
                text-align: left !important;
            }

                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .mud-table-cell::before { content: none; }
                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .mud-table-cell:empty { display: none; }

                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .mud-table-cell:first-child:not(.ddel-doc-cell-main) {
                    position: absolute;
                    top: calc(var(--space-4) - 3px);
                    left: var(--space-1);
                }

                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .ddel-doc-cell-main { order: 1; flex: 1 1 0; }
                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .ddel-doc-cell-actions { order: 2; margin: calc(-1 * var(--space-2)) 0 0; }
                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .ddel-doc-cell-type { order: 4; margin-top: var(--space-3); }
                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .ddel-doc-cell-tags { order: 5; margin-top: var(--space-3); }
                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .ddel-doc-cell-uploaded { order: 7; margin-top: var(--space-3); }
                .ddel-doc-manager .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) > .ddel-doc-cell-visible { order: 8; align-self: center; margin: var(--space-3) 0 0 auto; }

        /* On a card the selection colours the card, not each value. */
        .ddel-doc-manager .ddel-grid .mud-table-body .ddel-doc-row--selected { background: var(--gain-surface); }

        /* To look at only: no checkbox, so no gutter for it. */
        .ddel-doc-manager--read-only .ddel-grid .mud-table-body .mud-table-row:has(> .ddel-doc-cell-main) { padding-left: var(--space-4); }
}

/* ---- Xantus comparison (back office) — docs/superpowers/specs/2026-10-06-document-management-design.md §7 ---- */
.ddel-compare-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-4); margin-bottom: var(--space-3); }
.ddel-compare-scroll { overflow-x: auto; }
.ddel-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-body-sm); }
.ddel-compare th, .ddel-compare td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: var(--border-thin) solid var(--border-subtle); }
.ddel-compare thead th { color: var(--text-muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); white-space: nowrap; }
.ddel-compare td:nth-child(2), .ddel-compare td:nth-child(3) { word-break: break-word; }
.ddel-compare-group th { background: var(--surface-sunken); color: var(--text-strong); font-weight: var(--fw-semibold); }
.ddel-compare-row--passthrough td { color: var(--text-muted); }
.ddel-compare-action { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-micro); }
.ddel-compare-status--Equal { background: var(--gain-surface); color: var(--gain-text); }
.ddel-compare-status--Differs { background: var(--warn-surface); color: var(--warn-text); }
.ddel-compare-status--OnlyPortal, .ddel-compare-status--OnlyXantus { background: var(--info-surface); color: var(--info); }
.ddel-compare-json { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ddel-compare-json pre { margin: 0; padding: var(--space-3); overflow-x: auto; border: var(--border-thin) solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--fs-micro); line-height: 1.4; }
.ddel-compare-json pre span { display: block; white-space: pre; }
.ddel-compare-json--diff { background: var(--warn-surface); }
.ddel-compare-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); width: 100%; }
.ddel-compare-action-button { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); max-width: 320px; }
.ddel-compare-action-button span { color: var(--text-muted); font-size: var(--fs-micro); text-align: right; }

@media (max-width: 600px) {
    .ddel-compare-json { grid-template-columns: 1fr; }
    .ddel-compare-action-button { align-items: stretch; max-width: none; flex: 1 1 100%; }
    .ddel-compare-action-button span { text-align: left; }
}