/*
 * Hand-written overrides. Not from Webflow and not generated - load this last.
 *
 * Kept out of erdi-site.webflow.css (a Webflow export) and css/erdi-charts.css (generated by
 * adb-erdi-angular's tools/scope-charts-css.mjs, and marked "do not edit by hand"), so neither
 * a re-export nor a re-copy can silently drop what is here.
 */

/* ------------------------------------------------------------------ header and footer width
 * The bars were always full width; their contents were pinned to 1270px, which reads as a
 * narrow strip floating in the middle of a wide screen. The gutter keeps the logo and the
 * footer columns off the edge.
 *
 * .container appears exactly once per page and always inside the navbar, so widening it
 * reaches the header only - no page content uses it.
 *
 * Guarded at min-width 1271px, one past the cap being lifted. Below that the cap was never
 * doing anything (max-width only caps, it does not stretch), so narrow layouts are untouched
 * by construction rather than by testing every breakpoint.
 */
@media screen and (min-width: 1271px) {
  .navbar .container,
  .container-footer {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ------------------------------------------------------------------ charts page scrolling
 * The dashboard was built to own the viewport: height calc(100vh - 80px) with its sidebar and
 * chart pane scrolling inside it. That works where it is the whole page, which is how the
 * Angular build runs it. Here a footer sits below it, so the page scrolls too - and reaching
 * the footer slid the app up until its panes were a few hundred pixels tall, with the wheel
 * grabbing whichever scroll container it felt like. Steps 3 and 4 became effectively
 * unreachable.
 *
 * So on this page the dashboard sizes to its content and the page does all the scrolling. The
 * sidebar is sticky instead, which keeps the step controls in view - the one thing the inner
 * scrolling was actually buying.
 *
 * These selectors carry .charts-page deliberately: css/erdi-charts.css is appended to <head>
 * at runtime by the component (charts.ts attachStylesheet), so it loses on order and has to be
 * beaten on specificity.
 */
body.charts-page {
  padding-top: 80px;              /* the site header is position: fixed */
}

.charts-page .erdi-charts {
  margin-top: 0;                  /* replaced by the body padding above */
  height: auto;
}

.charts-page .erdi-charts .app-layout-2col { overflow: visible; min-width: 0; }

/* min-width: 0 is load-bearing, not tidying. .app-layout-2col is a grid of 440px and 1fr, and a
 * grid item defaults to min-width: auto, so the item cannot shrink below the widest thing inside
 * it and a Flat Table with Periods in Columns stretched the column past the viewport, scrolling
 * the whole page sideways and leaving the header band and the sidebar behind.
 *
 * b8a802d reached the same bug from the other side and changed the track to
 * minmax(0, 1fr), which is now in erdi-charts.css. That fixes the track's automatic minimum;
 * this fixes the item's. Both are needed here. Upstream gets the item side for free from
 * overflow: hidden on .app-layout-2col, which resolves min-width: auto to zero - we set
 * overflow: visible there so the page can own the vertical scroll, which brings it back.
 *
 * It has to be min-width rather than overflow: the moment one axis is not visible, CSS computes
 * the other to auto, so overflow-x: hidden here would put the inner vertical scrollbar straight
 * back and undo the reason this block exists. */
.charts-page .erdi-charts .visualization-main { overflow: visible; height: auto; min-width: 0; }

/* ------------------------------------------------------------------ table scroll container
 * c709e9e rebuilt the wide table as an isolated scroll region: .kidb-table-scroll-container is
 * now overflow x and y auto under max-height: calc(100vh - 280px), with a sticky thead that
 * pins against that container. We keep that wholesale - it is a bounded box inside the page
 * rather than the full-viewport pane that forced these overrides to exist, and a sticky header
 * on a 28-column table is worth having. Our own ::-webkit-scrollbar block is gone with it:
 * upstream now ships its own, in the same shape, so there is nothing left to diverge over.
 *
 * One thing does not survive the move. Upstream pairs height: 10px with width: 0px, hiding the
 * vertical bar it just gave the container. On Windows and Linux a hidden bar still leaves the
 * platform's own; on macOS the container is in overlay mode, so the result is a box that scrolls
 * vertically with nothing on screen ever saying so. Giving it the same 10px as the horizontal
 * bar opts it out of overlay mode, which is the whole reason the horizontal one is styled.
 *
 * Do not add scrollbar-width or scrollbar-color alongside these. Chrome supports the standard
 * properties now, and when either is set it ignores the ::-webkit-scrollbar pseudo-elements
 * completely - measured on this page, the bar went from 10px back to 0 the moment
 * scrollbar-width: thin was present.
 */
.charts-page .erdi-charts .kidb-table-scroll-container::-webkit-scrollbar {
  width: 10px;
}

/* ------------------------------------------------------------------ outlook KPI row
 * Pre-existing, found while testing the resync rather than caused by it: the six Country
 * Outlook KPI cards are laid out with grid-template-columns: repeat(6, 1fr), and a 1fr track's
 * automatic minimum is min-content, not zero. The cards need about 1320px between them and the
 * pane is 1072px at a 1512px viewport, so the row ran 332px past the right edge and - because
 * .visualization-main is overflow: visible here - took the whole page sideways with it.
 *
 * This is the same bug upstream fixed on .app-layout-2col by moving to minmax(0, 1fr); they
 * never see it on this grid because overflow: hidden on their panes clips it out of sight (the
 * sixth card is simply cut off there). Upstream's own answer, a @media (max-width: 1400px) drop
 * to three columns, cannot help: it measures the viewport, and it is the pane that is narrow.
 *
 * auto-fit is container-driven, so it fits as many whole cards as the pane can hold and wraps
 * the rest at any width. minmax(0, 1fr) on six fixed columns also clears the overflow but
 * squeezes each card to 161px and clips the text in all six.
 */
.charts-page .erdi-charts .outlook-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ------------------------------------------------------------------ sticky toolbar offset
 * c709e9e also made .main-toolbar sticky at top: 0. A sticky element pins to its nearest
 * scrollport, and .visualization-main is overflow: visible here so that the page owns the
 * vertical scroll - which makes that scrollport the page itself, and top: 0 the area behind the
 * site's 80px fixed header. Same correction, and same reason, as .control-sidebar below.
 *
 * The sticky thead inside the table needs no such treatment: its scrollport is
 * .kidb-table-scroll-container, which is a real bounded scroller, so its top: 0 is already
 * measured from the right edge.
 */
.charts-page .erdi-charts .main-toolbar { top: 80px; }

.charts-page .erdi-charts .control-sidebar {
  overflow-y: visible;
  position: sticky;
  top: 80px;
  align-self: start;              /* otherwise the grid stretches it and sticky cannot bite */
}

@media screen and (max-width: 991px) {
  body.charts-page { padding-top: 70px; }
  .charts-page .erdi-charts .control-sidebar { top: 70px; }
  .charts-page .erdi-charts .main-toolbar { top: 70px; }
}

/* ------------------------------------------------------------------ charts failure banner
 * Moved here from css/erdi-charts.css, which is generated: the rule was appended by hand and
 * the next regeneration would have dropped it without a word.
 */
.charts-error-banner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 14px 20px;
  background: #fdecea;
  border-bottom: 1px solid #f5c6c2;
  color: #8a1c13;
  font-size: 14px;
  line-height: 1.45;
}

.charts-error-banner strong { font-weight: 700; }

.charts-error-retry {
  margin-left: auto;
  padding: 4px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #8a1c13;
  background: #fff;
  border: 1px solid #e0a9a3;
  border-radius: 4px;
  cursor: pointer;
}

.charts-error-retry:hover { background: #fdf5f4; }