.spending-view {
  --spending-navy: #173347;
  --spending-blue: #2c6f8f;
  --spending-teal: #2f796a;
  --spending-gold: #c48a2c;
  --spending-cream: #fffaf0;
  gap: 18px;
}

.spending-view.active {
  display: grid;
}

.spending-hero {
  align-items: center;
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 223, 151, 0.32), transparent 28%),
    linear-gradient(128deg, #15364a 0%, #245e6f 55%, #347968 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(29, 57, 67, 0.18);
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(20px, 4vw, 34px);
}

.spending-hero .eyebrow { color: #f4ce83; }
.spending-hero h2 { font-size: clamp(28px, 4vw, 44px); margin: 4px 0 8px; }
.spending-hero p { margin: 0; }

.spending-privacy-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 290px;
  padding: 14px 16px;
}

.spending-privacy-badge > span { color: #7df0b5; font-size: 20px; grid-row: 1 / 3; margin-right: 11px; }
.spending-privacy-badge strong { font-size: 15px; }
.spending-privacy-badge small { color: rgba(255, 255, 255, 0.78); margin-top: 3px; }

.spending-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); }
.spending-entry-panel,
.spending-data-panel,
.spending-analysis-panel,
.spending-table-panel,
.spending-rules-panel { margin: 0; }

.spending-section-heading { align-items: start; }
.spending-section-heading h3,
.spending-analysis-heading h3 { color: var(--spending-navy); font-size: 21px; margin: 3px 0 0; }
.spending-form { display: grid; gap: 14px; }
.spending-form > label { display: grid; font-weight: 800; gap: 7px; }
.spending-form input,
.spending-form select,
.spending-import-currency select,
.spending-filters select {
  background: #fff;
  border: 1px solid rgba(36, 76, 91, 0.22);
  border-radius: 11px;
  color: #20353d;
  min-height: 46px;
  padding: 9px 12px;
}
.spending-money-fields { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(145px, 0.42fr); }
.spending-money-fields label,
.spending-import-currency { display: grid; font-weight: 800; gap: 7px; }

.spending-match-preview {
  background: linear-gradient(105deg, rgba(44, 111, 143, 0.08), rgba(47, 121, 106, 0.1));
  border: 1px solid rgba(44, 111, 143, 0.16);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 13px;
}

.spending-match-preview span { display: grid; gap: 4px; }
.spending-match-preview small { color: #697b80; font-weight: 800; }
.spending-match-preview strong { color: var(--spending-navy); overflow-wrap: anywhere; }
.spending-demo-row { align-items: center; background: rgba(196, 138, 44, 0.08); border-radius: 11px; color: #6d6048; display: flex; gap: 12px; justify-content: space-between; padding: 10px 12px; }
.spending-demo-row span { font-size: 12px; line-height: 1.55; }
.spending-demo-row button { flex: 0 0 auto; }
.spending-data-panel > p { color: #65777b; line-height: 1.65; }
.spending-import-guide { background: rgba(44, 111, 143, 0.07); border: 1px solid rgba(44, 111, 143, 0.15); border-radius: 12px; color: #425c65; margin-top: 14px; padding: 13px 15px; }
.spending-import-guide > strong { color: var(--spending-navy); }
.spending-import-guide ol { display: grid; gap: 7px; margin: 10px 0 8px; padding-left: 22px; }
.spending-import-guide li,
.spending-import-guide p { font-size: 13px; line-height: 1.55; margin: 0; }
.spending-import-currency { color: #52676d; font-size: 13px; margin-top: 14px; max-width: 390px; }
.spending-data-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.spending-file-button { align-items: center; background: var(--spending-navy); border-radius: 10px; color: #fff; cursor: pointer; display: inline-flex; font-weight: 800; justify-content: center; min-height: 42px; padding: 8px 14px; }
.spending-status { color: #586c72; min-height: 20px; margin: 10px 0 0; }
.spending-status.is-success { color: #26705f; font-weight: 800; }
.spending-status.is-error { color: #a53b3b; font-weight: 800; }

.spending-metrics { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spending-metrics article {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(40, 79, 89, 0.14);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(38, 62, 67, 0.08);
  display: grid;
  gap: 5px;
  padding: 18px;
}
.spending-metrics span { color: #64777c; font-size: 13px; font-weight: 900; }
.spending-metrics strong { color: var(--spending-navy); font-size: clamp(22px, 3vw, 31px); font-variant-numeric: tabular-nums; }
.spending-metrics small { color: #7d8c90; }

.spending-analysis-heading { align-items: end; display: flex; gap: 16px; justify-content: space-between; }
.spending-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.spending-filters label,
.spending-stage-filter { display: grid; font-size: 12px; font-weight: 900; gap: 4px; }
.spending-filters select { min-height: 40px; min-width: 150px; }
.spending-multiselect { min-width: 190px; position: relative; }
.spending-multiselect > summary { align-items: center; background: #fff; border: 1px solid rgba(36, 76, 91, 0.22); border-radius: 11px; color: #20353d; cursor: pointer; display: flex; font-size: 14px; font-weight: 800; justify-content: space-between; list-style: none; min-height: 40px; padding: 8px 12px; }
.spending-multiselect > summary::-webkit-details-marker { display: none; }
.spending-multiselect > summary::after { content: "⌄"; font-size: 16px; }
.spending-multiselect[open] > summary { border-color: rgba(44, 111, 143, 0.58); box-shadow: 0 0 0 3px rgba(44, 111, 143, 0.12); }
.spending-multiselect-options { background: #fff; border: 1px solid rgba(36, 76, 91, 0.2); border-radius: 11px; box-shadow: 0 14px 30px rgba(26, 50, 58, 0.18); display: grid; gap: 2px; max-height: 310px; min-width: 250px; overflow-y: auto; padding: 8px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; }
.spending-multiselect-options label { align-items: center; border-radius: 8px; cursor: pointer; display: grid; font-size: 14px; font-weight: 700; gap: 9px; grid-template-columns: auto 1fr; padding: 8px; }
.spending-multiselect-options label:hover { background: rgba(44, 111, 143, 0.08); }
.spending-multiselect-options input { accent-color: var(--spending-blue); height: 17px; margin: 0; width: 17px; }
.spending-stage-selection-summary { align-items: center; background: rgba(44, 111, 143, 0.07); border-left: 4px solid var(--spending-blue); display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; padding: 11px 13px; }
.spending-stage-selection-summary span { color: #5b7077; font-size: 13px; font-weight: 800; }
.spending-stage-selection-summary strong { color: var(--spending-navy); font-size: 19px; font-variant-numeric: tabular-nums; }
.spending-stage-selection-summary small { color: #748388; }
.spending-exchange-explanation { align-items: start; background: rgba(196, 138, 44, 0.08); border: 1px solid rgba(196, 138, 44, 0.18); border-radius: 12px; color: #5f594a; display: grid; gap: 5px; margin-top: 16px; padding: 12px 14px; }
.spending-exchange-explanation strong { color: #725019; }
.spending-exchange-explanation span,
.spending-exchange-explanation small { line-height: 1.55; }
.spending-exchange-lines { display: grid; gap: 3px; }
.spending-exchange-lines small { color: #6d624e; font-variant-numeric: tabular-nums; }
.spending-chart-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.spending-chart-card { background: var(--spending-cream); border: 1px solid rgba(88, 82, 57, 0.14); border-radius: 15px; min-height: 250px; padding: 16px; }
.spending-chart-card header { display: flex; gap: 8px; justify-content: space-between; }
.spending-chart-card h4 { color: var(--spending-navy); margin: 0; }
.spending-chart-card small { color: #798589; }
.spending-chart-empty { align-items: center; color: #839095; display: flex; justify-content: center; min-height: 184px; text-align: center; }
.spending-line-chart { margin-top: 12px; min-height: 184px; width: 100%; }
.spending-line-chart svg { display: block; height: auto; max-width: 100%; width: 100%; }
.spending-line-chart .chart-grid { stroke: rgba(37, 69, 78, 0.12); stroke-width: 1; }
.spending-line-chart .chart-axis { stroke: rgba(37, 69, 78, 0.34); stroke-width: 1; }
.spending-line-chart .chart-area { fill: rgba(44, 111, 143, 0.11); }
.spending-line-chart .chart-line { fill: none; stroke: var(--spending-blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.spending-line-chart .chart-point { fill: #fff; stroke: var(--spending-teal); stroke-width: 3; }
.spending-line-chart .chart-tick { fill: #6c7d82; font-size: 11px; }
.spending-line-chart .chart-axis-title { fill: #435a62; font-size: 11px; font-weight: 800; }
.spending-line-chart .chart-last-value { fill: var(--spending-navy); font-size: 11px; font-weight: 900; }
.spending-bar-chart { display: grid; gap: 12px; margin-top: 18px; }
.spending-bar-row { display: grid; gap: 6px; }
.spending-bar-meta { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.spending-bar-meta span { color: #354b54; font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spending-bar-meta strong { color: var(--spending-navy); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spending-bar-track { background: rgba(39, 76, 91, 0.1); border-radius: 999px; height: 13px; overflow: hidden; }
.spending-bar-fill { background: linear-gradient(90deg, var(--spending-blue), var(--spending-teal)); border-radius: inherit; height: 100%; min-width: 4px; }
.spending-version-bars .spending-bar-fill { background: linear-gradient(90deg, var(--spending-gold), #d45f4d); }
.spending-bar-row small { color: #7b888c; }
.spending-ledger-count { color: var(--spending-navy); }
.spending-sort-button { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; font: inherit; font-weight: 900; gap: 5px; padding: 3px 0; }
.spending-sort-button:hover { color: var(--spending-blue); }
.spending-sort-icon { color: #718187; font-size: 12px; min-width: 12px; }
.spending-table td,
.spending-table th { white-space: nowrap; }
.spending-table td { font-variant-numeric: tabular-nums; }
.spending-table-stage { display: grid; gap: 2px; }
.spending-table-stage strong { color: var(--spending-navy); }
.spending-table-stage small { color: #7a898d; }
.spending-table-money { display: grid; gap: 2px; }
.spending-table-money small { color: #75868b; }
.spending-version-chip,
.spending-cycle-chip { border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 900; padding: 4px 8px; }
.spending-version-chip { background: rgba(196, 138, 44, 0.14); color: #865b18; }
.spending-cycle-chip { background: rgba(44, 111, 143, 0.12); color: #245f7a; }
.spending-row-actions { display: flex; gap: 6px; }
.spending-row-actions button { background: #fff; border: 1px solid rgba(41, 74, 83, 0.2); border-radius: 8px; color: #35505a; cursor: pointer; font-weight: 800; min-height: 34px; padding: 5px 9px; }
.spending-row-actions button[data-spending-delete] { color: #9a3434; }
.spending-version-overview-panel { margin: 0; }
.spending-version-overview-panel .spending-section-heading p { color: #697b80; margin: 6px 0 0; }
.spending-version-overview-tools { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.spending-version-overview-tools .spending-stage-filter { min-width: 220px; }
.spending-version-overview-currency { background: rgba(47, 121, 106, 0.1); border-radius: 999px; color: #2b6c60; font-size: 12px; font-weight: 900; padding: 7px 10px; }
.spending-version-summary { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.spending-version-summary article { background: rgba(44, 111, 143, 0.06); border: 1px solid rgba(44, 111, 143, 0.12); border-radius: 12px; display: grid; gap: 4px; padding: 13px; }
.spending-version-summary span { color: #61757b; font-size: 12px; font-weight: 900; }
.spending-version-summary strong { color: var(--spending-navy); font-size: 19px; overflow-wrap: anywhere; }
.spending-version-summary small { color: #7b898d; }
.spending-version-overview-panel .spending-bar-chart { gap: 14px; margin-top: 20px; }
.spending-version-overview-panel .spending-bar-track { height: 16px; }
.spending-version-overview-panel .spending-bar-row.is-zero .spending-bar-fill { min-width: 0; }
.spending-rules-panel > summary { color: var(--spending-navy); cursor: pointer; font-size: 16px; font-weight: 900; }
.spending-rules-table { margin-top: 14px; }
.spending-rules-table table { width: 100%; }
.spending-rules-table th,
.spending-rules-table td { padding: 10px 12px; text-align: left; }
.spending-rules-table th { color: #6b7a7e; font-size: 12px; text-transform: uppercase; }
.spending-rules-table td { border-top: 1px solid rgba(42, 75, 83, 0.1); }

@media (max-width: 1120px) {
  .spending-layout,
  .spending-chart-grid { grid-template-columns: 1fr; }
  .spending-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spending-version-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .spending-view { gap: 12px; }
  .spending-hero { align-items: stretch; flex-direction: column; padding: 20px 17px; }
  .spending-privacy-badge { max-width: none; }
  .spending-layout { gap: 12px; }
  .spending-match-preview { grid-template-columns: 1fr; }
  .spending-money-fields { grid-template-columns: 1fr; }
  .spending-metrics { gap: 10px; grid-template-columns: 1fr 1fr; }
  .spending-metrics article { padding: 14px; }
  .spending-metrics strong { font-size: 21px; }
  .spending-analysis-heading { align-items: stretch; flex-direction: column; }
  .spending-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .spending-filters select { min-width: 0; width: 100%; }
  .spending-multiselect { min-width: 0; }
  .spending-multiselect-options { left: 0; min-width: 0; right: 0; }
  .spending-data-actions > * { flex: 1 1 calc(50% - 9px); }
  .spending-chart-card header { align-items: start; flex-direction: column; }
  .spending-demo-row { align-items: stretch; flex-direction: column; }
  .spending-version-summary { grid-template-columns: 1fr 1fr; }
  .spending-version-overview-tools { align-items: stretch; display: grid; justify-content: stretch; width: 100%; }
  .spending-version-overview-tools .spending-stage-filter { min-width: 0; }
}

.spending-form .spending-stockpile-toggle {display:flex;align-items:center;gap:10px;background:#edf3e9;padding:12px;border-radius:10px;}
.spending-form .spending-stockpile-toggle input {width:18px;height:18px;flex:0 0 18px;}
.spending-stockpile-note {font-size:12px;line-height:1.8;color:#627166;margin:0;}
.spending-stockpile-summary {display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 22px;background:#f1f5eb;border:1px solid #d8e3d2;border-radius:14px;margin:0 0 24px;}
.spending-stockpile-summary strong {font-size:22px;color:#3f624b;}
.spending-stockpile-summary small {color:#627166;}
.spending-stockpile-badge {color:#996121!important;}
#spendingAllocationField[hidden] {display:none;}
.chart-stockpile-line {fill:none;stroke:#b88236;stroke-width:2.5;stroke-dasharray:5 3;}
.spending-chart-legend {display:flex;justify-content:center;gap:18px;font-size:11px;color:#52758d;}
.spending-chart-legend span:last-child {color:#996121;}