/* it-170 the Agenda block (templates/agenda/_block.html): a contact's or a record's follow-ups inside its layout card.
 * Design-system only: MD3 tokens, .btn (+ .btn--sm) / .icon-btn / .field-input + MWC fields / .segmented-control /
 * .scrim .dialog. The block's own measures are named once, on .agenda, and derived from there. */

.agenda {
  --agenda-row-h: 44px;    /* a row's one line: a 40px control plus a hair of air */
  --agenda-kind: 28px;     /* the kind's tinted circle */
  --agenda-inset: 10px;    /* a row's side padding: its icon and when sit on the card's text edge */
  --agenda-bleed: var(--agenda-inset); /* how far a row reaches back into the card's padding (its hover / open fill) */
  --agenda-check-w: 40px;  /* the done checkbox column (md-checkbox's touch target) */
  display: flex;
  flex-direction: column;
}

/* The bar: "3 open · 1 overdue", then Task / Event / Call. A narrow column drops the labels (icon buttons, named by
 * their aria-label / title). */
.agenda__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0 0 var(--space-2, 0.5rem);
}
.agenda__summary { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-2, 0.5rem); font-weight: 600; color: var(--md-sys-color-on-surface-variant); margin-right: auto; }
.agenda__late { color: var(--md-sys-color-error); }
.agenda__late::before { content: "·"; margin-right: var(--space-2, 0.5rem); color: var(--md-sys-color-on-surface-variant); }
.agenda__add { display: inline-flex; gap: var(--space-2, 0.5rem); }
.agenda__empty { margin: var(--space-2, 0.5rem) 0; }

.agenda__list { list-style: none; margin: 0; padding: 0; }
.agenda__list--done { margin-top: var(--space-1, 0.25rem); }
.agenda__foot { display: flex; justify-content: center; margin-top: var(--space-2, 0.5rem); border-top: 1px solid var(--md-sys-color-outline-variant); }
.agenda__more { display: flex; justify-content: center; }

/* A row is one fixed line at any width: the kind's icon · the title (cut to one line) · its short when · a task's or a
 * call's done checkbox (an event leaves the slot empty, so the whens line up). The line opens the row's details below
 * it (one row at a time). */
.agenda-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--agenda-check-w);
  grid-template-areas: "line check" "details details";
  align-items: center;
  margin: 0 calc(-1 * var(--agenda-bleed));
  border-radius: var(--r-sm);
}
.agenda-row.is-open { background: var(--md-sys-color-surface-container-low); }
/* The current call (it-170.2): the row the open call box is for, in the nav's active-row language — the secondary
 * container behind it, its on-colour on the text — over open / hover. */
.agenda-row.is-calling, .agenda-row.is-calling.is-open, .agenda-row.is-calling:has(> .agenda-row__line:hover, > .agenda-row__check:hover) {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.agenda-row__line {
  grid-area: line;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
  height: var(--agenda-row-h);
  padding: 0 var(--space-1, 0.25rem) 0 var(--agenda-bleed);
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
/* Hover fills the whole row — the line and the checkbox beside it — not the details below an open one. */
.agenda-row:has(> .agenda-row__line:hover, > .agenda-row__check:hover) { background: var(--md-sys-color-surface-container); }
.agenda-row__line:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }

.agenda-kind {
  flex: none;
  width: var(--agenda-kind);
  height: var(--agenda-kind);
  border-radius: var(--r-full);
  display: inline-grid;
  place-items: center;
}
.agenda-kind .material-symbols-rounded { font-size: 1rem; }
.agenda-kind--task { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.agenda-kind--event { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.agenda-kind--call { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.agenda-row.is-done .agenda-kind { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }

.agenda-row__title { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row--task.is-done .agenda-row__title, .agenda-row--call.is-done .agenda-row__title { text-decoration: line-through; }
.agenda-row.is-done .agenda-row__title { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
.agenda-row__when { flex: none; font-size: var(--md-sys-typescale-label-large-size, 0.8125rem); font-weight: 600; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.agenda-row.is-late .agenda-row__when { color: var(--md-sys-color-error); }

.agenda-row__check { grid-area: check; justify-self: center; }

/* The details: the facts one per line under the title (indented past the icon), then Call / Edit. */
.agenda-row__details { grid-area: details; padding: 0 var(--agenda-inset) var(--agenda-inset) calc(var(--agenda-bleed) + var(--agenda-kind) + var(--space-3, 0.75rem)); }
.agenda-row__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); font-size: var(--md-sys-typescale-label-large-size, 0.8125rem); color: var(--md-sys-color-on-surface-variant); }
.agenda-row__facts > li { display: flex; align-items: flex-start; gap: var(--space-2, 0.5rem); min-width: 0; }
.agenda-row__facts .material-symbols-rounded { flex: none; font-size: 1rem; margin-top: 1px; }
.agenda-row__facts b { font-weight: 600; color: var(--md-sys-color-on-surface); }
.agenda-row.is-late .agenda-row__due { color: var(--md-sys-color-error); }
.agenda-row__wrap { min-width: 0; overflow-wrap: anywhere; }
.agenda-row__notes { white-space: pre-line; color: var(--md-sys-color-on-surface); }
.agenda-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); margin-top: var(--space-2, 0.5rem); }
/* it-170.2: the calls placed from a follow-up, under its facts; each one's notes on their own line. */
.agenda-row__attempts { margin-top: var(--space-2, 0.5rem); }
.agenda-row__attempt-notes { display: block; }

/* A narrow column (a 4/12 layout column at 1440px, a phone): the add buttons go icon-only, the size of a small icon
 * button. A container query can't read a custom property, so the breakpoint is written out. */
@container (max-width: 440px) {
  .agenda__addbtn { width: var(--agenda-check-w); height: var(--agenda-check-w); padding: 0; justify-content: center; }
  .agenda__addlabel { display: none; }
}
.agenda-card .agenda-host { container-type: inline-size; }

/* ---- The Agenda page (it-170.1) ----------------------------------------------------------------------------------
 * The block's root with a page variant: rows have a second line (the contact, the record, the location), a two-line
 * when and Call inline; the sections are house .float-cards, the tiles the house .report-stat, the filters .fchips,
 * the Assigned-to menu the house .rowmenu. */
.agenda-page { max-width: 1120px; }
.agenda--page { --agenda-inset: 1.25rem; --agenda-bleed: calc(var(--agenda-inset) - var(--space-2, 0.5rem)); } /* a row's fill stops half a step short of the card's edge */
.agenda-page__title { display: flex; align-items: baseline; gap: var(--space-3, 0.75rem); flex-wrap: wrap; }
.agenda-page__date { font-size: 1rem; }
.agenda-page__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 0.5rem); margin-bottom: var(--space-4, 1rem); }
.agenda-page__who { position: relative; }
.agenda-page__menu { left: 0; right: auto; }
.agenda-page__tiles { margin-bottom: var(--space-4, 1rem); }
.agenda-page__section { padding: var(--space-3, 0.75rem) var(--agenda-inset) var(--space-2, 0.5rem); }
/* A day's sub-head inside a section (the house .eyebrow), ruled off from the rows above it; the first sits under the
 * card's header with no rule of its own. */
.agenda-page__sub { margin: var(--space-2, 0.5rem) 0 0; padding: var(--space-2, 0.5rem) 0; color: var(--md-sys-color-on-surface-variant); border-top: 1px solid var(--md-sys-color-outline-variant); }
.card__header + .agenda-page__sub { margin-top: 0; border-top: 0; }

/* The page's row: the block's two columns (line · check), the line two lines tall — the text on the left (title over
 * contact · record · location) and a stack mirroring it on the right (the when on one line, Call under it on a call
 * to make, both on the row's right edge), so every when ends on one line down a card. */
.agenda-row__line--page { height: auto; min-height: 56px; padding-top: var(--space-2, 0.5rem); padding-bottom: var(--space-2, 0.5rem); cursor: pointer; }
.agenda--page .agenda-row + .agenda-row { margin-top: var(--space-2, 0.5rem); } /* air between rows (QA round 3) */
.agenda-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agenda--page .agenda-row__title { display: block; width: 100%; padding: 0; font: inherit; font-weight: 600; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.agenda--page .agenda-row__title:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--r-sm); }
.agenda-row__sub { display: flex; flex-wrap: wrap; gap: 0 var(--space-3, 0.75rem); min-width: 0; font-size: var(--md-sys-typescale-label-large-size, 0.8125rem); color: var(--md-sys-color-on-surface-variant); }
.agenda-row__sub > a, .agenda-row__sub > span { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; }
.agenda-row__sub .material-symbols-rounded { font-size: 1rem; }
.agenda-row__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.agenda--page .agenda-row__when { font-variant-numeric: tabular-nums; }
.agenda-row__gap { margin-left: 0.25rem; font-weight: 500; font-size: 0.75rem; }
/* Call: a text button the size of the sub line, its label on the when's right edge (its own padding reaches out past it). */
.agenda-row__call { padding: 2px 8px; margin-right: -8px; gap: 0.25rem; font-size: var(--md-sys-typescale-label-large-size, 0.8125rem); }
.agenda-row__call .material-symbols-rounded { font-size: 1rem; }

/* The month view: the grid card and the day panel side by side, the panel folding under on a narrow screen. */
.agenda-cal { display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); align-items: flex-start; }
.agenda-cal__card { flex: 999 1 560px; min-width: 0; padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem) var(--space-2, 0.5rem); }
.agenda-cal__day { flex: 1 1 320px; max-width: 460px; padding: var(--space-3, 0.75rem) var(--agenda-inset) var(--space-2, 0.5rem); }
.agenda-cal__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 0 var(--space-1, 0.25rem); color: var(--md-sys-color-on-surface-variant); } /* + the house .eyebrow */
.agenda-cal__dow span { padding-left: var(--space-2, 0.5rem); }
.agenda-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--md-sys-color-outline-variant); border-left: 1px solid var(--md-sys-color-outline-variant); }
.agenda-cal__cell { display: flex; flex-direction: column; gap: 3px; min-height: 104px; padding: var(--space-1, 0.25rem); border-right: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant); color: inherit; }
.agenda-cal__cell:hover { background: var(--md-sys-color-surface-container); text-decoration: none; }
.agenda-cal__cell.is-out { background: var(--md-sys-color-surface-container-low); }
.agenda-cal__cell.is-out .agenda-cal__dn { color: var(--md-sys-color-outline); }
.agenda-cal__cell.is-today { background: var(--md-sys-color-surface-container-low); }
.agenda-cal__cell.is-open { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.agenda-cal__dn { display: flex; justify-content: flex-end; font-size: 0.75rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.agenda-cal__cell.is-today .agenda-cal__dn span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--r-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.agenda-cal__tile { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.75rem; font-weight: 600; }
.agenda-cal__tile b { margin-right: auto; font-weight: 700; }
.agenda-cal__ct { display: inline-flex; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
.agenda-cal__ct .material-symbols-rounded, .agenda-cal__legend .material-symbols-rounded { font-size: 0.875rem; }
.agenda-cal__ct--ok { color: var(--md-sys-color-primary); }
.agenda-cal__ct--pend { color: var(--md-sys-color-on-surface-variant); }
.agenda-cal__ct--late { color: var(--md-sys-color-error); }
.agenda-cal__legend { display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem) 0; font-size: 0.75rem; }
.agenda-cal__legend span { display: inline-flex; align-items: center; gap: 3px; }

/* The dialog: the house .dialog with .field-input shells. Wider than the house 480px — an event's row holds the day and
 * two times side by side. Loads after floating.css. */
.agenda-dialog { max-width: 560px; }
.agenda-dialog__body { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.agenda-dialog__kinds { align-self: flex-start; }
.agenda-dialog__delete { margin-right: auto; color: var(--md-sys-color-error); }
.agenda-dialog md-outlined-text-field, .agenda-dialog md-outlined-select { width: 100%; }
/* The day, its time(s) and an event's All day on one row: the fields the kind shows share it (a hidden one takes no
 * room); All day sits at its natural width, level with the inputs (a .field-input__date is 56px tall). Keeps an
 * event's dialog short enough to clear the app bar on a laptop screen. */
.agenda-dialog__when { display: flex; gap: var(--space-3, 0.75rem); }
.agenda-dialog__when .field-input { flex: 1 1 0; min-width: 0; }
.agenda-dialog__when .checkbox-row { flex: none; align-self: flex-end; min-height: 56px; }