:root {
  --sp-navy: #0f2942;
  --sp-navy-dark: #0a1c2e;
  --sp-teal: #1a7a6e;
  --sp-teal-light: #e6f4f2;
  --sp-gold: #c9a24b;
  --sp-red: #b3441e;
  --sp-bg: #f4f6f8;
  --sp-card-border: #e3e8ed;
}

body {
  background: var(--sp-bg);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1c2b36;
}

.sp-navbar {
  background: linear-gradient(90deg, var(--sp-navy) 0%, var(--sp-navy-dark) 100%);
}
.sp-navbar .navbar-brand { font-weight: 600; letter-spacing: .3px; }
.sp-fy-select { min-width: 130px; }

/* Compact user chip + icon-only buttons in the top-right corner of the
   navbar (was a name badge + a "Change password" icon button + a text
   "Log out" button, taking up a lot of width) - frees up room for the
   nav links to breathe before they wrap. */
.sp-user-chip { font-size: .8rem; }
.sp-viewer-badge { font-size: .6rem; padding: .15rem .4rem; vertical-align: 1px; }
.sp-icon-btn {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: .85rem;
}

.sp-main { max-width: 1320px; margin: 0 auto; }

.sp-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sp-navy);
  margin-bottom: 1.25rem;
  border-bottom: 3px solid var(--sp-gold);
  padding-bottom: .5rem;
  display: inline-block;
}

.sp-card {
  background: #fff;
  border: 1px solid var(--sp-card-border);
  border-radius: .6rem;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(15,41,66,.06);
  height: 100%;
}

.sp-kpi-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7a86;
  font-weight: 600;
}
.sp-kpi-value { font-size: 1.65rem; font-weight: 700; color: var(--sp-navy); margin-top: .15rem; }
.sp-kpi-value.positive { color: var(--sp-teal); }
.sp-kpi-value.negative { color: var(--sp-red); }

.sp-section-title {
  font-weight: 600;
  color: var(--sp-navy);
  font-size: 1.02rem;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.table-sp { background: #fff; }
.table-sp thead th {
  background: var(--sp-navy);
  color: #fff;
  font-weight: 500;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: none;
  white-space: nowrap;
}
.table-sp tbody tr:hover { background: var(--sp-teal-light); }
.table-sp td, .table-sp th { vertical-align: middle; padding: .55rem .7rem; }
.table-sp td.num, .table-sp th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge-income { background: var(--sp-teal); }
.badge-expense { background: var(--sp-red); }
.badge-transfer { background: #6b7a86; }
.badge-capital { background: #b8741a; }

.status-paid { color: var(--sp-teal); font-weight: 600; }
.status-partial { color: var(--sp-gold); font-weight: 600; }
.status-outstanding { color: var(--sp-red); font-weight: 600; }
.status-notdue { color: var(--sp-navy); opacity: .5; font-weight: 600; }
.status-due { color: #4f8a9e; font-weight: 600; }

.sp-levy-progress { height: 10px; border-radius: 6px; background: #eef1f4; }
.sp-levy-progress .progress-bar { background: var(--sp-teal); border-radius: 6px; }

/* Pill-badge version of the status colors, for dense table cells (the plain
   .status-* classes above stay text-only since dashboard.asp also reuses
   them on the large KPI-count numbers, which a pill/padding/small-font
   would wreck). Combine both classes: class="status-badge status-paid" */
.status-badge {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .2rem .55rem;
  border-radius: 1rem;
  text-align: center;
  min-width: 5.2rem;
}
.status-badge.status-paid { background: #e6f4f2; }
.status-badge.status-partial { background: #faf1de; color: #8a6a1e; }
.status-badge.status-outstanding { background: #fbeae3; }

.table-sp-tight td, .table-sp-tight th { padding: .4rem .5rem; font-size: .86rem; }
.table-sp-tight thead th { font-size: .7rem; }
.table-sp-tight td.num, .table-sp-tight th.num { white-space: nowrap; }

.sp-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 2px 0 3px rgba(15,41,66,.06);
}
.table-sp thead th.sp-sticky-col { background: var(--sp-navy); z-index: 2; }

/* vertical divider between column groups, e.g. one quarter vs the next */
.sp-col-divider { border-left: 2px solid var(--sp-card-border) !important; }
.table-sp thead th.sp-col-divider { border-left: 2px solid rgba(255,255,255,.25) !important; }

.sp-footer { border-top: 1px solid var(--sp-card-border); margin-top: 2rem; }

.btn-sp-primary { background: var(--sp-teal); border-color: var(--sp-teal); color: #fff; }
.btn-sp-primary:hover { background: #146059; border-color: #146059; color: #fff; }

@media print {
  .sp-navbar, .sp-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .sp-card { box-shadow: none; border: 1px solid #ccc; }
  .sp-print-page-break { break-before: page; page-break-before: always; }
  .sp-chart-box { break-inside: avoid; page-break-inside: avoid; }
}

.sp-chart-box { position: relative; height: 280px; }
.sp-chart-box.sp-chart-tall { height: 340px; }
.sp-highlight-box {
  background: var(--sp-teal-light);
  border-left: 4px solid var(--sp-teal);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.sp-highlight-box ul { margin-bottom: 0; }

.sp-report-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.sp-report-header h2 { color: var(--sp-navy); margin-bottom: .1rem; }
.sp-report-header .sub { color: #6b7a86; font-size: .95rem; }

/* Lightly-shaded grouping box for related controls within a card (e.g. a
   cluster of sliders that belong together), so a busy card reads as
   distinct sections rather than one long list. */
.sp-subsection {
  background: #f8fafb;
  border: 1px solid var(--sp-card-border);
  border-radius: .5rem;
  padding: .9rem 1rem 1rem;
  margin-bottom: 1rem;
}
.sp-subsection:last-child { margin-bottom: 0; }
.sp-subsection-title {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7a86;
  font-weight: 700;
  margin-bottom: .7rem;
}

/* Thin rule for separating stacked blocks inside a card without the
   weight of a full subsection box. */
.sp-divider {
  border: none;
  border-top: 1px solid var(--sp-card-border);
  margin: 1rem 0;
}

/* Small inline warning icon that reveals detail in a popover on hover/focus,
   instead of a permanent block of explanatory text taking up page space. */
.sp-rate-flag { cursor: help; margin-left: .25rem; }
.status-badge .sp-rate-flag { margin-left: .3rem; vertical-align: -1px; }

/* Report line items that open a modal listing the individual transactions
   behind the total (see includes/txndetail_modal.asp). */
.txn-clickable { cursor: pointer; }
.txn-clickable:hover { background: var(--sp-teal-light); }
.txn-clickable .bi-list-ul { opacity: .45; }
.txn-clickable:hover .bi-list-ul { opacity: 1; }