/* Connections (CWMC-461)
   Type comes from the app's scale in Themes/Theme.cs and nothing here invents a size:
   .875rem body, .75rem captions, 1rem/600 for a card title (the H6 step). This file used to
   run 16-20px "for volunteers who are not comfortable with admin software", which only made
   Connections look like a different product from People and Groups.
   Every colour comes from the MudBlazor palette so church theming keeps working.
   See docs/DESIGN_SYSTEM.md. */

.care-queue {
    /* The app's own scale, from Themes/Theme.cs: .875rem body, .75rem captions, 1rem for a card
       title. Hand-rolled markup otherwise inherits the browser's 16px, which is why this page
       read a size larger than People and Groups.

       Not var(--mud-typography-default-size): there are two MudThemeProviders, and the inner one
       (the church theme, which sets no FontSize) resets that variable to MudBlazor's stock 1rem
       for everything on the page. The admin scale only survives at :root. See
       docs/DESIGN_SYSTEM.md - fixing that is the app-wide job this page cannot do on its own. */
    font-size: .875rem;
    --care-radius: var(--mud-default-borderradius);
    /* The table-or-stacked switch below asks this box how wide it is, not the window. The admin
       sidebar takes 250px and the page its padding, so a 1400px laptop window left the list
       1070px: the window said "table" while the seven columns needed 1190px, and the Notes
       column ran off the right edge behind a horizontal scrollbar. */
    container-type: inline-size;
    container-name: care;

    /* Text-safe versions of the status colours. The palette values are chosen as fills and
       measure 2.38:1 (warning), 2.73:1 (info) and 3.52:1 (error) as text on white, all
       under the 4.5:1 minimum. These are the same hues darkened until they pass. */
    --care-text-new: #8A6A00;
    --care-text-progress: #0B6E8A;
    --care-text-late: #B42318;
}

/* ---------- Header ---------- */

.care-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 700px) {
    /* The shared page header stretches every action to a full row on a phone. Here the options
       icon and Add follow-up share one row: Add takes the width, the icon keeps its square. */
    .care-header-actions {
        width: 100%;
    }

    .care-header-actions .mud-button-root.mud-button-filled {
        flex: 1 1 auto;
    }

    .care-header-actions .mud-button-root.mud-icon-button {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
    }
}

/* ---------- Toolbar ---------- */

/* Search takes the room it needs; the three controls sit beside it and wrap together
   rather than one at a time. */
.care-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.care-toolbar > * {
    flex: 1 1 170px;
    min-width: 0;
}

/* Sort and its direction arrow are one control and wrap together. Aligned on the bottom edge,
   because the select's own box starts below the space its floating label sits in, so matching
   the tops left the arrow riding 8px high. */
.care-toolbar-sort {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.care-toolbar-sort .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Built to match the outlined input beside it rather than a MudBlazor button: same height,
   same border, same corner. */
.care-sort-direction {
    flex: 0 0 auto;
    height: 52px;
    width: 52px;
    /* The input control reserves 4px under its box; without this the arrow sits that much low. */
    margin-bottom: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.care-sort-direction:hover {
    border-color: var(--mud-palette-action-default);
}

.care-toolbar > .care-toolbar-search,
.care-toolbar > *:has(> .care-toolbar-search) {
    flex: 3 1 260px;
}

/* ---------- The list ---------- */

/* One definition of the columns, used by the header and by every row, so they cannot drift.
   Person and Request flex; the three fields and the actions are fixed, because a column whose
   width changes with its content is the thing that makes a list look broken. */
.care-list {
    /* Sized so a 1366px laptop gets the table: its list is about 1036px wide once the sidebar
       and page padding are taken. At the old 1190px minimum anything under a 1530px window got
       the stacked layout, which is three times the height per row. Each fixed column holds its
       longest ordinary value ("In progress", "15 days overdue"); a long name ellipsises. */
    --care-grid: 40px minmax(136px, 1.1fr) minmax(158px, 1.9fr) 140px 160px 180px 120px;
}

.care-row,
.care-list-head {
    display: grid;
    grid-template-columns: var(--care-grid, 40px minmax(0, 1fr));
    grid-template-areas: "check person request status assignee due actions";
    align-items: center;
    column-gap: 12px;
}

/* The same header People's grid has: sentence case, body weight up one step, body colour. It
   was a 10.5px uppercase caption, which read as decoration rather than as column names. */
.care-list-head {
    padding: 4px 12px 8px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.care-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow-wrap: anywhere;
}

.care-row:last-child {
    border-bottom: none;
}

.care-cell {
    min-width: 0;
}

/* MudMenu wraps its activator in a box of its own that shrink-wraps to the pill, so the pill's
   width:100% had nothing to fill and every column was ragged again. The wrapper fills the cell. */
.care-cell .mud-menu,
.care-cell .mud-menu > * {
    display: block;
    width: 100%;
}

/* Named at every width. Only the template changes between layouts, and a row that omits a cell
   (no tick box on a person's record) must not shunt every other cell one column left. */
.care-cell-check { grid-area: check; }
.care-cell-person { grid-area: person; }
.care-cell-request { grid-area: request; }
.care-cell-status { grid-area: status; }
.care-cell-assignee { grid-area: assignee; }
.care-cell-due { grid-area: due; }
.care-cell-actions { grid-area: actions; }

.care-cell-check .mud-input-control {
    margin: 0;
}

/* Overdue is signalled three ways: this bar, a different icon, and the words "3 days overdue".
   Never colour alone. An inset shadow, not a border: a border is part of the box and would push
   that row's contents in, so nothing below it would line up. */
.care-row-late {
    box-shadow: inset 4px 0 0 0 var(--mud-palette-error);
}

/* Due today is worth noticing but is not yet a failure, so it is amber, not red. */
.care-row-today {
    box-shadow: inset 4px 0 0 0 var(--mud-palette-warning);
}

.care-row-done {
    color: var(--mud-palette-text-secondary);
}

.care-row-selected {
    background: var(--mud-palette-primary-hover);
}

/* Saved, but no longer a match for the list it is in. Visibly settled, still readable, still
   exactly where it was left. */
.care-row-departed {
    opacity: .72;
    background: var(--mud-palette-background-grey);
}

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

.care-row-selected:hover {
    background: var(--mud-palette-primary-hover);
}

/* ---------- Cells ---------- */

.care-cell-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.care-name {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    /* A name opens that person's record, so it is coloured like every other link in the app. */
    color: var(--mud-palette-primary);
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.care-name:hover {
    text-decoration: underline;
}

.care-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.care-meta .mud-chip {
    margin: 0;
    height: 20px;
    font-size: .75rem;
    font-weight: 600;
    /* The two labels render 9px apart, so one width covers both. */
    min-width: 92px;
    justify-content: center;
}

/* Never breaks: four short words, and wrapping it mid-phrase reads as damage. */
.care-age {
    font-size: .75rem;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.care-cell-request {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.care-ask {
    line-height: 1.4;
}

/* What the member actually typed. Clamped so one long message cannot set the height of the
   whole table; the full text is in the history on their record. */
.care-said {
    font-size: .75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- The three editable fields ---------- */

/* They look like fields you can change rather than labels, because the whole point is that you
   can click them. */
.care-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    font: inherit;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease;
}

.care-field:hover:not(:disabled),
.care-field:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.care-field:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.care-field:disabled {
    cursor: default;
    opacity: .6;
}

/* The column header says what the field is, so the field says only what it holds. Repeating
   "Status" on every row was 30 words of furniture on one screen. */
.care-list .care-field-name {
    display: none;
}

.care-field-name {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.care-field-value {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.care-field-caret {
    margin-left: auto;
    color: var(--mud-palette-text-disabled);
}

.care-status-new { color: var(--care-text-new); }
.care-status-progress { color: var(--care-text-progress); }
.care-status-done { color: var(--mud-palette-text-secondary); }

.care-field-late .care-field-value,
.care-field-late .mud-icon-root { color: var(--care-text-late); }

.care-field-today .care-field-value,
.care-field-today .mud-icon-root { color: var(--care-text-new); }

.care-cell-actions .mud-button-root {
    min-height: 34px;
    /* "Notes (12)" on two lines made one row taller than the rest. */
    white-space: nowrap;
}

/* A bordered panel: the empty state and the history block. Rows are not panels any more. */
.care-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--care-radius);
}

.care-empty {
    text-align: center;
}

.care-stale {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

/* ---------- Narrow: the table becomes a card ---------- */

/* Below this there is no honest way to show seven columns, so each row stacks. The tick box
   keeps the first line with the name; everything else runs the full width underneath rather
   than being indented past an empty checkbox column.
   1029px is the list's own width, measured by the .care-queue container: the seven columns
   in --care-grid plus six 12px gaps and the row padding come to 1030px. */
@container care (max-width: 1029px) {
    .care-list-head {
        display: none;
    }

    .care-row {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
            "check person"
            "request request"
            "status status"
            "assignee assignee"
            "due due"
            "actions actions";
        align-items: start;
        row-gap: 8px;
        padding: 12px;
    }

    /* Without a header there is nothing to say which field is which, so each says so itself. */
    .care-list .care-field-name {
        display: inline;
    }

    .care-cell-due:empty {
        display: none;
    }
}

/* Bigger targets once the window is narrow enough that a finger is likely. A media query, not
   the container: the date shortcuts live in a dialog, outside .care-queue. */
@media (max-width: 1099px) {
    .care-field,
    .care-cell-actions .mud-button-root,
    .care-bulkbar .mud-button-root,
    .care-section-actions .mud-button-root,
    .care-date-shortcuts .mud-button-root {
        min-height: 44px;
    }
}

/* Phone-only: the things a finger has to hit, and the rows that broke when squeezed. */
@media (max-width: 700px) {
    /* The card menus render outside .care-queue, in the popover provider, so this is unscoped. */
    .care-menu .mud-list-item {
        min-height: 44px;
    }

    /* Three buttons in one action row wrapped each onto two or three lines and nobody could tell
       which was Save. Stack them, primary on top. */
    .care-dialog .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .care-dialog .mud-dialog-actions .mud-button-root {
        width: 100%;
        min-height: 44px;
    }

    .care-dialog .mud-dialog-actions .mud-spacer,
    .care-dialog .mud-dialog-actions .care-dialog-hint {
        display: none;
    }

    /* An option's text was crushed into a 73px column beside three buttons. Text on its own line,
       the buttons underneath. */
    .care-option-row {
        flex-wrap: wrap;
    }

    .care-option-row .care-option-text {
        flex: 1 1 100%;
        padding: 4px 0;
    }
}

/* A person's own record. Same cells as Connections, same header, minus the columns a record
   does not need: there is no tick box and the name is already the page heading. "Source" is the
   origin chip and how long ago it came in. */
.care-person-list {
    --care-grid: 150px minmax(180px, 2fr) 150px 190px 200px 116px;
}

.care-person-list .care-row,
.care-person-list .care-list-head {
    grid-template-areas: "person request status assignee due actions";
}

.care-person-list .care-cell-person {
    justify-content: center;
}

/* One field per line once six columns will not fit: 986px of columns, five gaps and padding. */
@container care (max-width: 1079px) {
    .care-person-list .care-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "person"
            "request"
            "status"
            "assignee"
            "due"
            "actions";
        align-items: start;
        row-gap: 8px;
        padding: 12px 0;
    }

    .care-person-list .care-field-name {
        display: inline;
    }
}

.care-person-list .care-cell-due:empty {
    display: none;
}

/* A section's own actions, top right inside its body: where Family puts Add Family Member.
   The split form puts a view control (the history toggle) on the left of the same row. */
.care-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.care-section-actions-split {
    justify-content: space-between;
}
/* ---------- Dialogs ---------- */

/* Prose wants a comfortable measure even when the dialog is wide. Cards and controls do not,
   so this applies only to the text people read. */
.care-event-text {
    max-width: 70ch;
}

/* An option's text on the Update Request Options page. The flex used to be an inline style on
   the MudText, which no stylesheet rule could override without !important. */
.care-option-text {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
}

/* The asterisk beside Person and Subject in the follow-up dialog. */
.care-required {
    color: var(--mud-palette-error);
    margin-left: 2px;
}

.care-dialog-hint {
    align-self: center;
}

.care-field-label {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.care-date-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.care-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-success);
    font-weight: 600;
}

.care-saved-strong {
    font-weight: 600;
}

.care-open-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--care-radius);
    overflow: hidden;
}

/* ---------- History timeline ---------- */

.care-day {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 16px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.care-day:first-child {
    margin-top: 8px;
}

/* The rail. Drawn behind the dots so it reads as one continuous thread through the day. */
.care-track {
    position: relative;
    padding-left: 34px;
}

/* The day rules run the full width of the History section. Capping the column at 900px left
   each rule stopping short inside a wider bordered box, which read as unfinished. The prose
   keeps a comfortable measure on its own: .care-event-text is capped at 70ch. */

.care-event {
    position: relative;
    padding: 6px 0 6px 4px;
}

/* Bookkeeping fits on one line: "Follow-up added - 6:00 PM - QA repaint check". Two lines each
   is what made a short history scroll. */
.care-event-minor .care-event-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.care-event-minor .care-event-text {
    margin-top: 0;
}

/* The rail used to run the whole day group, leaving a stub below the last dot pointing at
   nothing, measured at up to 65px. Each event carries its own segment instead. */
.care-event::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 30px;
    bottom: -6px;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.care-event:last-child::before {
    display: none;
}

.care-event-dot {
    position: absolute;
    left: -34px;
    top: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.care-event-minor .care-event-dot {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
    width: 22px;
    height: 22px;
    left: -31px;
    top: 7px;
}

.care-event-meta {
    font-size: .75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.care-event-meta strong {
    font-weight: 600;
}

.care-event-link {
    font-size: .75rem;
}

.care-event-text {
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 2px;
}

/* Bookkeeping: legible if you look for it, quiet if you are not. */
.care-event-text-minor {
    color: var(--mud-palette-text-secondary);
}



/* Bulk update. The same bar People uses: it is not there until something is ticked, and
   then it names the count before it names the actions. */
.care-bulkbar {
    flex: 1 1 auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--care-radius);
    background: var(--mud-palette-background-grey);
}

/* The summary line and the bulk bar share one slot of one height, so ticking the first box
   swaps what the slot says instead of pushing the list down under her hand. */
.care-actions-row {
    display: flex;
    align-items: center;
    /* Taller than the bar (50.5px), so swapping the summary for the bar moves nothing. */
    min-height: 52px;
}

/* Sticky on the slot, not the bar: inside a box only its own height, the bar had nowhere to
   stick. Only while something is ticked, so the plain summary scrolls away like text does. */
.care-actions-sticky {
    position: sticky;
    /* Below the fixed app bar. At 8px it stuck, but behind the bar, where nobody could see it. */
    top: calc(var(--mud-appbar-height) + 8px);
    z-index: 3;
}

/* After the base .care-actions-row rule so it wins. On a phone the bulk bar wraps to two or
   three lines, so no fixed slot could hold it, and the reserved 52px only pushed the first
   follow-up further down the screen. */
@media (max-width: 700px) {
    .care-actions-row {
        min-height: 0;
    }
}

/* ---------- Phones: separate cards, and filters that fit ---------- */

/* Stacked, the rows were divided only by a hairline, and an overdue row's red bar ran straight
   on into the next overdue row's, so a phone showed one long block rather than separate
   follow-ups. Each stacked row is its own card now, with a gap. The accent is an inset shadow,
   so it follows the card's rounded corner and takes no space. Placed after the base rules so
   the border also wins over .care-row:last-child, which clears it for the table layout. */
@container care (max-width: 1029px) {
    .care-list .care-row,
    .care-list .care-row:last-child {
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--care-radius);
        background: var(--mud-palette-surface);
        margin-bottom: 12px;
        padding: 12px 12px 12px 16px;
    }
}

/* The person's record stacks at its own width and used to drop the side padding, which left the
   origin chip and the request text pressed against the accent bar. */
@container care (max-width: 1079px) {
    .care-person-list .care-row,
    .care-person-list .care-row:last-child {
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--care-radius);
        background: var(--mud-palette-surface);
        margin-bottom: 12px;
        padding: 12px 12px 12px 16px;
    }
}

/* The sort select is wrapped in MudBlazor's .mud-select, and that wrapper, not the input
   control, is the flex item. Without min-width:0 it refused to shrink, so on a 430px phone the
   direction arrow was pushed 13px past the screen and the whole page scrolled sideways. */
.care-toolbar-sort > .mud-select {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 700px) {
    /* Status holds one short word and Sort holds "Follow-up Date" plus the arrow, so they are
       not equal. These bases share a row when both fit (about 340px and up) and wrap to a row
       each when they do not, rather than squeezing either into clipping. */
    .care-toolbar {
        gap: 8px 12px;
    }

    .care-toolbar > .mud-select {
        flex: 2 1 120px;
    }

    .care-toolbar > .care-toolbar-sort {
        flex: 3 1 210px;
    }
}

@media (max-width: 700px) {
    /* On the person's record each follow-up is a card inside a bordered section, and the two
       paddings together cut "14 days overdue" to "14 days ov..." at 375px. Card-in-box is the
       one place a phone cannot afford both, so the section gives up most of its inset here.
       Scoped to this panel: .cwmc-section-body is shared by every other tab. */
    .care-person .cwmc-section-body {
        padding: 10px;
    }

    .care-person-list .care-row,
    .care-person-list .care-row:last-child {
        padding: 12px 8px 12px 12px;
    }

    /* Measured 2px short for "14 days overdue" at 375px. A tighter gap between the icon, the
       field name and the value gives the value the room without shrinking any text. */
    .care-person-list .care-field {
        gap: 4px;
    }
}