/* Unscoped styles for ProjectHub. The palette and typography live in the MudTheme
   (Theme/ProjectHubTheme.cs, copied from PartnerPortal's theme); the shell rules
   below -- drawer, app bar, table headers, error bar -- are copied from the partner portal's
   wwwroot/app.css so the two apps look like one product. Keep them in step. */

html, body {
    margin: 0;
}

h1:focus {
    outline: none;
}

.page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

/* ── Home dashboard ───────────────────────────────────────────────────────
   Widgets are read by scanning down a column, so they share a fixed height and scroll their own
   body. Letting each card grow to its content makes a two-column grid ragged, and the reader then
   has to re-find the next card's heading on every row. */
.dashboard-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.dashboard-summary__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.dashboard-summary__tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-widget {
    display: flex;
    flex-direction: column;
    /* Stacked in one column, a card sizes to its content: nothing sits beside it to line up with,
       and a fixed height would leave a short widget as a screenful of empty card. It still caps,
       so one long list cannot push everything below it off the screen. */
    max-height: 340px;
    padding: 16px 20px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* MudBlazor's md breakpoint, where the grid becomes two columns and ragged card heights start
   showing as gaps. From here the cards are all the same height. */
@media (min-width: 960px) {
    .dashboard-widget {
        height: 340px;
        max-height: none;
    }
}

.dashboard-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-widget__subtitle {
    display: block;
    margin-top: 2px;
}

/* The body scrolls, not the card: the heading and its "see all" link stay put while a long list
   moves under them. */
.dashboard-widget__body {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-top: 12px;
    /* Room for the scrollbar so it never sits on top of the due dates. */
    padding-right: 4px;
}

/* Rows are links, so they must not inherit the link colour -- a column of blue text is
   unreadable, and the row's meaning is carried by its own content. */
.dashboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 6px;
    border-radius: 6px;
    color: var(--mud-palette-text-primary);
}

.dashboard-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.dashboard-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.dashboard-row + .dashboard-row {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dashboard-row__main {
    min-width: 0;
}

/* Long task titles truncate rather than wrapping to three lines and pushing the rest of the list
   out of the card. The full text is on the row's tooltip-free title attribute via the link. */
.dashboard-row__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-row__due {
    white-space: nowrap;
}

.portal-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}

.portal-card:hover {
    transform: translateY(-2px);
}

/* The portal cards are keyboard-operable (role="button" tabindex="0"), so they need a visible
   focus ring -- without one, a keyboard user can move through them with no idea which is
   selected. :focus-visible keeps the ring off mouse clicks. */
.portal-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* PageHeading carries tabindex="-1" so FocusOnNavigate can move focus to it after navigation.
   That focus is a programmatic announcement cue, not a user-visible selection, so suppress the
   ring the same way the Blazor template does for h1. */
h1:focus,
h1:focus-visible {
    outline: none;
}

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

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

/* ProjectHub's mark: beside the name in the app bar, and above the progress ring while the app
   downloads, so the first thing on screen is recognisably this app. */
.appbar-mark { display: block; flex: none; }

/* The startup screen is independent of MudTheme, which loads after WebAssembly. */
.startup {
    position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden;
    color: #e9edf7; background: radial-gradient(ellipse at 50% 42%, #25304e 0%, #121829 45%, #0c101b 85%);
    font-family: Inter, "Segoe UI", sans-serif;
}
.startup__grid {
    position: absolute; inset: 0; opacity: .16;
    background-image: linear-gradient(#647698 1px, transparent 1px), linear-gradient(90deg, #647698 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, #000, transparent 68%);
}
.startup__content { position: relative; text-align: center; width: min(360px, calc(100vw - 48px)); }
.startup__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .28em; color: #9baac5; }
.startup__constellation { position: relative; width: 240px; height: 240px; margin: 24px auto 12px; }
.startup__core {
    position: absolute; inset: 66px; display: grid; place-items: center; border-radius: 28px;
    border: 1px solid #738ab14d; background: linear-gradient(145deg, #35456380, #1a2137);
    box-shadow: 0 0 60px #8399cd20, inset 0 1px 0 #c3cde126; animation: startup-breathe 4s ease-in-out infinite;
}
.startup__orbit { position: absolute; border: 1px solid #849ac436; border-radius: 50%; }
.startup__orbit--outer { inset: 8px; animation: startup-orbit 18s linear infinite; }
.startup__orbit--inner { inset: 35px; border-style: dashed; border-color: #a69ac440; animation: startup-orbit 28s linear infinite reverse; }
.startup__orbit--outer::after { content: ""; position: absolute; top: 22px; left: 30px; width: 8px; height: 8px; border-radius: 50%; background: #aabddd; box-shadow: 0 0 18px #aabddd; }
.startup__node { position: absolute; width: 8px; height: 8px; border-radius: 3px; background: #a396c6; box-shadow: 0 0 20px #a396c666; }
.startup__node--one { top: 36px; right: 24px; }
.startup__node--two { bottom: 36px; left: 24px; background: #91a7cd; }
.startup__node--three { bottom: 17px; right: 65px; width: 5px; height: 5px; }
.startup__title { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -.045em; line-height: 1.2; }
.startup__title span { color: #a2b4d8; font-weight: 400; }
.startup__tagline { margin: 12px 0 32px; font-size: 13px; color: #a4aec4; letter-spacing: .025em; }
.startup__meter { height: 3px; background: #303b53; border-radius: 4px; overflow: hidden; }
.startup__fill { width: var(--blazor-load-percentage, 0%); height: 100%; background: linear-gradient(90deg, #7b92bb, #b1a2d0); box-shadow: 0 0 12px #a4abd0; transition: width .2s ease; }
.startup__status { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #a4aec4; font-size: 11px; }
.startup__pulse { width: 5px; height: 5px; background: #a2b4d8; border-radius: 50%; animation: startup-breathe 2s ease-in-out infinite; }
.startup .loading-progress-text { margin-left: auto; font-variant-numeric: tabular-nums; color: #d8deec; }
.startup .loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }
.startup__footer { position: absolute; bottom: 28px; font-size: 9px; letter-spacing: .24em; color: #718099; }
@keyframes startup-orbit { to { transform: rotate(360deg); } }
@keyframes startup-breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
    .startup *, .startup *::after { animation: none !important; transition: none !important; }
}
@media (max-height: 600px) {
    .startup__constellation { width: 200px; height: 200px; margin-top: 12px; }
    .startup__core { inset: 46px; }
    .startup__tagline { margin-bottom: 20px; }
    .startup__footer { bottom: 12px; }
}

/* ── Always-available assistant ───────────────────────────────────────────
   Fixed to the viewport rather than the page so the bubble stays put while
   content scrolls. z-index sits above MudBlazor's app bar (1100) but below its
   dialogs and popovers (1400+), so a dialog is never trapped behind it. */
.assistant-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
}

.assistant-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 420px;
    max-width: calc(100vw - 48px);
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

/* On a phone the panel is the screen -- a 420px floating card would overflow. */
@media (max-width: 600px) {
    .assistant-panel {
        left: 12px;
        right: 12px;
        bottom: 88px;
        width: auto;
    }
}


/* The file input covering the documents drop panel. Invisible, but it is the thing that actually
   receives the drop -- anything it does not cover, the browser treats as a page drop and opens. */
.document-drop__input {
    opacity: 0;
    cursor: pointer;
}


/* ── Projects list ────────────────────────────────────────────────────── */
.project-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.project-filters__search { flex: 2 1 280px; }
.project-filters__select { flex: 1 1 160px; }

.project-filters__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 8px;
}

/* The name column carries a line of description, so it gets the room and the rest stay tight. */
.project-list__name { min-width: 220px; max-width: 420px; }

.project-list__description {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-list__progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.project-list__progress .mud-progress-linear { flex: 1 1 auto; }

/* A message with its actions beside it, wrapping under it on a narrow screen. */
.inline-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

/* ── Project task table ───────────────────────────────────────────────────
   Rows open on double-click, so they say so with the pointer; the task reached from a link on
   another page is tinted so the eye finds it after the scroll. */
.task-table .task-row { cursor: pointer; }

.task-table .task-row--focused > td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.today-row[title] { cursor: pointer; }

/* ── Task notes ───────────────────────────────────────────────────────────── */
.task-latest-note {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 640px;
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.task-latest-note--blocked { color: var(--mud-palette-warning-text, var(--mud-palette-warning)); }

.task-latest-note__body {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-latest-note__by { flex: none; opacity: .8; }

.task-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.task-note {
    padding: 8px 12px;
    border-left: 3px solid var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
}

.task-note__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.task-note__author { font-weight: 600; }

/* Notes are often pasted from email; keep their line breaks. */
.task-note__body { white-space: pre-wrap; }

.task-notes__add {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.task-notes__add .mud-input-control { width: 100%; }

.task-notes__ticket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
    width: 100%;
}

.task-notes-inline { margin: 4px 0 12px; padding: 0 16px; }

/* ── Admin settings ───────────────────────────────────────────────────── */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}

.settings-section {
    padding: 16px 20px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ── Today ────────────────────────────────────────────────────────────────
   The plan and the pick list are both lists a person works down, so they share one row shape:
   state on the left, title over project in the middle, meta on the right. */
.today-summary {
    padding: 16px 20px;
    margin-bottom: 24px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.today-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.today-progress__text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* "Planning for" sits at the right of the page header, beside the heading. */
.today-owner { min-width: 220px; max-width: 280px; }

.today-carry-over {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.today-panel {
    height: 100%;
    padding: 16px 20px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.today-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
}

.today-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.today-filters__search { flex: 1 1 220px; }
.today-filters__projects { flex: 1 1 200px; }

.today-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
}

.today-row + .today-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.today-row__state { margin: 0 9px; }

.today-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.today-row__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-row__meta {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

/* Finished work stays in place, struck through and faded, so the list keeps its shape while the
   progress bar above it fills. */
.today-row--done .today-row__title {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

.today-group + .today-group { margin-top: 16px; }

.today-group__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 2px solid var(--mud-palette-primary);
}

/* A whole-row toggle. Reset to look like a list row rather than a button, but keep the focus ring:
   this is the one control on the row, and a keyboard user needs to see where it is. */
.today-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.today-pick:hover { background-color: var(--mud-palette-action-default-hover); }

.today-pick:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.today-pick:disabled { cursor: progress; opacity: .6; }

.today-pick--planned {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.today-pick__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* ── App bar search results ──────────────────────────────────────────── */
.search-result { display: flex; align-items: center; gap: 10px; min-width: 0; }
.search-result__icon { flex: none; color: var(--mud-palette-text-secondary); }
.search-result__text { display: flex; flex-direction: column; min-width: 0; }
.search-result__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Meeting summaries ─────────────────────────────────────────────────── */
.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.summary-item:hover { background-color: var(--mud-palette-action-default-hover); }
.summary-item:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

.summary-item--selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.summary-item__title { font-weight: 600; }
.summary-item__meta { font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.summary-item__state { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

.summary-section { margin-top: 20px; }
.summary-project { margin-top: 10px; }

.summary-project__name {
    display: block;
    padding-bottom: 2px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--mud-palette-primary);
}

.proposal-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Decided proposals stay visible as a record, but step back so what still waits stands out. */
.proposal-card--decided { opacity: .65; }

.proposal-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.proposal-card__title { font-weight: 600; }
.proposal-card__changes { margin: 4px 0 2px 18px; padding: 0; font-size: .875rem; }
.proposal-card__detail { white-space: pre-wrap; }
.proposal-card__why { font-style: italic; margin-top: 4px; }

.summary-unmatched { margin: 4px 0 0 18px; padding: 0; }


/* ── Management ───────────────────────────────────────────────────────────
   Chart colours come from the --viz-* variables App.razor writes per theme. Marks follow the house
   specs: 2px lines, columns <= 24px with a rounded data end, hairline solid gridlines, and text in
   text colours -- never the series colour. */
.mgmt-period { min-width: 160px; max-width: 200px; }

.mgmt-panel {
    padding: 16px 20px;
    margin-bottom: 16px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.mgmt-panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.text-right { text-align: right; }
.tabular { font-variant-numeric: tabular-nums; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Proportional figures at display size; tabular is for aligned columns only. */
.stat-tile__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.stat-tile__delta--good { color: var(--mud-palette-success); }
.stat-tile__delta--bad { color: var(--mud-palette-error); }

.portfolio-split { display: flex; flex-direction: column; gap: 10px; }

.portfolio-split__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.portfolio-split__label { flex: 1 1 auto; }

.portfolio-split__value {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Charts */
.viz__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.viz__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }

.viz__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.viz__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

.viz__plot { position: relative; }
.viz__svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz__grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz__baseline { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz__tick { fill: var(--viz-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz__band { fill: transparent; cursor: default; }
.viz__band--active { fill: var(--mud-palette-action-default-hover); }

.viz-tooltip {
    position: fixed;
    z-index: 1500;
    min-width: 140px;
    max-width: 320px;
    padding: 8px 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    font-size: .8125rem;
    line-height: 1.5;
    pointer-events: none;
}

.viz-tooltip__title { font-weight: 600; margin-bottom: 2px; }

.sparkline { display: block; overflow: visible; }
.sparkline__line { fill: none; stroke: var(--viz-muted); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sparkline__end { fill: var(--viz-series-1); stroke: var(--mud-palette-surface); stroke-width: 2; }

/* Gantt */
.gantt__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.gantt__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }

.gantt__grid {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    align-items: stretch;
}

.gantt__label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gantt__label--head,
.gantt__lane--head {
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-height: 28px;
}

.gantt__label--task { padding-left: 40px; font-size: .8125rem; }

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

.gantt__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gantt__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.gantt__task-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.gantt__lane {
    position: relative;
    min-height: 44px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

.gantt__lane--task { min-height: 28px; }

.gantt__month {
    position: absolute;
    bottom: 6px;
    padding-left: 4px;
    white-space: nowrap;
    border-left: 1px solid var(--viz-axis);
}

.gantt__gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--viz-grid);
}

.gantt__today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--viz-series-2);
    opacity: .7;
    z-index: 1;
}

.gantt__bar {
    position: absolute;
    top: 50%;
    height: 14px;
    transform: translateY(-50%);
    border-radius: 4px;
    z-index: 2;
}

.gantt__bar--project {
    height: 16px;
    background: color-mix(in srgb, var(--viz-series-1) 22%, transparent);
    overflow: hidden;
}

/* No end date: the bar fades out at today rather than claiming an end it does not have. */
.gantt__bar--open {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
}

.gantt__progress { height: 100%; background: var(--viz-series-1); }

.gantt__bar--late {
    background: repeating-linear-gradient(135deg, var(--viz-critical) 0 4px,
        color-mix(in srgb, var(--viz-critical) 55%, transparent) 4px 8px);
}

.gantt__bar--task { height: 10px; cursor: pointer; }
.gantt__bar--todo { background: var(--viz-neutral); }
.gantt__bar--inprogress { background: var(--viz-series-1); }
.gantt__bar--blocked { background: var(--viz-critical); }
.gantt__bar--done { background: var(--viz-good); }
.gantt__bar--task:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.gantt__diamond {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-surface);
    z-index: 3;
}

.gantt__diamond--legend { position: static; margin: 0 4px 0 2px; transform: rotate(45deg); }

.gantt__swatch {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 8px;
    border-radius: 2px;
}

.gantt__swatch--planned { background: color-mix(in srgb, var(--viz-series-1) 22%, transparent); }
.gantt__swatch--progress { background: var(--viz-series-1); }
.gantt__swatch--late {
    background: repeating-linear-gradient(135deg, var(--viz-critical) 0 3px,
        color-mix(in srgb, var(--viz-critical) 55%, transparent) 3px 6px);
}
.gantt__swatch--todo { background: var(--viz-neutral); }
.gantt__swatch--inprogress { background: var(--viz-series-1); }
.gantt__swatch--blocked { background: var(--viz-critical); }
.gantt__swatch--done { background: var(--viz-good); }

/* On a phone the label column takes too much; let the grid scroll sideways inside its panel. */
@media (max-width: 700px) {
    .gantt__grid { grid-template-columns: 160px minmax(480px, 1fr); overflow-x: auto; }
}

/* Activity feed */
.activity-day + .activity-day { margin-top: 16px; }

.activity-day__heading {
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--mud-palette-primary);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.activity-item:hover { background-color: var(--mud-palette-action-default-hover); }
.activity-item:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

.activity-item__icon { margin-top: 2px; color: var(--mud-palette-text-secondary); }
.activity-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.activity-item__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.activity-item__task { font-weight: 500; }

.activity-item__note {
    white-space: pre-wrap;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.activity-item__meta { font-size: .75rem; color: var(--mud-palette-text-secondary); }


/* =====================================================================================
   Shell styles copied from PartnerPortal/wwwroot/app.css
   ===================================================================================== */

/* ---- Blazor's disconnect / unhandled-error bar ----
   The markup lives in App.razor, so these rules must be unscoped. They were previously in
   MainLayout.razor.css, where Blazor's CSS isolation rewrote them to match only that
   component — which meant the bar could never actually be styled. */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    color: #664d03;
    border-top: 1px solid #ffe69c;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 3000;
    font-size: .875rem;
}

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

#blazor-error-ui .reload {
    color: #664d03;
    text-decoration: underline;
}

/* ---- Drawer ----
   Separate navigation groups with a hairline and readable section labels. */
.mud-drawer .mud-nav-group > .mud-nav-link {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: none;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: .25rem;
}

.mud-drawer .mud-nav-group .mud-nav-item .mud-nav-link {
    font-size: .875rem;
    padding-left: 2rem;
    text-transform: none;
    letter-spacing: normal;
}

/* ---- Tables ----
   Readable column labels, with wrapping available on workspace tables. */
.mud-table-sticky-header thead th,
.mud-table-head th {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
}

/* ---- Drawer: logo header and tagline footer ---- */
.mud-drawer .drawer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 14px;
}

.mud-drawer .drawer-brand img {
    width: 100%;
    max-width: 168px;
    height: auto;
    display: block;
}

.mud-drawer .drawer-brand-text {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mud-drawer .drawer-brand-mark {
    display: none;
    color: #fff;
    font-size: 26px;
}

.mud-drawer .drawer-footer {
    margin-top: auto;
    padding: 20px 16px 22px;
    text-align: center;
    color: rgba(255, 255, 255, .78);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: none;
    line-height: 1.7;
}

.mud-drawer .drawer-footer::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin: 10px auto 0;
    background: var(--mud-palette-primary);
    border-radius: 1px;
}

/* Mini rail: full wordmark and footer give way to a single mark. MudBlazor switches the
   drawer's class rather than its width when the mini variant collapses. */
.mud-drawer-mini.mud-drawer--closed .drawer-brand img,
.mud-drawer-mini.mud-drawer--closed .drawer-brand-text,
.mud-drawer-mini.mud-drawer--closed .drawer-footer {
    display: none;
}

.mud-drawer-mini.mud-drawer--closed .drawer-brand-mark {
    display: block;
}

/* The drawer content is a flex column so the footer can sit at the bottom. */
.mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
}

/* ---- App bar ---- */
.appbar-title {
    font-weight: 600;
    white-space: nowrap;
}

.appbar-subtitle {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.appbar-search {
    flex: 1 1 auto;
    max-width: 520px;
    min-width: 200px;
    margin: 0 24px;
}

.appbar-search .mud-input-control {
    margin: 0;
}

.appbar-search .mud-input-outlined .mud-input-outlined-border {
    border-radius: 999px;
}

.appbar-search .mud-input.mud-input-outlined {
    background: var(--mud-palette-background-gray);
}

@media (max-width: 959px) {
    .appbar-search { display: none; }
    .appbar-subtitle { display: none; }
}

.mud-drawer .mud-nav-link { min-height: 44px; }
.mud-drawer .mud-nav-group .mud-nav-item .mud-nav-link { font-size: 1rem; }

/* ---- Portal drawer: lit icon tiles on a gradient ground ----
   Shared by every layout that has a drawer. Each block sets --nav-hue inline and every rule below
   reads it, so a colour is declared once in the markup rather than repeated per property here.
   The agent portal sets a hue per section; the single-role portals set one for the whole nav,
   taken from that portal's card colour on the chooser.

   Rows are matched as .mud-nav-item > .mud-nav-link rather than through a group's collapse:
   MudBlazor wraps every nav link in .mud-nav-item, inside a group or directly under the menu, so
   this covers the grouped agent nav and the flat ones alike.

   The six hues are deliberately not palette tokens. The palette has one accent, and this needs
   six that stay legible on a near-black drawer; Support is #e8b339 rather than the palette's
   #d29922 because the palette value goes muddy at icon size against this background. */
.portal-drawer {
    background: linear-gradient(180deg, #141a2e 0%, #12161d 55%, #161225 100%);
}

/* Pure C3: no slab fill and no spine. Sections are separated by spacing alone, and the hue
   appears only in the icon tiles and on the active row. --nav-hue still comes from the markup;
   only the rules that spent it on the container are gone. */
.portal-drawer .nav-block {
    margin: 5px 8px;
    padding-bottom: 3px;

    /* MudNavGroup renders at the drawer's full width, so side margins push it past the edge and
       the drawer grows a horizontal scrollbar. Auto width lets it shrink to fit between them. */
    width: auto;
    box-sizing: border-box;
}

/* The group's own row is its header: hue text, hue icon, and no tile -- a tile there would read
   as another destination rather than a label. */
/* Group labels go back to the drawer's own muted text: with no slab behind them, a hue heading
   would be the only coloured text on the row and would read as a link rather than a label. */
.portal-drawer .nav-block > .mud-nav-link {
    color: var(--mud-palette-drawer-text);
    font-size: .8125rem;
    min-height: 34px;
    opacity: .8;
}
/* The group's own icon is hidden while the drawer is open -- the label alone is enough, and it
   keeps the tiles below as the only icons in the column. It comes back in the 60px rail, where
   it is the only thing identifying a collapsed group. */
.portal-drawer .nav-block > .mud-nav-link > .mud-nav-link-icon {
    display: none;
}
.portal-drawer.mud-drawer--closed .nav-block > .mud-nav-link > .mud-nav-link-icon {
    display: inline-flex;
    color: var(--nav-hue);
    background: none;
    box-shadow: none;
    width: 20px;
    height: 20px;
    padding: 0;
}

/* Item rows. The icon is an inline <svg>, not a wrapped element, so the tile is the svg's own
   box: a 14px glyph with 5px of padding on content-box makes a 24px tile. */
.portal-drawer .nav-block .mud-nav-item > .mud-nav-link,
.portal-drawer .nav-block > .mud-nav-link.active {
    margin: 1px 6px;
    border-radius: 8px;
    min-height: 34px;

    /* .mud-nav-item is a flex container, so these rows are flex items. width:100% overflows the
       slab once side margins are added, but width:auto shrinks a flex item to its text and leaves
       the active highlight stopping mid-slab. flex:1 fills the track instead, and the margins
       stay inside it. min-width:0 lets a long label ellipsize rather than push the row wider. */
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
}

.portal-drawer .nav-block .mud-nav-link > .mud-nav-link-icon {
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    padding: 5px;
    border-radius: 7px;
    color: var(--nav-hue);
    background: color-mix(in srgb, var(--nav-hue) 20%, transparent);
}

/* Active row, "lit row" treatment: the row itself tints in the section hue, a colour edge runs
   down its leading side, and the tile glows harder. Four signals on one row -- slab tint, row
   tint, edge and glow -- where the previous version used two, and three of those four are the
   same colour stacked. Deliberate: the trade is findability against the row going muddy. */
/* Qualified past MudBlazor's own active-link rule, which is
   .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) -- five
   classes. A four-class selector here loses on specificity and the background never lands, which
   is what happened to the previous version of this rule. */
.portal-drawer .mud-navmenu .nav-block .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: color-mix(in srgb, var(--nav-hue) 16%, transparent);
    color: var(--mud-palette-drawer-text);
    box-shadow: inset 3px 0 0 var(--nav-hue);
}
.portal-drawer .nav-block .mud-nav-link.active > .mud-nav-link-icon {
    background: var(--nav-hue);
    color: #0b1016;
    box-shadow: 0 0 16px color-mix(in srgb, var(--nav-hue) 75%, transparent);
}

/* Tighter margins in the 60px rail, where 8px a side would eat a third of the width. */
.portal-drawer.mud-drawer--closed .nav-block { margin: 6px 4px; }


/* Table headers use one style in both themes: a light wash of Primary over Surface, falling
   from 14% to 5% down the header. Both stops are color-mix over palette tokens, so each theme
   resolves them against its own Surface and Primary and the two stay in step without a
   conditional. This is also the formula .widget-card-header uses, so tables and dashboard
   panels read as the same family.

   An earlier attempt reused the dark theme's navy literally in light mode. It failed because
   that navy does relative work, not absolute: against the dark Surface it is a slightly lifted
   band, but on a white page the same colour is a near-black slab.

   The 2px Primary underline is load-bearing at this lightness, not decoration. The 5% bottom
   stop lands within a few steps of Surface, so without the rule the header dissolves into the
   first data row.

   Text is text-primary rather than an accent colour, clearing roughly 15:1 in light and 12:1 in
   dark; the accent-on-tint pairing the navy header needed could not reach AA in light. */
:root {
    --portal-table-header-background: linear-gradient(
        color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)));
    --portal-table-header-color: var(--mud-palette-text-primary);
    --portal-table-header-weight: 500;
    --portal-table-border-collapse: separate;
    --portal-table-header-radius: var(--mud-default-borderradius);
}

.portal-content .mud-table-head .mud-table-cell,
.portal-content .mud-simple-table table thead th {
    background: var(--portal-table-header-background, var(--mud-palette-surface));
    color: var(--portal-table-header-color, var(--mud-palette-text-primary));
    border-bottom: 2px solid var(--mud-palette-primary);
    font-size: .875rem;
    font-weight: var(--portal-table-header-weight, 500);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
}

.portal-content .mud-table-head > tr:first-child > .mud-table-cell:first-child,
.portal-content .mud-simple-table table thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--portal-table-header-radius, 0px);
}
.portal-content .mud-table-head > tr:first-child > .mud-table-cell:last-child,
.portal-content .mud-simple-table table thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--portal-table-header-radius, 0px);
}

/* Separate borders are what let --portal-table-header-radius render at all: a table in
   collapse mode shares one border grid across cells, and a radius on an individual header cell
   is ignored. border-spacing is zeroed so separating the borders does not also gap the cells. */
.portal-content .mud-table-root,
.portal-content .mud-simple-table table {
    border-collapse: var(--portal-table-border-collapse, collapse);
    border-spacing: 0;
}

/* Workspace tables share a stronger reading hierarchy.
   Palette-derived washes keep the same separation in light and dark themes. */
.workspace-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}
.portal-content .workspace-table .mud-table-head .mud-table-cell {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface));
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 12px;
}
.workspace-table .mud-table-body .mud-table-cell { padding-top: 11px; padding-bottom: 11px; }
.workspace-table .mud-table-body .mud-table-row:nth-child(even) {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
}
.workspace-table .mud-table-body .mud-table-row:hover,
.workspace-table .mud-table-body .mud-table-row:focus-within {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}
.workspace-table .project-list__name .mud-link {
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
}
.workspace-table .project-list__description { margin-top: 3px; font-size: .8125rem; }
.project-list__status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}
.project-list__status--planning { background: color-mix(in srgb, var(--mud-palette-info) 18%, transparent); }
.project-list__status--active { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.project-list__status--onhold { background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent); }
.project-list__status--completed { background: color-mix(in srgb, var(--mud-palette-tertiary) 18%, transparent); }
.project-list__status--cancelled { background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent); }
.project-list__health { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .8125rem; }
.project-list__health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-text-secondary); flex: none; }
.project-list__health--green .project-list__health-dot { background: var(--mud-palette-success); }
.project-list__health--yellow .project-list__health-dot { background: var(--mud-palette-warning); }
.project-list__health--red .project-list__health-dot { background: var(--mud-palette-error); }
.project-list__target { white-space: nowrap; font-variant-numeric: tabular-nums; }
.project-list__overdue { color: color-mix(in srgb, var(--mud-palette-error) 75%, var(--mud-palette-text-primary)); font-weight: 600; }
.project-list__date-note { display: block; font-size: .75rem; margin-top: 2px; }
.project-list__owner { font-size: .875rem; white-space: nowrap; }
.workspace-table .project-list__progress { min-width: 128px; }
.workspace-table .project-list__progress .mud-progress-linear { height: 6px; }
.workspace-table .project-list__progress .mud-typography { min-width: 34px; font-variant-numeric: tabular-nums; }

/* Compact supporting columns; project titles remain the main reading anchor. */
.workspace-table .mud-table-body .mud-table-cell { font-size: .8125rem; }
.workspace-table .project-list__name .mud-link { font-size: .875rem; }
.workspace-table .project-list__description { font-size: .75rem; }
.workspace-table .project-list__owner { font-size: .8125rem; }
.workspace-table .project-list__access { white-space: nowrap; color: var(--mud-palette-text-secondary); }

/* Shared compact type, with primary row content kept distinct from metadata. */
.workspace-table .mud-table-cell .mud-typography-body1,
.workspace-table .mud-table-cell .mud-typography-body2 { font-size: .8125rem; }
.workspace-table .mud-table-cell .mud-typography-caption { font-size: .75rem; }
.workspace-table .mud-table-cell .mud-link { font-size: .875rem; font-weight: 600; }
.workspace-table .mud-table-cell .mud-chip { margin: 0; font-size: .75rem; }
.workspace-table .mud-table-cell .mud-chip-filled.mud-chip-color-success {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}
.workspace-table .mud-table-cell .mud-chip-filled.mud-chip-color-info {
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-info) 18%, transparent);
}
.table-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-actions .mud-button { white-space: nowrap; font-size: .75rem; }
.tickets-table .ticket-table__subject { min-width: 240px; }
.tickets-table .ticket-table__subject .mud-typography-body2 { font-size: .875rem; font-weight: 600; }
.tickets-table .ticket-table__subject .mud-typography-caption { margin-top: 3px; }
.tickets-table .ticket-table__assignee { min-width: 140px; }
.portal-content .viz__table table td { font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* Ticket badges distinguish priority from workflow state with readable tinted fills. */
.ticket-pill {
    --pill-accent: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--pill-accent) 35%, transparent);
    background: color-mix(in srgb, var(--pill-accent) 16%, transparent);
    color: color-mix(in srgb, var(--pill-accent) 40%, var(--mud-palette-text-primary));
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.ticket-pill--slate { --pill-accent: #8498b5; }
.ticket-pill--violet { --pill-accent: #aa8ee0; }
.ticket-pill--blue { --pill-accent: var(--mud-palette-info); }
.ticket-pill--primary { --pill-accent: var(--mud-palette-primary); }
.ticket-pill--amber { --pill-accent: var(--mud-palette-warning); }
.ticket-pill--red { --pill-accent: var(--mud-palette-error); }
.ticket-pill--green { --pill-accent: var(--mud-palette-success); }

/* A separate framed message makes the boundaries of long ticket threads clear. */
.ticket-comment {
    margin-bottom: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 6px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}
.ticket-comment__header {
    padding: 10px 14px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ticket-comment__body { padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

.tickets-table .ticket-comment__header .ticket-comment__author {
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
    font-size: .875rem;
    font-weight: 700;
}
.ticket-comment__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.ticket-comment__body { color: var(--mud-palette-text-primary); }

.ticket-comment__rich { display: block; width: 100%; height: 340px; border: 0; background: var(--mud-palette-surface); }

.authentication-layout { min-height: 100dvh; padding: 24px; }

.startup__meter--indeterminate .startup__fill { width: 35%; animation: startup-slide 1.8s ease-in-out infinite alternate; }
@keyframes startup-slide { to { transform: translateX(185%); } }
@media (prefers-reduced-motion: reduce) { .startup__meter--indeterminate .startup__fill { animation: none; } }

/* Activity rows share one fixed icon track; inherited button centering must not
   move shorter entries toward the middle of the feed. */
.activity-header { width: 100%; }
.activity-feed .activity-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    gap: 10px;
    padding: 14px 10px;
    text-align: left;
    font-size: .875rem;
}
.activity-feed .activity-item__icon {
    justify-self: center;
    margin-top: 2px;
    color: var(--mud-palette-primary);
}
.activity-feed .activity-item__main { width: 100%; align-items: flex-start; gap: 6px; }
.activity-feed .activity-item__line { justify-content: flex-start; line-height: 1.6; }
.activity-item__actor {
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
    font-weight: 600;
}
.activity-item__verb { color: var(--mud-palette-text-secondary); }
.activity-feed .activity-item__task { font-weight: 600; overflow-wrap: anywhere; }
.activity-feed .activity-item__note { font-size: .8125rem; line-height: 1.65; width: 100%; max-width: none; box-sizing: border-box; overflow-wrap: anywhere; }
.activity-feed .activity-item__meta { font-size: .75rem; }
.activity-feed .activity-day__heading {
    font-size: .8125rem;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
    border-radius: 4px;
}
.activity-feed .mud-chip { margin: 0 0 0 4px; font-size: .6875rem; }

/* Activity is a timeline of events: each kind gets a restrained accent and icon tile. */
.activity-feed .activity-item {
    --activity-accent: var(--mud-palette-primary);
    margin-top: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--activity-accent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--activity-accent) 5%, var(--mud-palette-surface));
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
}
.activity-feed .activity-item--note { --activity-accent: #a18ac7; }
.activity-feed .activity-item--started { --activity-accent: var(--mud-palette-info); }
.activity-feed .activity-item--done { --activity-accent: var(--mud-palette-success); }
.activity-feed .activity-item--blocked { --activity-accent: var(--mud-palette-error); }
.activity-feed .activity-item__icon {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 6px;
    border-radius: 8px;
    color: color-mix(in srgb, var(--activity-accent) 75%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--activity-accent) 16%, transparent);
}
.activity-feed .activity-item:hover,
.activity-feed .activity-item:focus-visible {
    background: color-mix(in srgb, var(--activity-accent) 11%, var(--mud-palette-surface));
}
.activity-feed .activity-item__note {
    display: block;
    padding: 10px 12px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    border-left: 2px solid color-mix(in srgb, var(--activity-accent) 45%, transparent);
}
.activity-feed .activity-item__meta { margin-top: 2px; }
.activity-feed .activity-day + .activity-day { margin-top: 24px; }

/* Ticket-to-task dialog: keep editable values distinct from labels. */
.ticket-task-dialog .ticket-task-dialog__title { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.ticket-task-dialog .mud-input,
.ticket-task-dialog .mud-input input,
.ticket-task-dialog .mud-input textarea,
.ticket-task-dialog .mud-select-input,
.ticket-task-dialog .mud-input-slot {
    font-family: 'Segoe UI', sans-serif;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.55;
}
.ticket-task-dialog .mud-input-label { font-size: .875rem; font-weight: 500; }
.ticket-task-dialog .mud-input-helper-text { font-size: .75rem; font-weight: 400; line-height: 1.5; }
.ticket-task-dialog .mud-dialog-content { padding-top: 8px; }
.ticket-task-dialog .mud-dialog-actions { padding: 16px 24px 20px; gap: 8px; }
.ticket-task-dialog .mud-button-root { font-size: .8125rem; font-weight: 500; text-transform: none; letter-spacing: normal; }

/* Give editable fields their own surface in both themes. */
.mud-input.mud-input-outlined {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    border-radius: var(--mud-default-borderradius);
    transition: background-color .15s ease;
}
.mud-input.mud-input-outlined:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 9%, var(--mud-palette-surface));
}
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 24%, var(--mud-palette-surface));
}
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea,
.mud-input.mud-input-outlined .mud-input-slot {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.55;
}
.task-edit-form { border-left: 3px solid var(--mud-palette-primary); }
.task-edit-form .mud-button-root { text-transform: none; letter-spacing: normal; }

/* Action buttons: quiet surfaces and readable labels across the workspace. */
.mud-button-root:not(.mud-icon-button) {
    text-transform: none;
    letter-spacing: normal;
    font-size: .875rem;
    font-weight: 500;
    border-radius: 8px;
}
.mud-button-root.mud-button-outlined:not(:disabled) {
    background-color: color-mix(in srgb, currentColor 7%, transparent);
    border-color: color-mix(in srgb, currentColor 22%, transparent);
    padding: 7px 13px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.mud-button-root.mud-button-outlined:not(:disabled):hover {
    background-color: color-mix(in srgb, currentColor 13%, transparent);
    border-color: color-mix(in srgb, currentColor 38%, transparent);
}
.mud-button-root.mud-button-outlined:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}
.mud-button-root .mud-button-icon-size-medium > .mud-icon-root { font-size: 18px; }

/* Carry the same treatment into primary actions, dropdowns, and form labels. */
.mud-button-root.mud-button-filled { box-shadow: none; }
.mud-button-root.mud-button-filled:not(:disabled):hover {
    box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}
.mud-button-root.mud-button-size-small { font-size: .8125rem; }
.mud-input-control .mud-input-label { font-size: .875rem; font-weight: 500; }
.mud-input-control .mud-input-helper-text { font-size: .75rem; font-weight: 400; line-height: 1.5; }
.mud-popover .mud-list-item-text .mud-typography-body1,
.mud-popover .mud-list-item-text .mud-typography-body2 {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
}
.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-error:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-error);
}
.mud-input.mud-input-outlined.mud-disabled {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

/* Reserve one horizontal strip for task actions, even when titles are long. */
.task-table .task-actions-cell { width: 148px; min-width: 148px; white-space: nowrap; }
.table-row-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 3px; width: 100%; }
.table-row-actions > * { flex-shrink: 0; }
.table-row-actions .mud-tooltip-root { display: inline-flex; }
.table-actions > .mud-stack { flex-wrap: nowrap; }

/* ── Project priority ─────────────────────────────────────────────────────
   One hue, stronger as priority rises: it is a magnitude, not a status, so it stays clear of the
   red/amber/green that Health and Overdue already use. The number is the meaning; the fill only
   groups it. */
.priority-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .8125rem; }
.priority-badge__value {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px;
    font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}
.priority-badge--medium .priority-badge__value { background: color-mix(in srgb, var(--mud-palette-primary) 24%, transparent); }
.priority-badge--high .priority-badge__value { background: color-mix(in srgb, var(--mud-palette-primary) 42%, transparent); }
.priority-badge--critical .priority-badge__value {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.priority-badge__label { color: var(--mud-palette-text-secondary); }

.project-priority-field { width: 100%; }
.project-priority-field__scale { display: flex; justify-content: space-between; font-size: .75rem; margin-top: -4px; }

/* ── People page: a person's tasks ──────────────────────────────────────── */
.people-work-table tbody tr { cursor: pointer; }
.person-tasks__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ── Admin: Check-in activity ─────────────────────────────────────────────
   The commit rows reuse the activity feed's day groups; they are not buttons, since each one
   links out to Azure DevOps rather than opening anything here. */
.repo-authors .mud-table-body .mud-table-row { cursor: pointer; }
.repo-authors .repo-authors__row--selected { background-color: var(--mud-palette-action-default-hover); }
.repo-authors__name { font-weight: 600; }

.repo-share { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.repo-share__value { min-width: 40px; text-align: right; }
.repo-share__track { flex: 1 1 auto; height: 6px; border-radius: 3px; background-color: var(--viz-grid); overflow: hidden; }
.repo-share__bar { display: block; height: 100%; border-radius: 3px; background-color: var(--viz-series-1); }
.repo-share__pct { min-width: 32px; font-size: .75rem; }

.repo-commit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.repo-commit__icon { margin-top: 2px; color: var(--mud-palette-text-secondary); }
.repo-commit__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.repo-commit__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.repo-commit__message { overflow-wrap: anywhere; }