@font-face {
  font-family: "AppSans";
  src: url("/static/fonts/DejaVuSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AppSans";
  src: url("/static/fonts/DejaVuSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f7fb;
  --text: #1e2a36;
  --card: #ffffff;
  --muted: #6c7684;
  --border: #edf1f7;
  --row: #f8fafc;
  --input-bg: #ffffff;
  --input-text: #1e2a36;
  --table-border: #e7edf5;
}

body[data-theme="dark"] {
  --bg: #03050a;
  --text: #e5e7eb;
  --card: #0b1220;
  --muted: #9aa7bb;
  --border: #2a3547;
  --row: #101827;
  --input-bg: #050914;
  --input-text: #e5e7eb;
  --table-border: #3b4658;
}

body {
  font-family: "AppSans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.card,
.hero,
.stat-card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border) !important;
}

.text-muted,
.form-label,
.stat-label,
#resultText {
  color: var(--muted) !important;
}

.form-control,
.form-select {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-text);
}

.form-control::placeholder { color: var(--muted); }

.table {
  color: var(--text);
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--table-border);
}

.app-shell { max-width: 1680px; }
.hero { border-radius: 20px; }
.slim-card { top: 1rem; border-radius: 18px; }
.chart-card canvas { max-height: 330px; }
.chart-card-sm canvas { max-height: 230px; }
.form-label { font-size: .78rem; margin-bottom: .2rem; }
.form-control, .form-select { border-radius: 10px; }
.stack { display: grid; gap: .45rem; }
.dynamic-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .4rem;
  align-items: end;
  background: var(--row);
  border: 1px solid var(--border);
  padding: .55rem;
  border-radius: 12px;
}
.dynamic-row.overpay { grid-template-columns: .75fr 1fr .75fr .9fr .75fr auto; }
.dynamic-row.historical { grid-template-columns: .65fr .8fr 1fr .9fr .7fr 1.2fr auto; }
.stat-card { border-radius: 16px; }
.stat-value { font-size: 1.15rem; font-weight: 700; }
.table { font-size: .84rem; }
.btn { border-radius: 999px; }

@media (max-width: 768px) {
  .dynamic-row, .dynamic-row.overpay, .dynamic-row.historical { grid-template-columns: 1fr 1fr; }
  .dynamic-row button { grid-column: span 2; }
}

.card { box-shadow: 0 12px 34px rgba(0, 0, 0, .16) !important; }
body[data-theme="dark"] .card { box-shadow: 0 14px 38px rgba(0, 0, 0, .34) !important; }
body[data-theme="dark"] .btn-outline-secondary { border-color: var(--border); color: var(--text); }
body[data-theme="dark"] .btn-outline-primary { border-color: #52637a; }

.form-check-input { background-color: var(--input-bg); border-color: var(--border); }
body[data-theme="dark"] hr { border-color: var(--border); opacity: 1; }

@media (min-width: 1200px) {
  .slim-card {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
  }

  .slim-card > .card-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 1rem;
  }
}

.slim-card > .card-body::-webkit-scrollbar {
  width: 6px;
}

.slim-card > .card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.slim-card > .card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}