/* =============================================================================
   styles.css  -  CEM Budget Splash Simulator (MDS build)
   Visual overrides only. MDS foundations handles reset, typography, tokens.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   MSAL LOGIN PAGE — shown by auth/msalConfig.js when no account is present.
   Split panel layout (brand / form), no external imagery required.
   ──────────────────────────────────────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset   : 0;
  z-index : 9999;
  display : flex;
}

.login-overlay.is-hidden {
  display: none;
}

.login-panel {
  flex          : 1 1 50%;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  justify-content: center;
  padding       : 48px;
  box-sizing    : border-box;
}

.login-panel--brand {
  background: #335064;
  color     : #fff;
}

.login-brand-mark {
  font-size  : 64px;
  font-weight: 700;
  letter-spacing: 4px;
}

.login-brand-caption {
  margin-top: 8px;
  opacity   : 0.85;
}

.login-panel--form {
  background: var(--mds_color_neutral_surface_background, #fff);
  --mds_brand_appearance_primary_default_background-color: #335064;
}

.login-form-inner {
  max-width: 360px;
  text-align: center;
}

@media (max-width: 768px) {
  .login-overlay { flex-direction: column; }
  .login-panel   { flex-basis: auto; padding: 32px 24px; }
}

/* Top-bar user badge (name + sign-out), shown once auth/msalConfig.js confirms login */
.cem-user-badge {
  display    : inline-flex;
  align-items: center;
  gap        : 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE SHELL
   Centered max-width container with real gutters. Applied to a div INSIDE
   <main>, so it never fights with mds-layout or mc-top-bar.
   ──────────────────────────────────────────────────────────────────────────── */
#main-content {
  padding: 0;             /* neutralise any MDS mds-page padding */
}

.app-shell {
  max-width     : 1760px;
  margin        : 0 auto;
  padding       : 36px 48px 24px;  /* top / sides / bottom */
  box-sizing    : border-box;
  width         : 100%;
  display       : flex;
  flex-direction: column;
  gap           : 24px;
}

/* Visible app sections stacked with equal rhythm */
.page-content {
  display       : flex;
  flex-direction: column;
  gap           : 24px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOP-BAR END SLOT
   ──────────────────────────────────────────────────────────────────────────── */
.top-bar-end {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

/* Data-loaded status tag reads "Confidential" — a pastel red, not the tag's
   built-in appearance colors (this is a sensitivity label, not a load-status
   indicator like the Error state right next to it). ::part(tag) is mc-tag's
   exposed shadow part for exactly this kind of override. */
#data-status-tag.tag-confidential::part(tag) {
  background-color: #FBE4E4;
  border-color    : #F0C4C4;
  color           : #8A1F1F;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTROLS ROW  (replaces mc-toolbar for precise top-alignment)
   align-items: stretch makes both .filter-box siblings the same height,
   regardless of their different content (method selector vs. plain selects).
   ──────────────────────────────────────────────────────────────────────────── */
.controls-row {
  display     : flex;
  align-items : stretch;   /* EQUAL height for both filter boxes */
  gap         : 16px;
  flex-wrap   : nowrap;
}

/* Grouped filter background boxes */
.filter-box {
  display      : flex;
  align-items  : flex-end;   /* bottom-align children (selects) within the box */
  gap          : 6px;
  flex-wrap    : nowrap;
  padding      : 8px 12px;
  background   : var(--mds_color_neutral_bg_subtle,    #F8F8F8);
  border       : 1px solid var(--mds_color_neutral_border_weak, #E3E3E3);
  border-radius: 4px;
}

/* v2's filter boxes: force everything onto one line by letting each select
   shrink evenly to fill the available width, instead of wrapping. The two
   boxes (cargo/trade group, sales-org group) share the row via flex-basis
   proportional to their select count, so individual selects stay roughly
   the same width as when all 8 lived in a single box. */
.filter-box--onerow {
  flex-wrap: nowrap;
  gap      : 8px;
}
.filter-box--onerow > mc-select {
  flex     : 1 1 0;
  min-width: 0;   /* allow shrinking below content width so all selects fit on one line */
}
.filter-box--cargo {
  flex: 3 1 0;
}
.filter-box--salesorg {
  flex: 5 1 0;
}

/* Preset ("bookmark") trigger + Reset — two tall icon-button rectangles
   sitting side by side. The preset trigger opens a dropdown (mc-menu/mc-list)
   of CEM filter-triple presets; Reset repeats the CEM v2 pages' full-page
   reset (was the top-bar "Reset Filters" button, moved here). Centered on
   the filter box's height instead of the selects' bottom-aligned baseline
   (.filter-box's align-items: flex-end), since these buttons are taller
   than a select and would otherwise hang below it. */
.filter-icon-actions {
  display    : flex;
  gap        : 6px;
  flex       : 0 0 auto;
  align-self : center;
}
.filter-icon-btn {
  display   : inline-block !important;
  width     : 32px !important;
  height    : 64px !important;
  min-width : 32px !important;
  min-height: 64px !important;
}
/* mc-button's actual clickable rectangle is the shadow-DOM <button part="button">
   — sizing the host alone doesn't stretch it, the inner element still renders
   at its own small/fit-driven height unless targeted directly via ::part(). */
.filter-icon-btn::part(button) {
  width : 100%;
  height: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   V2 PARAMETER BOX (Model Strength + CTR Region Movement Cap, combined)
   Lives as the first child of #qt-kpi-row, boxed like the KPI mc-cards to
   its right (white bg, border, blue accent) but sized as its own flex share
   — slightly under 2 card-widths — rather than matching a single card 1:1.
   A grey .kpi-row-divider follows it, then the 4 KPI cards split the rest of
   the row evenly (row uses the default flex align-items:stretch, so every
   child is stretched to the tallest one automatically, card or param box
   alike). Each of the two param sub-blocks inside shares one 2-row shape:
     .param-name-row    — parameter name + info (ⓘ) icon
     .param-control-row — value box + slider, side by side, vertically
                          centered against each other.
   Self-contained CSS tooltip on .param-info — no dependency on the MDS icon
   CDN; opens on hover AND keyboard focus (tabindex), and via a .show class
   for testability.
   ──────────────────────────────────────────────────────────────────────────── */
.param-combo-box {
  display       : flex;
  align-items   : stretch;
  gap           : 20px;
  flex          : 1.85 1 0;
  width         : 0;
  min-width     : 0;
  padding       : 10px 16px;
  background    : var(--mds_color_neutral_bg, #FFFFFF);
  border        : 1px solid var(--mds_color_neutral_border_weak, #E3E3E3);
  border-radius : 8px;
  /* Darker than the KPI cards' #42B0D5 accent — sets the param box visually
     apart from the cards it sits beside. */
  border-bottom : 7px solid #0073AB;
}

.param-wrap {
  position      : relative;
  display       : flex;
  flex-direction: column;
  justify-content: center;
  gap           : 6px;
  flex          : 1 1 0;
  min-width     : 0;
}

/* Grey vertical rule between the param box and the 4 KPI cards — stretches
   to the row's full height via the row's default align-items:stretch. */
.kpi-row-divider {
  width      : 1px;
  background : var(--mds_color_neutral_border_weak, #D9D9D9);
  flex-shrink: 0;
  align-self : stretch;
}

/* mc-input renders with display:inline by default, so a plain width on the
   host has NO effect (width is ignored on inline boxes) — the control just
   shrinks to fit its content instead. Force inline-block so the declared
   (compact) width is actually honored and the "%" suffix sits right next to
   the value. */
#qt-kpi-row .param-value-zone > mc-input {
  display: inline-block;
  width  : 56px;
}
/* mc-input's internal <input> doesn't inherit font-weight/size from the host
   (its own shadow-DOM styles set them directly) — match Model Strength's
   plain .param-value-input (600 weight, 0.8125rem) via its exposed "input"
   shadow part so both values read the same. */
#qt-kpi-row .param-value-zone > mc-input::part(input) {
  font-weight: 600;
  font-size  : 0.8125rem;
}

.param-name-row {
  display    : flex;
  align-items: center;
  gap        : 4px;
  min-height : 16px;
}

.param-name {
  font-size  : 0.75rem;
  font-weight: 600;
  color      : #0073AB;
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}

/* Inline "click the text to pick a level" pivot triggers on the Sales Control
   Region overview table's title (qt-pivot-outer / qt-pivot-inner) — plain
   compact blue text + chevron rather than a boxed select. Sized to match the
   KPI cards' heading text (e.g. "Optimization Pot FFE"), not bold. */
.pivot-trigger {
  display    : inline-flex;
  align-items: center;
  gap        : 2px;
  font-size  : 26px;
  line-height: 1.2;
  font-weight: 400;
  color      : #0073AB;
  cursor     : pointer;
  user-select: none;
  border-radius: 2px;
}
.pivot-trigger:hover,
.pivot-trigger:focus-visible {
  text-decoration: underline;
  outline: none;
}
.pivot-trigger-caret {
  /* mc-icon sizes itself off its own internal font-size, not an inherited
     one (em units here don't track the trigger's own font-size) — pin an
     absolute size instead, proportioned against the ~26px trigger text. */
  width : 18px;
  height: 18px;
  color : #0073AB;
}

/* The plain "&" / "Overview" text sitting between/after the pivot triggers —
   match .pivot-trigger's size exactly so the whole title reads as one line
   of consistent text, just without the blue (this part isn't clickable). */
.table-card-title-text {
  font-size  : 26px;
  line-height: 1.2;
  font-weight: 400;
}

/* Holds the value box + its slider side by side, centered on each other. */
.param-control-row {
  display    : flex;
  align-items: center;
  gap        : 6px;
  min-height : 30px;
}

/* Fixed-width zone for the value control (bare input for Model Strength;
   input + "%" suffix for Movement Cap) — without this, the wider Movement
   Cap zone (input + suffix) eats into its slider's width more than Model
   Strength's bare input does, so the two sliders render at different
   lengths even though both param blocks are the same overall width. Pinning
   both zones to the same width makes both sliders start at the same x and
   render the same length. */
.param-value-zone {
  flex      : 0 0 76px;
  display   : flex;
  align-items: center;
  gap       : 4px;
}

.param-suffix {
  font-size  : 0.8125rem;
  font-weight: 600;
  color      : #0073AB;
}

.param-info {
  position       : static;
  flex-shrink    : 0;
  width          : 15px;
  height         : 15px;
  border-radius  : 50%;
  background     : var(--mds_color_neutral_bg_weak, #EDEDED);
  border         : 1px solid var(--mds_color_neutral_border, #B8B8B8);
  color          : var(--mds_color_neutral_text_weak, #6E6E6E);
  font-size      : 10px;
  font-weight    : 700;
  font-style     : normal;
  font-family    : inherit;
  line-height    : 13px;
  text-align     : center;
  cursor         : help;
  user-select    : none;
}
.param-info:hover,
.param-info:focus-visible {
  background  : var(--mds_color_neutral_bg, #FFFFFF);
  border-color: #0073AB;
  color       : #0073AB;
  outline     : none;
}

.param-tooltip {
  display        : none;
  position       : absolute;
  top            : 20px;
  left           : 0;
  z-index        : 1000;
  width          : 320px;
  padding        : 10px 12px;
  background     : var(--mds_color_neutral_inverse_bg, #141414);
  color          : var(--mds_color_neutral_inverse_text, #FFFFFF);
  font-size      : 12px;
  font-weight    : 400;
  font-style     : normal;
  font-family    : inherit;
  line-height    : 1.5;
  text-align     : left;
  border-radius  : 4px;
  box-shadow     : 0 4px 16px rgba(0,0,0,.25);
  cursor         : default;
  white-space    : normal;
}
.param-tooltip b, .param-tooltip strong { color: #91D8F2; }

.param-tooltip table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 10.5px; }
.param-tooltip th, .param-tooltip td { padding: 2px 5px; text-align: right; }
.param-tooltip th:first-child, .param-tooltip td:first-child { text-align: left; }
.param-tooltip thead th { color: #91D8F2; border-bottom: 1px solid rgba(255,255,255,.25); }

/* Anchor tooltips inside the wrapper's coordinate space (.param-wrap is the
   positioned ancestor; .param-info itself sits in-flow inside .param-name-row
   now, so the tooltip drops from just below the name row). */
.param-wrap > .param-name-row > .param-info > .param-tooltip { top: 24px; left: 0; }
.param-tooltip--right { left: auto; right: 0; }
.param-tooltip--wide { width: 460px; }

.param-info:hover  > .param-tooltip,
.param-info:focus-visible > .param-tooltip,
.param-info.show   > .param-tooltip {
  display: block;
}

.split-label {
  font-size  : 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 20px;   /* matches slider hit-area */
}
/* Editable value inputs in .param-control-row (γ) — styled to match the
   bordered box Movement cap's mc-input renders (1px #D4D4D4 border, 6px
   radius, white bg), just compact since these only ever hold ~4 characters
   and now share row space with 4 KPI cards instead of a full-width box. */
.param-value-input {
  box-sizing  : border-box;
  width       : 46px;
  height      : 30px;
  padding     : 0 6px;
  /* !important: MDS foundations' input reset otherwise wins this tie and
     keeps the browser default 16px, which reads visibly larger than the
     13px CTR Region Movement Cap value next to it. */
  font-size   : 0.8125rem !important;
  font-weight : 600;
  font-family : inherit;
  color       : inherit;
  text-align  : right;
  border      : 1px solid #D4D4D4;
  border-radius: 6px;
  background  : var(--mds_color_neutral_bg, #FFFFFF);
  -moz-appearance: textfield; /* hide the native number spinner so it doesn't eat into the box's text space */
}
.param-value-input::-webkit-inner-spin-button,
.param-value-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.param-value-input:focus-visible {
  outline     : 2px solid #0073AB;
  outline-offset: 1px;
}
.param-value-input:disabled {
  color       : var(--mds_color_neutral_text_weak, #6E6E6E);
  border-color: #E5E5E5;
  background  : #F5F5F5;
  cursor      : not-allowed;
}

/* Fixed (non-editable) value display — same box footprint as .param-value-input
   so the row layout doesn't shift, but no border/background/input chrome since
   the value can no longer be typed into. */
.param-value-text {
  box-sizing  : border-box;
  display     : inline-block;
  min-width   : 46px;
  height      : 30px;
  line-height : 30px;
  padding     : 0 6px;
  font-size   : 0.8125rem;
  font-weight : 600;
  font-family : inherit;
  text-align  : right;
  color       : var(--mds_color_neutral_text_weak, #6E6E6E);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER
   Uses --cem-pct CSS custom property set by JS on the <input> element.
   Custom properties inherit into pseudo-elements from the originating element,
   so ::-webkit-slider-runnable-track can use var(--cem-pct, 50%) directly.
   This avoids the JS-sets-inline-background hack that was fighting the browser.
   ──────────────────────────────────────────────────────────────────────────── */
.split-slider-wrap {
  flex    : 1 1 auto;   /* stretch to fill the (now flexible-width) bar row */
  min-width: 40px;
  position: relative;
}

input[type=range].mds-slider {
  --cem-pct         : 50%;
  --cem-color       : #0073AB;
  --l12m-color      : #91D8F2;   /* light Maersk blue — soft, not near-black */
  width             : 100%;
  height            : 20px;      /* hit-area height */
  -webkit-appearance: none;
  appearance        : none;
  background        : transparent;
  cursor            : pointer;
  outline           : none;
  display           : block;
  padding           : 0;
  margin            : 0;
}

/* Webkit track */
input[type=range].mds-slider::-webkit-slider-runnable-track {
  height       : 6px;
  border-radius: 3px;
  background   : linear-gradient(
    to right,
    var(--cem-color)  0%,
    var(--cem-color)  var(--cem-pct, 50%),
    var(--l12m-color) var(--cem-pct, 50%),
    var(--l12m-color) 100%
  );
}

/* Webkit thumb */
input[type=range].mds-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width             : 20px;
  height            : 20px;
  margin-top        : -7px;
  background        : #ffffff;
  border            : 2.5px solid #0073AB;
  border-radius     : 50%;
  cursor            : pointer;
  box-shadow        : 0 1px 4px rgba(0,115,171,.25);
}
input[type=range].mds-slider:focus-visible::-webkit-slider-thumb {
  outline       : 2px solid #0073AB;
  outline-offset: 2px;
}

/* Disabled slider — grey out the fill and thumb so the colored --cem-pct
   gradient can't be mistaken for a live control. */
input[type=range].mds-slider:disabled {
  cursor: not-allowed;
}
input[type=range].mds-slider:disabled::-webkit-slider-runnable-track {
  background: #E5E5E5;
}
input[type=range].mds-slider:disabled::-webkit-slider-thumb {
  background : #F5F5F5;
  border-color: #B5B5B5;
  box-shadow : none;
  cursor     : not-allowed;
}
input[type=range].mds-slider:disabled::-moz-range-track {
  background: #E5E5E5;
}
input[type=range].mds-slider:disabled::-moz-range-thumb {
  background : #F5F5F5;
  border-color: #B5B5B5;
  box-shadow : none;
  cursor     : not-allowed;
}

/* Firefox track */
input[type=range].mds-slider::-moz-range-track {
  height       : 6px;
  border-radius: 3px;
  background   : linear-gradient(
    to right,
    var(--cem-color)  0%,
    var(--cem-color)  var(--cem-pct, 50%),
    var(--l12m-color) var(--cem-pct, 50%),
    var(--l12m-color) 100%
  );
}

/* Firefox thumb */
input[type=range].mds-slider::-moz-range-thumb {
  width        : 20px;
  height       : 20px;
  background   : #ffffff;
  border       : 2.5px solid #0073AB;
  border-radius: 50%;
  cursor       : pointer;
  box-shadow   : 0 1px 4px rgba(0,115,171,.25);
}

/* ─────────────────────────────────────────────────────────────────────────────
   KPI ROW  —  2 model-param boxes (.param-wrap, styled above) + 4 KPI cards,
   6 equal-width siblings, equal gutters. width: 0 + flex: 1 1 0 forces every
   child to the same computed width regardless of internal content; the
   default align-items:stretch (unset here) makes them the same height too,
   card or param box alike.
   ──────────────────────────────────────────────────────────────────────────── */
.kpi-row {
  display: flex;
  gap    : 14px;
}

.kpi-row > mc-card {
  flex    : 1 1 0;
  width   : 0;         /* override any intrinsic sizing */
  min-width: 0;
}

/* mc-card's shadow-DOM header uses flex-direction: column-reverse, which
   bottom-anchors the heading within its synced min-height box — so 1-line
   titles sit lower than 2-line titles. Force top alignment across the row. */
.kpi-row > mc-card::part(header-container) {
  flex-direction: column;
}

/* Card title, one size down. The title <h2> lives in mc-card's shadow DOM
   with no exposed ::part, so it can't be targeted directly — but its
   font-size/line-height come from CSS custom properties (design tokens),
   which DO inherit through the shadow boundary. Redirecting the "small"
   headline tokens to the "x-small" ones, scoped to just these cards, gets
   the same visual result as size="small" without touching the card's own
   padding/margin variant. */
.kpi-row > mc-card {
  --mds_brand_typography_headline_small_mobile_font-size   : var(--mds_brand_typography_headline_x-small_mobile_font-size);
  --mds_brand_typography_headline_small_mobile_line-height : var(--mds_brand_typography_headline_x-small_mobile_line-height);
  --mds_brand_typography_headline_small_desktop_font-size  : var(--mds_brand_typography_headline_x-small_desktop_font-size);
  --mds_brand_typography_headline_small_desktop_line-height: var(--mds_brand_typography_headline_x-small_desktop_line-height);
}

/* Blue accent — a bottom band on the card's own bordered/rounded box (part
   "container"), so it follows the card's corner radius instead of squaring
   it off. */
.kpi-row > mc-card::part(container) {
  border-bottom: 7px solid #42B0D5;
}

/* Compact the card's built-in vertical chrome (20px top / 24px bottom
   margins by default) and tighten the heading-to-value gap. */
.kpi-row > mc-card::part(content-container) {
  margin-top: 12px;
}
.kpi-row > mc-card::part(content-inner) {
  margin-bottom: 12px;
  gap: 4px;
}

/* Headline number + its "X% Budget" tag always sit on the same row, wrapping
   together (not detaching onto separate lines) if the card gets too narrow. */
.kpi-value-row {
  display        : flex;
  align-items    : baseline;
  flex-wrap      : wrap;
  gap            : 8px;
}

/* The USD-per-FFE pill's own tag padding sits it visibly below the $ value's
   baseline (unlike the plain "X% Budget" tags, which don't drift this way) —
   nudge it up so the pill's center lines up with the value. */
#qt-kpi-usd-per-ffe-tag {
  position: relative;
  top: -3px;
}

/* KPI headline numbers — one size down from the standard small headline, and
   set in the body text font rather than the display headline font so the
   numbers read as data, not as a page title. */
.kpi-row .mds-headline {
  font-family: var(--mds_brand_typography_text_font-family), var(--mds_brand_typography_text_font-family-fallback);
  font-weight: 700;
  color: #42B0D5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REGION SUMMARY TABLE
   ──────────────────────────────────────────────────────────────────────────── */
mc-card mc-table {
  display: block;
  width  : 100%;
}

/* Space out the table/report blocks (region overview, trade flow overview,
   customer detail, etc.) so cards don't run directly into one another. */
#page-quality-tilt > mc-card {
  display      : block;
  margin-bottom: 24px;
}

/* First table on the Optimization Models page sits a bit further from the KPI
   cards above it than the page's usual block rhythm (.page-content's 24px
   flex gap) — this margin-top adds on top of that gap, ~30% more total. */
#page-quality-tilt {
  margin-top: 7px;
}

/* Card header row — title on the left, Export CSV on the top-right, in
   place of mc-card's built-in "actions" slot (which renders BELOW the
   table, not beside the heading). */
.table-card-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 12px;
  margin-bottom  : 22px;
}

/* Blue MDS-styled grouped-header strip sitting directly above the Sales
   Control Region overview table (renderQtColumnGroupStrip in app.js), width-
   matched cell-for-cell to the table's own columns. Its own scrollbar is
   hidden — app.js drives scrollLeft to mirror the table's internal scroll —
   and pointer-events:none keeps it purely visual so there's no dueling-scroll
   risk from a user grabbing it directly. */
.qt-col-group-strip {
  display        : flex;
  overflow-x     : auto;
  overflow-y     : hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events : none;
  margin-bottom  : 4px;
}
.qt-col-group-strip::-webkit-scrollbar {
  display: none;
}
/* Each cell's width is set inline in app.js to match the table's real column
   widths exactly (see renderQtColumnGroupStrip) — margin would add its own
   footprint on top of that and drift the strip out of alignment with the
   table below, growing with every cell crossed. The 1px gap between boxes
   comes from a border instead: box-sizing:border-box keeps it inside the
   declared width, so the strip's total footprint always matches the table's,
   however many cells there are. */
.qt-col-group-cell {
  display        : flex;
  flex           : 0 0 auto;
  box-sizing     : border-box;
  align-items    : center;
  justify-content: center;
  height         : 36px;
  border         : 1px solid var(--mds_color_neutral_bg, #FFFFFF);
  padding        : 0 6px;
  border-radius  : 3px;
  /* Same blue as the KPI cards' accent band (.kpi-row > mc-card::part(container)
     border-bottom, above) — ties the strip visually to the rest of the page. */
  background     : #42B0D5;
  color          : #FFFFFF;
  font-size      : 13px;
  font-weight    : 400;
  white-space    : nowrap;
  overflow       : hidden;
  text-overflow  : ellipsis;
}
.qt-col-group-cell--blank {
  background: transparent;
}

.table-card-title {
  margin     : 0;
  font-size  : 16px;
  font-weight: 600;
  color      : var(--mds-color-neutral-900, #000);
  font-family: inherit;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CEM CUSTOMER DETAIL SECTION
   ──────────────────────────────────────────────────────────────────────────── */
.cem-detail-subtitle {
  margin    : 0 0 16px;
  color     : var(--mds_color_neutral_text_weak, #6E6E6E);
  max-width : 900px;
}

.cem-detail-card {
  /* same width as all other blocks — no full-bleed override */
}

/* Table-specific controls row — sits inside .table-card-header, top-right of
   the card, beside the title (search box + Export CSV). */
.cem-detail-controls {
  display     : flex;
  align-items : center;
  gap         : 12px;
  flex-wrap   : wrap;
  flex        : 0 0 auto;
}
.cem-detail-controls #qt-cust-search { min-width: 220px; }
.cem-detail-controls mc-switch  { padding-bottom: 6px; }


/* ─────────────────────────────────────────────────────────────────────────────
   LOADING SECTION
   ──────────────────────────────────────────────────────────────────────────── */
#loading-section {
  flex-direction: column;
  align-items   : center;
  padding       : 64px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPUTE BUSY INDICATOR  (shown while a v2 page recomputes in the Web Worker)
   Lives in the top bar's actions slot, right of the methodology "i" button, so
   it reads as a sibling of the status tags next to it.
   ──────────────────────────────────────────────────────────────────────────── */
.compute-busy {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  padding        : 2px 10px;
  border-radius  : 12px;
  background     : var(--mds_color_neutral_surface_weak, #F5F5F5);
  color          : var(--mds_color_neutral_text_weak, #6E6E6E);
  font-size      : 12px;
  width          : fit-content;
  white-space    : nowrap;
}
/* mc-loading-indicator stacks its own "Loading" label under the ring, which made
   the pill 46px tall (vs 24px tags) and read "Loading Recalculating…". Hiding the
   label collapses it to a bare 16px ring. */
.compute-busy mc-loading-indicator::part(label) {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE NAVIGATION  (nav buttons in top bar, after the logo/title)
   ─────────────────────────────────────────────────────────────────────────────── */
.top-bar-nav {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

/* ───────────────────────────────────────────────────────────────────────────────
   CEM SPLASH PAGE — stack children with gap
   ─────────────────────────────────────────────────────────────────────────────── */
#page-cem-splash {
  display       : flex;
  flex-direction: column;
  gap           : 32px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SENSITIVITY PAGE
   ──────────────────────────────────────────────────────────────────────────── */
#page-sensitivity {
  display       : flex;
  flex-direction: column;
  gap           : 24px;
}

/* FFE / Delta % toggle buttons */
.sensitivity-mode-toggle {
  display    : flex;
  align-items: center;
  gap        : 4px;
  margin-left: auto;
  padding-bottom: 2px;
}

/* Standalone toggle row for BCO/FWD chart (no region filter beside it) */
.sensitivity-mode-toggle-row {
  display        : flex;
  justify-content: flex-end;
  gap            : 4px;
  margin-bottom  : 12px;
}

/* Bordered container box for charts */
.chart-box {
  border       : 1px solid var(--mds-color-neutral-300, #E0E0E0);
  border-radius: 4px;
  padding      : 20px 24px;
  background   : #fff;
  margin-bottom: 28px;
}

.chart-box:last-child {
  margin-bottom: 0;
}

/* Title inside chart boxes */
.chart-box-title {
  margin        : 0 0 20px 0;
  font-size     : 16px;
  font-weight   : 600;
  color         : var(--mds-color-neutral-900, #000);
  font-family   : inherit;
  line-height   : 1.4;
}