/* Bare-bones styling for the pure-HTML budget bar charts.
   Layout comes from Bootstrap; only the bars and flash toast live here. */

.inline-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 2px;
  vertical-align: -1px;
}
.legend-ok { background: #198754; }
.legend-left { background: #a3d9b1; }
.legend-over { background: #dc3545; }

.bar-track {
  display: flex;
  height: 18px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: #e9ecef;
}
.bar-spent { transition: width .4s ease; }
.bar-ok { background: #198754; }
.bar-over { background: #dc3545; }
.bar-left { background: #a3d9b1; }
.bar-empty { width: 100%; }

.bar-block { margin-bottom: .9rem; }
.bar-block .bar-label { margin-bottom: .25rem; }

.flash-toast {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2000;
  max-width: 320px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}