html, body { height: 100%; margin: 0; font: 14px/1.4 system-ui, sans-serif; }
#map { position: absolute; top: 48px; bottom: 0; left: 0; right: 0; }

.bar { position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 1100;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: #001D3D; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.bar label { color: #cfe2ff; font-size: 13px; }
.bar input[type=date] { margin-left: 4px; }
.bar .range-input { margin-left: 4px; width: 210px; padding: 5px 8px; border: 0;
  border-radius: 5px; font-size: 13px; cursor: pointer; background: #fff; color: #001D3D; }
.bar .hexr-lbl input[type=range] { vertical-align: middle; width: 110px; margin: 0 6px; }
.bar #hexrval { color: #cfe2ff; font-size: 12px; display: inline-block; min-width: 44px; }
/* flatpickr calendar floats above the Leaflet map + top bar */
.flatpickr-calendar { z-index: 2000 !important; }
.bar button { background: #2F96F3; color: #fff; border: 0; padding: 6px 12px;
  border-radius: 5px; cursor: pointer; font-size: 13px; }
.bar button:hover { background: #1f7fd6; }
.bar .link { background: transparent; color: #cfe2ff; padding: 4px 6px; }
.bar .tag { background: #2F96F3; color: #fff; border-radius: 10px; padding: 2px 9px; font-size: 12px; }
.bar .status { color: #cfe2ff; font-size: 12px; }
.bar .muted { color: #8fb4e6; font-size: 12px; }
.bar .spacer { flex: 1; }

.legend { position: absolute; bottom: 18px; left: 10px; z-index: 1100; background: #fff;
  padding: 8px 10px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 12px; }
.legend .bar-grad { height: 12px; width: 200px; margin: 4px 0 2px;
  background: linear-gradient(to right, hsl(120,72%,48%), hsl(60,75%,50%), hsl(0,75%,50%));
  border: 1px solid #999; }
.legend .lab { display: flex; justify-content: space-between; width: 200px; }
.legend .muted { color: #777; }

.bar a.link { text-decoration: none; }

/* cost-configuration page */
.cfg-wrap { position: absolute; top: 48px; bottom: 0; left: 0; right: 0; overflow: auto;
  background: #f3f5f8; padding: 20px; box-sizing: border-box; }
.cfg-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.12);
  padding: 18px 20px; margin: 0 auto 18px; max-width: 980px; }
.cfg-card h2 { margin: 0 0 6px; font-size: 16px; color: #001D3D; }
.cfg-note { margin: 0 0 14px; color: #5a6b80; font-size: 12.5px; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cfg-table th, .cfg-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e7ebf0; }
.cfg-table th { color: #5a6b80; font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .02em; }
.cfg-table td.num, .cfg-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cfg-table tr.row-active { background: #f0f7ff; }
.cfg-table i { color: #8a99ab; }
.cfg-empty { color: #8a99ab; text-align: center; padding: 18px; }

.badge { display: inline-block; border-radius: 10px; padding: 2px 9px; font-size: 11px; font-weight: 600; }
.badge-active { background: #d6f0dd; color: #1d7a3e; }
.badge-future { background: #dbeafe; color: #1f5fae; }
.badge-past { background: #eceff3; color: #7a8696; }

.cfg-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cfg-form label { display: flex; flex-direction: column; font-size: 12px; color: #44546a; gap: 4px; }
.cfg-form input { padding: 8px; border: 1px solid #ccd4de; border-radius: 5px; font-size: 14px; }
.cfg-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.cfg-actions button { background: #2F96F3; color: #fff; border: 0; padding: 9px 18px;
  border-radius: 5px; font-size: 14px; cursor: pointer; }
.cfg-actions button:disabled { opacity: .6; cursor: default; }
.cfg-msg { font-size: 13px; }
.cfg-msg.cfg-ok { color: #1d7a3e; }
.cfg-msg.cfg-err { color: #c0392b; }
.cfg-readonly { max-width: 980px; margin: 0 auto; color: #7a8696; font-size: 13px; }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #001D3D; }
.login-card { background: #fff; padding: 28px 26px; border-radius: 10px; width: 300px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.login-card h1 { font-size: 18px; margin: 0 0 2px; color: #001D3D; }
.login-card .sub { margin: 0 0 16px; color: #666; font-size: 13px; }
.login-card label { display: flex; flex-direction: column; font-size: 12px; color: #444;
  margin-bottom: 12px; gap: 4px; }
.login-card input { padding: 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; }
.login-card button { background: #2F96F3; color: #fff; border: 0; padding: 10px; border-radius: 5px;
  font-size: 14px; cursor: pointer; margin-top: 4px; }
.login-card button:disabled { opacity: .6; }
.login-card .err { color: #c0392b; font-size: 12px; margin-top: 10px; min-height: 14px; }