/* Framework-level UI only — typography, color, and layout live in css/theme.css (the design-system SSOT). */

/* Light, unobtrusive scrollbars everywhere — vertical AND horizontal, chat + panels + injected content. A thin
   translucent thumb on a transparent track; it darkens slightly on hover so it's discoverable without being heavy. */
/* FocusOnNavigate temporarily gives the destination h1 tabindex="-1" so assistive
   technology announces the new page. It is not an interactive control. */
h1[tabindex="-1"]:focus { outline: none; }

* { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, 0.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.16); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.28); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Blazor form-validation states. */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* Default <ErrorBoundary> fallback panel. */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.25rem;
    color: #fff;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Global unhandled-error bar. Toggled by blazor.web.js; lives in App.razor so it covers EVERY page (incl. the shell). */
#blazor-error-ui {
    color-scheme: light only;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
    padding: 0.7rem 2.5rem 0.7rem 1.25rem;
    background: #fff4ce;
    color: #3a3300;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.12);
    font-size: 0.9rem;
    z-index: 1000;
}
#blazor-error-ui .reload { color: inherit; text-decoration: underline; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { position: absolute; right: 0.9rem; top: 0.6rem; cursor: pointer; }

/* ── Rendered markdown (.md) ───────────────────────────────────────────────────────────────────────────────────
   GLOBAL on purpose: this content is injected as a MarkupString (the chat reply + the artifact preview), and Blazor
   SCOPED CSS never reaches injected HTML — its [b-xxxxx] attribute is only stamped on elements written in .razor
   markup, not on the <table>/<th>/<td> the markdown renderer emits. So these live here, where they actually apply. */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
/* Per-block direction. A container-level dir="auto" picks ONE direction for the whole reply from its FIRST strong
   character — so an Arabic answer that opens with an English word (or "Hey Ahmed") wrongly renders every Arabic
   paragraph left-to-right. unicode-bidi:plaintext makes each block decide its OWN direction from its content
   (Arabic → RTL with English terms embedded correctly, English → LTR); text-align:start then aligns to it. */
.md p, .md li, .md h1, .md h2, .md h3, .md h4, .md h5, .md h6,
.md blockquote, .md dt, .md dd, .md th, .md td {
    unicode-bidi: plaintext;
    text-align: start;
}
.md p { margin: 0 0 0.35rem; }
/* padding-inline-start (logical) so the list indent flips to the RIGHT for RTL/Arabic. */
.md ul, .md ol { margin: 0.35rem 0; padding-inline-start: 1.35em; }
.md li { margin: 0.08em 0; }
/* Inline identifiers read as PLAIN CLEAR TEXT in the mono face — no chip. Ahmed's ruling (2026-08-09): the shaded
   chips made business answers read like a terminal dump, and the small gray-on-gray was hard to read; "remove this
   bg shading and make font color more clear". Fenced blocks below keep their surface. */
.md code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.95em; background: none; padding: 0; color: inherit; }
.md pre { background: var(--surface-2); padding: 0.6rem; border-radius: 8px; overflow-x: auto; margin: 0.35rem 0; }
.md pre code { background: none; padding: 0; }
/* Tables — visible borders so rows + columns read as a real table, not just text in columns. */
/* (H18-A) Semantic tables: readable columns, responsive scroll INSIDE the table (never the page). */
.md table { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.92em; width: auto; max-width: 100%; display: block; overflow-x: auto; }
/* text-align: start (logical) so cells align right for RTL/Arabic, left for LTR. */
.md th, .md td { border: 1px solid #d2d2d7; padding: 0.35em 0.7em; text-align: start; vertical-align: top; }
.md th { background: #f0f0f3; font-weight: 600; color: var(--ink); }
.md tbody tr:nth-child(even) td { background: #fafafa; }   /* subtle zebra so wide tables stay readable */
.md a { color: var(--accent); text-decoration: underline; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 600; line-height: 1.25; }
.md h1 { font-size: 1.15em; margin: 0.6rem 0 0.25rem; }
.md h2 { font-size: 1.08em; margin: 0.6rem 0 0.25rem; }
.md h3 { font-size: 1.02em; margin: 0.5rem 0 0.25rem; }
.md h4 { font-size: 1em; margin: 0.5rem 0 0.25rem; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 0.6rem 0; }
.md strong { font-weight: 600; }
.md blockquote { margin: 0.35rem 0; padding-left: 0.8rem; border-left: 3px solid var(--line); color: var(--ink-2); }

/* ── "Document" markdown (.md--doc) ────────────────────────────────────────────────────────────────────────────
   The artifact PREVIEW (a real document) vs the dense .md used in the chat. Generous, hierarchical typography that
   reads like a VS Code / GitHub markdown preview; navy headings mirror the downloaded Word file so the preview LOOKS
   like what you'll get. Overrides the base .md above (also global, so it reaches the injected markdown HTML). */
.md--doc { font-size: 15px; line-height: 1.7; color: var(--ink); }
.md--doc h1, .md--doc h2, .md--doc h3, .md--doc h4 { color: #1f3a68; font-weight: 600; line-height: 1.3; }
.md--doc h1 { font-size: 1.85em; margin: 1.1em 0 0.5em; padding-bottom: 0.3em; border-bottom: 2px solid var(--line); }
.md--doc h2 { font-size: 1.45em; margin: 1.4em 0 0.5em; padding-bottom: 0.25em; border-bottom: 1px solid var(--line); }
.md--doc h3 { font-size: 1.2em; margin: 1.2em 0 0.4em; }
.md--doc h4 { font-size: 1.05em; margin: 1em 0 0.3em; }
.md--doc > :first-child { margin-top: 0; }
.md--doc p { margin: 0 0 0.9em; }
.md--doc ul, .md--doc ol { margin: 0.4em 0 0.9em; padding-inline-start: 1.6em; }
.md--doc li { margin: 0.3em 0; }
.md--doc table { width: 100%; margin: 1em 0; font-size: 0.95em; }
.md--doc th, .md--doc td { padding: 0.5em 0.85em; }
.md--doc blockquote { margin: 1em 0; padding: 0.4em 0 0.4em 1em; border-left: 3px solid var(--accent); color: var(--ink-2); }
.md--doc pre { margin: 1em 0; padding: 0.9em 1em; }
.md--doc hr { margin: 1.6em 0; border-top: 1px solid var(--line); }

/* ── Spreadsheet artifact preview — an EXCEL-LIKE read-only grid ────────────────────────────────────────────────
   Mirrors the downloaded .xlsx: a grey column-letter strip (A/B/C), a row-number gutter, gridlines, and a frozen
   header + first column. A multi-sheet workbook gets Excel-style bottom TABS driven purely by CSS radios — no JS.
   There is NO ribbon / toolbar / formula bar: this is a read-only view; editing happens in the downloaded file.
   (Patterns: position:sticky frozen panes per css-tricks; radio+:checked tabs per the pure-CSS-tabs convention.) */
/* the .xl FILLS the preview panel (full width + height); the grid scrolls inside itself, tabs pinned at the bottom */
.md--doc .xl { margin: 0; font-size: 0.8rem; color: var(--ink); width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* the radios that drive the tabs are hidden — only their labels (the tabs) show */
.md--doc .xl-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

.md--doc .xl-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.md--doc .xl-scroll { flex: 1; min-height: 0; overflow: auto; background: #fff; }
/* border-collapse:SEPARATE (not collapse) — collapsed borders are dropped on sticky cells, so frozen panes lose
   their gridlines. Per-cell right/bottom borders give the gridlines instead.
   (H19T follow-up) display:table + overflow:visible + max-width:none EXPLICITLY undo the chat-markdown responsive
   rule (`.md table { display:block; overflow-x:auto; max-width:100% }` above) that also matched this grid: as a
   block-level scroller the TABLE owned the horizontal scrollbar and auto-sized vertically, parking the scrollbar
   directly under the last data row (top of the panel on a 1-row sheet) with dead space below. The grid's ONE
   scroller is .xl-scroll (both axes) — its bottom edge, where the horizontal scrollbar lives, is pinned just above
   the sheet-tab strip regardless of row count. margin:0 drops the prose-table margins for the same reason. */
.md--doc .xl-grid {
    border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%;
    display: table; overflow: visible; max-width: none; margin: 0;
}
.md--doc .xl-grid th, .md--doc .xl-grid td {
    border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
    padding: 3px 10px; text-align: start; vertical-align: top; white-space: nowrap;
    background: #fff; font-weight: 400; color: var(--ink);
}
/* the grey column-letter strip (A, B, C …) — frozen at the top */
.md--doc .xl-letters th { position: sticky; top: 0; z-index: 2; height: 24px; line-height: 24px; padding: 0 10px; background: #f3f3f3; color: #8a8a8a; text-align: center; font-weight: 400; }
/* the real column names — frozen just under the letter strip */
.md--doc .xl-head th { position: sticky; top: 24px; z-index: 2; background: #f3f3f3; color: var(--ink); font-weight: 600; }
/* the row-number gutter — frozen at the left (3-class selectors so they win over the base cell rule above) */
.md--doc .xl-grid .xl-rownum { position: sticky; left: 0; z-index: 1; background: #f3f3f3; color: #8a8a8a; text-align: center; font-weight: 400; min-width: 2.6em; }
/* the corner + the gutter cell in the name row sit ABOVE both frozen header and frozen column */
.md--doc .xl-letters .xl-corner { position: sticky; left: 0; top: 0; z-index: 3; background: #e9e9e9; }
.md--doc .xl-head .xl-rownum-head { position: sticky; left: 0; top: 24px; z-index: 3; background: #e9e9e9; }
/* numeric + variance cells (variance mirrors the .xlsx conditional format) */
.md--doc .xl-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.md--doc .xl-grid td.neg { background: #fcedeb; color: #c0392b; }
.md--doc .xl-grid td.pos { background: #e9f7ef; color: #1a8f4c; }
/* (H19T) The "showing the first N rows" note sits between the grid and the pinned tab strip — give it its own small
   gutter (the panel body has none in the fixed sheet layout) so it never touches the grid or the tabs. */
.md--doc .xl-more { font-size: 0.8em; font-style: italic; color: var(--ink-2); margin: 0; padding: 4px 10px 6px; flex: 0 0 auto; }

/* one sheet → always show the single panel; multiple sheets → only the :checked one shows. A shown panel is a flex
   column so its grid (.xl-scroll) fills the height above the tabs. */
.md--doc .xl-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.md--doc .xl--single .xl-panel { display: flex; }

/* Excel-style tabs along the bottom — labels target the hidden radios; pinned (never grows/shrinks) */
.md--doc .xl-tabs { flex: 0 0 auto; display: flex; gap: 2px; padding: 4px 6px 0; background: #f3f3f3; border-top: 1px solid #b7b7b7; overflow-x: auto; }
.md--doc .xl-tab { padding: 4px 14px; font-size: 0.82em; color: var(--ink-2); background: #ececec; border: 1px solid #cfcfcf; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; white-space: nowrap; }

/* CSS-only tab switching — radio N checked → show panel N + raise tab N. Covers up to 12 sheets (a preview rarely
   exceeds a handful; the download always has them all). */
.md--doc .xl-radio:nth-of-type(1):checked  ~ .xl-panels > .xl-panel:nth-child(1),
.md--doc .xl-radio:nth-of-type(2):checked  ~ .xl-panels > .xl-panel:nth-child(2),
.md--doc .xl-radio:nth-of-type(3):checked  ~ .xl-panels > .xl-panel:nth-child(3),
.md--doc .xl-radio:nth-of-type(4):checked  ~ .xl-panels > .xl-panel:nth-child(4),
.md--doc .xl-radio:nth-of-type(5):checked  ~ .xl-panels > .xl-panel:nth-child(5),
.md--doc .xl-radio:nth-of-type(6):checked  ~ .xl-panels > .xl-panel:nth-child(6),
.md--doc .xl-radio:nth-of-type(7):checked  ~ .xl-panels > .xl-panel:nth-child(7),
.md--doc .xl-radio:nth-of-type(8):checked  ~ .xl-panels > .xl-panel:nth-child(8),
.md--doc .xl-radio:nth-of-type(9):checked  ~ .xl-panels > .xl-panel:nth-child(9),
.md--doc .xl-radio:nth-of-type(10):checked ~ .xl-panels > .xl-panel:nth-child(10),
.md--doc .xl-radio:nth-of-type(11):checked ~ .xl-panels > .xl-panel:nth-child(11),
.md--doc .xl-radio:nth-of-type(12):checked ~ .xl-panels > .xl-panel:nth-child(12) { display: flex; }

.md--doc .xl-radio:nth-of-type(1):checked  ~ .xl-tabs > .xl-tab:nth-child(1),
.md--doc .xl-radio:nth-of-type(2):checked  ~ .xl-tabs > .xl-tab:nth-child(2),
.md--doc .xl-radio:nth-of-type(3):checked  ~ .xl-tabs > .xl-tab:nth-child(3),
.md--doc .xl-radio:nth-of-type(4):checked  ~ .xl-tabs > .xl-tab:nth-child(4),
.md--doc .xl-radio:nth-of-type(5):checked  ~ .xl-tabs > .xl-tab:nth-child(5),
.md--doc .xl-radio:nth-of-type(6):checked  ~ .xl-tabs > .xl-tab:nth-child(6),
.md--doc .xl-radio:nth-of-type(7):checked  ~ .xl-tabs > .xl-tab:nth-child(7),
.md--doc .xl-radio:nth-of-type(8):checked  ~ .xl-tabs > .xl-tab:nth-child(8),
.md--doc .xl-radio:nth-of-type(9):checked  ~ .xl-tabs > .xl-tab:nth-child(9),
.md--doc .xl-radio:nth-of-type(10):checked ~ .xl-tabs > .xl-tab:nth-child(10),
.md--doc .xl-radio:nth-of-type(11):checked ~ .xl-tabs > .xl-tab:nth-child(11),
.md--doc .xl-radio:nth-of-type(12):checked ~ .xl-tabs > .xl-tab:nth-child(12) {
    background: #fff; color: var(--ink); font-weight: 600; border-bottom: 1px solid #fff; margin-bottom: -1px;
}

/* ── Presentation artifact preview ─────────────────────────────────────────────────────────────────────────────
   Stacked 16:9-ish slide cards mirroring the downloaded .pptx — each with a numbered corner and a navy title. */
.md--doc .deck { display: flex; flex-direction: column; gap: 1em; }
.md--doc .slide { position: relative; border: 1px solid var(--line); border-radius: 6px; padding: 1.1em 1.3em; background: var(--surface); aspect-ratio: 16 / 9; overflow: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.md--doc .slide-no { position: absolute; top: 0.5em; right: 0.7em; font-size: 0.72em; color: var(--ink-2); }
.md--doc .slide-title { color: #1f3a68; font-size: 1.3em; font-weight: 600; margin: 0 0 0.6em; border: none; padding: 0; }
.md--doc .slide ul { margin: 0.3em 0; }
.md--doc .slide li { margin: 0.35em 0; }

/* ── Enterprise document directives (preview) ──────────────────────────────────────────────────────────────────
   The on-screen mirror of the Word renderer's blocks: a classification banner, and :::callout / :::note / :::warning
   etc. as colored asides. (:::signature / :::approval just carry their inner content — no box.) */
.md--doc .doc-classification { display: inline-block; background: #9b2c2c; color: #fff; font-size: 0.68em; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25em 0.75em; border-radius: 3px; margin: 0 0 1.2em; }
.md--doc .cc { margin: 1em 0; padding: 0.7em 1em; border-left: 4px solid #1f3a68; background: #eef2fa; border-radius: 0 4px 4px 0; }
.md--doc .cc > :first-child { margin-top: 0; }
.md--doc .cc > :last-child { margin-bottom: 0; }
.md--doc .cc--info { border-color: #2563eb; background: #eaf1fe; }
.md--doc .cc--warning, .md--doc .cc--warn, .md--doc .cc--caution { border-color: #b45309; background: #fef3e2; }
.md--doc .cc--tip, .md--doc .cc--success { border-color: #1a8f4c; background: #e9f7ef; }
.md--doc .cc--danger, .md--doc .cc--important { border-color: #c0392b; background: #fcedeb; }
.md--doc .cc--metrics, .md--doc .cc--timeline { border-left: none; background: transparent; padding: 0; }
/* The small provenance note at the end of every document preview. */
.md--doc .doc-provenance { margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--line); text-align: center;
    font-size: 0.78em; font-style: italic; color: var(--ink-2); }