/* MWG.Processes admin theme: light, neutral surfaces with one accent. */

:root {
    --mwg-bg: #f4f5f7;
    --mwg-surface: #ffffff;
    --mwg-border: #e2e5ea;
    --mwg-text: #1f2933;
    --mwg-muted: #6b7280;
    --mwg-accent: #2457a8;
    --mwg-accent-hover: #1d478a;
    --mwg-accent-soft: #e8eef9;
    --mwg-sidebar: #1e2a44;
    --mwg-sidebar-text: #c9d2e3;
    --mwg-success: #198754;
    --mwg-danger: #dc3545;
    --mwg-warning: #f59f00;
    --mwg-info: #0d6efd;
    --mwg-radius: 10px;
    --bs-body-bg: var(--mwg-bg);
    --bs-body-color: var(--mwg-text);
}

html, body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    background: var(--mwg-bg);
    color: var(--mwg-text);
}

h1:focus {
    outline: none;
}

a {
    color: var(--mwg-accent);
}

    a:hover {
        color: var(--mwg-accent-hover);
    }

/* Sign-in screens (Pages/Authentication, ADR-020) */
.auth-body {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(160deg, var(--mwg-sidebar) 0%, #2b3d66 55%, var(--mwg-accent) 100%);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--mwg-surface);
    border: 1px solid var(--mwg-border);
    border-radius: var(--mwg-radius);
    box-shadow: 0 18px 48px rgba(10, 18, 36, 0.35);
    padding: 2rem;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--mwg-border);
}

    .auth-brand img {
        border-radius: 10px;
        flex-shrink: 0;
    }

.auth-brand-name {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--mwg-text);
}

.auth-brand-tagline {
    font-size: 0.8rem;
    color: var(--mwg-muted);
}

.auth-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.auth-lead {
    color: var(--mwg-text);
    font-size: 0.95rem;
}

.auth-alert {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
}

    .auth-alert i {
        font-size: 1.1rem;
        line-height: 1.3;
    }

.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.auth-note {
    margin: 1.25rem 0 0;
    font-size: 0.8rem;
    color: var(--mwg-muted);
}

.auth-footer {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--mwg-accent);
    --bs-btn-border-color: var(--mwg-accent);
    --bs-btn-hover-bg: var(--mwg-accent-hover);
    --bs-btn-hover-border-color: var(--mwg-accent-hover);
    --bs-btn-active-bg: var(--mwg-accent-hover);
    --bs-btn-active-border-color: var(--mwg-accent-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--mwg-accent);
    --bs-btn-border-color: var(--mwg-accent);
    --bs-btn-hover-bg: var(--mwg-accent);
    --bs-btn-hover-border-color: var(--mwg-accent);
    --bs-btn-active-bg: var(--mwg-accent);
    --bs-btn-active-border-color: var(--mwg-accent);
}

.btn-icon {
    padding: 0.25rem 0.45rem;
    line-height: 1;
}

/* Page header */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

    .page-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .page-header .page-subtitle {
        color: var(--mwg-muted);
        margin-top: 0.25rem;
    }

    .page-header .page-actions {
        margin-left: auto;
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

.breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Cards and panels */
.panel {
    background: var(--mwg-surface);
    border: 1px solid var(--mwg-border);
    border-radius: var(--mwg-radius);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--mwg-border);
}

    .panel-header h2 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

.panel-body {
    padding: 1.25rem;
}

.panel-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--mwg-border);
}

/* Key/value metadata */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem 2rem;
}

.meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mwg-muted);
    margin-bottom: 0.15rem;
}

.meta-value {
    font-size: 0.95rem;
    word-break: break-word;
}

.mono {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85em;
}

/* Stat tiles */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.stat {
    background: var(--mwg-surface);
    border: 1px solid var(--mwg-border);
    border-radius: var(--mwg-radius);
    padding: 0.75rem 1rem;
}

    .stat .stat-label {
        font-size: 0.75rem;
        color: var(--mwg-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .stat .stat-value {
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .stat.stat-success .stat-value { color: var(--mwg-success); }
    .stat.stat-danger .stat-value { color: var(--mwg-danger); }
    .stat.stat-info .stat-value { color: var(--mwg-info); }
    .stat.stat-muted .stat-value { color: var(--mwg-muted); }
    .stat.stat-warning .stat-value { color: #b47d00; }

    .stat .stat-sub {
        font-size: 0.75rem;
        color: var(--mwg-muted);
        margin-top: 0.15rem;
    }

/* ------------------------------------------------------------------ */
/* Analytics (FEATURE-009)                                             */
/* ------------------------------------------------------------------ */

/* Hero band: range, headline numbers, and controls */
.ana-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 1.5rem 1.75rem 1.25rem;
    margin-bottom: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, #1e2a44 0%, #2457a8 55%, #3a7bd5 100%);
    box-shadow: 0 10px 30px rgba(30, 42, 68, 0.25);
}

    .ana-hero::before,
    .ana-hero::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    }

    .ana-hero::before { width: 420px; height: 420px; right: -120px; top: -220px; }
    .ana-hero::after { width: 260px; height: 260px; left: 35%; bottom: -200px; }

.ana-hero-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.ana-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.ana-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.ana-subtitle {
    opacity: 0.85;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.ana-headline {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ana-headline-stat {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    min-width: 120px;
}

.ana-headline-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.ana-headline-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    margin-top: 0.15rem;
}

.ana-controls {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
}

.ana-presets {
    display: inline-flex;
    gap: 0.25rem;
    background: rgba(0,0,0,0.18);
    border-radius: 999px;
    padding: 0.25rem;
}

.ana-preset {
    cursor: pointer;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    margin: 0;
}

    .ana-preset:hover { background: rgba(255,255,255,0.12); color: #fff; }

.ana-presets .btn-check:checked + .ana-preset {
    background: #fff;
    color: var(--mwg-accent);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ana-presets .btn-check:focus-visible + .ana-preset {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.ana-dates {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ana-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    padding: 0.25rem 0.6rem 0.25rem 0.75rem;
    margin: 0;
    color: var(--mwg-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .ana-date input {
        border: 0;
        background: transparent;
        color: var(--mwg-text);
        font-size: 0.9rem;
        font-family: inherit;
        text-transform: none;
        letter-spacing: 0;
        outline: none;
    }

    /* The process picker (REQ-F009-005) sits with the date inputs and shares their look. */
    .ana-date select.ana-select {
        border: 0;
        background: transparent;
        color: var(--mwg-text);
        font-size: 0.9rem;
        font-family: inherit;
        text-transform: none;
        letter-spacing: 0;
        outline: none;
        max-width: 240px;
        cursor: pointer;
    }

        .ana-date select.ana-select option { color: var(--mwg-text); background: var(--mwg-surface); }

.ana-date-arrow { opacity: 0.7; }

.ana-apply {
    background: #fff;
    color: var(--mwg-accent);
    font-weight: 600;
    border-radius: 10px;
    border: 0;
    padding: 0.45rem 1rem;
}

    .ana-apply:hover:not(:disabled) { background: #eef3fb; color: var(--mwg-accent-hover); }
    .ana-apply:disabled { opacity: 0.6; }

.ana-hint {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-left: auto;
}

.ana-hint-error { color: #ffd6d6; opacity: 1; }

/* Section titles and tiles */
.ana-section-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
}

    .ana-section-title small { color: var(--mwg-muted); font-weight: 400; }

.ana-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}

.ana-tile {
    --tone: var(--mwg-accent);
    --tone-soft: var(--mwg-accent-soft);
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--mwg-surface);
    border: 1px solid var(--mwg-border);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}

    .ana-tile::after {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 4px;
        background: var(--tone);
        border-radius: 14px 0 0 14px;
    }

    .ana-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31, 41, 51, 0.08); }

    .ana-tile.tone-success { --tone: var(--mwg-success); --tone-soft: #e6f4ec; }
    .ana-tile.tone-danger { --tone: var(--mwg-danger); --tone-soft: #fbe9eb; }
    .ana-tile.tone-info { --tone: var(--mwg-info); --tone-soft: #e7f0ff; }
    .ana-tile.tone-warning { --tone: #b47d00; --tone-soft: #fff4d6; }
    .ana-tile.tone-muted { --tone: var(--mwg-muted); --tone-soft: #eef0f3; }

.ana-tile-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--tone-soft);
    color: var(--tone);
    font-size: 1.15rem;
}

.ana-tile-value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tone);
    letter-spacing: -0.01em;
}

.ana-tile-label {
    font-size: 0.78rem;
    color: var(--mwg-text);
    margin-top: 0.15rem;
}

.ana-tile-sub {
    font-size: 0.72rem;
    color: var(--mwg-muted);
}

/* Cards and legend */
.ana-card {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.04);
}

.ana-legend {
    display: flex;
    gap: 0.9rem;
    font-size: 0.78rem;
    color: var(--mwg-muted);
}

    .ana-legend .swatch {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 3px;
        margin-right: 0.3rem;
        vertical-align: -1px;
    }

    .ana-legend .sw-accent { background: linear-gradient(180deg, #3a7bd5, var(--mwg-accent)); }
    .ana-legend .sw-success { background: var(--mwg-success); }
    .ana-legend .sw-danger { background: var(--mwg-danger); }
    .ana-legend .sw-other { background: #c9d2e3; }

/* Charts: CSS bars, no chart library */
.bar-chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--bars, 1), minmax(0, 1fr));
    gap: 0.35rem;
    align-items: end;
    height: 240px;
    padding-left: 2.25rem;
}

.bar-grid {
    position: absolute;
    left: 0;
    right: 0;
    top: 1rem;
    bottom: calc(1rem + 0.25rem + 0.7rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

    .bar-grid span {
        display: block;
        position: relative;
        font-size: 0.68rem;
        color: var(--mwg-muted);
        width: 2rem;
        text-align: right;
        padding-right: 0.4rem;
        line-height: 0;
    }

        .bar-grid span::after {
            content: "";
            position: absolute;
            left: 2.25rem;
            right: 0;
            top: 0;
            border-top: 1px dashed var(--mwg-border);
        }

.bar-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-width: 0;
}

    .bar-col:hover .bar-stack .bar { filter: brightness(1.08); }

.bar-stack {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
}

    .bar-stack .bar {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 0;
        border-radius: 5px 5px 0 0;
        transition: height 0.35s cubic-bezier(.2,.8,.2,1), filter 0.15s ease;
    }

    .bar-stack .bar-total {
        background: linear-gradient(180deg, #4d8ae0 0%, var(--mwg-accent) 100%);
        box-shadow: 0 4px 10px rgba(36, 87, 168, 0.25);
    }

    .bar-stack .bar-done { background: var(--mwg-success); left: 32%; right: 32%; border-radius: 4px 4px 0 0; }
    .bar-stack .bar-errors { background: var(--mwg-danger); left: 44%; right: 44%; border-radius: 3px 3px 0 0; }

    .bar-stack.stacked {
        flex-direction: column;
        justify-content: flex-end;
    }

        .bar-stack.stacked .bar {
            position: static;
            width: 70%;
            margin: 0 auto;
            border-radius: 0;
            box-shadow: none;
        }

        .bar-stack.stacked .seg-success { background: linear-gradient(180deg, #2fa06b, var(--mwg-success)); border-radius: 0 0 5px 5px; }
        .bar-stack.stacked .seg-error { background: linear-gradient(180deg, #e4606d, var(--mwg-danger)); }
        .bar-stack.stacked .seg-other { background: #c9d2e3; border-radius: 5px 5px 0 0; }

.bar-value,
.bar-label {
    position: relative;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    width: 100%;
}

    /* Centre the text on the column even when it is wider than the column. */
    .bar-value > span,
    .bar-label > span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

.bar-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mwg-text);
    height: 1rem;
    line-height: 1rem;
    order: -1;
}

.bar-label {
    font-size: 0.7rem;
    color: var(--mwg-muted);
    height: 1rem;
    line-height: 1rem;
    margin-top: 0.25rem;
}

/* Process table */
.ana-table tbody tr:hover { background: var(--mwg-accent-soft); }

.ana-process {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.ana-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.ana-issued {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    min-width: 70px;
}

.ana-issued-bar {
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: var(--mwg-accent-soft);
    overflow: hidden;
}

    .ana-issued-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--mwg-accent), #4d8ae0);
        border-radius: 2px;
    }

.ana-progress {
    height: 10px;
    border-radius: 999px;
    background: #eef0f3;
}

    .ana-progress .progress-bar { border-radius: 0; }

@media (max-width: 768px) {
    .ana-hero { padding: 1.1rem 1rem 1rem; border-radius: 12px; }
    .ana-title { font-size: 1.35rem; }
    .ana-hint { margin-left: 0; }
}

/* Tables */
.table-clean {
    margin-bottom: 0;
}

    .table-clean thead th {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--mwg-muted);
        font-weight: 600;
        border-bottom: 1px solid var(--mwg-border);
        white-space: nowrap;
    }

    .table-clean tbody td {
        vertical-align: middle;
        border-color: var(--mwg-border);
    }

    .table-clean tbody tr:last-child td {
        border-bottom: 0;
    }

    /* Odd/even rows: a soft tint that keeps the hover highlight visible. */
    .table-clean.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: #f7f8fa;
    }

    .table-clean.table-striped.table-hover > tbody > tr:hover > * {
        --bs-table-accent-bg: var(--mwg-accent-soft);
    }

    .table-clean .row-link {
        font-weight: 600;
        text-decoration: none;
    }

        .table-clean .row-link:hover {
            text-decoration: underline;
        }

.cell-muted {
    color: var(--mwg-muted);
    font-size: 0.875rem;
}

.cell-nowrap {
    white-space: nowrap;
}

/* Lists used for selection (monitoring) */
.select-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .select-list li button {
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--mwg-border);
        padding: 0.65rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: var(--mwg-text);
    }

        .select-list li button:hover {
            background: var(--mwg-bg);
        }

        .select-list li button.selected {
            background: var(--mwg-accent-soft);
            box-shadow: inset 3px 0 0 var(--mwg-accent);
        }

    .select-list li:last-child button {
        border-bottom: 0;
    }

/* Numeric analytics cells */
.num {
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.num-zero {
    color: #b8bec8;
    font-weight: 500;
}

/* Grouped "Open runs" columns on the process list */
.table-clean thead .group-row th {
    border-bottom: 0;
    vertical-align: bottom;
}

.table-clean thead th.group-head {
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: #1e2a44;
    background: #e8eef9;
    border-bottom: 1px solid #c9d6ef;
    border-radius: 6px 6px 0 0;
}

.table-clean thead th.open-runs:not(.group-head) {
    background: #f1f5fc;
    border-bottom: 2px solid #c9d6ef;
}

.table-clean tbody td.open-runs {
    --bs-table-accent-bg: transparent;
    background: #f6f8fd;
    box-shadow: inset 1px 0 0 #e3e9f5, inset -1px 0 0 #e3e9f5;
}

.table-clean.table-striped > tbody > tr:nth-of-type(odd) > td.open-runs {
    background: #eef2fa;
}

.table-clean.table-hover > tbody > tr:hover > td.open-runs {
    background: #e1e9f8;
}

/* One colour per running-activity column */
.col-running { color: #2457a8; }
.col-completed { color: #198754; }
.col-errors { color: #dc3545; }
.col-items { color: #0d9488; }

th.col-running, th.col-completed, th.col-errors, th.col-items {
    opacity: 0.9;
}

.bar-items {
    background-color: #0d9488;
}

/* Compact analytics chips */
.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Running indicator */
.running-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c3c8d1;
    flex-shrink: 0;
}

    .running-dot.on {
        background: var(--mwg-success);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6);
        animation: running-pulse 1.6s ease-out infinite;
    }

@keyframes running-pulse {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Pending decision placeholder */
.pending {
    color: var(--mwg-muted);
    font-size: 0.875rem;
    border-bottom: 1px dotted var(--mwg-muted);
    cursor: help;
}

/* Progress */
.progress-stacked {
    height: 10px;
    background: #e7e9ee;
}

.progress-stacked-lg {
    height: 18px;
}

/* Forms */
.form-control:focus, .form-select:focus {
    border-color: var(--mwg-accent);
    box-shadow: 0 0 0 0.2rem rgba(36, 87, 168, 0.2);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mwg-success);
}

.invalid {
    outline: 1px solid var(--mwg-danger);
}

.validation-message {
    color: var(--mwg-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--mwg-border);
    margin-bottom: 1rem;
}

    .nav-tabs .nav-link {
        color: var(--mwg-muted);
        border: 0;
        border-bottom: 2px solid transparent;
        padding: 0.6rem 1rem;
    }

        .nav-tabs .nav-link.active {
            color: var(--mwg-accent);
            background: transparent;
            border-bottom-color: var(--mwg-accent);
            font-weight: 600;
        }

        .nav-tabs .nav-link:hover {
            border-bottom-color: var(--mwg-border);
        }

/* Attention: requests that ran past their process's threshold */
.attention-banner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #fff8e6;
    border: 1px solid #f3d27a;
    border-left: 4px solid #e6a700;
    border-radius: var(--mwg-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

    .attention-banner > .bi {
        color: #b47d00;
        font-size: 1.2rem;
        line-height: 1.4;
    }

.attention-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.attention-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--mwg-surface);
    border: 1px solid #f3d27a;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
}

    .attention-chip:hover {
        border-color: #e6a700;
        color: inherit;
    }

    .attention-chip .num {
        font-weight: 600;
        color: #b47d00;
    }

.attention-note {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    background: #fff8e6;
    border-bottom: 1px solid #f3d27a;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
}

    .attention-note > .bi {
        color: #b47d00;
    }

/* Request ticket on Find a request (FEATURE-003 REQ-F003-014): main panel plus tear-off stub */
.ticket-wrap {
    max-width: 920px;
    margin: 0 auto 1rem;
}

.ticket {
    --tone: var(--mwg-info);
    --tone-soft: #e7f0ff;
    --tone-deep: #1d478a;
    display: grid;
    grid-template-columns: 1fr 24px 250px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(31, 41, 51, 0.14);
    overflow: hidden;
    position: relative;
}

    .ticket.is-complete { --tone: var(--mwg-success); --tone-soft: #e6f4ec; --tone-deep: #136a43; }
    .ticket.is-running { --tone: var(--mwg-info); --tone-soft: #e7f0ff; --tone-deep: #1d478a; }
    .ticket.is-attention,
    .ticket.is-scheduled { --tone: #b47d00; --tone-soft: #fff4d6; --tone-deep: #8a5f00; }

.ticket-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ticket-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.5rem;
    color: #fff;
    background: linear-gradient(90deg, var(--tone-deep), var(--tone));
}

.ticket-brand {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.9;
}

.ticket-kind {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ticket-body {
    padding: 1.25rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ticket-headline {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

    .ticket-headline > .bi {
        font-size: 2rem;
        color: var(--tone);
        width: 52px;
        height: 52px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--tone-soft);
        flex: 0 0 auto;
    }

.ticket-headline-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ticket-headline-text {
    color: var(--mwg-muted);
}

.ticket-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem 1.25rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--mwg-border);
    border-bottom: 1px solid var(--mwg-border);
}

.ticket-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mwg-muted);
}

.ticket-value {
    font-weight: 600;
    margin-top: 0.15rem;
}

.ticket-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.ticket-total {
    text-align: center;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    background: var(--mwg-bg);
}

.ticket-total-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.ticket-total-label {
    font-size: 0.72rem;
    color: var(--mwg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.15rem;
}

.ticket-total.tone-success .ticket-total-value { color: var(--mwg-success); }
.ticket-total.tone-info .ticket-total-value { color: var(--mwg-info); }
.ticket-total.tone-muted .ticket-total-value { color: var(--mwg-muted); }
.ticket-total.tone-danger .ticket-total-value { color: var(--mwg-danger); }

.ticket-note {
    font-size: 0.8rem;
    color: var(--mwg-muted);
}

    .ticket-note .ticket-meta {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.72rem;
    }

/* The perforation: a dashed line with a notch at each end */
.ticket-tear {
    position: relative;
    background: #fff;
}

    .ticket-tear::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 14px;
        bottom: 14px;
        border-left: 2px dashed #d5d9e0;
        transform: translateX(-50%);
    }

    .ticket-tear::after,
    .ticket-stub::before {
        content: "";
        position: absolute;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--mwg-bg);
        z-index: 1;
    }

    .ticket-tear::after { bottom: -14px; left: 50%; transform: translateX(-50%); }
    .ticket-stub::before { top: -14px; left: -26px; }

.ticket-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 1.1rem;
    text-align: center;
    background:
        repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0 6px, transparent 6px 14px),
        var(--tone-soft);
    border-left: 1px solid var(--mwg-border);
}

.ticket-stub-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mwg-muted);
}

.ticket-stub-number {
    font-size: 1rem;
    font-weight: 700;
    word-break: break-all;
    color: var(--tone-deep);
}

.ticket-stub-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--tone);
    color: var(--tone);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ticket-stub-barcode {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 34px;
    width: 100%;
    margin-top: 0.35rem;
}

    .ticket-stub-barcode i {
        display: block;
        background: #2b2b2b;
        height: 100%;
    }

.ticket-stub-pct {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tone-deep);
    line-height: 1;
}

    .ticket-stub-pct small {
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--mwg-muted);
        margin-top: 0.25rem;
    }

@media (max-width: 768px) {
    .ticket { grid-template-columns: 1fr; }
    .ticket-tear { height: 24px; }
    .ticket-tear::before { left: 14px; right: 14px; top: 50%; bottom: auto; border-left: 0; border-top: 2px dashed #d5d9e0; transform: translateY(-50%); }
    .ticket-stub::before, .ticket-tear::after { display: none; }
    .ticket-stub { border-left: 0; border-top: 1px solid var(--mwg-border); }
    .ticket-totals { grid-template-columns: repeat(2, 1fr); }
}

/* Earlier receipt slip styles kept for reference by the print rule below */
.receipt-wrap {
    max-width: 560px;
    margin: 0 auto 1rem;
}

.receipt {
    --stamp: var(--mwg-info);
    --stamp-soft: #e7f0ff;
    position: relative;
    background: #fffdf8;
    color: #2b2b2b;
    border: 1px solid #e6e1d6;
    border-radius: 6px 6px 0 0;
    padding: 1.5rem 1.75rem 2rem;
    box-shadow: 0 12px 30px rgba(31, 41, 51, 0.12);
    font-family: "Segoe UI", system-ui, sans-serif;
    /* serrated bottom edge */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
                  radial-gradient(circle at 8px 0, transparent 7px, #000 7.5px) bottom / 16px 12px repeat-x;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
                  radial-gradient(circle at 8px 0, transparent 7px, #000 7.5px) bottom / 16px 12px repeat-x;
}

    .receipt.is-complete { --stamp: var(--mwg-success); --stamp-soft: #e6f4ec; }
    .receipt.is-running { --stamp: var(--mwg-info); --stamp-soft: #e7f0ff; }
    .receipt.is-attention,
    .receipt.is-scheduled { --stamp: #b47d00; --stamp-soft: #fff4d6; }

.receipt-head {
    text-align: center;
}

.receipt-brand {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mwg-muted);
}

.receipt-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 0.25rem;
}

.receipt-number {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px dashed #cfc8b8;
    border-radius: 6px;
    background: #fff;
    font-size: 1.05rem;
    font-weight: 600;
}

.receipt-sub {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--mwg-muted);
}

.receipt-rule {
    border-top: 2px dashed #ddd6c6;
    margin: 1rem 0;
}

.receipt-stamp {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--stamp);
    border-radius: 8px;
    color: var(--stamp);
    background: var(--stamp-soft);
    transform: rotate(-1deg);
}

    .receipt-stamp > .bi { font-size: 1.75rem; }

.receipt-stamp-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
}

.receipt-stamp-text {
    font-size: 0.85rem;
    color: #2b2b2b;
    opacity: 0.85;
}

.receipt-section {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mwg-muted);
    margin-bottom: 0.5rem;
}

.receipt-lines {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.95rem;
}

.receipt-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

    .receipt-line > span:first-child { white-space: nowrap; }
    .receipt-line > span:last-child { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

    .receipt-line .dots {
        flex: 1 1 auto;
        border-bottom: 2px dotted #cfc8b8;
        transform: translateY(-0.3em);
        min-width: 1.5rem;
    }

.receipt-totals .tone-success > span:last-child { color: var(--mwg-success); }
.receipt-totals .tone-info > span:last-child { color: var(--mwg-info); }
.receipt-totals .tone-muted > span:last-child { color: var(--mwg-muted); }
.receipt-totals .tone-danger > span:last-child { color: var(--mwg-danger); }

.receipt-total {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd6c6;
    font-size: 1.05rem;
}

    .receipt-total > span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; align-self: center; }

.receipt-progress .progress-stacked-lg { background: #eee8da; }

.receipt-foot {
    text-align: center;
}

.receipt-barcode {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 38px;
    margin: 0.25rem auto 0.75rem;
}

    .receipt-barcode i {
        display: block;
        background: #2b2b2b;
        height: 100%;
    }

.receipt-foot-text {
    font-size: 0.8rem;
    color: var(--mwg-muted);
    max-width: 420px;
    margin: 0 auto;
}

.receipt-foot-meta {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--mwg-muted);
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.receipt-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media print {
    .sidebar, .receipt-actions, .admin-strip, .status-view, .page-header, form { display: none !important; }
    .receipt, .ticket { box-shadow: none; }
}

/* End-user status view on Find a request */
.status-headline {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: var(--mwg-radius);
    border: 1px solid var(--mwg-border);
    background: var(--mwg-bg);
}

    .status-headline > .bi {
        font-size: 2rem;
        line-height: 1;
    }

    .status-headline .status-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .status-headline .status-text {
        color: var(--mwg-muted);
    }

    .status-headline.is-complete { border-color: #b7e4c7; background: #f0fbf4; }
    .status-headline.is-complete > .bi { color: var(--mwg-success); }
    .status-headline.is-running { border-color: #cfe2ff; background: #f3f7ff; }
    .status-headline.is-running > .bi { color: var(--mwg-info); }
    .status-headline.is-attention { border-color: #f3d27a; background: #fff8e6; }
    .status-headline.is-attention > .bi { color: #b47d00; }
    .status-headline.is-scheduled { border-color: #f3d27a; background: #fff8e6; }
    .status-headline.is-scheduled > .bi { color: #b47d00; }

.status-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

    .status-details dt {
        color: var(--mwg-muted);
        font-weight: 500;
    }

    .status-details dd {
        margin: 0;
    }

.contact-form {
    background: var(--mwg-bg);
}

.admin-strip {
    border-style: dashed;
    background: var(--mwg-bg);
}

/* Hidden item values */
.value-hidden {
    color: var(--mwg-muted);
    font-style: italic;
}

/* 24-hour clock guide beside the scheduled run date (TimeMatrix) */
.time-matrix-body {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--mwg-border);
    border-radius: 8px;
    background: #fff;
}

.time-matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

    .time-matrix-grid th {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--mwg-muted);
        font-weight: 600;
        padding-left: 0;
    }

    .time-matrix-grid td {
        padding: 0.1rem 0;
        font-size: 0.85rem;
    }

    .time-matrix-grid tbody tr:nth-child(even) td {
        background: var(--mwg-bg);
    }

@media (max-width: 576px) {
    .time-matrix-grid { grid-template-columns: 1fr; }
}

/* Expected item editor on a step (DataModelEditor) */
.dm-editor {
    border: 1px solid var(--mwg-border);
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
}

.dm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.dm-empty {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--mwg-border);
    border-radius: 6px;
    color: var(--mwg-muted);
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

    .dm-empty .bi {
        font-size: 1.2rem;
    }

.dm-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mwg-muted);
    font-weight: 600;
    border-bottom-width: 1px;
}

.dm-table td {
    vertical-align: middle;
}

.dm-status {
    margin-top: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

    .dm-status.is-valid {
        background: #eef7f1;
        color: #1d6b43;
    }

    .dm-status.is-invalid {
        background: #fdecec;
        color: #a32626;
    }

/* Process type badges (REQ-F001-008). Priority must stand out (product owner, 2026-10-10). */
.ptype {
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3em 0.7em;
    border: 1px solid transparent;
}

    .ptype .bi {
        font-size: 0.85em;
        line-height: 1;
    }

    .ptype-standard {
        background: #eef0f3;
        color: #5b6470;
        border-color: #dfe3e8;
        font-weight: 500;
    }

    .ptype-premier {
        background: linear-gradient(135deg, #f7d774, #e0a800);
        color: #4a3400;
        border-color: #d9a400;
        box-shadow: 0 1px 2px rgba(224, 168, 0, 0.35);
    }

    .ptype-priority {
        background: linear-gradient(135deg, #e5484d, #b91c1c);
        color: #fff;
        border-color: #a41616;
        box-shadow: 0 1px 3px rgba(185, 28, 28, 0.45);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .ptype-recovery {
        background: #f9e6e6;
        color: #923d3d;
        border-color: #b65c5c;
    }

/* Request type badges (ADR-018): Batch is quiet, the daily ad-hoc batch is teal with a calendar. */
.rtype {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25em 0.6em;
    margin-left: 0.4rem;
    border: 1px solid transparent;
    vertical-align: middle;
}

    .rtype .bi {
        font-size: 0.85em;
        line-height: 1;
    }

    .rtype-batch {
        background: #eef0f3;
        color: #5b6470;
        border-color: #dfe3e8;
    }

    .rtype-adhoc {
        background: #d9f2f0;
        color: #0f5f58;
        border-color: #9fd9d3;
        font-weight: 600;
    }

/* Execution grade (REQ-F004-017): letter pills and the grade card */
.grade-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.6rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    background: #eef0f3;
    color: #5b6470;
}

    .grade-pill:hover { filter: brightness(0.95); }
    .grade-pill-lg { height: 2rem; padding: 0 0.9rem; font-size: 0.9rem; cursor: default; }
    .grade-a { background: #e3f6ea; color: #1d6b43; border-color: #b7e4c7; }
    .grade-b { background: #e6f0ff; color: #1f4e9c; border-color: #bcd3f5; }
    .grade-c { background: #fff4e0; color: #8a5b00; border-color: #f3d27a; }
    .grade-d { background: #fde8e8; color: #a32626; border-color: #f1b0b0; }
    .grade-f { background: #f9dcdc; color: #7f1d1d; border-color: #e59a9a; }
    .grade-pending { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; font-weight: 500; }

.grade-card {
    border: 1px solid var(--mwg-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    background: var(--mwg-surface);
}

.grade-outcome {
    font-size: 1.35rem;
    font-weight: 600;
}

.grade-rate {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.grade-scale td, .grade-scale th { vertical-align: middle; }
.grade-row-current td { background: #f3f7ff; font-weight: 600; }

/* Queue manager (ADR-015): queue status badges, tier cards, and the reference page */
.qs {
    font-weight: 600;
    border: 1px solid transparent;
}

    .qs-available { background: #eef7f1; color: #1d6b43; border-color: #b7e4c7; }
    .qs-busy { background: #fff8e6; color: #8a5b00; border-color: #f3d27a; }
    .qs-saturated { background: #fdecec; color: #a32626; border-color: #f1b0b0; }
    .qs-paused { background: #eef0f3; color: #5b6470; border-color: #dfe3e8; }
    .qs-offline { background: #2b2f36; color: #fff; border-color: #2b2f36; }

.tier-card {
    border-top: 4px solid #7492ac;
}

    .tier-card.tier-premier { border-top-color: #e0a800; }
    .tier-card.tier-priority { border-top-color: #b91c1c; }

.tier-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;
}

.qm-diagram {
    width: 100%;
    max-width: 520px;
    display: block;
    margin: 0 auto;
}

.qm-steps {
    padding-left: 1.25rem;
    margin: 0;
}

    .qm-steps li {
        margin-bottom: 0.7rem;
    }

.qm-formula {
    background: #f8f9fb;
    border: 1px solid var(--mwg-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    margin: 0.4rem 0 0;
    white-space: pre-wrap;
}

/* A Priority process's row in the list carries a red accent so it is found without reading the badges. */
tr.row-priority > td:first-child {
    box-shadow: inset 4px 0 0 #b91c1c;
}

tr.row-priority {
    background-color: #fff5f5;
}

/* Expandable rows */
.expand-row td {
    background: var(--mwg-bg);
}

pre.value-block {
    background: #f8f9fb;
    border: 1px solid var(--mwg-border);
    border-radius: 6px;
    padding: 0.75rem;
    max-height: 320px;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* Toasts */
.toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
}

.toast-item {
    background: var(--mwg-surface);
    border: 1px solid var(--mwg-border);
    border-left: 4px solid var(--mwg-info);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

    .toast-item.success { border-left-color: var(--mwg-success); }
    .toast-item.error { border-left-color: var(--mwg-danger); }
    .toast-item.warning { border-left-color: var(--mwg-warning); }

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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