/* Forecast - app-specific styles on top of kynship-ui */

/* Accent override: off-white bone. Status colors (negatives, warnings) stay
   red/amber - only the UI accent changes. */
:root {
  --grn: #EFEAE0;
  --grn-deep: #D8D0C0;
  --accent-ink: #14161b;   /* text that sits ON the accent */
  --grid-line: #262a33;
}
::selection { background: rgba(239, 234, 224, .22); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(239, 234, 224, .12); }
#progress { box-shadow: 0 0 8px rgba(239, 234, 224, .45); }

/* kynship-ui's accent button is a green gradient with dark ink; off-white
   needs the same dark ink but a solid fill (a gradient→solid hover flashes). */
.btn-accent {
  background: var(--grn);
  color: var(--accent-ink);
  box-shadow: 0 2px 12px rgba(239, 234, 224, .18);
}
.btn-accent:hover { filter: none; background: #fff; color: var(--accent-ink); }

/* ── Spreadsheet grid ───────────────────────────────────────────────────
   Months run across as columns and metrics down as rows, matching the sheet
   these replace. The wrapper scrolls horizontally on its own so the page body
   never does, and the metric column stays pinned while you scan across. */
.sheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.sheet {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-2);
  color: var(--fg-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet tbody th,
.sheet thead th.sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--fg-dim);
  background: var(--panel-2);
  padding: 7px 14px;
  border-right: 1px solid var(--line);
  min-width: 190px;
}
.sheet thead th.sticky-col { z-index: 4; color: var(--fg-faint); font-size: 11px; }
/* The 190px label column suits metric names ("Customer File (start)"); a table
   whose first column is just a month needs far less. */
.sheet--month-labels tbody th,
.sheet--month-labels thead th.sticky-col { min-width: 104px; }
.sheet tbody td {
  padding: 7px 12px;
  text-align: right;
  border-top: 1px solid var(--grid-line);
  min-width: 104px;
}
.sheet tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.sheet tbody tr:hover th.sticky-col { background: var(--panel-3); }
.sheet .r { text-align: right; }
.sheet .neg { color: #f87171; }

/* Totals-style rows get a heavier rule and brighter ink, like a sheet's
   subtotal bands. */
.sheet tr.row-emphasis td,
.sheet tr.row-emphasis th {
  border-top: 1px solid var(--line);
  color: var(--fg);
  font-weight: 600;
  background: rgba(239, 234, 224, .035);
}

/* Cell that just changed value after a recompute - brief accent wash so an
   edit's downstream effect is visible rather than silent. */
@keyframes cell-flash {
  from { background: rgba(239, 234, 224, .16); }
  to   { background: transparent; }
}
.sheet td.flash { animation: cell-flash .5s ease-out; }

/* ── Editable cells ─────────────────────────────────────────────────── */
.cell-input {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  color: var(--fg);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cell-input:focus { outline: none; border-color: var(--grn); }
/* Inside the grid the input fills the cell so the row still reads as a row. */
.cell-in-grid {
  width: 100%;
  min-width: 122px;   /* fits a 6-figure plan value without clipping */
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 7px 12px;
}
.cell-in-grid:hover { background: rgba(255, 255, 255, .04); }
.cell-in-grid:focus { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--grn); }
/* Strip the spinners - they steal width in a dense grid. */
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-input[type=number] { -moz-appearance: textfield; }

.cell-input.saving { opacity: .55; }
.cell-input.saved { box-shadow: inset 0 0 0 2px var(--grn); }
.cell-input.error { box-shadow: inset 0 0 0 2px #f87171; }

/* ── +/- steppers ───────────────────────────────────────────────────────
   Nudging an assumption is the common move; typing an exact figure is the
   rare one. Buttons stay quiet until the card is hovered so a screen of ten
   inputs does not read as twenty buttons. */
.stepper {
  flex: 0 0 auto;
  width: 22px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--fg-faint);
  font-size: 13px; line-height: 1; font-weight: 600;
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
  user-select: none;
}
.rounded-xl:hover > .flex > .stepper { opacity: 1; }
.stepper:hover { color: var(--fg); border-color: var(--grn); }
.stepper:active { transform: scale(.94); }
.stepper:focus-visible { opacity: 1; outline: 1px solid var(--grn); }

/* ── Hover explanations ─────────────────────────────────────────────────
   No visible "?" marker: the term itself is the target. `cursor: help` plus a
   faint underline that only appears on hover keeps the grid clean while still
   hinting that there is something to read. */
.tip { cursor: help; }
.tip:hover { text-decoration: underline dotted var(--fg-faint); text-underline-offset: 3px; }

/* The bubble is appended to <body>, not the cell — a tooltip inside
   .sheet-wrap would be clipped by its horizontal scroll. */
#tooltip {
  position: fixed;
  z-index: 200;
  max-width: 310px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
#tooltip.visible { opacity: 1; transform: translateY(0); }

/* ── Section tabs ───────────────────────────────────────────────────────
   Every part of a forecast workbook is a tab here. There are enough of them to
   overflow a narrow window, so the bar scrolls rather than wrapping into a
   second row that pushes the grid down the page. */
.tabbar {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar-item {
  flex: 0 0 auto;
  padding: 8px 13px;
  font-size: 12.5px;
  color: var(--fg-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.tabbar-item:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.tabbar-item.active {
  color: var(--fg);
  border-bottom-color: var(--grn);
  font-weight: 600;
}

/* ── Reload takeover ────────────────────────────────────────────────────
   A modal, not an inline spinner: while the re-ingest runs the figures
   underneath are being rewritten, so editing them would be misleading. */
.overlay {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(9, 11, 14, .78);
  backdrop-filter: blur(3px);
  animation: overlay-in .16s ease-out;
}
@keyframes overlay-in { from { opacity: 0 } to { opacity: 1 } }
.overlay[hidden] { display: none; }
.overlay-card {
  width: 100%; max-width: 520px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.progress-track {
  height: 6px; border-radius: 999px;
  background: var(--panel-3);
  overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: var(--grn);
  transition: width .35s ease;
}
/* Steps that report no internal progress get a moving stripe rather than a bar
   frozen at one value, so "slow" never reads as "stuck". */
.progress-fill.indeterminate {
  background-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,0) 100%);
  background-size: 200% 100%;
  animation: stripe 1.1s linear infinite;
}
@keyframes stripe { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.reload-steps { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.reload-steps li {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0;
  color: var(--fg-faint);
  transition: color .15s ease;
}
.reload-steps li .dot {
  flex: 0 0 auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
}
.reload-steps li.active { color: var(--fg); }
.reload-steps li.active .dot { border-color: var(--grn); }
.reload-steps li.done { color: var(--fg-dim); }
.reload-steps li.done .dot {
  border-color: var(--grn); background: var(--grn); color: var(--accent-ink);
}
.reload-steps li.failed .dot { border-color: #f87171; color: #f87171; }
.reload-steps li.failed { color: #f87171; }