/* ── Daniel's Activity Tracker (activity/show; Milan, 12 Nov 2026) ────────────────────────────────────────────────────────────────────
   The board, the list and the bar are the client's (ldu/pages-work-client.css, the mtr-* classes, loaded for Daniel too); this sheet is only what
   an admin's board adds: Needs you today beside the views, the Dates view (it was the Deadlines page), the card's next-step and attention lines,
   and a column taking a dropped card. Layout here; colour only through tokens. */

/* the row under the bar: Everything / Needs you today, the count, then Board / List / Dates at the far right */
.act-sub__views { margin-left: auto; }
.act-sub__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-size: var(--fs-meta); font-weight: 600; line-height: 1; }

/* the search is white like the dropdowns beside it, as on the client's board (the paper grey read as disabled) */
.act .ldu-search__input { background-color: var(--bg-2); }

/* which view shows: Dates is the third, a list of its own */
.act:not([data-view="dates"]) .act-dates { display: none; }
.act[data-view="dates"] :is(.mtr-board, .mtr-list:not(.act-dates)) { display: none; }

/* a card's quiet lines (Sam's next step, his Needs attention): an icon and a few words, red only for what needs attention */
.act-line { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.4; }
.act-line > .icon { flex: none; margin-top: .2em; }
.act-line--alert { color: var(--danger); font-weight: 600; }

/* a column a card is dragged over: a dashed ring (a drop zone), ink, never lilac on the light page */
.act .mtr-col.is-drop { outline: 2px dashed var(--ink-3); outline-offset: 2px; }
.act .mtr-card { cursor: grab; }
.act .mtr-card:active { cursor: grabbing; }

/* Dates: a row is the date, what it is (and its matter and client), its kind, and the arrow */
.act-date { grid-template-columns: 7rem minmax(0, 1fr) auto 16px; }
.act-date__when { color: var(--ink-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.act-dates__group--overdue .act-date__when { color: var(--danger); font-weight: 600; }
.act-dates__group--overdue .mtr-group__head { color: var(--danger); }

@media (max-width: 720px) {
  .act-sub__views { margin-left: 0; }
  .act-date { grid-template-columns: minmax(0, 1fr) 16px; grid-template-areas: "when go" "main go" "meta go"; }
  .act-date__when { grid-area: when; }
  .act-date > .mtr-row__main { grid-area: main; }
  .act-date > .mtr-row__flags { grid-area: meta; justify-self: start; }
  .act-date > .mtr-card__go { grid-area: go; }
}

/* the phone's Filters button (the dropdowns fold behind it there); on a wider page the dropdowns are always out */
.act-bar__more { display: none; }
@media (max-width: 720px) {
  .act-bar__more { display: inline-flex; }
  .act .mtr-bar__search { flex: 1 1 0; }
  .act .mtr-bar:not(.is-filters-open) .mtr-bar__selects { display: none; }
  .act .mtr-bar__selects { flex: 1 1 100%; }
}

/* a page squeezed by Lia's panel: a date row stacks like the client's rows do */
@media (min-width: 721px) { @container page (max-width: 640px) {
  .act-date { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when meta" "main meta"; }
  .act-date__when { grid-area: when; }
  .act-date > .mtr-row__main { grid-area: main; }
  .act-date > .mtr-row__flags { grid-area: meta; }
} }
.act-sub__n[hidden] { display: none; }
/* on the chosen (ink) segment the count keeps its contrast */
.ldu-seg__opt[aria-pressed="true"] .act-sub__n { background: color-mix(in srgb, var(--bg-2) 22%, transparent); color: inherit; }

/* the client page's way back (clients/_back, the DS shared/_back_link) is the client portal's, unchanged; under 860px the bottom bar's Back does its job */
@media (max-width: 860px) { .page.ldu-page.dataroom > .backlink { display: none; } }