/* ── Araiz — Geist / Vercel-inspired styles ─────────────────────────────
   All colours come from MudBlazor palette variables so light & dark
   modes flip automatically. Avoid hardcoded hex in components.
   ──────────────────────────────────────────────────────────────────── */

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

html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── App chrome ─────────────────────────────────────────────────────── */
.app-topbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: saturate(180%) blur(8px);
}

.app-sidebar {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.brand-mark {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    flex-shrink: 0;
}

.brand-slash {
    color: var(--mud-palette-lines-default);
    margin: 0 10px;
    font-size: 1.1rem;
    font-weight: 300;
}

.avatar-mark {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-size: 0.7rem !important;
    font-weight: 600;
    cursor: pointer;
}

/* Account menu identity block */
.menu-identity { padding: 10px 16px; }
.menu-identity-name { font-size: 0.8125rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.menu-identity-mail { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }

/* ── Sidebar nav ────────────────────────────────────────────────────── */
.nav-section-header {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-disabled);
    padding: 18px 20px 6px;
}

.mud-navmenu .mud-nav-link {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 6px;
    margin: 1px 8px;
    padding: 7px 12px !important;
    min-height: 34px;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.mud-navmenu .mud-nav-link:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    color: var(--mud-palette-text-primary) !important;
}
.mud-navmenu .mud-nav-link.nav-active {
    background-color: var(--mud-palette-action-default-hover) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 550;
}
.mud-navmenu .mud-nav-link .mud-icon-root { font-size: 1.05rem; }

/* ── Sidebar footer ─────────────────────────────────────────────────── */
.sidebar-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.sidebar-footer-text { flex: 1; min-width: 0; }
.sidebar-footer-name {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-footer-role {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Page header (flat, hairline rule — no coloured banner) ─────────── */
.page-header {
    padding: 0 0 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.page-header .page-header-title {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}
.page-header .page-header-sub {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    margin: 6px 0 0;
}

/* ── Detail pages: label / value pairs ──────────────────────────────── */
.detail-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.detail-value {
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    line-height: 1.55;
}
.detail-empty {
    color: var(--mud-palette-text-disabled);
    font-size: 0.875rem;
    font-style: italic;
}

/* ── Surfaces: flat with hairline borders instead of shadows ────────── */
.mud-paper,
.mud-table {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none !important;
}
.mud-table-container { border-radius: 6px; }

.mud-table-head th {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-gray);
}
.mud-table-row td { font-size: 0.8125rem; }
.mud-table-hover tbody tr:hover { background: var(--mud-palette-table-hover) !important; }

/* Buttons: solid = near-black (inverts on dark), quiet outline otherwise */
.mud-button-root { text-transform: none; letter-spacing: 0; }
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled:hover { box-shadow: none !important; }

/* Inputs */
.mud-input-outlined-border { border-color: var(--mud-palette-lines-inputs) !important; }

/* Dialogs */
.mud-dialog { border: 1px solid var(--mud-palette-lines-default); }

/* ── Splash screen ──────────────────────────────────────────────────── */
.splash-screen {
    display: flex; align-items: center; justify-content: center;
    height: 100vh;
    background: var(--mud-palette-background, #fff);
}
.splash-content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.splash-logo { animation: splash-pulse 1.5s ease-in-out infinite; }
.splash-text {
    color: var(--mud-palette-text-primary, #171717);
    font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.splash-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--mud-palette-lines-default, #eaeaea);
    border-top-color: var(--mud-palette-text-primary, #171717);
    border-radius: 50%;
    animation: splash-spin 0.7s linear infinite;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── Login ──────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: var(--mud-palette-background-gray);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 40px;
    width: 100%; max-width: 400px;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; }
.login-logo-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex; align-items: center; justify-content: center;
}
.login-app-name {
    font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary); margin: 8px 0 0;
}
.login-tagline {
    font-size: 0.8125rem; color: var(--mud-palette-text-secondary);
    text-align: center; margin: 2px 0 0;
}
.login-hint {
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 20px;
}
.login-hint strong {
    display: block; margin-bottom: 6px;
    color: var(--mud-palette-text-primary); font-weight: 600;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-text-disabled); }

/* ── Error UI ───────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    bottom: 0; left: 0; width: 100%;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; z-index: 1000;
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
}
#blazor-error-ui .dismiss { cursor: pointer; font-size: 1.1rem; float: right; }
#blazor-error-ui .reload { color: var(--mud-palette-secondary); font-weight: 500; }

/* ── Cards / stats ──────────────────────────────────────────────────── */
.candidate-card { cursor: pointer; transition: border-color 0.15s ease; }
.candidate-card:hover { border-color: var(--mud-palette-text-disabled) !important; }

.stat-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 18px 20px;
    height: 100%;
}
.stat-card .stat-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.stat-card .stat-value {
    font-size: 1.75rem; font-weight: 600; line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
    margin: 10px 0 4px;
}
.stat-card .stat-label {
    font-size: 0.75rem; font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.urgent-badge {
    background: var(--mud-palette-error-hover);
    color: var(--mud-palette-error);
    font-size: 0.6875rem; font-weight: 500;
    padding: 2px 7px; border-radius: 4px;
}

/* ── Timeline ───────────────────────────────────────────────────────── */
.timeline-wrapper { position: relative; }
.timeline-item { display: flex; gap: 16px; padding: 8px 0; }
.timeline-icon-wrap { display: flex; flex-direction: column; align-items: center; }
.timeline-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1;
}
.timeline-line {
    width: 1px; flex: 1; min-height: 20px;
    background: var(--mud-palette-lines-default);
}
.timeline-content { flex: 1; padding-bottom: 8px; min-width: 0; }

/* ── Team management panels ─────────────────────────────────────────── */
.panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.panel-sub {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.panel-empty {
    padding: 32px 24px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
    font-size: 0.8125rem;
}

.team-row {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.team-row:hover { background: var(--mud-palette-action-default-hover); }
.team-row.selected {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}
.team-row-name {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-row-meta {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.dialog-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
}

/* ── ITS lookup (AddAraiz landing) ──────────────────────────────────── */
.its-search-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 160px);
    padding: 24px;
}
.its-search-card {
    width: 100%; max-width: 420px;
    padding: 36px 32px 28px;
    text-align: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.its-search-icon {
    width: 52px; height: 52px; margin: 0 auto;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* ── Member profile card ────────────────────────────────────────────── */
.profile-card { overflow: hidden; }

.profile-head {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
}
.profile-avatar {
    width: 56px !important; height: 56px !important;
    font-size: 1.05rem !important; font-weight: 600;
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    flex-shrink: 0;
}
.profile-ident { flex: 1; min-width: 0; }
.profile-name {
    font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 7px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}
.its-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem; font-weight: 500;
    padding: 2px 8px; border-radius: 5px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.02em;
}
.meta-dot { color: var(--mud-palette-text-disabled); }

/* Icon-led fact tiles — airy, no grid lines */
.profile-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    padding: 8px 12px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.fact { display: flex; align-items: flex-start; gap: 10px; padding: 12px; }
.fact-icon {
    color: var(--mud-palette-text-disabled);
    margin-top: 1px; flex-shrink: 0;
}
.fact-label {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}
.fact-value {
    font-size: 0.875rem; font-weight: 500;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

@media (max-width: 600px) {
    .profile-head { flex-wrap: wrap; }
    .profile-name { white-space: normal; }
}

/* ── Araiz detail: state first, then the facts ───────────────────────
   Built to be scanned on a phone. The status leads because it is the one
   thing everyone looks for; everything else is a row of icon-led pills
   rather than a grid of labels nobody reads. */
.araiz-hero {
    display: flex; flex-direction: column; gap: 14px;
    padding: 20px; border-radius: 14px;
}
.araiz-hero-top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.araiz-hero-id {
    font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

/* Icon + value, no label — the icon carries the meaning. */
.araiz-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 10px; border-radius: 999px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem; color: var(--mud-palette-text-primary);
    max-width: 100%;
}
.meta-pill .mud-icon-root { color: var(--mud-palette-text-disabled); flex-shrink: 0; }
.meta-pill-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-pill-muted { color: var(--mud-palette-text-secondary); }

/* ── Section cards ──────────────────────────────────────────────────── */
.section-card { padding: 20px; border-radius: 14px; height: 100%; }
.section-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.section-title {
    font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}
.section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    font-size: 0.7rem; font-weight: 600;
}

/* Friendly rather than blank — an empty section should still say something. */
.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 16px; text-align: center;
    color: var(--mud-palette-text-disabled);
}
.empty-state .mud-icon-root { opacity: 0.55; }
.empty-state-text { font-size: 0.85rem; }

/* ── Description & private notes ─────────────────────────────────────── */
.prose {
    font-size: 0.95rem; line-height: 1.7;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Tinted and labelled, so "not for the member" is obvious at a glance. */
.notes-block {
    margin-top: 18px; padding: 14px 16px; border-radius: 10px;
    background: var(--mud-palette-background-gray);
    border: 1px dashed var(--mud-palette-lines-default);
}
.notes-head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--mud-palette-text-secondary);
}

/* ── Status timeline ────────────────────────────────────────────────── */
.tl-entry { padding-bottom: 4px; }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-to { font-weight: 650; color: var(--mud-palette-text-primary); }
.tl-from { font-size: 0.8125rem; color: var(--mud-palette-text-secondary); }
.tl-when { font-size: 0.75rem; color: var(--mud-palette-text-disabled); }
.tl-by {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 0.75rem; color: var(--mud-palette-text-secondary);
}
/* A remark is someone's words — set it apart rather than running it inline. */
.tl-remark {
    margin-top: 8px; padding: 8px 12px;
    border-left: 3px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem; line-height: 1.6;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .araiz-hero, .section-card { padding: 16px; }
}

/* ── Araiz detail, second pass ───────────────────────────────────────
   Additions aimed at making the screen explain itself: a coloured accent
   tied to the status, a completeness meter that says what is still
   missing, and section headers that state what a section is FOR rather
   than only what it is called. */

/* A stripe in the status colour, so state is readable before any text is. */
.araiz-hero {
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--araiz-accent, var(--mud-palette-primary));
}

.araiz-hero-id {
    display: inline-flex; align-items: center; gap: 6px;
}
/* Copying a case number is the one thing people do with it. */
.id-copy {
    opacity: 0; transition: opacity 120ms ease;
}
.araiz-hero:hover .id-copy,
.id-copy:focus-visible { opacity: 1; }

/* ── Completeness meter ───────────────────────────────────────────────
   The single most useful thing on the card: what is left to do here. */
.hero-progress { display: flex; flex-direction: column; gap: 10px; }
.progress-top {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 0.8125rem; color: var(--mud-palette-text-secondary);
}
.progress-count { font-weight: 650; color: var(--mud-palette-text-primary); }
.progress-track {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: var(--mud-palette-lines-default);
}
.progress-fill {
    height: 100%; border-radius: 999px;
    background: var(--mud-palette-primary);
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-fill.complete { background: var(--mud-palette-success); }

.checklist { display: flex; flex-wrap: wrap; gap: 6px; }
.check-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    font-size: 0.75rem;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}
.check-item.done {
    color: var(--mud-palette-success-text);
    background: var(--mud-palette-success);
    border-color: transparent;
}
.check-item .mud-icon-root { font-size: 14px !important; }

/* ── Section headings that explain themselves ─────────────────────── */
.section-heading { flex: 1; min-width: 0; }
.section-sub {
    display: block; margin-top: 2px;
    font-size: 0.75rem; line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Cards lift slightly on hover — enough to feel alive, not enough to distract. */
.section-card {
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.section-card:hover { transform: translateY(-1px); }

/* An empty section should say why the thing matters, not just that it is missing. */
.empty-state-hint {
    font-size: 0.75rem; max-width: 34ch; line-height: 1.5;
    color: var(--mud-palette-text-disabled);
}

/* ── People ──────────────────────────────────────────────────────────
   Initials beat a generic person glyph: they identify someone at a glance. */
.avatar-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
}

/* ── Timeline extras ─────────────────────────────────────────────── */
.tl-now {
    padding: 1px 8px; border-radius: 999px;
    background: var(--mud-palette-success); color: var(--mud-palette-success-text);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
/* How long it sat in that state — the question a timeline always raises. */
.tl-dwell {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    font-size: 0.7rem; color: var(--mud-palette-text-disabled);
}

/* ══ Communication log ═══════════════════════════════════════════════
   A feed, not a table: each entry is somebody's account of a
   conversation, and it reads as one. The composer expands in place
   rather than opening a dialog, so logging a call never loses your
   place on the page. */

.comm-compose {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px; padding: 16px;
    background: var(--mud-palette-background-gray);
    margin-bottom: 18px;
}
.comm-compose-open { border-color: var(--mud-palette-primary); }

/* Collapsed state: one tap target that looks like somewhere to type. */
.comm-prompt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; border-radius: 10px; cursor: pointer;
    border: 1px dashed var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit; font-size: 0.85rem; text-align: left;
    transition: border-color 140ms ease, color 140ms ease;
}
.comm-prompt:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
}

/* Quick-pick names above the free-text field — a shortcut, never a constraint. */
.comm-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.comm-suggest-label {
    font-size: 0.7rem; color: var(--mud-palette-text-disabled);
    align-self: center; margin-right: 2px;
}

.comm-feed { display: flex; flex-direction: column; }
.comm-entry { display: flex; gap: 12px; padding: 14px 0; }
.comm-entry + .comm-entry { border-top: 1px solid var(--mud-palette-lines-default); }

.comm-body { flex: 1; min-width: 0; }
.comm-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 0.8125rem; margin-bottom: 6px;
}
.comm-who { font-weight: 600; }
.comm-when { color: var(--mud-palette-text-disabled); font-size: 0.72rem; }
.comm-with {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Follow-up carries state, so it wears a status colour and an icon — never colour alone. */
.comm-followup {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 4px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 550;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}
.comm-followup.due {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}
.comm-followup.overdue {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}
.comm-followup .mud-icon-root { font-size: 14px !important; }

/* The next thing owed, lifted out of the feed so it is not something you have to hunt for. */
.comm-next {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; margin-bottom: 16px;
    background: var(--mud-palette-background-gray);
    border-left: 3px solid var(--mud-palette-warning);
    font-size: 0.8125rem;
}
.comm-next.overdue { border-left-color: var(--mud-palette-error); }

.comm-actions { display: flex; align-items: flex-start; }

/* ══ Dashboard ═══════════════════════════════════════════════════════
   Marks are thin and quiet; the data is the only thing allowed to be
   loud. Bars cap at 24px so the band keeps its air, data-ends are
   rounded 4px and square at the baseline, and touching fills are
   separated by a 2px gap in the surface colour rather than a stroke —
   a border would add ink that isn't data. */

/* The one number the page leads with. Proportional figures, not tabular:
   tabular-nums gives every digit a zero's width, which reads loose at
   display sizes. */
.hero-figure {
    font-size: 3rem; font-weight: 650; line-height: 1;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
}
.hero-figure-label {
    font-size: 0.8125rem; color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* ── Stat tiles ─────────────────────────────────────────────────────── */
.kpi-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.kpi {
    padding: 14px 16px; border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}
.kpi-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}
.kpi-value {
    font-size: 1.65rem; font-weight: 650; line-height: 1.15; margin-top: 6px;
    color: var(--mud-palette-text-primary);
}
.kpi-delta { font-size: 0.72rem; margin-top: 2px; }
.kpi-delta.up { color: var(--mud-palette-success); }
.kpi-delta.down { color: var(--mud-palette-error); }
.kpi-delta.flat { color: var(--mud-palette-text-disabled); }
/* Severity on a tile is a left edge, never the value's colour — a number
   in a status hue reads as the number itself being wrong. */
.kpi.alert { border-left: 3px solid var(--mud-palette-warning); }
.kpi.alert-critical { border-left: 3px solid var(--mud-palette-error); }

/* ── Horizontal bar rows (channels, types, ages, sessions) ──────────── */
.bar-rows { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
.bar-row-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 0.8125rem;
}
.bar-row-name { color: var(--mud-palette-text-primary); }
/* Values sit in a column, so these DO want tabular figures. */
.bar-row-value {
    color: var(--mud-palette-text-secondary); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.bar-track {
    height: 10px; border-radius: 999px; overflow: hidden;
    background: var(--mud-palette-lines-default);
}
.bar-fill {
    height: 100%; border-radius: 0 4px 4px 0;
    background: var(--mud-palette-primary);
    transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Emphasis: one row is the point, the rest are context. */
.bar-fill.muted { background: var(--mud-palette-text-disabled); opacity: 0.45; }

/* ── Stacked pipeline bar ───────────────────────────────────────────── */
.stack-bar {
    display: flex; height: 22px; border-radius: 6px; overflow: hidden;
    background: var(--mud-palette-lines-default);
    /* The 2px gap between segments, in the surface colour. */
    gap: 2px;
}
.stack-seg { height: 100%; min-width: 3px; transition: flex-basis 420ms ease; }
.stack-seg:first-child { border-radius: 6px 0 0 6px; }
.stack-seg:last-child { border-radius: 0 6px 6px 0; }

/* The legend is the dependable identity channel — never colour alone. */
.stack-legend {
    display: grid; gap: 8px 18px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-name { color: var(--mud-palette-text-primary); flex: 1; min-width: 0; }
.legend-value {
    color: var(--mud-palette-text-secondary); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.legend-pct { color: var(--mud-palette-text-disabled); font-size: 0.72rem; }

/* ── Trend ──────────────────────────────────────────────────────────── */
/* height:auto so the viewBox scales uniformly — stretching it would thin the
   stroke on one axis and turn the end dot into an ellipse. */
.trend-svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend-grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.trend-axis {
    fill: var(--mud-palette-text-disabled); font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.trend-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-line.primary { stroke: var(--mud-palette-primary); }
/* Emphasis, not a second category: created is the story, closed is context. */
.trend-line.context { stroke: var(--mud-palette-text-disabled); }
.trend-area { fill: var(--mud-palette-primary); opacity: 0.1; }
/* The 2px surface ring keeps the end dot legible where it crosses the line. */
.trend-dot {
    fill: var(--mud-palette-primary);
    stroke: var(--mud-palette-surface); stroke-width: 2;
}

/* ── Attention queue ────────────────────────────────────────────────── */
.attention-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.attention-card {
    display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 3px;
    text-align: left; width: 100%; cursor: pointer;
    font: inherit; color: inherit;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.attention-card:hover { transform: translateY(-1px); box-shadow: var(--mud-elevation-2); }
.attention-card.critical { border-left-color: var(--mud-palette-error); }
.attention-card.serious { border-left-color: var(--mud-palette-warning); }
.attention-card.warning { border-left-color: var(--mud-palette-warning); }
.attention-card.info { border-left-color: var(--mud-palette-info); }
.attention-count {
    font-size: 1.5rem; font-weight: 650; line-height: 1;
    color: var(--mud-palette-text-primary);
}
.attention-title { font-size: 0.8125rem; font-weight: 600; margin-top: 4px; }
.attention-detail {
    font-size: 0.72rem; line-height: 1.45; margin-top: 3px;
    color: var(--mud-palette-text-secondary);
}

/* ── Funnel ─────────────────────────────────────────────────────────── */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.funnel-step { display: flex; flex-direction: column; gap: 5px; }
.funnel-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-size: 0.8125rem;
}
.funnel-drop { font-size: 0.7rem; color: var(--mud-palette-error); }

/* ── Team load ──────────────────────────────────────────────────────── */
.team-row {
    display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center;
    padding: 8px 0;
}
.team-row + .team-row { border-top: 1px solid var(--mud-palette-lines-default); }
.team-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team-you {
    font-size: 0.6rem; padding: 1px 6px; border-radius: 999px;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
}

/* ── Activity ───────────────────────────────────────────────────────── */
.activity-row {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
}
.activity-row + .activity-row { border-top: 1px solid var(--mud-palette-lines-default); }
.activity-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
    background: var(--mud-palette-text-disabled);
}
.activity-text { flex: 1; min-width: 0; font-size: 0.8125rem; }
.activity-when {
    font-size: 0.72rem; color: var(--mud-palette-text-disabled); white-space: nowrap;
}

/* Numbers behind a chart, for anyone the chart does not serve. */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.data-table th, .data-table td {
    padding: 6px 10px; text-align: right;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table th { color: var(--mud-palette-text-secondary); font-weight: 600; }
.data-table td { font-variant-numeric: tabular-nums; }

/* ── Two-step flow indicator ─────────────────────────────────────────
   Recording an araiz is find-the-member then describe-the-araiz. Saying
   so removes the "how much more of this is there?" question that makes
   people abandon a form. */
.flow-steps {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.flow-step {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 8px; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 550;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
}
.flow-step.active {
    background: var(--mud-palette-primary);
    border-color: transparent;
    color: var(--mud-palette-primary-text);
}
.flow-step.done { color: var(--mud-palette-text-secondary); }
.flow-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}
.flow-step.active .flow-num {
    background: var(--mud-palette-primary-text); color: var(--mud-palette-primary);
}
.flow-step.done .flow-num {
    background: var(--mud-palette-success); color: var(--mud-palette-success-text);
}
.flow-line {
    flex: 0 0 24px; height: 2px; border-radius: 2px;
    background: var(--mud-palette-lines-default);
}

/* Confirmation that survives the form resetting for the next entry. */
.success-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; margin-bottom: 20px; border-radius: 12px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-success);
}
.success-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--mud-palette-success); color: var(--mud-palette-success-text);
}

/* ── List filtering ──────────────────────────────────────────────────
   Nine controls in a row is a wall. The two people actually reach for
   stay out; the rest fold away behind a count, and whatever is applied
   comes back as removable chips so the narrowing is always visible. */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.filter-panel {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    padding: 16px; margin-top: 12px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.applied-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.applied-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--mud-palette-text-disabled);
    margin-right: 2px;
}

/* What came back, in words, before the table itself. */
.result-summary {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 10px;
    font-size: 0.8125rem; color: var(--mud-palette-text-secondary);
}
.result-count { font-weight: 650; color: var(--mud-palette-text-primary); }

/* ── People-shaped table rows ────────────────────────────────────────
   A member is a person, not a record: lead with a face-sized avatar and
   let the identifying details sit under the name. */
.member-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar-row {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    font-size: 0.75rem; font-weight: 700;
}
.member-name { font-weight: 600; line-height: 1.3; }
.member-sub {
    font-size: 0.72rem; line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* Two related facts stacked in one cell, rather than two thin columns. */
.cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-strong { font-size: 0.8125rem; color: var(--mud-palette-text-primary); }
.cell-muted { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

/* A count worth reading at a glance rather than a chip lost in a cell. */
.count-badge-lg {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 9px; border-radius: 10px;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
    font-size: 0.85rem; font-weight: 700;
}
.count-badge-lg.muted {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Header cells that need a word of explanation carry it inline. */
.th-help {
    display: inline-flex; align-items: center; gap: 4px;
}
.th-help .mud-icon-root {
    font-size: 13px !important; color: var(--mud-palette-text-disabled);
}

/* ── Question / answer summary ───────────────────────────────────────
   A read-only recap of a filled form. Two columns on desktop so the
   answers line up and can be scanned down; stacked on a phone. */
.qa-list { display: flex; flex-direction: column; }
.qa-row {
    display: flex; gap: 16px; align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.qa-row:last-child { border-bottom: none; }
.qa-q {
    flex: 0 0 42%; max-width: 42%;
    font-size: 0.8125rem; color: var(--mud-palette-text-secondary);
}
.qa-a {
    flex: 1; min-width: 0;
    font-size: 0.875rem; color: var(--mud-palette-text-primary);
}
.qa-a-none { color: var(--mud-palette-text-disabled); font-style: italic; }

@media (max-width: 600px) {
    .qa-row { flex-direction: column; gap: 4px; }
    .qa-q { flex-basis: auto; max-width: 100%; }
}

/* ── Question blocks inside a form dialog ────────────────────────────── */
.form-q { padding: 16px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.form-q:first-child { padding-top: 0; }
.form-q:last-child { border-bottom: none; padding-bottom: 0; }
.form-q-label {
    display: block; margin-bottom: 10px;
    font-size: 0.9rem; font-weight: 550; line-height: 1.5;
    color: var(--mud-palette-text-primary);
}
/* The dependent half of a branching question, indented so the link is visible. */
.form-q-sub {
    margin-top: 14px; padding-left: 14px;
    border-left: 2px solid var(--mud-palette-primary);
}

/* ── Helpers ────────────────────────────────────────────────────────── */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 600px) {
    .hide-xs { display: none !important; }
    .login-card { margin: 16px; padding: 28px; }
}

/* ══ Report ══════════════════════════════════════════════════════════
   Shared by the printed and on-screen forms. A report is read in rows,
   so the table carries the weight and the chrome stays quiet. */

.report-head { margin-bottom: 18px; }
.report-title {
    font-size: 1.5rem; font-weight: 650; letter-spacing: -0.015em;
    margin: 0; color: var(--mud-palette-text-primary);
}
.report-sub {
    font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin: 4px 0 0;
}

/* Only rendered when printing — on screen the page header says all this already. */
.print-only { display: none; }

.report-meta {
    display: flex; flex-wrap: wrap; gap: 4px 20px;
    font-size: 0.78rem; color: var(--mud-palette-text-secondary);
    margin-top: 8px;
}

/* Totals strip above the table. */
.report-totals {
    display: grid; gap: 10px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.report-total {
    padding: 12px 14px; border-radius: 10px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}
.report-total-label {
    font-size: 0.7rem; letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}
.report-total-value {
    font-size: 1.4rem; font-weight: 650; line-height: 1.2; margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* Digits in columns must line up, so these DO want tabular figures. */
.report-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.report-table th, .report-table td {
    padding: 9px 10px; border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: right; white-space: nowrap;
}
.report-table th:first-child, .report-table td:first-child {
    text-align: left; white-space: normal;
}
.report-table thead th {
    font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); font-weight: 600;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}
.report-table td { font-variant-numeric: tabular-nums; }
.report-table tbody tr.is-you { background: var(--mud-palette-background-gray); }
.report-table tfoot td {
    font-weight: 650; border-top: 2px solid var(--mud-palette-lines-default);
    border-bottom: 0;
}
/* An idle row is data, not an error — recede it rather than flagging it. */
.report-table tbody tr.no-activity td { color: var(--mud-palette-text-disabled); }

.report-user { display: flex; align-items: center; gap: 8px; }
.report-note {
    font-size: 0.75rem; color: var(--mud-palette-text-disabled);
    margin-top: 14px; line-height: 1.5; max-width: 76ch;
}

@media print {
    .mud-drawer, .mud-appbar { display: none !important; }

    /* ── Printable report ────────────────────────────────────────────
       The screen is a tool; the page is a document. Controls, nav and
       anything that cannot be acted on in print are removed outright
       rather than left as dead ink. */
    .no-print,
    .mud-main-content > .mud-container > .page-header,
    .filter-bar, .filter-panel, .applied-chips,
    .mud-tabs-toolbar, .mud-snackbar-location-bottom-right,
    .mud-overlay, .mud-popover-provider { display: none !important; }

    .print-only { display: block !important; }

    /* Strip the app chrome so the paper carries the content, not a screenshot
       of an application. */
    html, body, .mud-main-content, .mud-container {
        background: #fff !important;
        margin: 0 !important; padding: 0 !important;
        max-width: none !important; width: auto !important;
    }

    /* Elevation is a screen idea — on paper it prints as grey mud. */
    .mud-paper, .section-card, .report-total {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #fff !important;
    }

    .report-title, .report-table th, .report-table td, .report-total-value {
        color: #000 !important;
    }
    .report-sub, .report-meta, .report-note, .report-total-label,
    .report-table thead th {
        color: #333 !important;
    }

    .report-table { font-size: 10pt; }
    .report-table th, .report-table td { border-bottom: 1px solid #ddd !important; }
    .report-table tbody tr.is-you { background: #f2f2f2 !important; }
    .report-table tbody tr.no-activity td { color: #777 !important; }

    /* A row split across a page break is unreadable, and a header stranded at
       the foot of a page is worse. */
    .report-table tr { page-break-inside: avoid; }
    .report-table thead { display: table-header-group; }
    .report-table tfoot { display: table-footer-group; }

    @page { margin: 14mm; }
}