/* css/agency-dash-layout.css — the agency dashboard laid out by its reader (2026-10-13).

   Everything the customizer draws: the absolute grid a saved layout paints into, the clipping
   that keeps a card at its grid size, the editor, and the furniture of the optional cards that
   only a customised dashboard can show (js/modules/dash-layout.js, agencyDashCardRegistry in
   agency.js). Light and dark both live HERE: the cards' own colours come from the --dash-*
   tokens report-detail.css declares on <body> and body.theme-dark, so nothing in this file names
   a light colour without its dark partner beside it. */

/* ── The grid ─────────────────────────────────────────────────────────────────
   Cards are absolutely positioned from the layout model (12 columns, 40px rows, the masonry's
   own 12px seam), so the grid is only a relative box whose height the module sets to the foot of
   the lowest card. The same 0.75rem seam from the customer table as the masonry keeps. */
.agency-dl-grid { position: relative; min-height: 2.5rem; margin-top: 0.75rem; }
.agency-dl-item {
    position: absolute; box-sizing: border-box;
    /* The owner's "smooth subtle animation": a card that is pushed out of the way glides. */
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
/* The one in hand follows the pointer and never lags it. */
.agency-dl-item.is-dragging { transition: none; z-index: 20; }

/* ── CLIPPING ───────────────────────────────────────────────────────────────
   A card holds its grid size whatever is in it — the owner asked for clipping "so the format and
   scale is easily adjusted". The head stays put; everything after it is wrapped by the module in
   .agency-dl-body, which scrolls. A flex column rather than a block, so the activity table's own
   scroller (which carries the sticky header) shrinks to fit and stays the one that scrolls. */
.agency-dl-item > .agency-dash-card {
    height: 100%; box-sizing: border-box; overflow: hidden; margin: 0; width: auto;
    display: flex; flex-direction: column; max-height: none;
}
.agency-dl-item > .agency-dash-card > .agency-dash-head { flex: 0 0 auto; }
/* In a card the reader has sized, the NOTE gives way before the title does: it clips to an
   ellipsis (its full text is in the card either way) rather than pushing the title onto two
   lines or running out of the card. */
.agency-dl-item .agency-dash-title { flex: 0 0 auto; }
.agency-dl-item .agency-dash-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agency-dl-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin;
    display: flex; flex-direction: column;
}
.agency-dl-body::-webkit-scrollbar { width: 6px; height: 6px; }
.agency-dl-body::-webkit-scrollbar-thumb { background: rgba(121, 135, 161, 0.45); border-radius: 3px; }
/* ONE SCROLLBAR, NOT TWO. The caps the masonry needed inside a card (the premium bars at
   15.5rem, the claims list, the activity card's own 26rem) give way to the body's scroll. */
.agency-dl-item .agency-dash-premium .agency-bars { max-height: none; overflow: visible; }
.agency-dl-item .agency-dash-claims .agency-dash-list { max-height: none; overflow: visible; }
.agency-dl-item .agency-dash-activity-scroll { flex: 1 1 auto; min-height: 0; margin-top: 0.4rem; }
/* A bar list given more room than it needs spreads into it, the way the stretched masonry card
   did — a short list pinned to the top of a tall card is the padding this grid exists to avoid. */
.agency-dl-item .agency-bars { flex: 1 1 auto; justify-content: space-between; }

/* ── THE STACK (under 800px) ────────────────────────────────────────────────
   A phone has one column whatever the layout says: static flow in the layout's reading order,
   natural heights, no clipping — the module clears the inline geometry and the classes do the
   rest. The activity card keeps its own cap and scroller, as it does in the masonry. */
.agency-dl-grid.is-stacked { height: auto !important; display: flex; flex-direction: column; gap: 0.75rem; }
.agency-dl-grid.is-stacked > .agency-dl-item {
    position: static; width: auto !important; height: auto !important; left: auto; top: auto; transition: none;
}
.agency-dl-grid.is-stacked > .agency-dl-item > .agency-dash-card { height: auto; overflow: visible; }
.agency-dl-grid.is-stacked .agency-dl-body { overflow: visible; }
.agency-dl-grid.is-stacked > .agency-dl-item > .agency-dash-fixed { max-height: 26rem; overflow: hidden; }
.agency-dl-grid.is-stacked > .agency-dl-item > .agency-dash-fixed > .agency-dl-body { overflow: hidden; }

/* ── The optional cards' own furniture ──────────────────────────────────────
   Drawn by agencyDashCardRegistry's optional builders and nowhere else; they share the card's
   list, link and pill styles and add only what those lacked. */
.agency-dash-foot { margin: 0.6rem 0 0; font-size: var(--fs-base); flex: 0 0 auto; }
/* Two presses in one foot (2026-10-25, Pending certificates' Remove all): the way in at the start,
   the clearing at the far end. */
.agency-dash-foot-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* ROOM FOR THE FOCUS RING (2026-10-25, review): a laid-out card's body scrolls, and clipped the ring
   of a press flush against its edge — Remove all at the far end and the bottom, the way in at the
   start. The ring stands 4px out (2px offset, 2px line), so the foot keeps 4px clear on those sides. */
[data-dash-card="requests"] > .agency-dl-body > .agency-dash-foot { padding: 0 4px 4px; }
/* THE CARD'S REMOVE ALL IS NOT ITS WAY IN (2026-10-25, review): beside "Open the queue…" it was the
   same blue outlined link. The link's size, in the neutral ink and edge of the queue's own Remove all
   and each request's Remove — blue is for going somewhere. Tokens, so dark mode follows. */
#agencyDashHost .agency-dash-foot .agency-req-removeall {
    background: var(--surface-alt); border-color: var(--border-emphasis); color: var(--text-body);
}
#agencyDashHost .agency-dash-foot .agency-req-removeall:hover {
    background: var(--surface); border-color: var(--text-faint); color: var(--text);
}
/* WHAT THE CARD'S REMOVE ALL CAME TO (2026-10-25, review), just above its foot: the workspace's
   status line in small — its tints, edges and inks, light and dark — at the claims rows' size. Drawn
   empty and [hidden] when there is nothing to say (agencyRequestsCardSaidHtml). */
.agency-dash-said {
    margin: 0.6rem 0 0; padding: 0.35rem 0.55rem; border-radius: 6px; border-left: 3px solid transparent;
    font-size: var(--fs-sm); line-height: 1.4; flex: 0 0 auto; overflow-wrap: anywhere;
}
.agency-dash-said[hidden] { display: none; }
.agency-dash-said-ok { background: rgba(22, 163, 74, 0.08); border-left-color: #16a34a; color: #166534; }
.agency-dash-said-error { background: rgba(220, 38, 38, 0.08); border-left-color: #dc2626; color: #991b1b; }
/* It worked, but the queue could not be read again (2026-10-26, review): the status line's warn kind;
   and "Checking the queue…" while it is read, in the status line's own plain tint. */
.agency-dash-said-warn { background: rgba(217, 119, 6, 0.08); border-left-color: #d97706; color: #92400e; }
.agency-dash-said-info { background: rgba(100, 116, 139, 0.10); color: #334155; }
body.theme-dark .agency-dash-said-ok { background: rgba(22, 163, 74, 0.16); color: #86efac; }
body.theme-dark .agency-dash-said-error { background: rgba(220, 38, 38, 0.16); color: #fca5a5; }
body.theme-dark .agency-dash-said-warn { background: rgba(217, 119, 6, 0.16); color: #fcd34d; }
body.theme-dark .agency-dash-said-info { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; }
/* ITS NOTE WRAPS, NOT CLIPS (2026-10-26, review): not read again since a Remove all, it says the rest is
   unknown ("1 listed, could not be read just now"), and an ellipsis took that half off in a sized card. */
#agencyDashHost [data-dash-card="requests"] .agency-dash-note { white-space: normal; text-align: right; text-wrap: balance; }
/* …NOT SQUEEZED BESIDE THE TITLE (2026-10-26, review): the title keeps its width, and in a narrow card (w3 at 820
   to 1024px wide) the note was left a column one word or one letter wide, or none at all. On the grid its head
   wraps: a note that fits whole beside the title stays there, one that does not takes the line under it, at the
   right. Not in the stack, where the card is the page's width and a phone wraps the head already (mobile.css). */
.agency-dl-grid:not(.is-stacked) [data-dash-card="requests"] > .agency-dash-head { flex-wrap: wrap; row-gap: 2px; }
.agency-dl-grid:not(.is-stacked) [data-dash-card="requests"] > .agency-dash-head > .agency-dash-note { flex: 1 1 auto; }
.agency-dash-gap + .agency-dash-gap { margin-top: 0.65rem; }
.agency-dash-gaphead {
    display: flex; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.25rem;
    font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--dash-muted); border-bottom: 1px solid var(--dash-line);
}
.agency-dash-gapn { color: var(--dash-ink); }
.agency-dash-amount { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dash-ink); white-space: nowrap; }
/* A return premium is money owed back, and reads as a credit here as it does on the bill. */
.agency-dash-amount.is-credit { color: #b45309; }
body.theme-dark .agency-dash-amount.is-credit { color: #fcd34d; }
.agency-dash-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; align-content: flex-start; }
.agency-dash-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.6rem 0.75rem;
    align-content: start;
}
.agency-dash-stat { display: flex; flex-direction: column; min-width: 0; }
.agency-dash-stat-v {
    font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; color: var(--dash-ink);
    font-variant-numeric: tabular-nums;
}
.agency-dash-stat-l { font-size: var(--fs-sm); color: var(--dash-muted); }
.agency-dash-notes {
    width: 100%; box-sizing: border-box; min-height: 5rem; flex: 1 1 auto; resize: none;
    font: inherit; line-height: 1.45;
}
.agency-dash-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.agency-dash-list li .agency-pill { flex: 0 0 auto; }

/* ── THE EDITOR ─────────────────────────────────────────────────────────────
   A full-screen dialog over the app header (which is fixed at 9999; the ACORD dialogs sit at
   12000–12200): the canvas on the left is the real dashboard's width, scaled down when the window
   cannot hold it beside the palette, so what is arranged here is what the dashboard shows. */
.agency-dl-modal {
    position: fixed; inset: 0; z-index: 12300;
    display: flex; flex-direction: column;
    background: #f1f5f9; color: var(--dash-ink);
}
.agency-dl-modal[hidden] { display: none; }
body.agency-dl-editing { overflow: hidden; }
.agency-dl-head {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0.8rem 1.25rem; border-bottom: 1px solid var(--dash-line);
    background: var(--dash-surface);
}
.agency-dl-headtext { min-width: 0; flex: 1 1 24rem; }
.agency-dl-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--dash-ink); }
.agency-dl-hint { margin: 0.15rem 0 0; font-size: var(--fs-md); color: var(--dash-muted); }
.agency-dl-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.agency-dl-status { font-size: var(--fs-md); color: var(--dash-muted); max-width: 28rem; }
.agency-dl-status.is-error { color: #b91c1c; }
body.theme-dark .agency-dl-status.is-error { color: #fca5a5; }
.agency-dl-modalbody {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem 2rem;
}
.agency-dl-canvaswrap { flex: 1 1 auto; min-width: 0; position: relative; }
.agency-dl-canvas { position: relative; transform-origin: 0 0; }
.agency-dl-canvas[hidden], .agency-dl-palette[hidden] { display: none; }
.agency-dl-narrow { margin: 0; max-width: 40rem; font-size: var(--fs-base); color: var(--dash-muted); }

/* The palette: every card the registry knows, split into what is on the dashboard and what
   could be. Sticky beside the canvas, so Add is in reach however far down the grid runs. */
.agency-dl-palette {
    flex: 0 0 280px; position: sticky; top: 0;
    background: var(--dash-surface); border: 1px solid var(--dash-line); border-radius: 10px;
    padding: 0.85rem 1rem 1rem; max-height: calc(100vh - 8rem); overflow: auto; scrollbar-width: thin;
}
.agency-dl-pal-h {
    display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.35rem;
    font-size: var(--fs-base); font-weight: 700; color: var(--dash-ink);
}
.agency-dl-pal-list + .agency-dl-pal-h, .agency-dl-pal-empty + .agency-dl-pal-h { margin-top: 1.1rem; }
.agency-dl-pal-n { font-weight: 600; color: var(--dash-muted); }
.agency-dl-pal-list { list-style: none; margin: 0; padding: 0; }
.agency-dl-pal-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0;
    border-bottom: 1px solid var(--dash-line);
}
.agency-dl-pal-item:last-child { border-bottom: none; }
.agency-dl-pal-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.agency-dl-pal-title { font-size: var(--fs-base); font-weight: 600; color: var(--dash-ink); }
.agency-dl-pal-blurb { font-size: var(--fs-sm); line-height: 1.35; color: var(--dash-muted); }
.agency-dl-pal-empty { margin: 0; font-size: var(--fs-base); color: var(--dash-muted); }
.agency-dl-pal-item .agency-btn { flex: 0 0 auto; }

/* ── An editable card ───────────────────────────────────────────────────────
   The card itself is inert (a copy, drawn from the same builders); over it sit a move handle
   across the head, a × in the corner, and three resize handles — the right edge, the bottom
   edge and the Windows-style corner grip. */
.agency-dl-item.is-editable { outline: none; }
.agency-dl-item.is-editable > .agency-dash-card { pointer-events: none; user-select: none; }
/* Room for the × in the corner, so the note never runs under it. */
.agency-dl-item.is-editable > .agency-dash-card > .agency-dash-head { padding-right: 1.6rem; }
.agency-dl-item.is-editable:hover > .agency-dash-card,
.agency-dl-item.is-editable:focus-visible > .agency-dash-card { border-color: var(--accent, #2563eb); }
.agency-dl-item.is-editable:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; border-radius: 10px; }
.agency-dl-handle {
    position: absolute; left: 0; top: 0; right: 2.4rem; height: 2.75rem; z-index: 2;
    cursor: move; touch-action: none; border-radius: 10px 0 0 0;
}
.agency-dl-item.is-dragging .agency-dl-handle { cursor: grabbing; }
.agency-dl-remove {
    position: absolute; top: 0.45rem; right: 0.5rem; width: 1.5rem; height: 1.5rem; z-index: 3; padding: 0;
    border-radius: 50%; border: 1px solid var(--dash-line); background: var(--dash-surface);
    color: var(--dash-muted); font-size: var(--fs-md); line-height: 1; cursor: pointer;
}
.agency-dl-remove:hover, .agency-dl-remove:focus-visible { color: #b91c1c; border-color: #fca5a5; }
body.theme-dark .agency-dl-remove:hover, body.theme-dark .agency-dl-remove:focus-visible { color: #fca5a5; border-color: #7f1d1d; }
.agency-dl-rs { position: absolute; z-index: 2; touch-action: none; }
.agency-dl-rs.is-e { top: 0.75rem; bottom: 1.25rem; right: -5px; width: 10px; cursor: ew-resize; }
.agency-dl-rs.is-s { left: 0.75rem; right: 1.25rem; bottom: -5px; height: 10px; cursor: ns-resize; }
.agency-dl-rs.is-se { right: -4px; bottom: -4px; width: 20px; height: 20px; cursor: nwse-resize; }
/* The grip: an L in the corner, faint until the card is under the pointer. */
.agency-dl-rs.is-se::after {
    content: ""; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px;
    border-right: 2px solid var(--dash-muted); border-bottom: 2px solid var(--dash-muted);
    border-radius: 0 0 3px 0; opacity: 0.55;
}
.agency-dl-item.is-editable:hover .agency-dl-rs.is-se::after { opacity: 1; }
/* Where the card will land when it is let go. */
.agency-dl-ghost {
    position: absolute; display: none; z-index: 1; box-sizing: border-box; pointer-events: none;
    border: 2px dashed var(--accent, #2563eb); border-radius: 10px; background: rgba(37, 99, 235, 0.07);
    transition: top .12s ease, left .12s ease, width .12s ease, height .12s ease;
}
.agency-dl-ghost.is-on { display: block; }
.agency-dl-item.is-dragging { opacity: 0.94; }
.agency-dl-item.is-dragging > .agency-dash-card {
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22); border-color: var(--accent, #2563eb);
}

/* ── Dark ───────────────────────────────────────────────────────────────────── */
body.theme-dark .agency-dl-modal { background: #0b1220; }
body.theme-dark .agency-dl-head,
body.theme-dark .agency-dl-palette { background: var(--dash-surface); border-color: var(--dash-line); }
body.theme-dark .agency-dl-ghost { border-color: #60a5fa; background: rgba(59, 130, 246, 0.14); }
body.theme-dark .agency-dl-item.is-dragging > .agency-dash-card { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); border-color: #60a5fa; }
body.theme-dark .agency-dl-item.is-editable:hover > .agency-dash-card,
body.theme-dark .agency-dl-item.is-editable:focus-visible > .agency-dash-card { border-color: #60a5fa; }