/* HQ Platform – "Mark done / Assign to" on the department dashboard (hq-v2-dash-actions-web, Lea).
   Uses only the shared variables from style.css, so it follows the page's light/dark palette. Phone first. */
.da-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.da-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.da-row:first-child { border-top: 0; }
@media (min-width: 560px) { .da-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.da-main { display: grid; gap: 4px; min-width: 0; }
.da-text { margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.da-row[data-state="done"] .da-text { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }
.da-meta, .da-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .86rem; color: var(--muted); min-width: 0; }
.da-meta > *, .da-mark > * { min-width: 0; overflow-wrap: anywhere; }
.da-mark { margin-top: 2px; color: var(--ink); }
.da-note { color: var(--muted); }
.da-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.da-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.da-btns .btn { min-height: 44px; min-width: 88px; }
@media (min-width: 560px) { .da-btns { justify-content: flex-end; max-width: 240px; } }
.da-hint { font-size: .86rem; }
.da-err { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 0; padding: 8px 10px; border-left: 4px solid var(--red); border-radius: 8px; background: var(--surface-2, var(--surface)); color: var(--ink); font-size: .9rem; overflow-wrap: anywhere; }
.da-notice { margin: 0 0 8px; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
.da-empty { padding: 10px 0; }
.da-sheet { display: grid; gap: 12px; }
.da-sheet-what { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.da-sheet-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 480px) { .da-sheet-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.da-sheet input, .da-sheet select, .da-sheet textarea { min-height: 44px; font-size: 1rem; width: 100%; box-sizing: border-box; }
.da-sheet .picker .pick-list { max-height: 40vh; overflow-y: auto; }