:root {
  --tblr-primary: #155f94;
  --tblr-primary-rgb: 21, 95, 148;
  --tblr-body-bg: #f2f5f9;
  --navy: #012f52;
  --red: #c33c3c;
  --red-dark: #a83232;
  --green: #2f9e6b;
  --green-dark: #268257;
  --grey: #8a9bb0;
  --tint: #e6eff8;
  --surface: #f6f9fc;
  --track: #d5dfea;
  --radius: 6px;
  --on-band: #a9c2d9;
  --band-line: rgba(255, 255, 255, 0.18);
  --band-bg: linear-gradient(#01223b, #012f52 45%, #01456c);
  --chart-text: #5b6b7d;
}

/* Plain values, not light-dark(): static/charts.js reads them */
[data-bs-theme="dark"] {
  --tblr-body-bg: var(--tblr-gray-900);
  --navy: #3d7ebf;
  --tint: rgba(var(--tblr-primary-rgb), 0.25);
  --surface: var(--tblr-bg-surface-secondary);
  --track: var(--tblr-border-color);
  --chart-text: #9aa5b1;
}

/* Digits of equal width, as in Excel */
.table,
.tabulator {
  font-variant-numeric: tabular-nums;
}

.btn,
.nav-link {
  gap: 0.4rem;
}

.btn .ti,
.nav-link .ti {
  font-size: 1.125rem;
}

.btn-primary {
  --tblr-btn-variant: var(--red);
  --tblr-btn-variant-darken: var(--red-dark);
}

.btn-success {
  --tblr-btn-variant: var(--green);
  --tblr-btn-variant-darken: var(--green-dark);
}

.btn-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
}

.band {
  color: #fff;
  background: var(--band-bg);
}

.band ::selection {
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.band .container-fluid,
.content {
  padding-inline: 2rem;
}

.band .btn:not(.btn-primary, .btn-success) {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: rgba(255, 255, 255, 0.1);
  --tblr-btn-border-color: rgba(255, 255, 255, 0.25);
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --tblr-btn-hover-border-color: rgba(255, 255, 255, 0.35);
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: rgba(255, 255, 255, 0.22);
  --tblr-btn-active-border-color: rgba(255, 255, 255, 0.35);
}

.band .btn.btn-white {
  --tblr-btn-color: var(--navy);
  --tblr-btn-bg: #fff;
  --tblr-btn-border-color: #fff;
  --tblr-btn-hover-color: var(--navy);
  --tblr-btn-hover-bg: var(--tint);
  --tblr-btn-hover-border-color: var(--tint);
  font-weight: 600;
}

.topbar {
  --tblr-navbar-bg: transparent;
  --tblr-navbar-border-color: var(--band-line);
  min-height: 3.625rem;
}

.topbar .navbar-collapse {
  gap: 0.5rem 1rem;
}

.topbar .navbar-nav + .navbar-nav {
  padding-left: 1rem;
  border-left: 1px solid var(--band-line);
}

.topbar .navbar-brand {
  margin-right: 1rem;
  color: #fff;
  font-size: 1.375rem;
  font-weight: 600;
}

.topbar .navbar-brand span,
.topbar .user {
  color: var(--on-band);
}

.topbar .navbar-toggler {
  border: 0;
  color: #fff;
  font-size: 1.5rem;
}

.topbar .nav-link {
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  color: var(--on-band);
}

.topbar .nav-link:hover,
.topbar .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.topbar .btn.user {
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-padding-x: 0.75rem;
  --tblr-btn-padding-y: 0.45rem;
}

.topbar .btn-icon.user .ti {
  font-size: 1.375rem;
}

.band-head {
  padding-block: 1.75rem;
}

.band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.band-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.band .breadcrumb {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}

.band .breadcrumb a,
.band .breadcrumb-item + .breadcrumb-item::before {
  color: var(--on-band);
}

.band-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.5rem;
  margin: 0.75rem 0 0;
  color: var(--on-band);
}

.band-facts:empty {
  display: none;
}

.band-facts b {
  color: #fff;
  font-weight: 500;
}

.band-facts .status-dot {
  margin-right: 0.5rem;
}

.content {
  padding-block: 1.75rem 3.5rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack > * {
  margin-bottom: 0;
}

.card {
  --tblr-card-border-radius: var(--radius);
  --tblr-card-border-color: var(--track);
  --tblr-card-box-shadow: 0 1px 2px rgba(1, 47, 82, 0.08);
  --tblr-card-cap-bg: transparent;
  --tblr-card-cap-padding-y: 1rem;
}

.card-header {
  border-bottom: 1px solid var(--track);
  background: var(--surface);
  transition: background-color 0.15s;
}

.card-folded > .card-header {
  border-bottom: 0;
  border-radius: var(--tblr-card-inner-border-radius);
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* As specific as Tabler's .card-header .card-subtitle { margin: 0 } */
.card-header .card-subtitle {
  margin-left: 1rem;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
}

.card-header-folding {
  cursor: pointer;
  user-select: none;
}

.card-header-folding:hover {
  background: var(--tint);
}

/* Taller than the title; would push it down */
.card-header > .card-fold {
  margin-block: -0.5rem;
  margin-left: auto;
}

.card-actions + .card-fold {
  margin-left: 0.5rem;
}

.card-fold .ti {
  transition: transform 0.2s;
}

.card-folded .card-fold .ti {
  transform: rotate(180deg);
}

.card-folded > :not(.card-header) {
  display: none;
}

.table thead th {
  background: transparent;
}

.card-table > tbody > tr:hover > td {
  background: var(--surface);
}

/* --green and --red, faint */
.card-table > tbody > tr.outcome-positive > td {
  background: rgba(47, 158, 107, 0.07);
}

.card-table > tbody > tr.outcome-negative > td {
  background: rgba(195, 60, 60, 0.05);
}

.row-link {
  position: relative;
}

.row-link a {
  color: inherit;
}

.row-link .stretched-link::after {
  z-index: -1;
}

/* So the buttons line up from card to card */
.setup-table {
  table-layout: fixed;
}

.setup-table .setup-label {
  width: 25%;
}

.setup-table .setup-date {
  width: 8rem;
}

.setup-table .setup-actions {
  width: 8.5rem;
}

.setup-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.benefit-table tbody th {
  font-weight: 500;
  white-space: nowrap;
}

.benefit-table thead th {
  min-width: 8rem;
}

.benefit-table .dbo_start,
.benefit-table .dbo_end {
  background: var(--tint);
  font-weight: 700;
}

.benefit-table .dbo_start > *,
.benefit-table .dbo_end > * {
  background: transparent;
}

.benefit-table .dbo_end {
  border-top: 2px solid var(--navy);
}

.chart {
  width: 100%;
  min-height: 260px;
}

.tabulator {
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.8125rem;
}

.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
  border-color: var(--tblr-border-color-translucent);
  background: var(--surface);
}

.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight {
  background: var(--tint);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 0.625rem 0.75rem;
}

.tabulator .tabulator-col-title {
  color: var(--tblr-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tabulator .tabulator-header-filter input {
  padding: 0.25rem 0.5rem 0.25rem 1.625rem !important;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--radius);
  background: var(--tblr-bg-forms) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a5b4' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='10' cy='10' r='7'/%3e%3cpath d='m21 21-6-6'/%3e%3c/svg%3e") no-repeat 0.5rem center / 0.75rem;
  font-size: 0.75rem;
  font-weight: 400;
}

.tabulator .tabulator-header-filter input:focus {
  border-color: var(--tblr-primary);
  outline: 0;
}

.tabulator .tabulator-tableholder .tabulator-table,
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even {
  border-color: var(--tblr-border-color-translucent);
  background: var(--tblr-bg-surface);
}

.tabulator .tabulator-row:hover,
.tabulator .tabulator-row.tabulator-row-even:hover {
  background: var(--surface);
}

.tabulator .tabulator-row .tabulator-cell {
  padding: 0.5rem 0.75rem;
  border-color: var(--tblr-border-color-translucent);
}

.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range,
.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active {
  border-color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.06);
}

.tabulator .tabulator-footer {
  border-color: var(--tblr-border-color-translucent);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  font-weight: 400;
}

.tabulator .tabulator-footer .tabulator-page {
  padding: 0.375rem 0.75rem;
  border-color: var(--tblr-border-color);
  border-radius: var(--radius);
}

.tabulator .tabulator-footer .tabulator-page.active {
  border-color: var(--tblr-primary);
  background: var(--tblr-primary);
  color: #fff;
}

.status-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
}

.status-track span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-track .ti {
  font-size: 1.125rem;
}

.status-track .current {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--tblr-primary);
  color: #fff;
  font-weight: 600;
}

.status-track .upcoming {
  opacity: 0.75;
}

.status-track hr {
  width: 1.5rem;
  margin: 0;
  border-top: 1px dashed currentColor;
  opacity: 0.4;
}

.status-map {
  --node: 2.75rem;
  display: flex;
  margin: 0;
  padding: 0.5rem 0 0;
  list-style: none;
}

.status-map li {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding-inline: 0.5rem;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
  text-align: center;
}

.status-map li::before {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 2px);
  right: 50%;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}

.status-map li:first-child::before {
  display: none;
}

.status-map .upcoming::before {
  background: repeating-linear-gradient(
    90deg,
    var(--track) 0 0.5rem,
    transparent 0.5rem 1rem
  );
}

.status-map .done::before,
.status-map .current::before {
  background: var(--green);
}

.status-map .final::before {
  background: var(--red);
}

/* Grey: a withdrawn report is no error */
.status-map .retracted::before {
  background: var(--grey);
}

.status-map-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  margin-bottom: 0.375rem;
  border-radius: 50%;
  background: var(--tblr-bg-surface);
  box-shadow: inset 0 0 0 3px var(--track);
  color: #9fb0c2;
  font-size: 1.375rem;
}

.status-map .done .status-map-node {
  background: var(--green);
  box-shadow: none;
  color: #fff;
}

.status-map .current .status-map-node {
  background: var(--navy);
  box-shadow: none;
  color: #fff;
}

/* Around the current node; the keyframes are Tabler's */
.status-map .running .status-map-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid transparent;
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spinner-border 0.9s linear infinite;
}

.status-map .final .status-map-node {
  background: var(--red);
}

.status-map .retracted .status-map-node {
  background: var(--grey);
}

.status-map form {
  display: contents;
}

.status-map-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.status-map-link:hover {
  text-decoration: none;
}

.status-map-link:hover .status-map-node {
  filter: brightness(0.9);
}

.status-map-link:hover .status-map-step {
  color: var(--tblr-primary);
  text-decoration: underline;
}

.status-map .unavailable {
  cursor: not-allowed;
}

/* Opaque, so the line stays behind the node */
.status-map .unavailable .status-map-node {
  background: light-dark(#f4f6f9, var(--tblr-gray-900));
  color: light-dark(#c9d3de, var(--tblr-gray-600));
}

.status-map-step {
  color: var(--tblr-body-color);
  font-size: 0.9375rem;
  font-weight: 600;
}

.status-map .upcoming .status-map-step {
  color: var(--tblr-secondary);
  font-weight: 500;
}

.status-map-parts {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  max-width: 11rem;
  margin-top: 0.5rem;
}

.status-map-part {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
}

.status-map-part .ti {
  flex: none;
  font-size: 1rem;
}

.status-map-part.set {
  background: light-dark(#e3f4ec, rgba(47, 158, 107, 0.2));
  color: light-dark(#1f7a52, var(--green));
}

.status-map-part.open {
  background: light-dark(#eef2f7, var(--tblr-gray-800));
  color: var(--tblr-secondary);
}

a.status-map-part:hover {
  text-decoration: none;
  filter: brightness(0.95);
}

.status-map-note {
  font-style: italic;
}

.wizard-nav {
  counter-reset: step;
}

.wizard-nav ol {
  margin: 0.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.wizard-nav ol:last-child {
  margin-bottom: 0;
}

.wizard-nav button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--tblr-secondary);
  text-align: left;
  counter-increment: step;
}

.wizard-nav button::before {
  content: counter(step);
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--tint);
  color: var(--tblr-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.wizard-nav button:hover {
  color: var(--tblr-body-color);
}

.wizard-nav button.active {
  background: var(--tint);
  color: var(--navy);
  font-weight: 600;
}

.wizard-nav button.active::before {
  background: var(--red);
  color: #fff;
}

.login {
  min-height: 100vh;
  background: var(--band-bg);
}

.login-brand {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.login-brand span {
  color: var(--on-band);
}

@media (max-width: 991.98px) {
  .band .container-fluid,
  .content {
    padding-inline: 1rem;
  }

  .band-title {
    font-size: 1.75rem;
  }

  .topbar .navbar-collapse {
    padding-bottom: 1rem;
  }

  .topbar .navbar-nav + .navbar-nav {
    padding: 0.5rem 0 0;
    border-top: 1px solid var(--band-line);
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .status-map {
    flex-direction: column;
    padding-top: 0;
  }

  .status-map li {
    display: grid;
    grid-template-columns: var(--node) 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 0 0 1.25rem;
    text-align: left;
  }

  .status-map li:last-child {
    padding-bottom: 0;
  }

  .status-map li > :not(.status-map-node) {
    grid-column: 2;
  }

  .status-map-node {
    align-self: start;
    grid-row: 1 / span 5;
    margin: 0;
  }

  .status-map-parts {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: none;
    width: auto;
  }

  .status-map li::before {
    display: none;
  }

  .status-map li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--node) / 2);
    left: calc(var(--node) / 2 - 2px);
    width: 4px;
    height: calc(100% + var(--node) / 2);
    border-radius: 2px;
    background: var(--track);
  }

  .status-map li:has(+ .done)::after,
  .status-map li:has(+ .current)::after {
    background: var(--green);
  }

  .status-map li:has(+ .final)::after {
    background: var(--red);
  }

  .status-map li:has(+ .retracted)::after {
    background: var(--grey);
  }
}