/* ==========================================================================
   Administratie — look and feel
   Colours come from the MudBlazor theme (Layout/AppTheme.cs) through its CSS
   variables, so everything here follows light and dark mode automatically.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
    /* Black on white in the light theme, white on black in the dark one: the brand follows the theme. */
    --brand-a: var(--mud-palette-primary, #111111);
    --brand-b: color-mix(in srgb, var(--mud-palette-primary, #111111) 66%, var(--mud-palette-surface, #ffffff));
    --brand-c: color-mix(in srgb, var(--mud-palette-primary, #111111) 40%, var(--mud-palette-surface, #ffffff));
    --on-brand: var(--mud-palette-primary-text, #ffffff);
    --brand-gradient: linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 100%);
    --app-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -16px rgba(16, 24, 40, 0.18);
    --app-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 16px 32px -18px rgba(16, 24, 40, 0.28);
    --app-radius: 16px;
}

html, body {
    margin: 0;
    background: #eceef2;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "cv11", "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
}

.text-right { text-align: right; }
.text-good { color: var(--mud-palette-success); }
.text-bad { color: var(--mud-palette-error); }

/* --------------------------------------------------------------------------
   Shell: sidebar, top bar, page area
   -------------------------------------------------------------------------- */

.app-main {
    min-height: 100vh;
    background:
        radial-gradient(900px 420px at 12% -8%, rgba(0, 0, 0, 0.03), transparent 60%),
        var(--mud-palette-background);
}

.app-dark .app-main {
    background:
        radial-gradient(900px 420px at 12% -8%, rgba(255, 255, 255, 0.04), transparent 60%),
        var(--mud-palette-background);
}

.app-bar.mud-appbar {
    background: color-mix(in srgb, var(--mud-palette-background) 72%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.app-drawer.mud-drawer {
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.app-dark .app-drawer.mud-drawer {
    background: linear-gradient(185deg, #050505 0%, #0c0c0d 60%, #131315 100%);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 18px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.brand-mark-lg { width: 48px; height: 48px; border-radius: 14px; }

.brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-nav { padding: 4px 0 20px; }

.nav-section {
    padding: 18px 24px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.app-drawer .mud-nav-link {
    margin: 2px 12px;
    padding: 9px 12px;
    border-radius: 11px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.app-drawer .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-text-disabled); transition: color 0.15s ease; }
.app-drawer .mud-nav-link:hover { background: var(--mud-palette-table-hover); color: var(--mud-palette-text-primary); }
.app-drawer .mud-nav-link:hover .mud-nav-link-icon { color: var(--mud-palette-primary); }

/* MudBlazor colours the active link itself with a very specific selector; these must win. */
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text { color: #fff !important; }
.app-drawer .mud-nav-link .mud-nav-link-text { margin-left: 12px; }

.user-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.user-button:hover { border-color: var(--mud-palette-primary); }

.user-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Pages slide in softly when you navigate. */
.page-enter { animation: page-enter 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Surfaces, tables, inputs, buttons
   -------------------------------------------------------------------------- */

.app-shell .mud-paper.mud-elevation-1,
.app-shell .mud-paper.mud-elevation-2 {
    border-radius: var(--app-radius);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--app-shadow);
}

.app-dark .mud-paper.mud-elevation-1,
.app-dark .mud-paper.mud-elevation-2 {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}

.app-shell .mud-table-root .mud-table-head .mud-table-cell,
.app-shell .mud-simple-table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent;
}

.app-shell .mud-table-root .mud-table-body .mud-table-cell,
.app-shell .mud-simple-table tbody td { border-bottom-color: var(--mud-palette-table-lines); }

.app-shell .mud-table-root .mud-table-body .mud-table-row { transition: background 0.12s ease; }
.app-shell .mud-table-sort-label { font-weight: 600; }

.app-shell .mud-button-root.mud-button { border-radius: 11px; padding-inline: 16px; }
.app-shell .mud-button-root.mud-button-outlined { border-color: var(--mud-palette-lines-inputs); }
.app-shell .mud-button-root.mud-button-outlined:hover { border-color: var(--mud-palette-primary); }

.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--brand-gradient);
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary.mud-disabled,
.mud-button-root.mud-button-filled.mud-button-filled-primary:disabled {
    background: var(--mud-palette-action-disabled-background);
    box-shadow: none;
    transform: none;
}

.mud-chip { font-weight: 600; letter-spacing: 0; }
.mud-chip.mud-chip-size-small { border-radius: 8px; height: 24px; font-size: 0.74rem; }

.mud-dialog { border-radius: 18px !important; border: 1px solid var(--mud-palette-lines-default); }
.mud-dialog .mud-dialog-title { font-weight: 700; letter-spacing: -0.01em; }
.mud-overlay-dialog .mud-overlay-scrim, .mud-overlay .mud-overlay-scrim { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mud-snackbar { border-radius: 12px; }
.mud-popover.mud-popover-open { border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); }
.mud-tabs .mud-tab { text-transform: none; font-weight: 600; letter-spacing: 0; }
.mud-alert { border-radius: 12px; }

/* The lines editor of invoices and quotes. */
.lines-table td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
.lines-table td .mud-input-control { margin-top: 0; }

.template-editor textarea {
    font-family: "Cascadia Mono", Consolas, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: pre;
    overflow-x: auto;
}

.bank-row { padding: 14px 6px; border-bottom: 1px solid var(--mud-palette-table-lines); transition: background 0.12s ease; border-radius: 10px; }
.bank-row:hover { background: var(--mud-palette-table-hover); }
.bank-row:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   Start page
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding: 28px 30px;
    border-radius: 22px;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(120deg, #050505 0%, #18181b 52%, #3a3a40 100%);
    box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.6);
    isolation: isolate;
}

.hero::before, .hero::after { content: none; }

@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-40px, 30px, 0) scale(1.12); }
}

.hero-eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.hero-title { margin: 6px 0 2px; font-size: 2.1rem; font-weight: 750; letter-spacing: -0.035em; line-height: 1.1; }
.hero-sub { margin: 0; opacity: 0.85; font-size: 0.98rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero .hero-button.mud-button-root {
    background: #fff;
    color: #0a0a0a;
    box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.5);
}

.hero .hero-button.mud-button-root:hover { background: #f4f4f5; filter: none; }
.hero .hero-button-ghost.mud-button-root { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
.hero .hero-button-ghost.mud-button-root:hover { border-color: #fff; background: rgba(255, 255, 255, 0.16); }

.stat-card {
    position: relative;
    display: block;
    height: 100%;
    padding: 20px;
    border-radius: var(--app-radius);
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-shadow);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tone-soft), transparent 70%);
    opacity: 0.35;
    pointer-events: none;
}

.stat-card:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-hover); border-color: var(--tone); }

.stat-indigo, .tone-indigo { --tone: #0a0a0a; --tone-2: #3f3f46; --tone-soft: rgba(0, 0, 0, 0.1); }
.stat-teal, .tone-teal { --tone: #27272a; --tone-2: #5f5f66; --tone-soft: rgba(0, 0, 0, 0.08); }
.stat-amber, .tone-amber { --tone: #3f3f46; --tone-2: #71717a; --tone-soft: rgba(0, 0, 0, 0.08); }
.stat-rose, .tone-rose { --tone: #18181b; --tone-2: #52525b; --tone-soft: rgba(0, 0, 0, 0.1); }

.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.stat-icon, .todo-icon, .empty-icon {
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
}

.stat-icon { width: 42px; height: 42px; }
.stat-label { font-size: 0.8rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.stat-value { margin: 2px 0; font-size: 1.7rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.stat-hint { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }

.stat-badge {
    position: relative;
    z-index: 1;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(100, 116, 139, 0.14);
    color: var(--mud-palette-text-secondary);
}

.stat-badge-good { background: rgba(18, 161, 80, 0.14); color: var(--mud-palette-success); }
.stat-badge-bad { background: rgba(229, 72, 77, 0.14); color: var(--mud-palette-error); }

.todo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background 0.14s ease, transform 0.14s ease;
}

.todo:hover { background: var(--mud-palette-table-hover); transform: translateX(2px); }
.todo-icon { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.todo-text { flex: 1; font-size: 0.88rem; }

.empty { display: flex; align-items: center; gap: 12px; padding: 18px 4px; color: var(--mud-palette-text-secondary); }
.empty-icon { width: 38px; height: 38px; --tone: #12a150; --tone-2: #34d399; }

/* Charts */
.chart svg { display: block; width: 100%; height: 280px; }
.chart-legend { display: flex; gap: 18px; justify-content: flex-end; font-size: 0.78rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.chart-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.dot-a { background: linear-gradient(180deg, var(--brand-b), var(--brand-a)); }
.dot-b { background: linear-gradient(180deg, #c4c4cc, #8b8b93); }
.grad-a-top { stop-color: var(--brand-b); }
.grad-a-bottom { stop-color: var(--brand-a); }
.grad-b-top { stop-color: #c4c4cc; }
.grad-b-bottom { stop-color: #8b8b93; }
.chart-grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-axis { fill: var(--mud-palette-text-secondary); font-size: 11px; font-family: inherit; }

.chart-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: filter 0.15s ease;
}

.chart-bar:hover { filter: brightness(1.15) saturate(1.2); }

@keyframes bar-grow {
    from { transform: scaleY(0); opacity: 0.2; }
    to { transform: scaleY(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Sign-in stage
   -------------------------------------------------------------------------- */

.auth-stage {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background: linear-gradient(140deg, #000000 0%, #0e0e10 50%, #232327 100%);
}

.auth-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; pointer-events: none; }
.auth-glow-1 { width: 520px; height: 520px; left: -140px; top: -160px; background: #8b8b93; animation: drift 16s ease-in-out infinite alternate; }
.auth-glow-2 { width: 440px; height: 440px; right: -120px; bottom: -160px; background: #d4d4d8; opacity: 0.2; animation: drift 20s ease-in-out infinite alternate-reverse; }
.auth-glow-3 { width: 360px; height: 360px; right: 22%; top: 8%; background: #5f5f66; opacity: 0.15; animation: drift 24s ease-in-out infinite alternate; }

.auth-content { position: relative; z-index: 1; width: 100%; max-width: 420px; animation: page-enter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; color: #fff; }
.auth-brand-name { font-size: 1.6rem; font-weight: 750; letter-spacing: -0.03em; }

.auth-card {
    padding: 32px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75);
}

.app-dark .auth-card { border-color: rgba(255, 255, 255, 0.1); }

/* --------------------------------------------------------------------------
   Before Blazor has started (index.html)
   -------------------------------------------------------------------------- */

.boot {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #000000 0%, #0e0e10 50%, #232327 100%);
    color: #fff;
}

.boot-inner { display: grid; justify-items: center; gap: 18px; }
.boot-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.boot-track { width: 180px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }

.boot-bar {
    height: 100%;
    width: var(--blazor-load-percentage, 6%);
    border-radius: inherit;
    background: linear-gradient(90deg, #ffffff, #a1a1aa);
    transition: width 0.2s ease;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    color: #1f2937;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 600px) {
    .hero { padding: 22px 20px; }
    .hero-title { font-size: 1.7rem; }
    .stat-value { font-size: 1.45rem; }
}

/* ---------------------------------------------------------------------------------------------
   Template builder: side panel (blocks, block settings, style), the design and the A4 preview.
   --------------------------------------------------------------------------------------------- */
.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.builder {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.builder-side,
.builder-canvas {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    overflow: hidden;
}

.builder-tabs .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--mud-palette-lines-default); }
.builder-tabs .mud-tabs-tabbar-wrapper { width: 100%; }
.builder-tabs .mud-tooltip-root { flex: 1 1 0; }
.builder-tabs .mud-tab { width: 100%; min-width: 0; padding: 6px 8px; text-transform: none; font-weight: 600; letter-spacing: 0; }
.builder-tabs .mud-tab.mud-tab-active { color: var(--brand-a); }
.builder-side-body { padding: 16px; }

.builder-hint { color: var(--mud-palette-text-secondary); }

.builder-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.builder-badge,
.bb-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--brand-a);
    background: color-mix(in srgb, var(--brand-a) 12%, transparent);
}

.builder-checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; }
.builder-checks .mud-typography { font-size: 0.85rem; }

.builder-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-inputs);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.builder-swatch:hover { transform: scale(1.1); }
.builder-swatch.is-active { box-shadow: 0 0 0 2px var(--brand-a); }
.builder-swatch-custom {
    position: relative;
    overflow: hidden;
    background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #ec4899, #ef4444);
}
.builder-swatch-custom input { position: absolute; inset: -8px; width: 48px; height: 48px; opacity: 0; cursor: pointer; }

.builder-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 12px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* Palette of block types */
.builder-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-palette > .mud-drop-item { min-width: 0; }
.bp {
    display: grid;
    justify-items: center;
    gap: 6px;
    height: 100%;
    padding: 12px 6px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background);
    cursor: grab;
    user-select: none;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.bp .mud-icon-root { color: var(--brand-a); }
.bp:hover { border-color: var(--brand-a); transform: translateY(-1px); box-shadow: var(--app-shadow); }
.bp:focus-visible, .bb:focus-visible { outline: 2px solid var(--brand-a); outline-offset: 2px; }

/* The design: blocks in the order of the document, two columns for half-width blocks */
.builder-canvas-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 0;
}
.builder-sheet { padding: 12px 16px 16px; }
.builder-zone {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 120px;
    align-content: start;
}
.builder-zone > .builder-item { grid-column: span 2; min-width: 0; }
.builder-zone > .builder-item.is-half { grid-column: span 1; }
.builder-zone > .mud-drop-item-preview-start { grid-column: span 2; }

.bb {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 9px 10px 9px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background);
    cursor: grab;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.bb:hover { border-color: color-mix(in srgb, var(--brand-a) 55%, transparent); }
.bb.is-selected {
    border-color: var(--brand-a);
    background: color-mix(in srgb, var(--brand-a) 7%, var(--mud-palette-surface));
    box-shadow: 0 0 0 1px var(--brand-a);
}
.bb-grip { flex: none; color: var(--mud-palette-text-disabled); }
.bb-text { min-width: 0; flex: 1 1 auto; }
.bb-name { font-weight: 600; font-size: 0.88rem; line-height: 1.25; }
.bb-summary {
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-actions {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    transform: translateY(-50%);
    padding: 2px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}
.bb:hover .bb-actions, .bb:focus-within .bb-actions { opacity: 1; pointer-events: auto; }
.mud-drop-item.mud-drop-item-preview-start .bb, .builder-item[draggable="true"]:active .bb { cursor: grabbing; }

/* A4 preview, drawn at its real size and scaled to the column by administratie.fitPreview */
.preview-stage { position: sticky; top: 84px; }
.preview-fit {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 24px 48px -24px rgba(16, 24, 40, 0.35);
}
.preview-page {
    display: block;
    width: 794px;
    height: 1123px;
    border: 0;
    background: #fff;
    transform-origin: top left;
}

@media (max-width: 1500px) {
    .builder { grid-template-columns: 264px minmax(0, 1fr); }
}

@media (max-width: 1279px) {
    .builder-layout { grid-template-columns: minmax(0, 1fr); }
    .preview-stage { position: static; max-width: 640px; }
}

@media (max-width: 760px) {
    .builder { grid-template-columns: minmax(0, 1fr); }
}

/* Customer portal: the brand in the top bar */
.portal-brand { padding: 0; margin-right: 8px; }

/* ==========================================================================
   Premium layer: richer page headings, surfaces, tables, inputs and motion.
   It stands at the end on purpose, so it refines the rules above instead of
   rewriting them. Depth comes from colour, hairline gradients and movement,
   not from glows around elements.
   ========================================================================== */

.tone-violet, .stat-violet { --tone: #27272a; --tone-2: #5f5f66; --tone-soft: rgba(0, 0, 0, 0.08); }
.tone-slate, .stat-slate { --tone: #3f3f46; --tone-2: #71717a; --tone-soft: rgba(0, 0, 0, 0.08); }

::selection { background: color-mix(in srgb, var(--brand-a) 26%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent) transparent; }

/* A soft aurora behind every page instead of a flat grey. */
.app-main {
    background:
        radial-gradient(1100px 520px at -4% -12%, rgba(0, 0, 0, 0.055), transparent 62%),
        radial-gradient(900px 460px at 104% -6%, rgba(0, 0, 0, 0.03), transparent 60%),
        radial-gradient(1000px 620px at 62% 112%, rgba(0, 0, 0, 0.04), transparent 62%),
        var(--mud-palette-background);
    background-attachment: fixed;
}
.app-dark .app-main {
    background:
        radial-gradient(1100px 520px at -4% -12%, rgba(255, 255, 255, 0.07), transparent 62%),
        radial-gradient(900px 460px at 104% -6%, rgba(255, 255, 255, 0.035), transparent 60%),
        radial-gradient(1000px 620px at 62% 112%, rgba(255, 255, 255, 0.04), transparent 62%),
        var(--mud-palette-background);
    background-attachment: fixed;
}

/* The top bar ends in a coloured hairline. */
.app-bar.mud-appbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(113, 113, 122, 0.6) 30%, rgba(113, 113, 122, 0.6) 70%, transparent);
    pointer-events: none;
}

/* Page heading */
.page-heading { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page-heading-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--tone), var(--tone-2));
    box-shadow: 0 12px 22px -14px var(--tone), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    overflow: hidden;
    animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.page-heading-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 55%);
}
.page-heading-icon .mud-icon-root { position: relative; z-index: 1; font-size: 1.65rem; }
.page-heading-text { min-width: 0; }
.page-heading-title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
    background: linear-gradient(92deg, var(--mud-palette-text-primary) 35%, var(--brand-a) 135%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-heading-sub { margin: 3px 0 0; max-width: 78ch; font-size: 0.93rem; color: var(--mud-palette-text-secondary); }
.app-shell .mud-typography-h4 { font-weight: 800; letter-spacing: -0.03em; }
.app-shell .mud-typography-h6 { font-weight: 700; letter-spacing: -0.015em; }

/* Cards: a gradient hairline instead of a grey border, and a deeper, cooler shadow. */
.app-shell .mud-paper.mud-elevation-1,
.app-shell .mud-paper.mud-elevation-2,
.stat-card,
.builder-side,
.builder-canvas {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        linear-gradient(140deg, rgba(10, 10, 10, 0.4), rgba(161, 161, 170, 0.22) 32%, rgba(161, 161, 170, 0.16) 68%, rgba(10, 10, 10, 0.28)) border-box;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 22px 44px -28px rgba(0, 0, 0, 0.24);
}
.app-dark .mud-paper.mud-elevation-1,
.app-dark .mud-paper.mud-elevation-2,
.app-dark .stat-card,
.app-dark .builder-side,
.app-dark .builder-canvas {
    background:
        linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box,
        linear-gradient(140deg, rgba(255, 255, 255, 0.4), rgba(161, 161, 170, 0.14) 32%, rgba(161, 161, 170, 0.1) 68%, rgba(255, 255, 255, 0.26)) border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.85);
}
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tone), var(--tone-2));
}
.stat-card:hover { border-color: transparent; }

/* The hero gets light and texture. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(520px 220px at 88% -10%, rgba(255, 255, 255, 0.24), transparent 62%),
        radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px) 0 0 / 18px 18px;
    -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 95%);
    mask-image: linear-gradient(100deg, transparent 20%, #000 95%);
}

/* Tables: a tinted header band, more air, and a marker on the row under the pointer. */
.app-shell .mud-table-root .mud-table-head .mud-table-cell,
.app-shell .mud-simple-table thead th {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: none;
    background: color-mix(in srgb, var(--brand-a) 7%, var(--mud-palette-surface));
}
.app-shell .mud-table-root .mud-table-head .mud-table-cell:first-child,
.app-shell .mud-simple-table thead th:first-child { border-radius: 12px 0 0 12px; }
.app-shell .mud-table-root .mud-table-head .mud-table-cell:last-child,
.app-shell .mud-simple-table thead th:last-child { border-radius: 0 12px 12px 0; }
.app-shell .mud-table-root .mud-table-body .mud-table-cell { padding-top: 12px; padding-bottom: 12px; font-variant-numeric: tabular-nums; }
.app-shell .mud-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--brand-a) 7%, transparent);
}
.app-shell .mud-table.mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 var(--brand-a);
}
.app-shell .lines-table .mud-table-body .mud-table-cell { padding-top: 6px; padding-bottom: 6px; }

/* Status labels: a pill with a dot. */
.mud-chip.mud-chip-text.mud-chip-size-small { border-radius: 999px; padding-inline: 10px; }
.mud-chip.mud-chip-text.mud-chip-size-small .mud-chip-content::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Inputs: rounder, with a clear focus ring. */
.app-shell .mud-input.mud-input-outlined .mud-input-outlined-border,
.auth-stage .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.app-shell .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.auth-stage .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--brand-a);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-a) 16%, transparent);
}

/* The main button catches the light when you point at it. */
.mud-button-root.mud-button-filled.mud-button-filled-primary { position: relative; overflow: hidden; }
.mud-button-root.mud-button-filled.mud-button-filled-primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transition: left 0.55s ease;
    pointer-events: none;
}
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover::after { left: 125%; }
.mud-button-root.mud-button-filled.mud-button-filled-primary.mud-disabled::after { display: none; }

/* Navigation: icons in tiles, a nudge on hover. */
.brand-name {
    background: linear-gradient(92deg, var(--mud-palette-text-primary) 40%, var(--brand-b) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-brand-name { -webkit-text-fill-color: #fff; background: none; }
.app-drawer .mud-nav-link .mud-nav-link-icon {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}
.app-drawer .mud-nav-link:hover { transform: translateX(2px); }
.app-drawer .mud-nav-link:hover .mud-nav-link-icon { background: color-mix(in srgb, var(--brand-a) 14%, transparent); }
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { background: rgba(255, 255, 255, 0.2); }
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) { box-shadow: 0 10px 18px -14px var(--brand-a), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

/* Tabs and dialogs */
.app-shell .mud-tabs .mud-tab.mud-tab-active { color: var(--brand-a); }
.app-shell .mud-tabs .mud-tab-slider { height: 3px; border-radius: 3px; background: var(--brand-gradient); }
.mud-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-a) 8%, var(--mud-palette-surface)), var(--mud-palette-surface));
}
.mud-dialog .mud-dialog-content { padding-top: 18px; }

/* Movement: the parts of a page rise into place one after another. */
@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes pop {
    from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
    to { opacity: 1; transform: none; }
}
.page-enter > .mud-paper,
.page-enter > .mud-grid > .mud-grid-item,
.page-enter > form > .mud-grid > .mud-grid-item { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.page-enter > .mud-paper { animation-delay: 0.06s; }
.page-enter > .mud-grid > .mud-grid-item:nth-child(2),
.page-enter > form > .mud-grid > .mud-grid-item:nth-child(2) { animation-delay: 0.05s; }
.page-enter > .mud-grid > .mud-grid-item:nth-child(3) { animation-delay: 0.1s; }
.page-enter > .mud-grid > .mud-grid-item:nth-child(4) { animation-delay: 0.15s; }
.page-enter > .mud-grid > .mud-grid-item:nth-child(5) { animation-delay: 0.2s; }
.page-enter > .mud-grid > .mud-grid-item:nth-child(n + 6) { animation-delay: 0.25s; }

@media (max-width: 600px) {
    .page-heading-icon { width: 44px; height: 44px; border-radius: 14px; }
    .page-heading-title { font-size: 1.5rem; }
}

/* Helper text is quiet grey; the accent colour is for things you can act on. */
.app-shell .mud-typography.mud-secondary-text,
.auth-stage .mud-typography.mud-secondary-text { color: var(--mud-palette-text-secondary) !important; }

/* The sidebar keeps the light of the theme, with a hint of the brand colour at the top. */
.app-drawer.mud-drawer {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-a) 7%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 38%);
}

/* Key figures above a list. */
.metric-row { display: flex; flex-wrap: wrap; gap: 10px; }
.metric {
    display: grid;
    gap: 1px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--brand-a) 5%, var(--mud-palette-surface));
}
.metric-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.metric-value { font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-warn { border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent); background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface)); }
.metric-warn .metric-value { color: var(--mud-palette-warning-darken); }
.app-dark .metric-warn .metric-value { color: var(--mud-palette-warning); }

/* Builder: long names stay inside their tile. */
.bp { overflow-wrap: anywhere; hyphens: auto; min-width: 0; }
.bb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Builder: style presets, each drawn as a tiny document in its own colour. */
.builder-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.builder-preset {
    display: grid;
    gap: 6px;
    padding: 6px 6px 7px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.builder-preset:hover { transform: translateY(-2px); border-color: var(--preset); box-shadow: var(--app-shadow); }
.builder-preset.is-active { border-color: var(--preset); box-shadow: 0 0 0 2px color-mix(in srgb, var(--preset) 55%, transparent); }
.builder-preset-name { font-size: 0.72rem; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-preset-art {
    display: grid;
    gap: 3px;
    padding: 7px 6px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.builder-preset-art i { display: block; height: 3px; border-radius: 2px; background: #d1d5db; }
.builder-preset-art .art-title { width: 45%; height: 5px; margin-left: auto; background: var(--preset); }
.builder-preset-art .art-head { width: 55%; height: 4px; background: var(--preset); }
.builder-preset-art.art-head-bar .art-head { width: 100%; height: 6px; }
.builder-preset-art.art-head-underline .art-head { box-shadow: 0 3px 0 -1px #9ca3af; margin-bottom: 2px; }
.builder-preset-art .art-th { height: 5px; background: #e5e7eb; }
.builder-preset-art.art-table-accent .art-th { background: var(--preset); }
.builder-preset-art.art-table-lines .art-th { height: 2px; background: var(--preset); }
.builder-preset-art.art-table-minimal .art-th { background: transparent; }
.builder-preset-art .art-total { width: 40%; margin-left: auto; background: #6b7280; }
.builder-preset-art.art-total-box .art-total { height: 6px; background: var(--preset); }

/* --------------------------------------------------------------------------
   Black and white, like the logo. The brand colour is the theme's primary:
   black in the light theme, white in the dark one. Colour is kept for meaning
   only: paid, overdue, warnings.
   -------------------------------------------------------------------------- */
.brand-mark,
.user-avatar { color: var(--on-brand); }
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text { color: var(--on-brand) !important; }
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { background: color-mix(in srgb, var(--on-brand) 18%, transparent); }
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) { box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 color-mix(in srgb, var(--on-brand) 18%, transparent); }

/* The name of the application: the company on top, what it is below. */
.brand-name { display: grid; line-height: 1.12; background: none; -webkit-text-fill-color: currentColor; }
.brand-name-top { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.03em; }
.brand-name-sub { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.portal-brand .brand-name { color: var(--mud-palette-text-primary); }

/* Icon tiles are ink on paper; in the dark theme paper on ink. */
.stat-icon, .todo-icon, .page-heading-icon { color: var(--tone-ink, #fff); }
.app-dark .stat-indigo, .app-dark .tone-indigo, .app-dark .stat-rose, .app-dark .tone-rose { --tone: #ffffff; --tone-2: #c4c4cc; --tone-ink: #0a0a0a; --tone-soft: rgba(255, 255, 255, 0.1); }
.app-dark .stat-teal, .app-dark .tone-teal, .app-dark .stat-violet, .app-dark .tone-violet { --tone: #e4e4e7; --tone-2: #a1a1aa; --tone-ink: #0a0a0a; --tone-soft: rgba(255, 255, 255, 0.08); }
.app-dark .stat-amber, .app-dark .tone-amber, .app-dark .stat-slate, .app-dark .tone-slate { --tone: #d4d4d8; --tone-2: #8b8b93; --tone-ink: #0a0a0a; --tone-soft: rgba(255, 255, 255, 0.08); }
.empty-icon { --tone-ink: #fff; }
.page-heading-icon { box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.page-heading-title { background: linear-gradient(92deg, var(--mud-palette-text-primary) 45%, var(--brand-c) 140%); -webkit-background-clip: text; background-clip: text; }

/* The hero is black in both themes; in the dark one a hairline sets it apart from the page. */
.app-dark .hero { border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(120deg, #111113 0%, #1f1f23 52%, #3a3a40 100%); }

/* The sidebar: no colour wash, just paper. */
.app-drawer.mud-drawer { background: linear-gradient(180deg, color-mix(in srgb, var(--mud-palette-text-primary) 3.5%, var(--mud-palette-surface)) 0%, var(--mud-palette-surface) 38%); }

/* Builder refinements: presets fill their tile, and a half-width block spends its room on the name. */
.builder-preset { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.builder-zone > .builder-item.is-half .bb-icon { display: none; }

/* --------------------------------------------------------------------------
   Hours: dividing a day over projects and customers
   -------------------------------------------------------------------------- */
.split-row {
    display: grid;
    grid-template-columns: minmax(220px, 2.2fr) 92px minmax(180px, 2.4fr) 130px auto;
    gap: 8px;
    align-items: start;
    padding: 10px 0 2px;
    border-top: 1px dashed var(--mud-palette-lines-default);
}
.split-row:first-of-type { border-top: none; }
.split-cell { min-width: 0; }
.split-flags { display: flex; align-items: center; gap: 2px; padding-top: 2px; min-width: 76px; }

/* How much of the day has been divided. */
.split-meter { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.split-meter-bar { width: 140px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent); overflow: hidden; }
.split-meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); transition: width 0.25s ease; }
.split-meter.is-full { color: var(--mud-palette-success); }
.split-meter.is-full .split-meter-bar span { background: var(--mud-palette-success); }
.split-meter.is-over { color: var(--mud-palette-error); }
.split-meter.is-over .split-meter-bar span { background: var(--mud-palette-error); }

@media (max-width: 900px) {
    .split-row { grid-template-columns: minmax(0, 1fr) 92px; }
    .split-text { grid-column: 1 / -1; }
    .split-meter-bar { width: 90px; }
}

/* E-mail settings: the steps of the one-time app registration */
.steps { margin: 0 0 12px; padding-left: 20px; font-size: 0.9rem; line-height: 1.6; }
.steps li { margin-bottom: 4px; }
.copy-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.copy-row code { padding: 4px 8px; border-radius: 8px; background: var(--mud-palette-background-gray); font-size: 0.82rem; overflow-wrap: anywhere; }

/* ==========================================================================
   Alignment, contrast and touch. The last word on how things line up:
   - cards and tab panels are solid paper with a real edge, so nothing fades
     into the page behind it;
   - filter bars keep their fields together on the left, figures on the right;
   - the lines editor of invoices and quotes lines up as a grid;
   - on a phone everything stacks, and whatever you tap is big enough to hit.
   ========================================================================== */

/* Paper on a page: a clear edge and a soft shadow, the same everywhere. */
.app-shell .mud-paper.mud-elevation-1,
.app-shell .mud-paper.mud-elevation-2,
.app-shell .mud-tabs.mud-elevation-1,
.stat-card,
.builder-side,
.builder-canvas {
    border: 1px solid var(--app-edge);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px -18px rgba(15, 23, 42, 0.28);
}
.app-shell { --app-edge: #d7d9e0; }
.app-shell.app-dark { --app-edge: rgba(255, 255, 255, 0.14); }
.app-dark .mud-paper.mud-elevation-1,
.app-dark .mud-paper.mud-elevation-2,
.app-dark .mud-tabs.mud-elevation-1,
.app-dark .stat-card,
.app-dark .builder-side,
.app-dark .builder-canvas {
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

/* Tabs with content (reports): one card, the tab bar on top with a rule under it. */
.app-shell .mud-tabs.mud-elevation-1 { border-radius: var(--app-radius); overflow: hidden; }
.app-shell .mud-tabs.mud-elevation-1 > .mud-tabs-tabbar { border-radius: 0; border-bottom: 1px solid var(--mud-palette-lines-default); box-shadow: none; }
.app-shell .mud-tabs.mud-elevation-1 > .mud-tabs-panels { background: var(--mud-palette-surface); border-radius: 0; }

/* Inputs keep a visible outline on paper. */
.app-shell .mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--mud-palette-lines-inputs); }

/* Filter bar: fields side by side at their own width, then a spacer, then figures. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.filter-bar > * { margin-top: 0; margin-bottom: 0; }
.filter-bar > .mud-select,
.filter-bar > .mud-picker,
.filter-bar > .mud-input-control { flex: 0 1 auto; }
.filter-bar > .mud-select > .mud-input-control { width: 100vw; }   /* as wide as its own max-width allows */
.filter-bar > .mud-input-control { width: 320px; max-width: 100%; }
.filter-bar > .mud-input-control.mud-input-number-control { width: 130px; }
.filter-bar .metric-row { margin-left: auto; }

/* Lines of an invoice or quote */
.lines-table td.lines-amount { padding-top: 16px !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lines-table td.lines-delete { padding-top: 11px !important; padding-left: 0; padding-right: 8px; text-align: right; }
.lines-table .lines-num input { text-align: right; }
.lines-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 12px; }
.lines-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lines-actions .mud-menu { display: inline-flex; }
.lines-totals { margin-left: auto; min-width: 300px; }
.lines-totals.is-editable { margin-right: 48px; }   /* under the amounts, not under the delete buttons */
.lines-totals table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lines-totals td { padding: 7px 16px; border-top: 1px solid var(--mud-palette-table-lines); font-size: 0.9rem; }
.lines-totals tr:first-child td { border-top: none; }
.lines-totals td:last-child { text-align: right; white-space: nowrap; }
.lines-totals tr.lines-grand td { font-weight: 750; font-size: 1rem; border-top: 2px solid var(--mud-palette-text-primary); }

/* Header rows of pages: title on the left, buttons on the right, on one line that may wrap. */
.app-shell .page-enter > .d-flex.align-center,
.app-shell .page-enter > form > .d-flex.align-center { flex-wrap: wrap; row-gap: 8px; }

/* --- Phone and touch -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .app-shell .mud-container { padding-left: 12px; padding-right: 12px; }
    .app-shell .mud-paper.pa-4 { padding: 14px !important; }

    .page-heading { gap: 12px; }
    .page-heading-sub { font-size: 0.86rem; }

    /* Every filter on its own full line; figures below. */
    .filter-bar > .mud-select,
    .filter-bar > .mud-picker,
    .filter-bar > .mud-input-control,
    .filter-bar > .mud-input-control.mud-input-number-control { flex: 1 1 100%; width: 100%; max-width: none !important; }
    .app-shell .mud-simple-table:not(.lines-table) table * tr > th { padding-left: 6px; padding-right: 6px; font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
    .app-shell .mud-simple-table:not(.lines-table) table * tr > th:first-child { width: auto !important; }
    .app-shell .mud-simple-table:not(.lines-table) table * tr > td { padding-left: 6px; padding-right: 6px; font-size: 0.8rem; overflow-wrap: anywhere; }
    .filter-bar > .mud-input-control .mud-input { max-width: none !important; }
    .filter-bar > .mud-select > .mud-input-control { width: 100%; max-width: none !important; min-width: 0 !important; }
    .filter-bar > .flex-grow-1 { display: none; }
    .filter-bar .metric-row { margin-left: 0; width: 100%; }
    .metric-row .metric { flex: 1 1 0; }

    /* Buttons in a page header share the width instead of spilling over. */
    .app-shell .page-enter > .d-flex.align-center > .mud-button-root,
    .app-shell .page-enter > form > .d-flex.align-center > .mud-button-root { flex: 1 1 auto; }

    .lines-totals, .lines-totals.is-editable { margin: 0; width: 100%; min-width: 0; }
    .lines-actions { width: 100%; }
    .lines-actions > .mud-button-root, .lines-actions .mud-menu, .lines-actions .mud-menu .mud-button-root { flex: 1 1 auto; }

    .hero { padding: 20px 18px; }
    .hero-actions { width: 100%; }
    .hero-actions .mud-button-root { flex: 1 1 auto; }
}

/* A finger needs more room than a mouse pointer. */
@media (pointer: coarse) {
    /* The little up and down arrows of a number field are too small for a finger: type the number instead. */
    .app-shell .mud-input-numeric-spin { display: none !important; }
    .app-shell .mud-button-root.mud-button { min-height: 44px; }
    .app-shell .mud-icon-button { min-width: 44px; min-height: 44px; }
    .app-shell .mud-icon-button.mud-icon-button-size-small { min-width: 40px; min-height: 40px; }
    .app-drawer .mud-nav-link { padding-top: 12px; padding-bottom: 12px; }
    .app-shell .mud-table-root .mud-table-body .mud-table-cell { padding-top: 14px; padding-bottom: 14px; }
    .app-shell .mud-list-item { min-height: 44px; }
    .app-shell .mud-checkbox .mud-icon-button, .app-shell .mud-switch .mud-icon-button { min-width: 0; min-height: 0; }
    .mud-popover .mud-list-item { min-height: 46px; }
    .bb-actions { opacity: 1; pointer-events: auto; position: static; transform: none; margin-left: auto; box-shadow: none; }
}

/* Numbers line up on the right; MudBlazor's own table rule would otherwise win. */
.text-right { text-align: right !important; }
.mud-simple-table td.text-right { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* On a phone a line of an invoice is a small card instead of a row in a wide table. */
@media (max-width: 760px) {
    .app-shell .lines-table { min-width: 0 !important; }
    .app-shell .lines-table table, .app-shell .lines-table table tbody { display: block; width: 100%; }
    .app-shell .lines-table table thead { display: none; }
    .lines-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        padding: 14px 0;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }
    .lines-table tbody tr:last-child { border-bottom: none; }
    .app-shell .lines-table tbody td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
    .lines-table tbody td.lines-wide, .lines-table tbody td[colspan] { grid-column: 1 / -1; }
    .lines-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }
    .lines-table tbody td.lines-amount { font-weight: 700; font-size: 1.05rem; align-self: end; }
    .app-shell .lines-table tbody td.lines-delete { text-align: right !important; align-self: end; }
}

/* --------------------------------------------------------------------------
   Hours: the timer
   -------------------------------------------------------------------------- */
.timer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.timer-hint { font-size: 0.84rem; color: var(--mud-palette-text-secondary); }
.timer-row,
.timer-start {
    display: grid;
    grid-template-columns: auto minmax(180px, 1.4fr) auto minmax(180px, 1.6fr) auto;
    align-items: center;
    gap: 12px;
}
.timer-row {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-success) 7%, var(--mud-palette-surface));
}
.timer-start { grid-template-columns: minmax(200px, 1.4fr) minmax(180px, 1.6fr) auto; }
.timer-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mud-palette-success); animation: timer-pulse 1.4s ease-in-out infinite; }
@keyframes timer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 55%, transparent); }
    50% { box-shadow: 0 0 0 7px transparent; }
}
.timer-what { display: grid; min-width: 0; line-height: 1.3; }
.timer-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-what span { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.timer-clock { font-size: 1.55rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timer-note, .timer-target { min-width: 0; }
.timer-buttons { display: flex; align-items: center; gap: 4px; }
.time-range { font-size: 0.76rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

@media (max-width: 900px) {
    .timer-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .timer-row .timer-note, .timer-row .timer-buttons { grid-column: 1 / -1; }
    .timer-row .timer-buttons .mud-button-root { flex: 1 1 auto; }
    .timer-start { grid-template-columns: minmax(0, 1fr); }
    .timer-start > .mud-button-root { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   The owner's logo as the name plate. It is drawn in black with white fills,
   so it stands on a white plate: readable in the light and in the dark theme.
   -------------------------------------------------------------------------- */
.brand:has(.brand-logo) { flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px 16px 14px; }
.brand-logo {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--app-edge, rgba(0, 0, 0, 0.12));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.brand-logo img { display: block; height: 34px; width: auto; max-width: 100%; }
.brand-logo-sub { padding-left: 4px; }
.brand-logo-lg { padding: 12px 18px; border-radius: 16px; border-color: transparent; }
.brand-logo-lg img { height: 46px; }
.auth-brand:has(.brand-logo) { flex-direction: column; gap: 10px; }
.auth-brand .brand-logo-sub { padding-left: 0; color: rgba(255, 255, 255, 0.72); }
.portal-brand:has(.brand-logo) { flex-direction: row; align-items: center; gap: 10px; padding: 6px 0; }
.portal-brand .brand-logo { padding: 5px 9px; border-radius: 10px; }
.portal-brand .brand-logo img { height: 26px; }

/* --------------------------------------------------------------------------
   E-mail: the text as it is typed, and the message as it will be sent.
   -------------------------------------------------------------------------- */
.email-text-editor textarea { line-height: 1.55; }
.email-body-preview { max-height: 320px; overflow-y: auto; background: #fff; color: #222; }
.email-body-preview p { margin: 0 0 1em; }
.email-body-preview p:last-child { margin-bottom: 0; }

/* A line under a field that says where its value comes from. */
.field-hint { display: block; margin: 3px 0 0 4px; }

/* --------------------------------------------------------------------------
   The gallery of ready-made documents: each one drawn small, as a page.
   -------------------------------------------------------------------------- */
.design-gallery { display: grid; grid-template-columns: repeat(auto-fill, 242px); justify-content: center; gap: 18px; }
.design-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid var(--app-edge, var(--mud-palette-lines-default));
    border-radius: 16px;
    background: var(--mud-palette-surface);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.design-card:hover { transform: translateY(-3px); border-color: var(--mud-palette-text-primary); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45); }
.design-card.is-active { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); }
.design-thumb {
    position: relative;
    display: block;
    width: 220px;
    height: 311px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: #fff;
}
/* An A4 page (794 x 1123 px on screen) drawn at 220 px wide. The page itself cannot be clicked: the card is the button. */
.design-thumb iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: top left; transform: scale(0.2771); pointer-events: none; }
.design-name { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; }
.design-premium, .design-current { padding: 1px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.design-premium { color: #7a5200; background: linear-gradient(135deg, #ffe9a8, #f6c453); }
.design-current { color: var(--on-brand, #fff); background: var(--mud-palette-primary); }
.design-desc { font-size: 0.8rem; line-height: 1.35; color: var(--mud-palette-text-secondary); }

/* --------------------------------------------------------------------------
   VAT return: the quarters of the year and whether each one was filed.
   -------------------------------------------------------------------------- */
.vat-quarters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.vat-quarter {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid var(--app-edge, var(--mud-palette-lines-default));
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.vat-quarter:hover { border-color: var(--mud-palette-text-primary); }
.vat-quarter.is-selected { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); }
.vat-quarter-name { font-weight: 700; }
.vat-quarter-state { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.vat-quarter.is-filed { background: color-mix(in srgb, var(--mud-palette-success) 9%, var(--mud-palette-surface)); }
.vat-quarter.is-filed .vat-quarter-state { color: var(--mud-palette-success-darken); }
.vat-filing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--app-edge, var(--mud-palette-lines-default));
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
}
.vat-filing.is-filed { border-color: color-mix(in srgb, var(--mud-palette-success) 45%, transparent); background: color-mix(in srgb, var(--mud-palette-success) 8%, var(--mud-palette-surface)); }
.vat-filing-text { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
.vat-filing-text span { font-size: 0.86rem; color: var(--mud-palette-text-secondary); }
.vat-filing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) {
    .vat-quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vat-filing-actions { width: 100%; }
    .vat-filing-actions .mud-button-root { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   The customer card: totals and, in tabs, what belongs to the customer.
   -------------------------------------------------------------------------- */
.customer-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.customer-card-head .metric-row { margin-left: auto; }
.customer-card .mud-tabs.customer-tabs,
.customer-card .mud-tabs.customer-tabs .mud-tabs-panels { border: 0; box-shadow: none; background: transparent; }
.card-table .mud-table-container { max-height: 460px; overflow-y: auto; }
.card-table tr.is-link { cursor: pointer; }
.email-read { width: 100%; height: 56vh; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: #fff; }
@media (max-width: 760px) {
    .customer-card-head .metric-row { margin-left: 0; width: 100%; }
    .customer-card-head .metric { flex: 1 1 45%; }
}

/* ==========================================================================
   Refined: calm and professional. The last layer, and the one that decides.
   The earlier layers made the application lively (auroras, gradient
   hairlines, a shine on buttons, parts that pop into place). This one takes
   the show away and keeps what makes it feel well made: one typeface used
   plainly, flat surfaces with a fine edge and a soft shadow, quiet tables,
   and controls of one size and one radius. See docs/decisions/0012.
   ========================================================================== */

:root {
    --app-radius: 14px;
    --app-shadow: 0 1px 2px rgba(15, 17, 22, 0.05), 0 6px 16px -10px rgba(15, 17, 22, 0.16);
    --app-shadow-hover: 0 2px 4px rgba(15, 17, 22, 0.06), 0 14px 28px -14px rgba(15, 17, 22, 0.24);
    --control-radius: 10px;
}

/* The typeface as it is drawn: no alternate letters, and figures of their natural width in running text.
   Figures line up in columns only where they are compared: tables, totals, amounts. */
html, body { background: #f3f4f6; font-feature-settings: "calt", "kern"; text-rendering: optimizeLegibility; }
.app-shell .mud-table-root .mud-table-body .mud-table-cell, .app-shell .mud-simple-table td, .mud-picker input { font-variant-numeric: normal; }
.app-shell .mud-table-cell[style*="text-align: right"], .app-shell td.text-right, .app-shell .lines-num input, .metric-value, .stat-value, .timer-clock, .lines-totals td { font-variant-numeric: tabular-nums; }

/* The page: flat, and not wider than reads well. */
.app-main, .app-dark .app-main { background: var(--mud-palette-background); }
.app-main > .mud-container { max-width: 1520px; padding-left: 28px; padding-right: 28px; }
.page-enter,
.page-enter > .mud-paper,
.page-enter > .mud-grid > .mud-grid-item,
.page-enter > form > .mud-grid > .mud-grid-item,
.page-heading-icon { animation: none; }

/* Top bar: part of the page, with a fine rule under it. */
.app-bar.mud-appbar {
    background: color-mix(in srgb, var(--mud-palette-background) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--app-edge, var(--mud-palette-lines-default));
    box-shadow: none;
}
.app-bar.mud-appbar::after { display: none; }

/* Sidebar: plain paper; the page you are on is marked quietly. */
.app-drawer.mud-drawer,
.app-dark .app-drawer.mud-drawer { background: var(--mud-palette-surface); border-right: 1px solid var(--app-edge, var(--mud-palette-lines-default)); }
.nav-section { padding: 20px 22px 6px; font-size: 0.66rem; letter-spacing: 0.09em; }
.app-drawer .mud-nav-link { margin: 1px 10px; padding: 7px 10px; border-radius: 9px; font-size: 0.875rem; font-weight: 500; }
.app-drawer .mud-nav-link:hover { transform: none; background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.app-drawer .mud-nav-link .mud-nav-link-icon,
.app-drawer .mud-nav-link:hover .mud-nav-link-icon { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; font-size: 1.25rem; color: var(--mud-palette-text-secondary); }
.app-drawer .mud-nav-link .mud-nav-link-text { margin-left: 10px; }
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 9%, transparent) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 650;
    box-shadow: none;
}
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.app-drawer .mud-navmenu.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text { color: var(--mud-palette-text-primary) !important; background: none; }
.user-button { border-color: var(--app-edge, var(--mud-palette-lines-default)); }
.user-avatar { background: var(--brand-a); color: var(--on-brand); }

/* Page heading: a title, a line of explanation, and a small mark. */
.page-heading { gap: 14px; }
.page-heading-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--on-brand);
    background: var(--brand-a);
    box-shadow: none;
}
.page-heading-icon::after { display: none; }
.page-heading-icon .mud-icon-root { font-size: 1.3rem; }
.page-heading-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.2;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--mud-palette-text-primary);
}
.page-heading-sub { margin-top: 2px; font-size: 0.9rem; }
.app-shell .mud-typography-h4 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.022em; }
.app-shell .mud-typography-h6 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }

/* Paper: a fine edge and a soft shadow, nothing else. */
.app-shell .mud-paper.mud-elevation-1,
.app-shell .mud-paper.mud-elevation-2,
.app-shell .mud-tabs.mud-elevation-1,
.stat-card,
.builder-side,
.builder-canvas {
    border: 1px solid var(--app-edge);
    border-radius: var(--app-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--app-shadow);
}
.app-shell { --app-edge: #dfe2e8; }
.app-shell.app-dark { --app-edge: rgba(255, 255, 255, 0.12); }
.app-dark .mud-paper.mud-elevation-1,
.app-dark .mud-paper.mud-elevation-2,
.app-dark .mud-tabs.mud-elevation-1,
.app-dark .stat-card,
.app-dark .builder-side,
.app-dark .builder-canvas { background: var(--mud-palette-surface); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.9); }
.stat-card::before { display: none; }
.stat-card:hover { border-color: var(--app-edge); box-shadow: var(--app-shadow-hover); }

/* Start page: the welcome is a dark, quiet band. */
.hero { padding: 26px 28px; border-radius: 16px; background: linear-gradient(135deg, #0d0f14 0%, #1c1f27 100%); box-shadow: var(--app-shadow); }
.hero::before, .hero::after { display: none; }
.hero-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; }
.hero-sub { font-size: 0.93rem; opacity: 0.78; }
.hero-eyebrow { font-size: 0.72rem; opacity: 0.7; }

/* Tables: column names in small capitals over a rule, rows that light up a little under the pointer. */
.app-shell .mud-table-root .mud-table-head .mud-table-cell,
.app-shell .mud-simple-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    background: transparent;
    border-bottom: 1px solid var(--app-edge, var(--mud-palette-lines-default));
}
.app-shell .mud-table-root .mud-table-head .mud-table-cell:first-child,
.app-shell .mud-simple-table thead th:first-child,
.app-shell .mud-table-root .mud-table-head .mud-table-cell:last-child,
.app-shell .mud-simple-table thead th:last-child { border-radius: 0; }
.app-shell .mud-table-root .mud-table-body .mud-table-cell { padding-top: 11px; padding-bottom: 11px; }
.app-shell .mud-table.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover,
.app-shell .mud-simple-table.mud-table-hover tbody tr:hover { background: var(--mud-palette-table-hover); }
.app-shell .mud-table.mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell:first-child { box-shadow: none; }
.app-shell .mud-table-sort-label { font-weight: 600; }

/* Controls: one height, one radius. The main button is simply black (white in the dark theme). */
.app-shell .mud-button-root.mud-button,
.auth-stage .mud-button-root.mud-button,
.mud-dialog .mud-button-root.mud-button { border-radius: var(--control-radius); padding-inline: 14px; min-height: 38px; font-weight: 600; }
.app-shell .mud-button-root.mud-button.mud-button-text-size-small,
.app-shell .mud-button-root.mud-button.mud-button-outlined-size-small,
.app-shell .mud-button-root.mud-button.mud-button-filled-size-small { min-height: 32px; padding-inline: 10px; }
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--brand-a);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    transform: none;
    filter: none;
    background: color-mix(in srgb, var(--brand-a) 84%, var(--mud-palette-surface));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.mud-button-root.mud-button-filled.mud-button-filled-primary::after { display: none; }
.app-shell .mud-button-root.mud-button-outlined,
.mud-dialog .mud-button-root.mud-button-outlined { border-color: var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); }
.app-shell .mud-button-root.mud-button-outlined:hover,
.mud-dialog .mud-button-root.mud-button-outlined:hover { border-color: var(--mud-palette-text-secondary); background: var(--mud-palette-table-hover); }

.app-shell .mud-input.mud-input-outlined .mud-input-outlined-border,
.auth-stage .mud-input.mud-input-outlined .mud-input-outlined-border,
.mud-dialog .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: var(--control-radius); }
.app-shell .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.auth-stage .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-dialog .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--brand-a);
    border-width: 1px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-a) 13%, transparent);
}

/* What you type is set as plainly as what you read: regular weight, the size of the text around it. */
.app-shell .mud-input, .mud-dialog .mud-input, .auth-stage .mud-input,
.app-shell .mud-input > input.mud-input-root, .mud-dialog .mud-input > input.mud-input-root, .auth-stage .mud-input > input.mud-input-root,
.app-shell .mud-input > textarea.mud-input-root, .mud-dialog .mud-input > textarea.mud-input-root,
.app-shell div.mud-input-slot.mud-input-root, .mud-dialog div.mud-input-slot.mud-input-root,
.app-shell .mud-select-input, .mud-dialog .mud-select-input { font-weight: 450; font-size: 0.9375rem; }
.app-shell .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.auth-stage .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol { font-weight: 500; color: var(--mud-palette-text-secondary); }
.app-shell .mud-input-helper-text, .mud-dialog .mud-input-helper-text { font-size: 0.76rem; }
/* A phone zooms in on a field with small text; there the fields keep 16 px. */
@media (pointer: coarse) {
    .app-shell .mud-input, .mud-dialog .mud-input, .auth-stage .mud-input,
    .app-shell .mud-input > input.mud-input-root, .mud-dialog .mud-input > input.mud-input-root, .auth-stage .mud-input > input.mud-input-root,
    .app-shell .mud-input > textarea.mud-input-root, .mud-dialog .mud-input > textarea.mud-input-root,
    .app-shell div.mud-input-slot.mud-input-root, .mud-dialog div.mud-input-slot.mud-input-root,
    .app-shell .mud-select-input, .mud-dialog .mud-select-input { font-size: 1rem; }
}

/* On the dark welcome band the second button is drawn in white lines. */
.app-shell .hero .mud-button-root.mud-button-outlined { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.app-shell .hero .mud-button-root.mud-button-outlined:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); }

/* Small things: key figures, tabs, dialogs, labels. */
.metric { padding: 7px 14px; border-radius: 11px; border-color: var(--app-edge, var(--mud-palette-lines-default)); background: var(--mud-palette-surface); }
.metric-label { font-size: 0.66rem; letter-spacing: 0.06em; }
.metric-value { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.app-shell .mud-tabs .mud-tab { min-height: 44px; font-size: 0.875rem; }
.app-shell .mud-tabs .mud-tab.mud-tab-active { color: var(--mud-palette-text-primary); }
.app-shell .mud-tabs .mud-tab-slider { height: 2px; border-radius: 2px; background: var(--mud-palette-text-primary); }
.mud-dialog { border-radius: 16px !important; border-color: var(--app-edge, var(--mud-palette-lines-default)); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45); }
.mud-dialog .mud-dialog-title { background: var(--mud-palette-surface); font-size: 1.05rem; font-weight: 650; }
.mud-chip.mud-chip-size-small { height: 23px; font-size: 0.72rem; font-weight: 600; }
.mud-popover.mud-popover-open { border-radius: 12px; box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.35); }
.brand-name { background: none; -webkit-text-fill-color: currentColor; }

@media (max-width: 760px) {
    .app-main > .mud-container { padding-left: 16px; padding-right: 16px; }
    .page-heading-icon { width: 36px; height: 36px; border-radius: 10px; }
    .page-heading-title { font-size: 1.35rem; }
    .hero { padding: 20px; }
    .hero-title { font-size: 1.45rem; }
}