/* Canvas forecast table grid and inputs. */

.epi-forecast-table td.epi-table-manual-override {
  background: var(--ps-panel) !important;
  box-shadow: inset 0 0 0 2px #178b96;
}

.epi-forecast-table td.epi-table-cagr-preview {
  background: var(--ps-row-preview) !important;
  box-shadow: inset 0 0 0 1px #6baed6;
}

.epi-dashboard-waterfall-shell {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 230px;
  padding: 24px;
  border: 1px dashed #b9ccd0;
  border-radius: 8px;
  background: #f8fbfb;
  color: var(--ps-muted);
  text-align: center;
}
.epi-dashboard-waterfall-shell.preview {
  min-height: 260px;
}
.epi-dashboard-waterfall-shell p {
  margin: 0;
  font-size: 12px;
}
.epi-dashboard-waterfall-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 116px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ps-line-strong);
}
.epi-dashboard-waterfall-bars i {
  display: block;
  width: 34px;
  background: #355574;
}
.epi-dashboard-waterfall-bars i:nth-child(1),
.epi-dashboard-waterfall-bars i:nth-child(5) {
  height: 86px;
}
.epi-dashboard-waterfall-bars i:nth-child(2) {
  height: 43px;
  background: var(--ps-green);
}
.epi-dashboard-waterfall-bars i:nth-child(3) {
  height: 64px;
  background: var(--ps-green);
}
.epi-dashboard-waterfall-bars i:nth-child(4) {
  height: 30px;
  background: var(--ps-red);
}

/* Period cells need a containing block for the fill handle. The Driver column
   is excluded: `position: sticky` already establishes one, and this rule's type
   selector outranks the .epi-sticky-col rule that sets it, which would drop the
   column out of its sticky track the moment it joined the grid. */
.epi-forecast-table td[data-epi-cell]:not(.epi-sticky-col) {
  position: relative;
}
/* Each edge of the selection rectangle is carried by its own custom property.
   Custom properties cascade independently, so a cell can pick up any
   combination of edges; a plain box-shadow per class would overwrite instead
   of compose. Inset shadows are used rather than borders so the perimeter
   never changes the table's layout. */
.epi-forecast-table td.epi-table-range-selected {
  --epi-range-top: inset 0 0 transparent;
  --epi-range-bottom: inset 0 0 transparent;
  --epi-range-left: inset 0 0 transparent;
  --epi-range-right: inset 0 0 transparent;
  --epi-range-active: inset 0 0 transparent;
  background: rgba(23, 126, 137, 0.09) !important;
  box-shadow:
    var(--epi-range-top),
    var(--epi-range-bottom),
    var(--epi-range-left),
    var(--epi-range-right),
    var(--epi-range-active) !important;
}
.epi-forecast-table td.epi-table-range-edge-top {
  --epi-range-top: inset 0 1px var(--ps-teal-text);
}
.epi-forecast-table td.epi-table-range-edge-bottom {
  --epi-range-bottom: inset 0 -1px var(--ps-teal-text);
}
.epi-forecast-table td.epi-table-range-edge-left {
  --epi-range-left: inset 1px 0 var(--ps-teal-text);
}
.epi-forecast-table td.epi-table-range-edge-right {
  --epi-range-right: inset -1px 0 var(--ps-teal-text);
}
.epi-forecast-table td.epi-table-range-active {
  --epi-range-active: inset 0 0 0 2px #0f6f7b;
}
/* Rows that cannot take a value at all — Stateful metrics and Split Total —
   read as passed over. Calculated rows are not marked this way: a paste can pin
   them, so they stay ordinary members of the selection. */
.epi-forecast-table td.epi-table-range-excluded {
  background: repeating-linear-gradient(
    -45deg,
    rgba(23, 126, 137, 0.05) 0 6px,
    rgba(23, 126, 137, 0.11) 6px 12px
  ) !important;
  color: #7c8b91;
}

/* Sits on the corner of the selection like a spreadsheet's fill affordance:
   click it to open Fill Series, or drag it to extend the run first. */
.epi-table-fill-handle {
  position: absolute;
  right: -9px;
  bottom: -9px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ps-panel);
  border-radius: 50%;
  background: #0f6f7b;
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  cursor: crosshair !important;
  pointer-events: auto;
}
.epi-table-fill-handle-ready {
  cursor: pointer !important;
}
.epi-table-fill-handle:hover,
.epi-table-fill-handle:focus-visible {
  background: #075965;
  outline: 2px solid #8bd1d8;
  outline-offset: 1px;
}
.epi-table-range-dragging,
.epi-table-range-dragging .epi-forecast-table,
.epi-table-range-dragging .epi-forecast-table * {
  user-select: none;
}
.epi-table-range-dragging .epi-table-fill-handle { cursor: crosshair !important; }
.epi-forecast-table td.editable input { cursor: text; }

.epi-forecast-table td.epi-table-manual-override > input,
.epi-forecast-table td.epi-table-manual-override .epi-percent-input input {
  border-color: #178b96;
  background: var(--ps-input);
  box-shadow: 0 0 0 2px rgba(23, 139, 150, 0.13);
}

.epi-forecast-table td.epi-table-cagr-preview > input,
.epi-forecast-table td.epi-table-cagr-preview .epi-percent-input input {
  border-color: #6baed6;
  background: #f4fbff;
  box-shadow: 0 0 0 1px rgba(107, 174, 214, 0.18);
}

.epi-forecast-table tr.calc td {
  background: var(--ps-row-calc);
  color: var(--ps-charcoal);
  font-weight: 700;
}

.epi-forecast-table tr.epi-table-stateful-generated-row td {
  font-weight: 400;
}

.epi-forecast-table tr.epi-table-stateful-generated-row .epi-table-method-badge.persistence {
  font-weight: 600;
}

.epi-forecast-table tr.output td {
  background: #fff8f3;
  color: var(--ps-orange-dark);
  font-weight: 800;
}

.epi-forecast-table tr.base-value td {
  background: var(--ps-row-hover);
}

.epi-forecast-table tr.period-growth td {
  background: var(--ps-row-growth);
}

.epi-forecast-table tr.epi-table-category-row td {
  background: var(--ps-teal-soft);
  color: var(--ps-teal-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.epi-table-category-row .epi-sticky-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.epi-table-category-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.epi-table-category-row small {
  margin: 0;
  color: var(--ps-muted);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.epi-table-category-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(23, 126, 137, 0.1);
}

.epi-forecast-table tr.epi-table-section td {
  background: var(--ps-row-section);
  color: var(--ps-purple);
  font-weight: 800;
  text-align: left;
}

.epi-forecast-table tr.epi-table-persistence-stage-row td {
  padding: 7px 12px;
  background: var(--ps-row-growth);
  color: #315b9a;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}
.epi-table-persistence-stage-row .epi-sticky-col { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.epi-table-persistence-stage-row small, .epi-table-section small { color: var(--ps-muted); font-size: 9px; font-weight: 700; }

.epi-forecast-table tr.epi-table-node-row {
  cursor: grab;
}

.epi-forecast-table tr.epi-table-node-row:active {
  cursor: grabbing;
}

.epi-forecast-table tr.epi-table-node-row:hover td {
  box-shadow: inset 0 0 0 999px rgba(23, 126, 137, 0.035);
}

.epi-table-metric-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.epi-table-metric-name svg:first-child {
  color: var(--ps-muted);
  flex: 0 0 auto;
}

.epi-table-driver-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.epi-table-fill-model-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(23, 126, 137, 0.075);
  color: #537083;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.epi-table-fill-model-badge:hover,
.epi-table-fill-model-badge:focus-visible {
  border-color: rgba(23, 126, 137, 0.18);
  background: rgba(23, 126, 137, 0.1);
  color: var(--ps-teal-dark);
  outline: none;
}

.epi-table-method-badge {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 1px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.epi-table-method-badge.split {
  background: rgba(124, 58, 237, 0.08);
  color: #7155b7;
}

.epi-table-method-badge.transition {
  background: rgba(124, 58, 237, 0.08);
  color: #7155b7;
  font-weight: 600;
}

.epi-table-method-badge.persistence {
  background: rgba(23, 126, 137, 0.09);
  color: var(--ps-teal-text);
  font-weight: 600;
}

.epi-table-method-badge.calculated {
  background: #eef2f6;
  color: #607084;
}

.epi-table-method-badge.split:hover,
.epi-table-method-badge.split:focus-visible {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.13);
  color: #6243ad;
  outline: none;
}

.epi-table-method-badge.transition:hover,
.epi-table-method-badge.transition:focus-visible {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.13);
  color: #6243ad;
  outline: none;
}

.epi-table-method-badge.persistence:hover,
.epi-table-method-badge.persistence:focus-visible {
  border-color: rgba(23, 126, 137, 0.22);
  background: rgba(23, 126, 137, 0.14);
  color: #0f6f7b;
  outline: none;
}

.epi-table-method-badge.calculated:hover,
.epi-table-method-badge.calculated:focus-visible {
  border-color: #ced8e2;
  background: #e5ebf0;
  color: #475467;
  outline: none;
}

.epi-table-segment-row .epi-sticky-col {
  padding-left: 26px;
}

.epi-forecast-table tr.epi-split-total-row td {
  background: var(--ps-raised);
  color: var(--ps-charcoal);
  font-weight: 800;
}

.epi-forecast-table td.split-invalid,
.epi-forecast-table td.split-invalid input {
  background: rgba(220, 38, 38, 0.07);
  color: var(--ps-red);
}

.epi-forecast-table td.split-invalid input {
  border-color: rgba(220, 38, 38, 0.35);
}

.epi-forecast-table td.split-ok {
  color: var(--ps-green);
}

.epi-forecast-table td.editable {
  padding: 4px;
  background: var(--ps-panel);
}

.epi-percent-input {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}
.epi-percent-input input[readonly] {
  color: var(--ps-muted);
  background: var(--ps-raised);
}

.epi-forecast-table td.epi-single-value-cell {
  background: var(--ps-row-hover);
}

.epi-forecast-table td.epi-disabled-cell {
  background: var(--ps-raised);
  color: transparent;
}

.epi-forecast-table input {
  min-height: 28px;
  padding: 4px 7px;
  text-align: right;
  font-size: 11px;
}

.epi-percent-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.epi-percent-input > span {
  color: var(--ps-muted);
  font-size: 10px;
  font-weight: 800;
}

.epi-forecast-table small {
  display: block;
  margin-top: 2px;
  color: var(--ps-muted);
  font-size: 9px;
}

@media (max-width: 1180px) {
  .epi-workspace {
    grid-template-columns: 240px minmax(420px, 1fr);
  }

  .epi-workspace.library-collapsed,
  .epi-workspace.inspector-collapsed,
  .epi-workspace.library-collapsed.inspector-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .epi-inspector {
    grid-column: 1 / -1;
  }

  .epi-library.collapsed,
  .epi-inspector.collapsed {
    display: none;
  }
}

@media (max-width: 820px) {
  .epi-builder-head,
  .epi-builder-controls,
  .epi-table-toolbar {
    align-items: flex-start;
  }

  .epi-builder-head,
  .epi-table-toolbar {
    flex-direction: column;
  }

  .epi-table-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .epi-cagr-propagation {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    margin: 8px 12px 10px;
  }
  .epi-cagr-propagation-legend,
  .epi-cagr-propagation-slider,
  .epi-cagr-propagation-actions {
    grid-column: 1;
    grid-row: auto;
  }
  .epi-cagr-propagation-slider {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .epi-cagr-propagation-actions {
    justify-content: flex-start;
  }

  .epi-builder-controls {
    grid-template-columns: 1fr;
  }

  .epi-head-actions {
    flex-wrap: wrap;
  }

  .epi-workspace {
    grid-template-columns: 1fr;
  }

  .epi-library,
  .epi-inspector {
    max-height: none;
  }

  .epi-canvas-tools {
    left: 8px;
    top: 8px;
    margin: 8px 0 0 8px;
  }

  .epi-minimap {
    display: none;
  }
}


/* Driver column inside a selection. It is copy-only, so it always wears the
   excluded hatch, but two things have to be restored that the generic range
   rules drop: the sticky column must stay opaque or the period cells scroll
   through it, and its label must stay at full contrast to remain readable.
   The excluded rule follows the selected one deliberately — equal specificity,
   so source order is what decides which background wins. */
.epi-forecast-table td.epi-sticky-col.epi-table-range-selected {
  background:
    linear-gradient(rgba(23, 126, 137, 0.09), rgba(23, 126, 137, 0.09)),
    var(--ps-panel) !important;
  box-shadow:
    var(--epi-range-top),
    var(--epi-range-bottom),
    var(--epi-range-left),
    var(--epi-range-right),
    var(--epi-range-active),
    1px 0 0 var(--ps-line) !important;
}

.epi-forecast-table td.epi-sticky-col.epi-table-range-excluded {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(23, 126, 137, 0.05) 0 6px,
      rgba(23, 126, 137, 0.11) 6px 12px
    ),
    var(--ps-panel) !important;
  color: inherit;
}
