/* One type system for the whole app — matches MudTheme.Typography so Mud
   components and raw HTML (login, error pages) render in the same font.
   Inter when it loads, Segoe UI / system as the native Windows fallback. */
html, body {
    font-family: "Inter", "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "ss01";  /* Inter's cleaner letterforms (no-op on fallback) */
}

/* Motion tokens — strong custom curves (the built-in CSS easings are too weak). */
:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* crisp UI entrances & hover lifts */
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement */
}

/* Tactile press feedback on every action button (subtle, fast). */
.mud-button-root {
    transition: transform 120ms var(--ease-out);
}
.mud-button-root:active {
    transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
    .mud-button-root { transition: none; }
    .mud-button-root:active { transform: none; }
}

a, .btn-link {
    color: var(--mud-palette-primary, #1b6ec2);
}

/* Blazor form validation (harmless if unused) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ---- Shared layout / typography tokens ---- */

/* Single width source for the attendee detail surfaces (was a magic number
   duplicated inline on every card/panel). */
.detail-shell {
    max-width: 1600px;
}

/* Label/value pair — small muted label above a normal-weight value. */
.tpni-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tpni-field-label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tpni-field-value {
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

/* Centered empty / initial state (Search + the shared EmptyState component). */
.search-empty,
.tpni-empty {
    text-align: center;
    padding: 56px 16px;
    color: var(--mud-palette-text-secondary);
}

/* Home module cards: a quiet hover lift to hint they're interactive.
   Gated so a touch tap doesn't trigger a sticky hover. */
.module-card {
    transition: transform 150ms var(--ease-out), box-shadow 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .module-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--mud-elevation-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .module-card {
        transition: box-shadow 150ms ease;
    }
    .module-card:hover {
        transform: none;
    }
}

/* Section header inside dialogs: label that never wraps + a rule filling the row. */
.section-label {
    display: flex;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 8px;
}
.section-label-text {
    white-space: nowrap;
    flex-shrink: 0;       /* don't let the rule squeeze the label into a vertical stack */
}
.section-label-rule {
    flex: 1 1 auto;
    margin-left: 12px;
}

/* Editor dialogs: keep MudGrid gutters from producing a stray horizontal scrollbar. */
.tpni-editor-dialog .mud-dialog-content {
    overflow-x: hidden;
}

/* Email "Design" contenteditable + "Preview" surface. */
.tpni-rte,
.tpni-preview {
    min-height: 320px;
    max-height: 460px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 12px 14px;
    background: var(--mud-palette-surface);
}
.tpni-rte:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}
.tpni-rte img, .tpni-preview img { max-width: 100%; }

/* Monospace input for code/HTML bodies. */
.tpni-mono .mud-input-slot,
.tpni-mono textarea {
    font-family: "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
    font-size: 0.85rem;
}

/* Reg Type editor: scrollable question / product assignment lists. */
.assign-list {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px 8px;
}
.assign-list .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* Standard page-header band — every non-Home route uses SetupPageHeader, which renders a manual
   breadcrumb (not MudBreadcrumbs — needed prominent styling we couldn't get from defaults).
   Background tint + left-border accent make the nav path read as a distinct "you are here"
   panel rather than getting lost as small grey text near the title. */
.tpni-page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 14px;
    margin-bottom: 14px;
    background: var(--mud-palette-background-grey, #f5f7fa);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: 13.5px;
}
.tpni-breadcrumb-link {
    color: var(--mud-palette-primary, #1b6ec2);
    text-decoration: none;
    font-weight: 500;
    transition: color 100ms var(--ease-out);
}
.tpni-breadcrumb-link:hover {
    color: var(--mud-palette-primary-darken, #145a99);
    text-decoration: underline;
}
.tpni-breadcrumb-sep {
    color: var(--mud-palette-text-secondary, rgba(0,0,0,0.6));
    font-weight: 400;
    margin: 0 2px;
}
.tpni-breadcrumb-current {
    font-weight: 700;
    color: var(--mud-palette-text-primary, rgba(0,0,0,0.87));
}
/* Title row sits right under the breadcrumb. Keep it compact so the breadcrumb still anchors the
   eye at the top of the page. */
.tpni-page-titlebar {
    min-height: 40px;
}

/* MudTabs active-state highlighting — the MudBlazor default slider bar alone wasn't loud enough
   to tell the user which tab they're on (especially on the User dialog where there's a colored
   toolbar background). The active tab becomes a solid white "pill" floating above the blue toolbar
   so it reads from across the room. Inactive tabs fade significantly to underline the contrast. */
.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}
.mud-tabs .mud-tab-slider {
    height: 5px !important;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
}

/* When the tab toolbar has a colored background (e.g. the User dialog uses Color.Primary on
   its outer MudTabs), the active tab takes a solid white pill with primary-blue text + icon so it
   pops off the blue band. Inactive tabs get a real white-with-alpha look (not bleached) and a
   bright underline accent on hover. */
.mud-tabs-toolbar .mud-tab.mud-tab-active {
    background-color: #ffffff !important;
    color: var(--mud-palette-primary, #1976d2) !important;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 0 0 #ffffff, 0 4px 12px -2px rgba(0,0,0,0.25);
    transform: translateY(-1px);
    z-index: 2;
}
.mud-tabs-toolbar .mud-tab.mud-tab-active .mud-icon-root,
.mud-tabs-toolbar .mud-tab.mud-tab-active .mud-tab-icon {
    color: var(--mud-palette-primary, #1976d2) !important;
}

.mud-tabs-toolbar .mud-tab:not(.mud-tab-active) {
    opacity: 0.55;
}
.mud-tabs-toolbar .mud-tab:not(.mud-tab-active):hover {
    opacity: 0.95;
    background-color: rgba(255,255,255,0.08);
}
@media (prefers-reduced-motion: reduce) {
    .mud-tabs-toolbar .mud-tab { transition: none; transform: none; }
    .tpni-breadcrumb-link { transition: none; }
}

/* User dialog → Client/Event Access sub-tabs — each multi-select list lives in a fixed-height
   scroll container so the dialog doesn't grow indefinitely when there are 100+ clients/events. */
.access-scroll {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.12));
    border-radius: 6px;
    padding: 4px;
}

/* HTML Pages folder tree — indented div rows so we get total control over rendering and don't
   depend on MudTreeView (which 9.5 rendered empty when bound to TreeItemData<string>). Each row is
   a single line: icon + name + file count chip; depth comes from inline padding-left. Hover gives
   a faint primary tint; selected row gets a stronger one + bolder text. */
.html-folder-tree {
    display: flex;
    flex-direction: column;
}
.html-folder-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 100ms var(--ease-out);
}
.html-folder-row:hover {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}
.html-folder-row--selected {
    background-color: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.10));
    font-weight: 600;
}
.html-folder-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.html-folder-count {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.06));
    border-radius: 10px;
    padding: 1px 8px;
    min-width: 24px;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .html-folder-row { transition: none; }
}

/* Master-detail pattern (Current Lists ↔ List details, future: HTML Pages list ↔ editor).
   Panels match height so the two cards read as one composed unit, and the names list inside
   the left panel is independently scrollable when it overflows. */
.customlist-panel {
    height: 100%;
    min-height: 480px;
}
.customlist-names {
    max-height: 60vh;
    overflow-y: auto;
}
/* Selected list-name row picks up a subtle primary tint so it's obvious which list the
   right panel is showing. (Mud's default selection style is a faint underline — too soft
   for this two-column reading.) */
.customlist-names .mud-selected-item {
    background-color: var(--mud-palette-primary-hover, rgba(25, 118, 210, 0.08));
}

/* Event MGMT landing: each group is its own elevated card with breathing room
   below — turns the landing into a chunkable hierarchy instead of a wall of
   uniform tiles. The shadow stays subtle (Material elevation-1 equivalent) so
   the cards inside the group remain the visual focus, not the container. */
.setup-group {
    background: var(--mud-palette-surface, #fff);
    border-radius: 10px;
    padding: 20px 20px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-bottom: 28px;
}
.setup-group:last-of-type {
    margin-bottom: 0;
}
.setup-group .section-label {
    margin-top: 0;     /* the group's own padding handles the top breathing room */
}

/* Event MGMT section cards. Enabled ones lift on hover + dip on press; disabled
   stay flat with only their text muted (the "Coming soon" chip stays legible). */
.setup-card {
    height: 100%;
    transition: transform 150ms var(--ease-out), box-shadow 150ms ease;
}
.setup-card--off .setup-card-text {
    opacity: 0.6;
}
/* Chevron that nudges right on hover to signal "go". */
.setup-card-go {
    transition: transform 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .setup-card--on:hover {
        transform: translateY(-2px);
        box-shadow: var(--mud-elevation-6);
    }
    .setup-card--on:hover .setup-card-go {
        transform: translateX(4px);
    }
}
.setup-card--on:active {
    transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
    .setup-card,
    .setup-card-go {
        transition: box-shadow 150ms ease;
    }
    .setup-card--on:hover,
    .setup-card--on:active,
    .setup-card--on:hover .setup-card-go {
        transform: none;
    }
}

/* Register Application "Current Menus" tree — indented div tree (MudTreeView 9.5 renders empty when
   data-bound, so we hand-roll it). Groups expand to reveal their options + a "New Menu Option" row. */
.tpni-menu-tree { font-size: 0.9rem; }
.tpni-menu-tree .tpni-tree-root {
    display: flex; align-items: center; font-weight: 600;
    padding: 4px 4px 6px; color: var(--mud-palette-text-primary, rgba(0,0,0,0.87));
}
.tpni-menu-tree .tpni-tree-group,
.tpni-menu-tree .tpni-tree-option {
    display: flex; align-items: center; cursor: pointer; border-radius: 6px;
    padding: 4px 6px; transition: background-color 120ms ease;
}
.tpni-menu-tree .tpni-tree-group { padding-left: 18px; }
.tpni-menu-tree .tpni-tree-option { padding-left: 48px; }
.tpni-menu-tree .tpni-tree-group:hover,
.tpni-menu-tree .tpni-tree-option:hover { background-color: var(--mud-palette-action-default-hover, rgba(0,0,0,0.04)); }
.tpni-menu-tree .tpni-tree-group.selected,
.tpni-menu-tree .tpni-tree-option.selected { background-color: var(--mud-palette-primary-hover); font-weight: 600; }
.tpni-menu-tree .tpni-tree-toggle { margin-right: 4px; color: var(--mud-palette-text-secondary, rgba(0,0,0,0.54)); }
.tpni-menu-tree .tpni-tree-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpni-menu-tree .tpni-tree-option .tpni-tree-label { color: var(--mud-palette-primary, #1976d2); }
.tpni-menu-tree .tpni-tree-add .tpni-tree-label { color: var(--mud-palette-success, #2e7d32); font-style: italic; }

/* ============================================================================
   TPNI Console visual system  (2026-06-05 refresh)
   A central layer that lifts every screen: brand tokens, cool layered depth,
   app-shell polish, a branded focus ring, and table / chip / button refinement.
   Built ON TOP of the MudTheme palette (MainLayout.razor) so the var(--mud-
   palette-*) usages elsewhere in this file track the brand automatically.
   See docs/DESIGN.md.
   ========================================================================== */
:root {
    /* Layered, cool-tinted depth (toward the palette ink, never flat grey/black). */
    --tpni-shadow-sm: 0 1px 2px rgba(24,30,60,0.06), 0 1px 3px rgba(24,30,60,0.05);
    --tpni-shadow-md: 0 2px 6px rgba(24,30,60,0.06), 0 8px 18px rgba(24,30,60,0.08);
    --tpni-shadow-lg: 0 12px 36px rgba(24,30,60,0.15), 0 4px 10px rgba(24,30,60,0.07);
    --tpni-ring: 0 0 0 3px rgba(46,85,212,0.30);
    --tpni-radius-card: 12px;
}

/* ---- Depth: replace MudBlazor's flat grey elevations with the cool stack ---- */
.mud-paper.mud-elevation-1 { box-shadow: var(--tpni-shadow-sm); }
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3 { box-shadow: var(--tpni-shadow-md); }
.mud-paper.mud-elevation-4,
.mud-paper.mud-elevation-6,
.mud-paper.mud-elevation-8 { box-shadow: var(--tpni-shadow-lg); }
/* Outlined surfaces (most of the app's panels) get a crisper hairline + soft lift. */
.mud-paper.mud-paper-outlined {
    border-color: var(--mud-palette-lines-default);
    box-shadow: var(--tpni-shadow-sm);
}
/* Slightly softer card corners read more modern than the default 4px. */
.mud-card, .mud-paper.mud-paper-outlined, .mud-table-container { border-radius: var(--tpni-radius-card); }

/* ---- App bar: a deep indigo -> brand gradient instead of one flat blue ---- */
.mud-appbar.mud-appbar-fixed-top,
.mud-appbar {
    background-image: linear-gradient(100deg, #1d2a66 0%, #243a9e 42%, #2e55d4 100%);
    box-shadow: 0 1px 0 rgba(24,30,60,0.10), 0 6px 18px -8px rgba(24,30,60,0.45);
}
.mud-appbar .mud-typography { letter-spacing: -0.01em; }

/* ---- Drawer / nav: cool panel + an active-item pill (no side stripe) ---- */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}
.mud-drawer .mud-navmenu .mud-nav-link {
    border-radius: 8px;
    margin: 1px 8px;
    transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.mud-drawer .mud-navmenu .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}
.mud-drawer .mud-navmenu .mud-nav-link.active,
.mud-drawer .mud-navmenu .mud-nav-link.mud-nav-link-active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    font-weight: 600;
}
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}
.mud-drawer-header .mud-typography {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* ---- Branded focus ring: replace the default browser outline app-wide ---- */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-input-control .mud-input-slot:focus-visible,
.mud-nav-link:focus-visible,
.tpni-tree-group:focus-visible,
.tpni-tree-option:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--tpni-ring);
    border-radius: 8px;
}

/* ---- Buttons: a touch more presence on filled primary ---- */
.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 1px 2px rgba(34,67,176,0.30), 0 2px 6px -1px rgba(34,67,176,0.28);
}
.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 2px 4px rgba(34,67,176,0.34), 0 6px 14px -2px rgba(34,67,176,0.34);
}

/* ---- Data grids / tables: quieter header, clearer hover + selection ---- */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-table-row:hover > .mud-table-cell,
.mud-data-grid .mud-table-row:hover > .mud-table-cell {
    background-color: var(--mud-palette-table-hover);
}

/* ---- Row action icons sit side by side (Edit then Delete), never stacked ----
   The grid's auto table-layout was shrinking the Actions column to a single button's
   min-content width, which forced the second icon to wrap onto a new line. nowrap keeps
   both icons on one line and lets the column size to fit. Markup order is Edit then Delete,
   so horizontal layout puts Delete on the right. Scoped to cells that actually contain an
   icon button (the action cells) so text columns still wrap normally. */
.mud-table-cell:has(.mud-icon-button) { white-space: nowrap; }

/* ---- Chips / status: a hair more saturation + weight so state reads fast ---- */
.mud-chip { font-weight: 600; letter-spacing: 0.01em; }

/* ---- Dialogs: softer corners + the elevated cool shadow ---- */
.mud-dialog { border-radius: 14px; box-shadow: var(--tpni-shadow-lg); }
.mud-dialog-title { font-weight: 650; letter-spacing: -0.01em; }

/* ---- Tab pill polish: track the new brand surface instead of pure white ---- */
.mud-tabs-toolbar .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-surface) !important;
    box-shadow: 0 -2px 0 0 var(--mud-palette-surface), 0 6px 16px -4px rgba(24,30,60,0.30);
}

/* ---- Setup-group cards: adopt the cool depth instead of the old grey shadow ---- */
.setup-group { box-shadow: var(--tpni-shadow-sm); }

/* ---- Page content gets a touch more horizontal breathing room on wide screens ---- */
@media (min-width: 1600px) {
    .mud-main-content > .mud-container,
    .mud-main-content { max-width: 1680px; }
}