/* =============================================================================
   Reportworq client-side spreadsheet grid — POC stylesheet
   -----------------------------------------------------------------------------
   Everything here is engine chrome: the layout, the selection marquee, the
   edit box, the sheet tabs, the resize handles. The *cell* appearance (fills,
   borders, fonts, number alignment) is NOT defined here — it arrives from the
   server as a generated stylesheet (SnapshotStyleSheetModel.StylesSheetString,
   a set of ".rwd-N { ... }" rules) that the engine injects at load time. That
   is exactly how the Blazor version works today, so a real workbook looks
   identical whether Blazor or this engine renders it.
   ============================================================================= */

:root {
    --rwg-accent: #217346;          /* Excel-green selection accent (matches CellSelectionState.cs) */
    --rwg-accent-soft: rgba(33, 115, 70, 0.10);
    --rwg-grid-line: #d4d4d4;
    --rwg-header-bg: #f6f7f8;
    --rwg-chrome-border: #e2e5e9;
    --rwg-font: "Segoe UI", "Calibri", system-ui, -apple-system, sans-serif;
}

.rwg-root {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-family: var(--rwg-font);
    font-size: 13px;
    color: #1b1b1b;
    background: #fff;
    user-select: none;
    outline: none;
}
/* The root also carries the shared `.datacollection-book-container` class (Blazor test parity), which the
   global data-collection SCSS gives `overflow: auto`. The inner .rwg-viewport is the real scroller, so let
   the root clip instead — otherwise the two stack into a double scrollbar. Also let the root shrink inside
   the flex row so a wide grid scrolls internally rather than pushing the sidebar off-screen. */
.rwg-host > .rwg-root { overflow: hidden; min-width: 0; }

/* GF-12 (Karen): the host itself is the FLEX ITEM inside the book+sidebar row
   (.datacollection-webview-container). A flex item's automatic minimum size is `min-width: auto`, so a wide
   print range keeps .rwg-host at its content's intrinsic width — it will NOT shrink, and the overflow spills
   onto the outer container (which has overflow:auto) as a SECOND horizontal scrollbar stacked over the inner
   .rwg-viewport's own, pushing the 400px Details sidebar out of reach. Putting min-width:0 on the CHILD
   (.rwg-root, above) is not enough — the flex item is .rwg-host. Let the host shrink so the wide grid scrolls
   internally in .rwg-viewport and the sidebar stays reachable. */
.rwg-host { min-width: 0; }

/* --- scrolling viewport that holds the table + overlays --------------------- */
.rwg-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
}

.rwg-table {
    border-collapse: separate;   /* separate so per-cell borders + sticky both behave */
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
}

.rwg-table td,
.rwg-table th {
    box-sizing: border-box;
    padding: 1px 4px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    background-clip: padding-box;
    /* server ".rwd-N" classes layer their own borders/fills/fonts on top of this */
}

/* GF-11-align: a frozen-ROW cell is emitted as a <th> (reportworq-grid.js: `el(frozenRow ? "th" : "td")`)
   purely as a sticky-positioning structural element — it is NOT a semantic header. Browsers give <th> a
   User-Agent default `text-align: center`, which the base rule above does not reset, so a frozen-row cell
   whose horizontal alignment is Excel's General/default (where Aspose's GetHtmlString omits `text-align` on
   the value <div>) inherits that center. Excel left-aligns General TEXT (numbers right, via the GF-4 inline
   patch on the value div; text/bool default left) — and the Blazor engine already does (its flex `.dc-cell`
   wrapper pins the value at flex-start). Reset the th default to match a <td> so a General/default-aligned
   frozen-row cell left-aligns instead of centering (Karen/Andy: the "Fixed Costs" A1 overflow title + the
   A2 merged subtitle rendered centered on the HTML grid, left on Excel/Blazor).
   :where() keeps this at (0,0,0) specificity so it overrides ONLY the UA default: an explicit Left/Center/
   Right alignment (Aspose bakes `TEXT-ALIGN` inline onto the value <div>, e.g. the centered green header
   row) and the GF-4 General-number `text-align:right` inline patch both still win, and any future server
   `.rwd-N` alignment wins too. */
:where(.rwg-table th) { text-align: left; }

/* Default gridlines are OFF; toggle the .rwg-gridlines class on the root to show them.
   :where() keeps this at (0,0,1) specificity so a server cell border (.rwd-N, 0,1,0) always
   wins — gridlines only fill the edges the server left undefined. */
:where(.rwg-root.rwg-gridlines .rwg-table) td,
:where(.rwg-root.rwg-gridlines .rwg-table) th {
    border-right: 1px solid var(--rwg-grid-line);
    border-bottom: 1px solid var(--rwg-grid-line);
}

/* floating images / charts, anchored over the grid content */
.rwg-image {
    position: absolute;
    z-index: 5;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

/* Frozen panes: rows/cols the server flagged IsFrozen become sticky.
   Z-order (canonical sticky-table stack — GF-1 freeze bleed-through fix): the top frozen-ROW
   band must sit ABOVE the left frozen-COL band, not below it. A frozen-col cell is sticky-LEFT
   but still scrolls VERTICALLY, so as the body scrolls down it slides UP into the top band's
   region and the top band has to cover it. This overlap is real whenever a frozen-row cell
   shares a column with a frozen-col cell — e.g. a title merged across the vertical freeze split:
   it is pinned frozen-row but (being merged across cols) scrolls horizontally, so its left
   portion overlaps the sticky frozen column. With frozen-col below frozen-row that scrolled
   frozen-col body cell can no longer paint THROUGH the frozen title; the corner (both) still
   tops both bands.
   Ladder (low→high): frozen-col (2) < frozen-col overflow title (3, below) < band backing
   (4, the GF-1 Option-A backdrop below) < frozen-row (5) < corner (6) < frozen-ROW overflow
   title in the band (7). The backdrop plugs the remaining GAP case — a hidden/absent frozen
   row where NO frozen-row cell exists to cover the frozen-col body cell scrolling up
   underneath. A frozen-COL overflow BODY cell (e.g. a spilling value in column A, row 18)
   stays UNDER the backdrop (3 < 4) so it can no longer bleed through the band. */
.rwg-table th.rwg-frozen-col,
.rwg-table td.rwg-frozen-col { position: sticky; z-index: 2; }
.rwg-table th.rwg-frozen-row,
.rwg-table td.rwg-frozen-row { position: sticky; z-index: 5; }
.rwg-table th.rwg-frozen-row.rwg-frozen-col,
.rwg-table td.rwg-frozen-row.rwg-frozen-col { z-index: 6; }
/* Frozen cells must be opaque so scrolled content can't bleed through them. A server
   cell fill (.rwd-N, injected later in the DOM) still wins over this default white. */
.rwg-frozen-row, .rwg-frozen-col { background: #fff; }

/* GF-1 (Option A) — opaque sticky backing behind the ENTIRE frozen-ROW band.
   Raising the frozen-row band above the frozen-col band (z 4 > 2, above) covers a
   frozen-col body cell that scrolls up wherever a frozen-row cell OVERLAPS it — but the
   real bleed Karen sees is through a GAP in the band: a hidden/absent frozen row (or a
   frozen row whose col-A cell is transparent) leaves a strip with NO frozen-row cell to
   cover the sticky-left frozen-col body cell scrolling up underneath. One opaque backdrop
   pinned to the top band (sized to the full frozen-row-band height, spanning the grid
   width, positioned by JS translateY to follow vertical scroll) hides any body cell that
   would show through such a gap. Its z-index sits ABOVE the frozen-col cells (z2) and the
   frozen-col overflow titles (z3), and BELOW the frozen-row band's own cells (z5): the backdrop
   covers scrolled body / frozen-col / frozen-col-overflow cells but the real frozen band cells
   (z5), the frozen corner (z6) and frozen-ROW overflow titles (z7) still paint on top of it, so
   no legitimate frozen content is hidden. */
.rwg-frozen-band-backing {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    background: #fff;
    /* NB: no `pointer-events: none` — the backdrop must be hit-testable so it is the topmost element
       returned by elementFromPoint over a band gap (a plain div, not a c_ cell), instead of the hidden
       body cell showing through. The real frozen band cells sit above it (z5+) and still take clicks. */
}

/* Light tint on every selected cell — robust under merges + frozen panes where
   a single bounding rectangle can't reach. The crisp border is drawn by the
   overlay below; this just fills the interior like Excel. */
.rwg-table td.rwg-selected,
.rwg-table th.rwg-selected { background-image: linear-gradient(var(--rwg-accent-soft), var(--rwg-accent-soft)); }

/* While drag-selecting we suppress native text selection so a drag paints a
   range instead of highlighting text (mirrors .dc-drag-selecting today). */
.rwg-root.rwg-drag-selecting,
.rwg-root.rwg-drag-selecting * { user-select: none !important; }

.rwg-input-cell { cursor: cell; }

/* Excel-style text spill into adjacent empty cells (no merge). The cell keeps its
   fixed column width but paints its text past the edge; z-index lifts it above the
   empty neighbours it spills over. */
.rwg-table td.rwg-overflow,
.rwg-table th.rwg-overflow { overflow: visible; position: relative; z-index: 1; }
.rwg-table td.rwg-overflow-left,
.rwg-table th.rwg-overflow-left { text-align: right; }

/* Overflow title inside a frozen band (GF-11). A title built as text spilling across
   empty cells — not a merge — clips to its own cell when its row/column is frozen:
   the base `.rwg-overflow` rule drops the cell to `position:relative; z-index:1`, but
   its spill-target neighbours are opaque frozen cells (`background:#fff`), so they cover
   the overflowing glyphs and the title looks "partially blank" (Karen's report). Keep the
   cell sticky (it must stay in the frozen band) and lift it above the opaque frozen
   neighbours it spills across so the full title paints, matching Excel/Blazor. Only frozen
   overflow cells are raised — a non-frozen body cell spilling *toward* a frozen band keeps
   z-index:1 and is still correctly covered (GF-4/TC_GRF_042).

   Split by band (GF-1): a frozen-COL overflow cell sits at z3 — above its frozen-col
   neighbours (z2) so its spill paints, but BELOW the band backing (z4). This matters because
   the SAME rule matches a frozen-col overflow BODY cell (a spilling value deep in column A,
   e.g. c_18_0 row 18): lifting it to the band-title tier let it bleed THROUGH the frozen-row
   band when scrolled up (GF-1). Keeping it under the backdrop fixes that while a genuine
   frozen-col title still clears its neighbours. A frozen-ROW overflow cell (a title that
   lives IN the top band) stays at z7, above the band + corner, so it paints fully. A cell
   that is BOTH (a corner overflow title) matches both selectors; the frozen-row rule is
   ordered LAST so it wins → z7, keeping corner titles on top. */
.rwg-table td.rwg-overflow.rwg-frozen-col,
.rwg-table th.rwg-overflow.rwg-frozen-col { position: sticky; z-index: 3; }
.rwg-table td.rwg-overflow.rwg-frozen-row,
.rwg-table th.rwg-overflow.rwg-frozen-row { position: sticky; z-index: 7; }

/* --- selection overlays (absolutely positioned inside the viewport) --------- */
.rwg-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.rwg-range-border {
    position: absolute;
    border: 2px solid var(--rwg-accent);
    background: transparent;
    display: none;
    box-sizing: border-box;
}
.rwg-active-border {
    position: absolute;
    border: 2px solid var(--rwg-accent);
    box-shadow: 0 0 0 1px #fff inset;
    background: transparent;
    display: none;
    box-sizing: border-box;
}
.rwg-fill-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--rwg-accent);
    border: 1px solid #fff;
    display: none;
    pointer-events: auto;
    cursor: crosshair;
    z-index: 18;   /* above resizer grab-strips (z 15) so the corner is always grabbable */
}
/* marching-ants copy marquee */
.rwg-copy-marquee {
    position: absolute;
    display: none;
    box-sizing: border-box;
    border: 2px dashed var(--rwg-accent);
    animation: rwg-march 0.6s linear infinite;
}
@keyframes rwg-march { to { background-position: 12px 0, 12px 100%, 0 -12px, 100% 12px; } }

/* --- inline editor ---------------------------------------------------------- */
.rwg-editor {
    position: absolute;
    display: none;
    z-index: 20;
    box-sizing: border-box;
    border: 2px solid var(--rwg-accent);
    padding: 0 3px;
    margin: 0;
    font-family: var(--rwg-font);
    font-size: 13px;
    outline: none;
    background: #fff;
    color: #1b1b1b;
    box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* --- dropdown (List / Filter cells) ---------------------------------------- */
.rwg-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 100%;
    min-height: 16px;
    float: right;
    color: #5a6b60;
    cursor: pointer;
}
.rwg-dropdown-btn:hover { color: var(--rwg-accent); }
.rwg-popup {
    position: absolute;
    z-index: 30;
    min-width: 140px;
    max-height: 240px;
    overflow: auto;
    background: #fff;
    border: 1px solid #c8ccd2;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    padding: 4px;
    display: none;
    font-size: 13px;
}
.rwg-popup-item {
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.rwg-popup-item:hover { background: var(--rwg-accent-soft); }
.rwg-popup-item.rwg-selected-item { font-weight: 600; color: var(--rwg-accent); }
.rwg-popup-check {
    display: inline-block;
    width: 16px;
    color: var(--rwg-accent);
}

/* --- filter cell + multi-select popup -------------------------------------- */
.rwg-filter-cell {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.rwg-filter-cell .rwg-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
/* an active (partial) filter tints the caret so it reads like the Blazor .excel-filter-drop-down-filtered marker */
.rwg-dropdown-btn.excel-filter-drop-down-filtered { color: var(--rwg-accent); font-weight: 700; }
.rwg-filter-popup { min-width: 200px; }
.rwg-filter-rows { max-height: 180px; overflow: auto; }
.rwg-filter-all { border-bottom: 1px solid #e4e7eb; margin-bottom: 4px; }
.rwg-filter-save-options {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 4px 2px;
    border-top: 1px solid #e4e7eb;
    margin-top: 4px;
}
.rwg-filter-save-options .rwg-btn {
    padding: 3px 12px;
    border-radius: 4px;
    border: 1px solid #c8ccd2;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}
.rwg-filter-save-options .rwg-filter-ok {
    background: var(--rwg-accent);
    border-color: var(--rwg-accent);
    color: #fff;
}

/* --- sparkline cell --------------------------------------------------------- */
.rwg-sparkline {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- cell comment editor popover -------------------------------------------- */
.rwg-comment-pop {
    position: absolute;
    z-index: 32;
    display: none;
    width: 260px;
    background: #fff;
    border: 1px solid #c8ccd2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 10px;
    font-size: 13px;
}
.rwg-comment-pop-title { font-weight: 600; margin-bottom: 6px; color: #1b1b1b; }
/* Read-only committed comment history (contributor + prior approver notes), mirroring PopupCommentView. */
.rwg-comment-hist {
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid #eceef1;
    border-radius: 6px;
    background: #f7f8fa;
}
.rwg-comment-hist-item { padding: 6px 8px; border-bottom: 1px solid #eceef1; }
.rwg-comment-hist-item:last-child { border-bottom: none; }
.rwg-comment-hist-contact { font-weight: 600; color: #1b1b1b; font-size: 12.5px; }
.rwg-comment-hist-text { color: #43504a; white-space: pre-wrap; word-break: break-word; margin: 2px 0; }
.rwg-comment-hist-time { color: #8a9199; font-size: 11px; }
.rwg-comment-pop-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 54px;
    padding: 6px 8px;
    border: 1px solid #c8ccd2;
    border-radius: 6px;
    font-family: var(--rwg-font);
    font-size: 13px;
    outline: none;
}
.rwg-comment-pop-input:focus { border-color: var(--rwg-accent); box-shadow: 0 0 0 3px rgba(33, 115, 70, 0.16); }
.rwg-comment-pop-actions { display: flex; gap: 6px; margin-top: 8px; }
.rwg-comment-pop-actions button {
    font-family: var(--rwg-font);
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #d4d4d5;
    background: #fff;
    color: #43504a;
    cursor: pointer;
}
.rwg-comment-pop-actions .rwg-comment-save {
    background: var(--rwg-accent);
    border-color: var(--rwg-accent);
    color: #fff;
    font-weight: 600;
    margin-right: auto;
}
.rwg-comment-pop-actions button:hover { filter: brightness(0.97); }

/* --- resize handles --------------------------------------------------------- */
.rwg-col-resizer,
.rwg-row-resizer {
    position: absolute;
    z-index: 15;
    pointer-events: auto;
}
.rwg-col-resizer { top: 0; width: 6px; cursor: col-resize; }
.rwg-row-resizer { left: 0; height: 6px; cursor: row-resize; }
.rwg-col-resizer:hover,
.rwg-row-resizer:hover { background: var(--rwg-accent-soft); }
.rwg-resize-guide {
    position: absolute;
    background: var(--rwg-accent);
    display: none;
    z-index: 40;
    pointer-events: none;
}
.rwg-resize-guide.rwg-col { width: 1px; top: 0; }
.rwg-resize-guide.rwg-row { height: 1px; left: 0; }

/* --- validation markers ----------------------------------------------------- */
/* The corner triangle is the box-shadow; the whole cell carries a native `title` so hovering it
   (help cursor) shows the validation message. */
.rwg-table td.rwg-has-warning { box-shadow: inset -8px 8px 0 -4px #e0a800; cursor: help; }
.rwg-table td.rwg-has-blocker { box-shadow: inset -8px 8px 0 -4px #c0392b; cursor: help; }

/* --- cell comment bookmark -------------------------------------------------- */
/* A purple corner flag (top-left, so it never collides with the top-right validation marker) marking cells
   that carry a comment. Click it to open the comment popover. */
.rwg-table td:has(> .dc-cell-comment.dc-cell-has-comment) { position: relative; }
.dc-cell-comment.dc-cell-has-comment {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 9px solid #7c3aed;      /* purple */
    border-right: 9px solid transparent;
    cursor: pointer;
    z-index: 6;
}
.dc-cell-comment.dc-cell-has-comment:hover { border-top-color: #6d28d9; }

/* --- highlight input cells (client-only toggle from the planning command bar) ---------------- */
/* Fill the WHOLE input cell with the highlight colour. The old `box-shadow: inset … var(--rwg-accent-soft)`
   was a faint 10%-opacity green painted BEHIND the cell's inner value wrapper, so an input cell whose inner
   <span>/<div> carries an opaque fill hid all but the padding edges of it (Andy: "only bleeds through on the
   sides"). Paint an opaque fill on the td AND force the inner wrappers transparent so the highlight reads as a
   fully-coloured cell — parity with the server grid's `.dc-highlight-input-cell { background-color:#D1F8D1 }`. */
.rwg-root.rwg-highlight-inputs .rwg-table td.rwg-input-cell {
    background-image: linear-gradient(#D1F8D1, #D1F8D1) !important;
}
.rwg-root.rwg-highlight-inputs .rwg-table td.rwg-input-cell .dc-cell-value-wrapper,
.rwg-root.rwg-highlight-inputs .rwg-table td.rwg-input-cell .dc-cell-value-wrapper > * {
    background-color: transparent !important;
}

/* --- sheet tabs ------------------------------------------------------------- */
.rwg-tabs-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    background: var(--rwg-header-bg);
    border-top: 1px solid var(--rwg-chrome-border);
}
.rwg-tab-scroll {
    display: none;                 /* shown only when the strip overflows (.rwg-tabs-overflow) */
    flex: 0 0 auto;
    width: 26px;
    border: none;
    border-right: 1px solid var(--rwg-chrome-border);
    background: var(--rwg-header-bg);
    color: #43504a;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.rwg-tab-scroll.rwg-tab-scroll-r { border-right: none; border-left: 1px solid var(--rwg-chrome-border); }
.rwg-tab-scroll:hover:not(:disabled) { background: #eef0f1; color: var(--rwg-accent); }
.rwg-tab-scroll:disabled { opacity: 0.3; cursor: default; }
.rwg-tabs-wrap.rwg-tabs-overflow .rwg-tab-scroll { display: inline-flex; align-items: center; justify-content: center; }
.rwg-tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 30px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.rwg-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border-right: 1px solid var(--rwg-chrome-border);
    font-size: 12.5px;
    color: #43504a;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.rwg-tab { transition: color .12s ease, box-shadow .12s ease, background .12s ease; }
.rwg-tab:hover {
    background: #f2f7f5;                 /* teal-tinted hover (Option C sheet-tab restyle) */
    color: var(--rwg-accent);
    box-shadow: inset 0 -2px 0 0 rgba(34, 128, 102, 0.35);
}
.rwg-tab.rwg-tab-active,
.rwg-tab.rwg-tab-active:hover {
    background: #fff;
    color: var(--rwg-accent);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--rwg-accent);   /* bottom underline, matches the mockup */
}
.rwg-tab .rwg-tab-warn { color: #e0a800; }
.rwg-tab .rwg-tab-block { color: #c0392b; }