/* #565 Issues view styling (tokens only). Scoped to #view-issues. Hosts the slice-3/4 breach-flag cards
   grid + the breaches pop-up table. The dropped-Audit adverse-event briefing + badge styles were removed
   in slice 6 (the briefing/badge were decommissioned). */
#view-issues { padding: 1rem 1.25rem; }
/* #565 slice 3 (C3 pre-gate): the breach grid reuses the shared .fn-stats component, whose own
   `padding: .75rem 1.5rem 0` would DOUBLE the view's horizontal inset. Neutralize the horizontal inset so
   the grid's left edge aligns with the view inset, and add a bottom gap. 2 IDs → outranks `#view-issues .fn-stats`. */
#view-issues #fn-issues-cards { padding: 0 0 1rem; }

/* ── #614 slice 4: breaches pop-up table (clones the card-modal chrome, dual-scoped in findings.css). These are the
   Issues-only bits: the content-region overlay position, the Option B status toggle, and the breaches table (9
   columns incl. Breach type + Remarks) with its own layout (the .fn-rd nth-child widths are tuned for 8 cols). ── */
#view-issues #iss-brk-overlay { inset: auto; top: 0; right: 0; bottom: 0; left: var(--fn-rail, 240px); }
#view-issues .iss-brk-toggle { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 9999px; overflow: hidden; flex-shrink: 0; }
#view-issues .iss-brk-tgl { height: 36px; padding: 0 0.9rem; border: none; background: var(--bg-secondary); color: var(--text-secondary); font-family: var(--font-family); font-size: 0.8rem; cursor: pointer; transition: var(--transition); }
#view-issues .iss-brk-tgl + .iss-brk-tgl { border-left: 1px solid var(--glass-border); }
#view-issues .iss-brk-tgl:hover { color: var(--text-primary); }
#view-issues .iss-brk-tgl.active { background: var(--primary); color: var(--c-white); }
#view-issues .iss-brk-tgl:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* V-fix (owner 2026-10-15): FIXED layout with explicit, balanced column widths so the Finding description
   (col 2) and the Regulatory requirement (col 3) SHARE space proportionally (equal 20% each — the two
   wrapping text columns), instead of auto layout handing the description excess width and squeezing the RTL
   requirement into a tall narrow strip (~18 lines). The 8 short/compact columns take the rest; all text
   columns wrap (overflow-wrap:anywhere), so rows grow but stay reasonable. Widths sum to 100%. */
#view-issues .rd-table.fn-brk-rd { table-layout: fixed; width: 100%; }
#view-issues .rd-table.fn-brk-rd th:nth-child(1)  { width: 6%; }   /* Finding ID */
#view-issues .rd-table.fn-brk-rd th:nth-child(2)  { width: 20%; }  /* Finding description */
#view-issues .rd-table.fn-brk-rd th:nth-child(3)  { width: 20%; }  /* Regulatory requirement (RTL) */
#view-issues .rd-table.fn-brk-rd th:nth-child(4)  { width: 7%; }   /* Classification */
#view-issues .rd-table.fn-brk-rd th:nth-child(5)  { width: 7%; }   /* Status */
#view-issues .rd-table.fn-brk-rd th:nth-child(6)  { width: 7%; }   /* RP planned closure */
#view-issues .rd-table.fn-brk-rd th:nth-child(7)  { width: 7%; }   /* RP actual closure */
#view-issues .rd-table.fn-brk-rd th:nth-child(8)  { width: 8%; }   /* Breach type */
#view-issues .rd-table.fn-brk-rd th:nth-child(9)  { width: 9%; }   /* Breaching RP(s) */
#view-issues .rd-table.fn-brk-rd th:nth-child(10) { width: 9%; }   /* Remarks */
#view-issues .rd-table.fn-brk-rd th { white-space: normal; vertical-align: bottom; }
#view-issues .rd-table.fn-brk-rd td { vertical-align: middle; }
#view-issues .rd-table.fn-brk-rd td.fn-desc-cell { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; }
#view-issues .rd-table.fn-brk-rd td.fn-remark-cell, #view-issues .rd-table.fn-brk-rd td.fn-breach-type-cell { white-space: normal; overflow-wrap: anywhere; }
#view-issues .fn-breach-type-cell { font-size: 0.78rem; color: var(--text-secondary); }
/* ══ Issues breach card — a consistent, scannable dual-metric card (owner redesign 2026-10-14) ══════════════════ */
/* LAYOUT: top-align the icon + body so a 1-line vs 2-line title never shifts the icon; cards in a row stretch to
   equal height (grid default) and the reserved title height + bottom-pinned metrics keep every card IDENTICAL. */
#view-issues #fn-issues-cards .fn-stat { align-items: stretch; }
#view-issues #fn-issues-cards .fn-stat-icon { align-self: flex-start; }
#view-issues #fn-issues-cards .fn-stat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Wider cards than the Findings watchlist grid's repeat(5,1fr) so the two slice columns have room — wide enough
   that the longest caption ("Closed-in-breach") always fits in EXACTLY 2 lines (never 3), keeping the slices even. */
#view-issues #fn-issues-cards .fn-stats-attention { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* TITLE — the card HEADER: its own LARGER size + PRIMARY colour + semibold, clearly distinct from the tiny muted
   slice captions and the big numbers. Reserved + clamped to 2 lines so every card's metrics start at the same y. */
#view-issues #fn-issues-cards .fn-stat-label {
    font-size: 0.84rem; font-weight: 600; color: var(--text-primary); line-height: 1.25; margin-bottom: 0.55rem;
    min-height: 2.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* METRICS — the two slices as a 2×2 grid: captions share row 1, numbers share row 2. Both captions reserve the
   SAME height (2 lines, see .fn-stat-slice-label) and TOP-align (align-items:start), so the two caption blocks sit
   on a shared baseline and the two numbers on the row below share one baseline too — no matter that "Open" is one
   line and "Closed-in-breach" two. Pinned to the BOTTOM of the body (margin-top:auto) so the numbers also sit at
   the same offset across every card in a row. */
#view-issues #fn-issues-cards .fn-stat-dual {
    margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    grid-auto-flow: column; align-items: start; column-gap: 12px; row-gap: 4px;
}
#view-issues #fn-issues-cards .fn-stat-slice { display: contents; }
/* caption = per-slice status glyph + a small, muted, UPPERCASE label — a third, distinct type level below the title. */
#view-issues #fn-issues-cards .fn-stat-slice-head { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
#view-issues #fn-issues-cards .fn-stat-slice-head i { font-size: 0.7rem; flex-shrink: 0; margin-top: 1px; }
/* both slices are breaches (never success-green): open = danger (active), closed = primary (persisted through closure). */
#view-issues #fn-issues-cards .fn-stat-slice-open .fn-stat-slice-head i { color: var(--danger); }
#view-issues #fn-issues-cards .fn-stat-slice-closed .fn-stat-slice-head i { color: var(--primary); }
/* Both captions reserve the SAME 2-line height (min-height) so "Open" (1 line) and "Closed-in-breach" (2 lines)
   read at equal height; a hard 2-line clamp is the backstop that guarantees the longer caption can NEVER grow to
   3 lines and re-introduce the uneven heights the owner flagged. Tighter font/tracking + hyphen-only breaking (no
   overflow-wrap:anywhere) keep "Closed-in-" on the first line in the widened half-column. */
#view-issues #fn-issues-cards .fn-stat-slice-label {
    font-size: 0.56rem; font-weight: 600; color: var(--text-secondary); opacity: 0.8; text-transform: uppercase;
    letter-spacing: 0.01em; line-height: 1.2; min-height: 2.4em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* NUMBER — the prominent metric (largest, primary, heaviest). */
#view-issues #fn-issues-cards .fn-stat-dual .fn-stat-value { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); line-height: 1.05; display: inline-flex; align-items: center; gap: 6px; }
#view-issues #fn-issues-cards .fn-stat-dual .fn-stat-delta { font-size: 0.7rem; }
/* stack the source-grouped sections with clear separation. */
#view-issues #fn-issues-cards .fn-breach-groups { display: flex; flex-direction: column; gap: 14px; }
/* Owner STYLE RULING 2026-10-15 (app-wide, STANDING): yellow/amber is BANNED for any TEXT — it is not legible.
   The shared `.fn-stat-group.attention .fn-stat-group-label` rule (findings.css) paints these breach-section
   headers --c-yellow. Override in Issues scope (2 IDs outrank that shared 1-ID rule) back to the standard
   section-header colour, consistent with every non-attention header (the brand-dot ::before already signals it). */
#view-issues #fn-issues-cards .fn-stat-group.attention .fn-stat-group-label { color: var(--text-secondary); opacity: 0.85; }
/* #614 V-fix 1: the Breaching RP(s) column — a compact list of the RP id + status badge + relevant date per row. */
#view-issues .rd-table.fn-brk-rd td.fn-brk-rp-cell { white-space: normal; overflow-wrap: anywhere; }
#view-issues .fn-brk-rp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#view-issues .fn-brk-rp-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; }
#view-issues .rd-table.fn-brk-rd .fn-id { color: var(--rd-ink); }   /* site standard (not the card red) — parity with the Findings table */
/* Regulatory requirement (col 3, RTL). V-fix (owner 2026-10-15): it had inherited the dense single-line
   clamp (white-space:nowrap + ellipsis), truncating long requirement text with "…". Un-clamp it to WRAP to
   full text like the Description (col 2) and Remarks columns — the row already grows, so wrapping is free —
   while preserving the RTL direction. */
#view-issues .rd-table.fn-brk-rd td:nth-child(3) { direction: rtl; text-align: right; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    #view-issues .rd-table.fn-brk-rd { min-width: 720px; }   /* scroll horizontally inside the tableScroll region rather than crush columns */
}
/* V-fix 2c: at narrow widths the wide cards would collapse to one per row; keep a 2-up grid and STACK the slices
   (one column — the 2×2 grid becomes a single column that flows the two captions+numbers down the card). */
@media (max-width: 640px) {
    #view-issues #fn-issues-cards .fn-stats-attention { grid-template-columns: repeat(2, 1fr); }
    #view-issues #fn-issues-cards .fn-stat-dual { grid-template-columns: 1fr; grid-auto-flow: row; align-items: start; }
}