/**
 * Key Financial Levers Calculator - Specific Styles
 * Extends: calculators/shared/css/base.css
 */

/* ─── Local colour tokens ────────────────────── */
#key-financial-levers-calculator {
  --bd-teal:        #03D6A0;   /* FD Works teal — structural chrome */
  --bd-teal-light:  #ffffff;   /* white — no mint tint */
  --bd-red:         #dc2626;
  --bd-red-light:   #fef2f2;
  --bd-amber:       #b5640a;
  --bd-amber-light: #fef4e6;
  --bd-border2:     #d1d5db;
  --bd-blue:        #4a7fd4;   /* keep for AR data bars */
  --bd-green:       #16a34a;
}

/* ══════════════════════════════════════════════
   SETUP CARD — full-width single column
   (card chrome via .wpc-card in base.css)
══════════════════════════════════════════════ */
.bd-setup-card {
  padding: var(--wpc-space-xl);
}

/* Multi-column input grid */
.bd-input-grid {
  display: grid;
  gap: var(--wpc-space-md);
  margin-bottom: var(--wpc-space-md);
}

.bd-input-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.bd-input-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.bd-input-grid.cols-1 { grid-template-columns: 1fr 1fr; } /* NCF alone: half-width */

/* ─── P&L derived metrics strip ─────────────── */
.bd-derived-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: var(--wpc-space-md) var(--wpc-space-lg);
  background: var(--wpc-highlight);
  border: 1px solid var(--wpc-highlight-border);
  border-radius: var(--wpc-radius-md);
  margin-bottom: var(--wpc-space-lg);
}

.bdr-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bdr-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wpc-text-muted);
}

.bdr-val {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wpc-text-primary);
  font-feature-settings: "tnum";
}

.bdr-hint {
  font-size: 0.8125rem;
  color: var(--wpc-text-muted);
  align-self: flex-end;
  padding-bottom: 4px;
}

.bdr-sep {
  font-size: 1rem;
  color: var(--wpc-text-muted);
  align-self: flex-end;
  padding-bottom: 2px;
}

/* ─── WC mini-bar rows ───────────────────────── */
.bd-wc-row {
  padding: var(--wpc-space-sm) 0;
}

.bd-wc-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.bd-wc-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--wpc-text-primary);
}

.bd-wc-val {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wpc-text-primary);
  transition: color var(--wpc-transition-base);
}

.bd-wc-sub {
  font-size: 0.8125rem;
  color: var(--wpc-text-muted);
  margin-top: 3px;
  transition: color var(--wpc-transition-base);
}

.wc-bar-track {
  height: 4px;
  background: var(--wpc-highlight-border);
  border-radius: 2px;
  position: relative;
  overflow: visible;
  margin: 4px 0;
}

.wc-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  max-width: 100%;
}

.wbf-ar  { background: var(--bd-blue); }
.wbf-inv { background: var(--bd-amber); }
.wbf-ap  { background: var(--bd-teal); }

.wc-bench-tick {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 12px;
  background: var(--wpc-text-secondary);
  border-radius: 1px;
  opacity: 0.3;
}

.wc-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--wpc-text-muted);
}

/* ─── Summary strip (bottom of setup card) ──── */
/* Remove section-label dividers inside setup card */
.bd-setup-card .wpc-section-label {
  border-top: none;
}

.bd-summary-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wpc-space-xl);
  padding-top: var(--wpc-space-lg);
  margin-top: var(--wpc-space-lg);
}

.bds-item {
  flex: 1;
}

.bds-label {
  font-size: 0.8125rem;
  color: var(--wpc-text-muted);
  margin-bottom: 2px;
}

.bds-val {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--wpc-text-primary);
  font-feature-settings: "tnum";
}

/* ══════════════════════════════════════════════
   SIMULATOR CARD
══════════════════════════════════════════════ */
.po1-col-heads {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 12px 24px;
  border-bottom: 2px solid var(--bd-teal);
}

.po1-col-heads > div {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wpc-text-secondary);
  text-align: right;
}

.po1-col-heads > div:first-child {
  text-align: left;
  color: transparent;
}

.po1-current {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--wpc-highlight-border);
  align-items: center;
}

.po1-current-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wpc-text-primary);
}

.po1-current-val {
  text-align: right;
  font-size: 0.9375rem;
  color: var(--wpc-text-secondary);
}

.po1-current-val.neg { color: var(--bd-red); }
.po1-current-val.pos { color: var(--bd-teal); }

/* Lever sub-header */
.po1-lever-head {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 14px 24px 10px;
  align-items: center;
  border-bottom: 1px solid var(--wpc-highlight-border);
  background: var(--wpc-highlight);
}

.po1-lever-head-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wpc-text-primary);
}

.po1-lever-head-col {
  text-align: right;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wpc-text-secondary);
  line-height: 1.3;
}

/* Master stepper */
.master-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ms-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--bd-border2);
  background: var(--wpc-surface);
  border-radius: 5px;
  font-size: 1rem;
  color: var(--wpc-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  line-height: 1;
  flex-shrink: 0;
}

.ms-btn:hover { border-color: var(--bd-teal); color: var(--bd-teal); }

.ms-val {
  width: 48px;
  text-align: center;
  padding: 5px 4px;
  border: 1px solid var(--bd-border2);
  border-radius: 5px;
  font-size: 0.8125rem;
  font-family: var(--wpc-font-sans);
  color: var(--wpc-text-primary);
  background: var(--wpc-surface);
  outline: none;
  -moz-appearance: textfield;
}

.ms-val::-webkit-outer-spin-button,
.ms-val::-webkit-inner-spin-button { -webkit-appearance: none; }
.ms-val:focus { border-color: var(--bd-teal); }

.ms-reset {
  padding: 5px 12px;
  border: 1px solid var(--bd-border2);
  background: var(--wpc-surface);
  border-radius: 5px;
  font-size: 0.75rem;
  font-family: var(--wpc-font-sans);
  color: var(--wpc-text-secondary);
  cursor: pointer;
  transition: all 0.12s;
}

.ms-reset:hover { border-color: var(--bd-red); color: var(--bd-red); }

/* Lever rows */
.po1-lever-row {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 11px 24px;
  border-bottom: 1px solid var(--wpc-border);
  align-items: center;
  transition: background var(--wpc-transition-fast);
}

.po1-lever-row:hover     { background: var(--wpc-surface-warm); }
.po1-lever-row.active    { background: var(--bd-teal-light); }
.po1-lever-row:last-child { border-bottom: none; }

.po1-lever-name { font-size: 0.9375rem; color: var(--wpc-text-secondary); }

.po1-lever-row.active .po1-lever-name {
  color: var(--wpc-text-primary);
  font-weight: 500;
}

.po1-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
}

.ps-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--bd-border2);
  background: var(--wpc-surface);
  border-radius: 5px;
  font-size: 1rem;
  color: var(--wpc-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  line-height: 1;
  flex-shrink: 0;
}

.ps-btn:hover {
  border-color: var(--wpc-text-secondary);
  color: var(--wpc-text-primary);
}

.ps-val {
  width: 48px;
  text-align: center;
  padding: 5px 4px;
  border: 1px solid var(--bd-border2);
  border-radius: 5px;
  font-size: 0.8125rem;
  font-family: var(--wpc-font-sans);
  color: var(--wpc-text-primary);
  background: var(--wpc-surface);
  outline: none;
  -moz-appearance: textfield;
}

.ps-val::-webkit-outer-spin-button,
.ps-val::-webkit-inner-spin-button { -webkit-appearance: none; }
.ps-val:focus { border-color: var(--bd-teal); }

.ps-unit { font-size: 0.8125rem; color: var(--wpc-text-muted); min-width: 28px; }

.po1-impact-val {
  text-align: right;
  font-size: 0.9375rem;
  color: var(--wpc-text-secondary);
  transition: color var(--wpc-transition-base);
  font-feature-settings: "tnum";
}

.po1-impact-val.pos { color: var(--bd-teal); font-weight: 500; }
.po1-impact-val.neg { color: var(--bd-red);  font-weight: 500; }
.po1-impact-val.na  { color: var(--wpc-text-muted); font-size: 0.8125rem; }

/* Totals row — dark navy, matching results panel in all other calculators */
.po1-totals {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 14px 24px;
  background: var(--wpc-results-bg);            /* #112337 */
  border-top: 2px solid var(--wpc-accent);      /* blue rule separates from white rows */
  align-items: center;
}

.po1-totals-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--wpc-results-muted);              /* rgba(255,255,255,0.65) */
}

.po1-totals-val {
  text-align: right;
  white-space: nowrap;
  padding-left: 20px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wpc-results-text);               /* #ffffff */
  font-feature-settings: "tnum";
}

/* Arrows scoped to totals row (don't affect lever-row arrows) */
.po1-totals .arrow-up   { color: var(--wpc-results-accent); font-size: 1rem; }
.po1-totals .arrow-down { color: #f87171;                   font-size: 1rem; }

/* Adjusted position — dark navy continuation */
.po1-adjusted {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 14px 24px;
  background: var(--wpc-results-bg);
  border-top: 1px solid var(--wpc-results-divider);   /* rgba(255,255,255,0.12) */
  align-items: center;
}

.po1-adjusted-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.1;
}

.adj-eq {
  color: #6C7784;
}


.po1-adjusted .po1-adjusted-val {
  text-align: right;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  font-feature-settings: "tnum";
  color: var(--wpc-results-text) !important;    /* overrides inline style="color:..." */
}

/* Hero: adjusted operating profit — light blue serif on dark navy */
#adj-op {
  color: var(--wpc-results-accent) !important;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Zone strip */
.zone-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 0 0 var(--wpc-radius-lg) var(--wpc-radius-lg);
  transition: all var(--wpc-transition-base);
}

.zone-strip.green { background: #dcfce7; color: #16a34a; }
.zone-strip.amber { background: var(--bd-amber-light); color: var(--bd-amber); }
.zone-strip.red   { background: var(--bd-red-light);   color: var(--bd-red); }

/* Section divider inside card */
.po1-section-divider {
  display: grid;
  grid-template-columns: 1fr 180px 160px 160px;
  padding: 8px 24px 6px;
  background: #112337;
  border-bottom: none;
}

.psd-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════
   P&L BEFORE / AFTER CARD
══════════════════════════════════════════════ */
.pl-card-header {
  display: grid;
  grid-template-columns: 1fr 140px 140px 120px;
  padding: 12px 24px;
  background: var(--wpc-surface-warm);
  border-bottom: 2px solid var(--bd-teal);
}

.pl-card-header > div {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wpc-text-secondary);
  text-align: right;
}

.pl-card-header > div:first-child { text-align: left; color: var(--wpc-text-primary); }

.pl-table { padding: 0 24px; }

.pl-row {
  display: grid;
  grid-template-columns: 1fr 140px 140px 120px;
  padding: 9px 0;
  border-bottom: 1px solid var(--wpc-border-light);
  align-items: center;
}

.pl-row:last-child { border-bottom: none; }

.pl-row.pl-subtotal {
  font-weight: 600;
  border-top: 1px solid var(--wpc-border);
  border-bottom: 1px solid var(--wpc-border-light);
  padding-top: 11px;
}

.pl-row.pl-total {
  font-weight: 700;
  font-size: 1.0625rem;
  border-top: 2px solid var(--wpc-border);
  border-bottom: none;
  padding: 12px 0;
  background: var(--wpc-highlight);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

.pl-row.pl-pct { padding-top: 4px; padding-bottom: 10px; }

.pl-col-label { font-size: 0.9375rem; color: var(--wpc-text-secondary); }
.pl-row.pl-subtotal .pl-col-label,
.pl-row.pl-total .pl-col-label { color: var(--wpc-text-primary); }

.pl-col-num {
  text-align: right;
  font-size: 0.9375rem;
  color: var(--wpc-text-primary);
  font-feature-settings: "tnum";
}

.pl-row.pl-pct .pl-col-num { font-size: 0.875rem; color: var(--wpc-text-muted); }

.pl-col-chg {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 500;
}

.pl-col-chg.pos { color: var(--bd-teal); }
.pl-col-chg.neg { color: var(--bd-red); }
.pl-col-chg.nil { color: var(--wpc-text-muted); }

/* ══════════════════════════════════════════════
   LABOUR EFFICIENCY RATIO CARD
══════════════════════════════════════════════ */
.ler-header {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--wpc-border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ler-title    { font-size: 1rem; font-weight: 600; color: var(--wpc-text-primary); }
.ler-subtitle { font-size: 0.8125rem; color: var(--wpc-text-muted); }

.ler-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 24px;
}

.ler-col {
  padding: 20px 0;
  text-align: center;
}

.ler-col:not(:last-child) {
  border-right: 1px solid var(--wpc-border-light);
}

.ler-col-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wpc-text-muted);
  margin-bottom: 8px;
}

.ler-col-val {
  font-size: 2rem;
  font-weight: 700;
  color: var(--wpc-text-primary);
  font-feature-settings: "tnum";
  line-height: 1;
}

.ler-col-val.pos { color: var(--bd-teal); }
.ler-col-val.neg { color: var(--bd-red); }

/* ══════════════════════════════════════════════
   WORKING CAPITAL TIMELINE — DUAL TRACK
══════════════════════════════════════════════ */
.wct-header {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--wpc-border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.wct-title   { font-size: 1rem; font-weight: 600; color: var(--wpc-text-primary); }
.wct-subtitle { font-size: 0.8125rem; color: var(--wpc-text-muted); }

.wct-body { padding: 20px 24px 0; }

.wct-track-area {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wct-timeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.wct-row-label {
  width: 56px;
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--wpc-text-muted);
  padding-top: 2px;
}

.wct-svg-sm {
  flex: 1;
  min-width: 0;
  height: 110px;
  display: block;
}

/* ─── Breakdown table below timelines ───────── */
.wct-breakdown {
  border-top: 1px solid var(--wpc-border);
  margin-top: var(--wpc-space-md);
}

.wct-breakdown-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  padding: 7px 0;
  border-bottom: 1px solid var(--wpc-border-light);
  align-items: center;
}

.wct-breakdown-row:last-child { border-bottom: none; }

.wct-breakdown-row.wct-breakdown-header {
  border-bottom: 1px solid var(--wpc-border);
}

.wct-breakdown-header .wct-breakdown-val {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wpc-text-muted);
}

.wct-breakdown-label {
  font-size: 0.875rem;
  color: var(--wpc-text-secondary);
}

.wct-breakdown-val {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wpc-text-primary);
  font-feature-settings: "tnum";
}

/* WC Days callout box — inline with timeline row */
.wct-ccc-box {
  flex-shrink: 0;
  width: 96px;
  background: var(--bd-teal);
  color: #fff;
  border-radius: var(--wpc-radius-md);
  padding: 8px 10px;
  text-align: center;
}

/* Cash impact divider between rows */
.wct-cash-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--wpc-border-light);
  border-bottom: 1px dashed var(--wpc-border-light);
}

.wct-ccc-num {
  font-family: var(--wpc-font-sans);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
  font-feature-settings: "tnum";
}

.wct-ccc-unit {
  font-size: 0.625rem;
  opacity: 0.85;
  margin-top: 2px;
  font-weight: 500;
}

.wct-delta-arrow {
  color: var(--wpc-text-muted);
  font-size: 0.75rem;
  line-height: 1;
}

.wct-cash-impact {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "tnum";
}

.wct-cash-impact.pos { color: var(--bd-teal); }
.wct-cash-impact.neg { color: var(--bd-red); }

.wct-cash-label {
  font-size: 0.6875rem;
  color: var(--wpc-text-muted);
}


/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bd-input-grid.cols-3 {
    grid-template-columns: 1fr 1fr;
  }

  .bd-input-grid.cols-2,
  .bd-input-grid.cols-1 {
    grid-template-columns: 1fr;
  }

  .bd-derived-row {
    gap: 12px;
  }

  .bd-summary-strip {
    flex-wrap: wrap;
    gap: var(--wpc-space-md);
  }

  .po1-col-heads,
  .po1-current,
  .po1-lever-head,
  .po1-lever-row,
  .po1-totals,
  .po1-adjusted,
  .po1-section-divider {
    grid-template-columns: 1fr auto auto;
  }

  .wct-ccc-box    { width: 80px; }
  .wct-ccc-num    { font-size: 1.375rem; }

  .pl-card-header,
  .pl-row { grid-template-columns: 1fr 100px 100px 80px; }

  .pl-row.pl-total { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .pl-table { padding: 0 16px; }
}

@media (max-width: 480px) {
  .bd-input-grid.cols-3,
  .bd-input-grid.cols-2,
  .bd-input-grid.cols-1 {
    grid-template-columns: 1fr;
  }

  .bd-derived-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .bdr-sep { display: none; }
}