/* Shared dashboard styles (consolidated)
   Components covered:
   - Dashboard (Overview)
   - DashboardPerSector (Overview Per Sector)
   - SummaryTable (Summary)
   - SummaryPerSector (Summary Per Sector)
   - Multisector (Multi-Sector)
   - Insights
*/

/* ========== Overview (Dashboard) ========== */
.cx-dash-holder {
    position: relative;
    /* 019ebbb1: flex-fill the bounded flex column (.dashboard-container is height-
       capped to the real viewport via JS ChangePageSize) so the holder stretches to
       the full monitor height like the report editors, instead of a 100vh-160px cap
       that under-fills very large monitors.
       overflow:visible (not auto): the vertical/horizontal scroll is owned by the
       viewport-width .dashboard-content ancestor so the scrollbars stay on-screen. The
       holder grows to the full table width, so an overflow:auto here parks its vertical
       scrollbar off the right edge. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    width: 100%;
    background-color: #000;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.cx-dashboard{background:#000;font-family:inherit}
.dash-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:white;width:50%}
.dash-header .brand{font-weight:bold;font-size:16px;opacity:.95}
.dash-header .title{font-weight:bold; font-size:16px}
.dashps-table thead th.sticky-first-head {
    position: sticky; 
        top: 0;               
        left: 0;              
        z-index: 11;          
        text-align: left; 
        width: 140px;
        min-width: 140px; 
        background: #000;     
}
    .dash-table td {
       padding: 10px 8px;
        text-align: center;
        font-size: 18px;
        /* add 10px gap to the right of each cell */
        border-right: 10px solid #000;
    }
.dash-table {
    /* remove vertical spacing to avoid bottom gap; right gap handled by td/th border */
    border-collapse: separate;
    border-spacing: 0;
    padding:18px;
}
/* also add right gap to th */
.dash-table th {padding:10px 10px;text-align:center;font-size:18px;border-right:10px solid #000}
/* remove the right gap on the last cell (td or th) in a row */
.dash-table tr > td:last-child, .dash-table tr > th:last-child { border-right: 0 !important; }
.dash-table thead th.cap{opacity:.9;font-weight:bold;font-size:14px;color:white}
.dash-table thead th.scenario{background:#bfc5cc;color:#000;border-radius:3px;font-weight:bold;font-size:18px}
.dash-table .left-col{background:#fff;color:#000;text-align:left;width:240px;font-weight:bold;border-bottom:none;border-top:none;font-size:18px}
.dash-table td.val{color:#000;font-size:18px}
.dash-table td.gp{color:#000;font-size:18px}
.dash-table tr.blue th.left-col{background:#fff;color:#000}
.dash-table tr.blue td{background:#bcd0e6;color:#000;font-size:18px}
.dash-table tr.divider td{padding:0;height:0;border:0}
.dash-table tr.divider td,.dash-table tr.divider th{border-top:10px solid #000}
/* scenario column backgrounds */
.dash-table tbody tr:not(.blue):not(.bar):not(.divider) td:nth-child(2){background:#f2f2f2}
.dash-table tbody tr:not(.blue):not(.bar):not(.divider) td:nth-child(3){background:#d9d9d9}
.dash-table tbody tr:not(.blue):not(.bar):not(.divider) td:nth-child(4){background:#bfbfbf}
.dash-table tbody tr:not(.blue):not(.bar):not(.divider) td:nth-child(5){background:#a6a6a6}
.dash-table tr.bar th.left-col{font-size:18px}
.dash-table tr.bar td.cell{font-size:18px}
.dash-table tr.bar.red td.cell{background:#ff3300}
.dash-table tr.bar.white td.cell{background:#fff;color:#000}
.dash-table tr.bar.green td.cell{background:#92D050;color:#000}
/* Bottom bar rows - solid color bars from left to right */
.dash-table tr.bar-bottom td{border-right:0 !important;font-size:18px;font-weight:bold;color:#000}
.dash-table tr.bar-bottom td.bar-label{text-align:left;width:240px}
.dash-table tr.bar-bottom td.bar-val{text-align:center}
.dash-table tr.bar-divider td{padding:0;height:0;border:0;border-top:10px solid #000}
   
    /* ========== Overview Per Sector (DashboardPerSector) ========== */
    .cx-dashps-holder {
        position: relative;
        /* 019ebbb1: flex-fill to full monitor height (see .cx-dash-holder note) instead
           of a 100vh-160px cap that under-fills very large monitors.
           overflow:visible: scrolling is owned by the viewport-width .dashboard-content
           ancestor so the scrollbars stay on-screen (see .cx-dash-holder note). */
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
        width: 100%;
        background-color: black;
        font-family: "Segoe UI", system-ui, -apple-system, sans-serif
    }
.cx-dashps{background:#000;color:#fff;padding:4px 6px;font-family:inherit}
.dashps-header{display:flex;align-items:center;gap:10px;}
.dashps-header .brand{font-weight:bold;font-size:16px;opacity:.95}
.dashps-header .title{font-weight:bold; font-size:16px}

.dashps-table{width:max-content;min-width:100%;background:#000;color:#000;font-family:inherit;border-collapse:separate;border-spacing:0;table-layout:fixed}
    .dashps-table th {
        border: 1px solid #333;
        padding: 6px 8px;
        white-space: nowrap;
        text-align: center;
        font-size: 14px
    }
.dashps-table td{border:1px solid #333;padding:6px 8px;white-space:nowrap;text-align:center;font-size:14px}
/* Uniform width for sector columns (excluding sticky first label col and separator cols) */
.dashps-table th:not(.sticky-first-head):not(.sep-col),
.dashps-table td:not(.sticky-first):not(.sep-col){min-width:140px;width:140px}
.dashps-table thead th{position:sticky;top:0;background:#000;color:#fff;z-index:3;font-size:14px;font-weight:bold;box-shadow:none;border:0}
/* Remove faint grid lines in the sticky header by matching border color to black */
.dashps-table thead th,
.dashps-table thead tr th,
.dashps-table .subhead th { border: 0 !important; }
/* Also make sure no left/right borders slip in on sticky first header */
.dashps-table thead th.sticky-first-head { border: 0 !important; }
.dashps-table .sticky-first{position:sticky;left:0;background:#eee;z-index:4;text-align:left;font-weight:bold;width:140px;min-width:140px;font-size:14px}
.dashps-table .label{background:#f4f4f4}
.dashps-table .scenario-divider td{background:#222;color:#fff;font-weight:bold;text-align:left;border-top:4px solid #000;font-size:14px}
.dashps-table .scenario-bottom td{border-bottom:0}
.dashps-table .num{font-size:14px}
.dashps-table .num.strong{font-weight:bold}
.gp-chip{color:#000;padding:2px 8px;border-radius:3px;display:inline-block;font-size:14px}
.dashps-table tr.scenario-current td.num{background:#f2f2f2}
.dashps-table tr.scenario-option td.num{background:#d9d9d9}
.dashps-table tr.scenario-stretch td.num{background:#bfbfbf}
.dashps-table tr.scenario-total td.num{background:#a6a6a6}

/* vertical separator columns - width matches scenario-divider 4px border-top so vertical and horizontal black bars are consistent */
.dashps-table .sep-col{background:#000 !important;width:4px !important;min-width:4px !important;max-width:4px !important;border-color:#000;padding:0 !important;box-sizing:border-box}

/* ========== Summary (SummaryTable) ========== */
.summary-wrapper {
    position: relative;
    overflow: auto;
    /* 019ebbb1: replaced fixed 650px cap with viewport-relative height so the
       table uses the full monitor height.  ~160px = app chrome (header ~70px +
       ribbon/tab ~52px + padding ~38px); tune if clipped on a specific display. */
    max-height: calc(100vh - 160px);
    background: #f5f5f5;
    padding: 0 2px 2px;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif
}
.summary-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;--line-w:80px;--section-w:220px;--head-h:calc(1em + 12px);--head-gap:0px;font-family:inherit}
    .summary-table th {
        border: 0.5px solid;
        border-color: rgb(51, 51, 51);
        border-spacing: 0;
        padding: 6px 8px;
        white-space: nowrap;
        text-align: left;
        font-size: 14px;

    }
    .summary-table td {
        border: 0.5px solid;
        border-color: rgb(51, 51, 51);
        border-spacing: 0;
        padding: 6px 8px;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
    }
.summary-table th.group{background:#000;color:#fff;font-weight:bold;text-align:center;font-size:14px}
/* Ticket b90f: pin header line-height to 14px so each header row box = 14 (line) + 12
   (padding 6+6) + 0 (border) = exactly 26px. The subhead sticks below the group row.
   019e5794: base the offset off the table's real --head-h (=calc(1em + 12px)) instead
   of a hardcoded 26px literal. The dashboard scales via the `zoom` property, which
   rounds each pixel value independently; a literal 26px and the row's own height then
   round differently and expose a white seam / shifting black ribbon at non-100% zoom.
   Using the SAME calc expression that drives the row height makes both scale and round
   identically, so the subhead stays flush at every zoom level. */
.summary-table tr.subhead th{background:#000;color:#fff;position:sticky;top:var(--head-h);z-index:6;font-weight:bold;font-size:14px;line-height:14px;border-top:0 !important;box-shadow:none !important;will-change:transform;transform:translateZ(0)}
.summary-table thead th{position:sticky;top:0;background:#000;color:#fff;z-index:5;text-align:center;font-weight:bold;font-size:14px;line-height:14px;border:0 !important;box-shadow:none !important;outline:none;will-change:transform;transform:translateZ(0)}
.summary-table td.num{text-align:center;font-size:14px}
.summary-table td.num.gp{color:#000;}
    .summary-table th.line {
        position: sticky;
        top: 0px !important;
        left: 0;
        min-width: var(--line-w);
        width: var(--line-w);
        box-sizing: border-box;
        background: #000;
        color: #fff;
        z-index: 7;
        font-weight: bold;
        font-size: 14px;
        text-align: left;
        will-change: transform;
        transform: translateZ(0);
    }
    .summary-table td.line {
        background: #fff;
        position: sticky;
        left: 0;
        box-sizing: border-box;
        text-align: left;
    }
        .summary-table th.section{position:sticky;left:var(--line-w);min-width:var(--section-w);width:var(--section-w);box-sizing:border-box;background:#000;color:#fff;z-index:7;font-weight:bold;font-size:14px}

.summary-table td.section{position:sticky;left:var(--line-w);min-width:var(--section-w);width:var(--section-w);box-sizing:border-box;background:#fff;z-index:5;font-size:14px}
/* remove underline from section column links */
.summary-table td.section a,
.summary-table td.section a:link,
.summary-table td.section a:visited,
.summary-table td.section a:hover,
.summary-table td.section a:active{ text-decoration:none !important; color:inherit; }
/* style for vertical group separators */
.summary-table .sep-col{background:#000!important;width:6px;min-width:6px;border-width:0px;}
.summary-table tr.summary td{padding-bottom:16px}
.summary-table tr.divider td{border-top:3px solid #000;padding:0;height:0}
.summary-table tr.blue td{background:#c5d9f1}

.summary-table thead .group-start{border-left-color:#fff!important}
.summary-table thead .first-group{border-left-color:#fff!important}
.summary-table .summary-row td.section.strong{font-weight:bold}
.summary-table .summary-row.strong td{font-weight:bold}
.summary-table tr.summary-spacer td {
  background:#fff;
  border-top:0;
  border-bottom:0;
  height:6px;
  padding:0;
}
.summary-table tr.summary-spacer td.cur{background:#f2f2f2}
.summary-table tr.summary-spacer td.opt{background:#d9d9d9}
.summary-table tr.summary-spacer td.str{background:#bfbfbf}
.summary-table tr.summary-spacer td.tot{background:#a6a6a6}
td-white-bg{
    background-color:white;
    color:white;
}
/* Scenario group backgrounds now class-based instead of nth-child */
.summary-table tbody td.cur {
    background: #f2f2f2
}
.summary-table tbody td.opt{background:#d9d9d9}
.summary-table tbody td.str{background:#bfbfbf}
.summary-table tbody td.tot{background:#a6a6a6}

/* Uniform widths for GP%, per-unit, and % of total columns - matches COST/m2 baseline */
.summary-table th.col-np,
.summary-table td.col-np,
.summary-table th.col-costper,
.summary-table td.col-costper,
.summary-table th.col-sellper,
.summary-table td.col-sellper,
.summary-table th.col-costpct,
.summary-table td.col-costpct,
.summary-table th.col-sellpct,
.summary-table td.col-sellpct,
.sector-table th.col-np,
.sector-table td.col-np,
.sector-table th.col-costper,
.sector-table td.col-costper,
.sector-table th.col-sellper,
.sector-table td.col-sellper,
.sector-table th.col-costpct,
.sector-table td.col-costpct,
.sector-table th.col-sellpct,
.sector-table td.col-sellpct{width:120px;min-width:120px}

/* Ticket 019e5791 follow-up: the rule above wasn't being enforced strongly enough.
   Browser-measured widths were 130.6 / 125 / 91.4 / 87.5 px across the three
   dashboards. Force the 5 metric columns to be EXACTLY 120px regardless of header
   text length by adding !important + max-width + box-sizing:border-box + wrap.
   This guarantees getBoundingClientRect returns 120 for every match. */
.summary-table th.col-np,
.summary-table td.col-np,
.summary-table th.col-costper,
.summary-table td.col-costper,
.summary-table th.col-sellper,
.summary-table td.col-sellper,
.summary-table th.col-costpct,
.summary-table td.col-costpct,
.summary-table th.col-sellpct,
.summary-table td.col-sellpct,
.sector-table th.col-np,
.sector-table td.col-np,
.sector-table th.col-costper,
.sector-table td.col-costper,
.sector-table th.col-sellper,
.sector-table td.col-sellper,
.sector-table th.col-costpct,
.sector-table td.col-costpct,
.sector-table th.col-sellpct,
.sector-table td.col-sellpct {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ticket 019ec3a4: pin the base COST/SELL/PROFIT columns to a fixed width so they DON'T
   shrink when GP% / Rate of Measure / % of Total toggle the extra columns in. With
   table-layout:fixed + width:max-content the header row defines column widths; the
   auto-sized base columns previously re-flowed and narrowed every time extra columns
   appeared. Pinning them gives an identical width whether the toggles are on or off.
   140px matches the Overview-table column grid and comfortably fits currency values
   (cells are forced white-space:nowrap, so a too-narrow width would clip the amount).
   Summary uses col-cost/col-sell/col-profit headers; the sector tables use bare th.sub.
   Reopen 2 (09 Jul): on the sector tables the pct headers carry th.sub, so this later
   140px rule beats the 120px col-costpct/col-sellpct rule above and "COST % of TOTAL"
   fits on one line. Summary's pct headers (th.num.col-costpct) only matched the 120px
   rule, so the same text wrapped to two lines. Pin Summary's pct headers to the same
   140px so all three dashboards render the % of Total headers unwrapped. */
.summary-table th.col-cost,
.summary-table th.col-sell,
.summary-table th.col-profit,
.summary-table th.col-costpct,
.summary-table th.col-sellpct,
.sector-table th.sub {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    box-sizing: border-box !important;
}

/* Reopen 3 (23 Jul): "% of Total" headers still wrapped on Summary for users whose
   browser held a stale dashboards.css - the <link> carried a fixed ?v=1.1 since June,
   so the 140px rule above never reached them (_Host.cshtml now fingerprints the URL
   with asp-append-version). Belt-and-braces here: the 120px block above also leaves
   white-space:normal !important on these headers, so even at 140px a 1-2px metric
   shift (zoom rounding, fallback font) could wrap them again. Hard-forbid wrapping -
   same specificity (0,2,1) as the normal rule above, later in the file, so it wins.
   Widths are untouched: 140px comfortably fits "COST % of TOTAL" (~115px text + 16px
   padding), so nothing clips in practice and column sizing is unchanged. */
.summary-table th.col-costpct,
.summary-table th.col-sellpct,
.sector-table th.col-costpct,
.sector-table th.col-sellpct {
    white-space: nowrap !important;
}

/* Ticket 019ec3a4 reopen: Summary and Multi-Sectors still resized the SECTION/base
   columns when the GP% / Rate of Measure / % of Total toggles ran, while Summary Per
   Sector held steady. All three tables share the pinned-width rules above - the
   difference is table width vs viewport: the host viewer forces
   `.dashboard-inner table { min-width:100% !important }` (ExcelDashboardViewer.razor),
   so whenever a table's natural width is NARROWER than the viewport the browser
   stretches it and distributes the slack across EVERY column (SECTION included).
   Toggling extra columns changes the slack, so all columns reflow. Per Sector only
   "worked" because its many sector groups always overflow the viewport, leaving no
   slack to distribute. Pin the summary tables to their natural (max-content) width so
   every column always renders at its pinned width, matching Per Sector's spacing.
   Selector specificity (0,2,1)/(0,3,1) beats the host's (0,1,1) !important rules.
   table.sector-table needs the .pinned-cols marker (set in SummaryPerSectorDataTable
   and MultisectorDataTable) because Option Analysis / Snapshot Comparison / Trade
   Packages / Market Evaluation reuse .sector-table and must keep stretching. */
.dashboard-inner table.summary-table,
.dashboard-inner table.sector-table.pinned-cols {
    width: max-content !important;
    min-width: 0 !important;
}

/* Summary Per Sector (user request 2026-08-19, same as the Changes Log / Trade
   Package Analysis): ~5 columns of blank scroll room after the last sector group so
   any group can be scrolled across to sit beside the frozen SECTION column.
   .sector-table is border-collapse:separate, so the transparent border never merges
   with cell borders; the table has no own background, so the strip stays black. */
.dashboard-inner table.sector-table.summary-per-sector {
    border-right: 600px solid transparent;
}

/* ========== Summary Per Sector & Multi-Sector (shared) ========== */
.sector-wrapper {
    position: relative;
    overflow: auto;
    /* 019ebbb1: cap at viewport height minus chrome so the table uses full screen */
    max-height: calc(100vh - 160px);
    background: #f5f5f5;
    padding: 0 2px 2px;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: rgb(33, 37, 41);
}
.sector-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;--line-w:80px;--section-w:220px;--head-h:calc(1em + 12px);--head-gap:0px;font-family:inherit}
    .sector-table th {
        border: 0.5px solid;
        border-color: rgb(51, 51, 51);
        border-spacing: 0;
        padding: 6px 8px;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
    }
    .sector-table td {
        border: 0.5px solid;
        border-color: rgb(51, 51, 51);
        border-spacing: 0;
        padding: 6px 8px;
        white-space: wrap;
        text-align: left;
        font-size: 14px;
    }
.sector-table th.line-col,.sector-table td.line-col{
    width:var(--line-w);
    min-width:var(--line-w);
    box-sizing:border-box;
    text-align:left}
.sector-table th.section-col,.sector-table td.section-col{width:var(--section-w);min-width:var(--section-w);box-sizing:border-box;text-align:left}
        .sector-table td.section-col {
            
        }
/* Ticket b90f: pin header line-height to 14px so each header row box is exactly 26px
   (14 line + 6+6 padding). category-header sticks at top:0, subhead below it, and the
   sticky divider data rows two header-rows down - all land flush.
   019e5794: base the subhead/divider offsets off the table's real --head-h
   (=calc(1em + 12px)) instead of hardcoded 26px/52px literals. The dashboard scales via
   the `zoom` property, which rounds each pixel value independently; literal offsets and
   the rows' own heights then round differently and expose a white seam / shifting black
   ribbon at non-100% zoom. Using the SAME calc that drives row height keeps them flush. */
.sector-table thead th{position:sticky;top:0;background:#000;color:#fff;z-index:5;text-align:center;font-weight:bold;font-size:14px;line-height:14px;border:0 !important;box-shadow:none !important;outline:none;will-change:transform;transform:translateZ(0)}
.sector-table thead .category-header th{top:0;z-index:6;background:#000;color:#fff;text-align:center;font-weight:bold;font-size:14px;border-bottom:0 !important;box-shadow:none !important;will-change:transform;transform:translateZ(0)}
.sector-table thead .subhead th{top:var(--head-h);z-index:7;background:#000;color:#fff;text-align:center;font-weight:bold;font-size:14px;border-top:0 !important;box-shadow:none !important;will-change:transform;transform:translateZ(0)}
/* LINE column header reads left-aligned to match its left-aligned data (the centered
   .category-header th rule above otherwise wins over the .line-col text-align:left). */
.sector-table thead th.line-col{text-align:left}
.sector-table th.group{text-align:center;background:#000;color:#fff;font-weight:bold;font-size:14px}
.sector-table td.num{text-align:center;font-size:14px}
.sector-table td.num.gp{color:#000;}
.sector-table th.line-col,.sector-table td.line-col{position:sticky;left:0;z-index:8;background:inherit}
.sector-table th.section-col,.sector-table td.section-col{position:sticky;left:var(--line-w);z-index:8;background:inherit}
.sector-table thead th.line-col,.sector-table thead th.section-col{background:#000!important;color:#fff;z-index:11;will-change:transform;transform:translateZ(0)}
.sector-table tbody td.line-col{background:#fafafa}
.sector-table tbody td.section-col{background:#fafafa;font-weight:normal}
/* remove underline from section column links */
.sector-table td.section-col a,
.sector-table td.section-col a:link,
.sector-table td.section-col a:visited,
.sector-table td.section-col a:hover,
.sector-table td.section-col a:active{ text-decoration:none !important; color:inherit; }
/* style vertical group separators */
.sector-table .sep-col{background:#000 !important;width:6px;min-width:6px;border-color:#000}
/* The scenario divider row (CURRENT/OPTION/STRETCH/TOTAL ribbon) scrolls with the
   content rather than sticking. When pinned (the former 019e5794 behaviour) the ribbon
   sat over the first section row under the headers and blanked out its values. */
.sector-table tr.divider-row {
    position: static;
}
.sector-table .divider-row td{border-top:6px solid #000!important}
    .sector-table td.td-white-bg {
        background: #eaeaea !important;
        border-width: 0px;
    }
.sector-table .divider-row td.section-col{background:#eaeaea;font-weight:bold}
/* Split scenario ribbon: the label cell freezes in the LINE+SECTION area (sticky-left,
   matching the frozen data columns) while the grey ribbon to its right scrolls with the
   values. z-index:2 keeps it above the scrolling ribbon cell but below the sticky header
   (z5-7) so it never bleeds over the header on vertical scroll. */
.sector-table .divider-row td.category-label{
    position:sticky;
    left:0;
    z-index:2;
    box-sizing:border-box;
    background:#eaeaea;
    color:#000;
    font-weight:bold;
    text-align:left;
    padding:6px 8px;
}
.sector-table .divider-row td.category-rest{
    background:#eaeaea;
}
.sector-table tr.blue td{background:#c5d9f1}
.sector-table .summary-row td.section-col.strong{font-weight:bold}
.sector-table .summary-row.strong td{font-weight:bold}

/* Scenario backgrounds for value cells */
.sector-table tbody tr.scenario-current td.num{background:#f2f2f2}
.sector-table tbody tr.scenario-option td.num{background:#d9d9d9}
.sector-table tbody tr.scenario-stretch td.num{background:#bfbfbf}
.sector-table tbody tr.scenario-total td.num{background:#a6a6a6}
    .sector-table tr.summary-spacer td {
        background: #fff;
        border-top: 0;
        border-bottom: 0;
        height: 6px;
        padding: 0;
    }
/* Spacer scenario fill: numeric cells take the scenario colour; LINE/SECTION
   sticky cells are forced pure white regardless of scenario (019e5342).
   The scenario-specific td.num rules must come AFTER the base tr.summary-spacer td
   rule above so they win on specificity tie-breakers (source order). */
.sector-table tbody tr.summary-spacer td.line-col,
.sector-table tbody tr.summary-spacer td.section-col{background:#fff !important}
.sector-table tbody tr.summary-spacer.scenario-current td.num{background:#f2f2f2}
.sector-table tbody tr.summary-spacer.scenario-option td.num{background:#d9d9d9}
.sector-table tbody tr.summary-spacer.scenario-stretch td.num{background:#bfbfbf}
.sector-table tbody tr.summary-spacer.scenario-total td.num{background:#a6a6a6}

.category-indicator{background:#333;color:#fff;font-weight:bold;text-align:center;border:1px solid #555}
.gp-cell{color:#000;padding:2px 8px;border-radius:3px;display:inline-block;font-size:14px}


/* ========== Insights ========== */
.cx-insights-holder{position:relative;overflow:auto;width:100%;background:#000}
.cx-insights{color:#fff;padding:6px;font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
.insights-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-family:"Segoe UI", system-ui, -apple-system, sans-serif}
.insights-header .title{font-weight:bold;font-size:16px}
.insights-header .controls{display:flex;gap:8px;align-items:center}

.analysis-toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0}
.ovals{display:flex;justify-content:center}
.oval{border:6px solid currentColor;border-radius:1000px;padding:14px 20px;text-align:center;max-width:400px;width:100%}
.oval.blue{color:#2b66a6}
.oval.orange{color:#FFC000}
.oval-title{font-size:14px;font-weight:bold}
.oval-sub{display:flex;justify-content:space-around;margin-top:2px}
.oval-sub .cap{font-size:11px;font-weight:bold;color:#fff}
.oval-sub .val{font-size:14px;font-weight:bold;color:#fff}

.panes{display:flex;justify-content:center;margin-top:16px}
.pane-col{display:flex;flex-direction:column;gap:14px;max-width:400px;width:100%}
.tag-box{background:#fff;color:#000;border:6px solid currentColor;border-radius:2px;padding:10px}
.tag-box.blue{color:#2b66a6}
.tag-box.orange{color:#FFC000}
.tag-title{text-align:center;font-size:14px;font-weight:bold;margin-bottom:6px}
.tag-grid{display:grid;grid-template-columns:auto 180px;row-gap:6px;column-gap:20px;align-items:center}
.tag-grid .lbl{font-weight:bold;font-size:14px;white-space:nowrap}
.tag-grid .num{font-weight:bold;text-align:right;font-size:14px}
.sp{height:12px}

/* ========== Option Analysis ========== */
.option-table{table-layout:auto !important}
.sector-table tr.option-header th{white-space:normal;vertical-align:middle;line-height:1.3;padding-top:10px;padding-bottom:10px}
.oa-show{min-width:50px;width:50px}
.oa-option{min-width:90px;width:90px}
.oa-desc{min-width:250px;width:250px}
.oa-val{min-width:120px;width:120px}

/* -- drag-and-drop -- */
.drag-handle-col{width:30px;min-width:30px;text-align:center;padding:0 4px !important}
.drag-handle{font-size:16px;color:#aaa;cursor:grab;user-select:none}
.drag-handle:active{cursor:grabbing}
.sector-table tr.dragging{opacity:0.4}
.sector-table tr.drag-over-before{box-shadow:inset 0 2px 0 0 #2b66a6}
.sector-table tr.drag-over-after{box-shadow:inset 0 -2px 0 0 #2b66a6}

/* ========== Company Dashboard (CompanyDashboardComponent) ========== */
/* Reuses the .sector-table chrome (black sticky header rows, frozen line/section
   columns, black separator columns). The scenario shades are per COLUMN block here —
   the same greys as the Summary table's cur/opt/str/tot cells. */
.company-table{--date-w:150px;--line-w:110px;--section-w:260px}
.company-table col.cg-date{width:var(--date-w)}
.company-table col.cg-number{width:var(--line-w)}
.company-table col.cg-name{width:var(--section-w)}
.company-table col.cg-plan{width:170px}
/* Three frozen identity columns (the sector tables freeze two): Reporting Date at
   left:0, then Project No. and Project Name offset by the columns before them. */
.company-table th.date-col,.company-table td.date-col{position:sticky;left:0;z-index:8;width:var(--date-w);min-width:var(--date-w);box-sizing:border-box;text-align:center}
.company-table th.line-col,.company-table td.line-col{left:var(--date-w)}
.company-table th.section-col,.company-table td.section-col{left:calc(var(--date-w) + var(--line-w))}
.company-table thead th.date-col{background:#000!important;color:#fff;z-index:11;will-change:transform;transform:translateZ(0)}
.company-table tbody td.date-col{background:#fafafa}
.company-table col.cg-region{width:80px}
.company-table col.cg-pct{width:110px}
.company-table col.cg-money{width:140px}
.company-table col.cg-sep{width:6px}
.company-table td{white-space:nowrap}
/* Unshaded cells (plan, date, region, targets, coverage) would otherwise show the
   holder's black through them; the sector tables only ever paint .num cells. */
.company-table tbody td{background:#fff}
.company-table tbody td.cur{background:#f2f2f2}
.company-table tbody td.opt{background:#d9d9d9}
.company-table tbody td.str{background:#bfbfbf}
.company-table tbody td.tot{background:#a6a6a6}
.company-table tr.company-total td{border-top:3px solid #000}
.company-table tr.company-total td.date-col,
.company-table tr.company-total td.line-col,
.company-table tr.company-total td.section-col{background:#eaeaea}
/* Trailing room so the right-most block can be scrolled across beside the frozen
   project columns (same device as the Summary Per Sector table). */
.dashboard-inner table.company-table{border-right:400px solid transparent}