/* cost.css ─ Cost-curve tab: mine selection, filter chips, status, table, KPI strip, ref-line controls, decomposition popover, hover linkage. */

/* Mine selection panel — grouped by region, with collapse/expand controls */
#cost-mine-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cost-mine-region {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #232636;
}
.cost-mine-region:last-child { border-bottom: none; }
.cost-mine-region-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #b8bdd0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cost-mine-region-name {
  color: #c9a84c;
}
.cost-mine-region-count {
  font-size: 10px;
  font-weight: 400;
  color: #6f7588;
  margin-right: auto;          /* push the all/none buttons to the right */
}
.cost-mine-region-toggle {
  -webkit-appearance: none;
  appearance: none;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #2e3145;
  border-radius: 3px;
  color: #9aa0b4;
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cost-mine-region-toggle:hover {
  border-color: #c9a84c;
  color: #c9a84c;
}
.cost-mine-region-mines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-left: 4px;
}
.cost-mine-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #9aa0b4;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.cost-mine-chip input[type="checkbox"] { margin: 0; }
.cost-mine-chip:hover { color: #fff; }
.cost-mine-filter-actions {
  display: flex;
  gap: 4px;
}

/* Region / Company / Basis filter buttons on the cost tab — flat chip style
   (no border) so the user-agent outline doesn't bleed through. The cost-basis
   buttons (6E / 4E / Pt / tonne) get the same look so the whole tab matches. */
.cost-region-btn,
.cost-company-btn,
.cost-basis-btn,
.cost-curr-btn,
.cost-view-btn,
.cost-basket-btn {
  -webkit-appearance: none;
  appearance: none;
  padding: 3px 9px;
  background: #1a1d27;
  border: none;
  border-radius: 4px;
  color: #9aa0b4;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  transition: background 0.12s, color 0.12s;
}
.cost-region-btn:hover,
.cost-company-btn:hover,
.cost-basis-btn:hover,
.cost-curr-btn:hover,
.cost-view-btn:hover {
  background: #242838;
  color: #fff;
}
.cost-region-btn.active,
.cost-company-btn.active,
.cost-basis-btn.active,
.cost-curr-btn.active,
.cost-view-btn.active {
  background: rgba(201, 168, 76, 0.16);
  color: #c9a84c;
}

/* Per-mine filter list — compact wrap so 19 mines fit in ~2 rows */
#cost-mine-filter {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}
#cost-mine-filter .fmt-check-label {
  font-size: 11px;
  white-space: nowrap;
}

/* Tighten the gap between the Animate toggle and the action toolbar that
   follows. Default range-bar margin-bottom (8px) was creating dead space. */
#cost-anim-bar { margin-top: 0; margin-bottom: 4px; }

/* Tighten vertical spacing between control rows on the cost tab so the chart
   appears higher on the page. Default range-bar gap is 8px × 6 rows = 48px
   of dead space. */
#tab-cost .range-bar { margin-bottom: 4px; }
#tab-cost .toolbar   { margin-top: 2px; margin-bottom: 6px; }

/* Collapsible filter panel: holds Basket / Components / Region / Company rows.
   Default collapsed so the chart dominates the viewport. The toggle button
   shows a chevron + the count of active (non-default) filters. */
.cost-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #2a2e3e;
  color: #b8bdd0;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer;
  margin: 6px 0 4px;
  transition: background 0.12s, color 0.12s;
}
.cost-filters-toggle:hover { background: #1a1d28; color: #d8dceb; }
.cost-filters-chevron      { display: inline-block; transition: transform 0.15s; font-size: 10px; }
.cost-filters-toggle[aria-expanded="true"] .cost-filters-chevron { transform: rotate(90deg); }
.cost-filters-count {
  background: #c9a84c;
  color: #1a1d28;
  font-weight: 600;
  font-size: 10.5px;
  border-radius: 9px;
  padding: 1px 7px;
  margin-left: 2px;
}
.cost-filters-count:empty { display: none; }
.cost-filters-panel.cost-filters-collapsed { display: none; }
/* + SIB checkbox is only meaningful in TCC view; hide otherwise so the row
   stays uncluttered. JS toggles .cost-tcc-sib-hidden on view changes. */
.cost-tcc-sib-toggle.cost-tcc-sib-hidden { display: none; }

/* Mines-panel collapsible toggle. Clicking the title row hides the entire
   per-mine checkbox list — useful when the user just wants the chart and
   doesn't need to see ~340px of mine names below it. The All / None buttons
   stay visible alongside the toggle so chart-side filtering still works. */
.cost-mines-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #c9a84c;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cost-mines-toggle .bb-title { font-size: inherit; font-weight: inherit; color: inherit; }
.cost-mines-chevron { display: inline-block; font-size: 10px; transition: transform 0.15s; }
.cost-mines-toggle[aria-expanded="false"] .cost-mines-chevron { transform: rotate(-90deg); }
.cost-mines-body.cost-mines-collapsed { display: none; }

/* Per-mine star button — toggles state.costHighlightedMines so the bar gets a
   gold outline + always-on label on the cost curve. Pairs with the existing
   include/exclude checkbox; clicking the star does NOT toggle the checkbox. */
.cost-mine-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
}
.cost-mine-highlight-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #555;
  font-size: 11px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.cost-mine-highlight-btn:hover { color: #c9a84c; background: #1a1d28; }
.cost-mine-highlight-btn.active {
  color: #ffd700;
  border-color: #ffd700;
  background: rgba(255, 215, 0, 0.08);
}
.cost-mine-highlight-btn.active:hover { background: rgba(255, 215, 0, 0.16); }

/* Cost-curve status: regular block (NOT a floating overlay) so it doesn't hide the chart */
#cost-status {
  position: static;
  margin-top: 8px;
  white-space: normal;
  word-break: normal;
}

/* Cost-curve chart wrapper: auto-size to the SVG (the shared `.chart-wrap`
   class has a fixed 200px height which would clip our 380px cost-curve SVG
   and push the status div into the middle of the visible chart). */
#cost-chart-wrap {
  height: auto;
  min-height: 380px;
  display: block;
}

/* Cost-curve table: keep mine names on one line and label units row distinctly */
.cost-table .mine-name {
  white-space: nowrap;
  cursor: pointer;
}
.cost-table .mine-name:hover {
  text-decoration: underline;
  color: #c9a84c;
}
.cost-table .mine-name.mine-highlighted {
  color: #ffd700;
  font-weight: 600;
}
.cost-table .cost-units-row th {
  font-size: 10px;
  font-weight: 400;
  color: #8a8fa3;
  padding-top: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2d3e;
}
.cost-table th { white-space: nowrap; }
.cost-table td { text-align: right; font-variant-numeric: tabular-nums; }
.cost-table td.mine-name { text-align: left; }

/* Sortable column headers — only the labels row, not the units row. The
   active column gets a brighter colour so the ▲/▼ arrow reads at a glance. */
.cost-table thead th[data-cost-sort] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.cost-table thead th[data-cost-sort]:hover {
  color: #e6e8f0;
}
.cost-table thead th.cost-sort-active {
  color: #c9a84c;
}
.cost-table td.trend-spark { padding: 2px 6px; }

/* Mine-table header bar — title on the left, search + count on the right. */
.cost-table-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cost-table-header h3 { margin: 0; }
.cost-table-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
#cost-table-search {
  width: 160px;
  padding: 3px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
}
#cost-table-search:focus {
  outline: none;
  border-color: #c9a84c;
}
.cost-table-count {
  font-size: 11px;
  color: #8a8fa3;
  font-variant-numeric: tabular-nums;
}

/* Quick-stats strip — KPI tiles above the cost chart. Wraps on narrow panes
   so all stats remain visible regardless of task-pane width. */
.cost-stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.cost-stats-strip:empty {
  display: none;
}
.cost-stat {
  flex: 1 1 100px;
  min-width: 100px;
  padding: 6px 10px;
  background: #1a1d2b;
  border: 1px solid #2a2d3e;
  border-radius: 5px;
}
.cost-stat-label {
  font-size: 10px;
  color: #8a8fa3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cost-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #e6e8f0;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.cost-stat-sub {
  font-size: 10px;
  font-weight: 400;
  color: #8a8fa3;
}
.cost-stat.cost-stat-warn {
  border-color: #c97c4c;
}
.cost-stat.cost-stat-warn .cost-stat-value {
  color: #ffb077;
}

/* Reference-line controls inside the Filters panel. The +Add row uses the
   same range-bar layout as siblings so it lines up visually. */
.cost-refline-bar .cost-refline-input {
  flex: 1 1 80px;
  min-width: 60px;
  padding: 3px 6px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
}
.cost-refline-bar .cost-refline-input:focus {
  outline: none;
  border-color: #c9a84c;
}
.cost-refline-add {
  padding: 3px 10px;
  background: #2a2d3e;
  border: 1px solid #3a3d52;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
  cursor: pointer;
}
.cost-refline-add:hover { background: #3a3d52; }

/* List of currently-active reference lines. Each row mirrors the SVG colour
   via an inline-styled swatch so visual lookup is instant. */
.cost-refline-list { display: flex; flex-direction: column; gap: 4px; }
.cost-refline-list:empty { display: none; }
.cost-refline-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: #1a1d2b;
  border: 1px solid #2a2d3e;
  border-radius: 4px;
  font-size: 11px;
}
.cost-refline-swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
  border-radius: 1px;
}
.cost-refline-label { color: #e6e8f0; flex: 1; }
.cost-refline-val { color: #b8bdd0; font-variant-numeric: tabular-nums; }
.cost-refline-unit { color: #8a8fa3; font-size: 10px; }
.cost-refline-rm {
  background: transparent;
  border: 0;
  color: #8a8fa3;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cost-refline-rm:hover { color: #ff7eb6; }

/* Cost-decomposition popover. Position:fixed so it floats above the entire
   addin layout; left/top set by JS at click time. Width pinned so the
   waterfall bars share a uniform scale across opens. */
.cost-bar-popover {
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: #11131b;
  border: 1px solid #c9a84c;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  font-size: 11px;
  color: #e6e8f0;
}
.cost-bar-popover.hidden { display: none; }
.cost-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2d3e;
}
.cost-pop-title { font-size: 13px; color: #ffd700; }
.cost-pop-close {
  background: transparent;
  border: 0;
  color: #8a8fa3;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.cost-pop-close:hover { color: #ffb077; }

.cost-pop-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.cost-pop-meta-row { display: flex; justify-content: space-between; }
.cost-pop-meta-key { color: #8a8fa3; }
.cost-pop-unit { color: #8a8fa3; font-size: 10px; }

.cost-pop-comps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid #2a2d3e;
  padding-top: 6px;
}
.cost-pop-comp {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  align-items: center;
  gap: 6px;
}
.cost-pop-comp.cost-pop-comp-dim { opacity: 0.4; }
.cost-pop-comp-label { color: #b8bdd0; font-size: 10px; }
.cost-pop-comp-bar {
  position: relative;
  height: 8px;
  background: #1a1d2b;
  border-radius: 2px;
  overflow: hidden;
}
.cost-pop-comp-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.cost-pop-comp-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}
.cost-pop-empty { color: #8a8fa3; font-style: italic; padding: 4px 0; }

.cost-pop-actions {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #2a2d3e;
  display: flex;
  gap: 6px;
}
.cost-pop-btn {
  flex: 1;
  padding: 4px 8px;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #e6e8f0;
  font-size: 11px;
  cursor: pointer;
}
.cost-pop-btn:hover { background: #2a2d3e; border-color: #c9a84c; }

/* Bidirectional hover linkage between bars and table rows. Both classes are
   applied by JS in tandem — same gold accent so the connection reads at a
   glance regardless of which side the cursor is on. */
.cost-table tbody tr.row-linked-hover {
  background: #20232f;
  outline: 1px solid #c9a84c;
  outline-offset: -1px;
}
[data-cost-bar].bar-linked-hover rect {
  stroke: #ffd700;
  stroke-width: 1.6;
}

.range-btn {
  flex: 1;
  padding: 4px 0;
  background: #1e2130;
  border: 1px solid #2e3145;
  border-radius: 4px;
  color: #b8bdd0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.range-btn:hover {
  color: #ccc;
  border-color: #b0b6c8;
}
.range-btn.active {
  background: #c9a84c22;
  border-color: #c9a84c;
  color: #c9a84c;
}