/* =========================================================================
   BBA EDMS design system — "field instrument"
   =========================================================================
   A groundwater compliance tool should feel like a well-kept instrument:
   deep water-ink chrome, warm paper surfaces, monospaced numerals wherever
   data lives, and red reserved strictly for compliance meaning. Layered
   over Bootstrap 5 through its CSS variables — structural classes and the
   permissions/tests that pin them are untouched.

   Type:  Bricolage Grotesque (display) · IBM Plex Sans (text)
          · IBM Plex Mono (numerals) — all vendored, no external requests.
   ========================================================================= */

/* ---- faces ------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- tokens ------------------------------------------------------------ */
:root {
  /* palette: water ink over paper */
  --edms-ink: #142f36;          /* deep water ink — chrome, headings */
  --edms-ink-soft: #46626a;     /* muted labels */
  --edms-paper: #f4f2ea;        /* warm page ground */
  --edms-surface: #fdfcf8;      /* card faces */
  --edms-line: #ddd8c8;         /* hairlines */
  --edms-line-strong: #b9b2a0;
  --edms-water: #0e7490;        /* primary — same family the charts use */
  --edms-water-deep: #0a5a72;
  --edms-water-wash: rgba(14, 116, 144, 0.07);
  --edms-alert: #b3261e;        /* compliance red — exceedance/SSI only */
  --edms-amber: #a35b0a;
  --edms-moss: #2e6e4e;

  --edms-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --edms-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --edms-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --edms-shadow: 0 1px 2px rgba(20, 47, 54, 0.05), 0 10px 30px -24px rgba(20, 47, 54, 0.35);
  --edms-shadow-hover: 0 2px 4px rgba(20, 47, 54, 0.06), 0 14px 34px -20px rgba(20, 47, 54, 0.35);

  /* Bootstrap re-tuning */
  --bs-body-font-family: var(--edms-body);
  --bs-body-bg: var(--edms-paper);
  --bs-body-color: #23383e;
  --bs-secondary-color: rgba(35, 56, 62, 0.68);
  --bs-border-color: var(--edms-line);
  --bs-link-color: var(--edms-water-deep);
  --bs-link-color-rgb: 10, 90, 114;
  --bs-link-hover-color: var(--edms-water);
  --bs-link-hover-color-rgb: 14, 116, 144;
  --bs-font-monospace: var(--edms-mono);
  --bs-primary: var(--edms-water);
  --bs-primary-rgb: 14, 116, 144;
  --bs-danger-rgb: 179, 38, 30;
  --bs-success-rgb: 46, 110, 78;
  --bs-focus-ring-color: rgba(14, 116, 144, 0.28);
}

/* ---- page ground: faint contour lines, like a quad-sheet --------------- */
body {
  background-color: var(--edms-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23142f36' stroke-opacity='0.045'%3E%3Cpath d='M-20 90 C 120 40, 240 140, 380 95 S 600 60, 600 60'/%3E%3Cpath d='M-20 160 C 130 105, 250 210, 390 160 S 600 130, 600 130'/%3E%3Cpath d='M-20 235 C 140 175, 255 285, 400 230 S 600 205, 600 205'/%3E%3Cpath d='M-20 315 C 150 250, 260 365, 410 305 S 600 285, 600 285'/%3E%3Cpath d='M-20 400 C 155 330, 265 450, 415 385 S 600 370, 600 370'/%3E%3Cpath d='M-20 490 C 160 415, 270 540, 420 470 S 600 460, 600 460'/%3E%3C/g%3E%3C/svg%3E");
  letter-spacing: 0.004em;
}
::selection { background: rgba(14, 116, 144, 0.18); }

/* ---- typography --------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--edms-display);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--edms-ink);
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--edms-body);
  font-weight: 600;
  color: var(--edms-ink);
}
.text-muted { color: var(--edms-ink-soft) !important; }
code { color: var(--edms-water-deep); background: var(--edms-water-wash); padding: 0.1em 0.35em; border-radius: 0.25rem; }

/* numerals: every right-aligned data cell reads off the instrument */
td.text-end, th.text-end {
  font-family: var(--edms-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.925em;
}

/* ---- chrome: navbar as instrument bezel --------------------------------- */
.navbar.bg-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.12)),
    var(--edms-ink) !important;
  border-bottom: 3px solid var(--edms-water);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.navbar-brand {
  font-family: var(--edms-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.navbar-brand .brand-mark {
  color: #67c3d8;
  font-weight: 400;
  margin-right: 0.4rem;
}
.navbar .navbar-text { color: rgba(255, 255, 255, 0.66); font-size: 0.9rem; }
.navbar .nav-link { color: rgba(255, 255, 255, 0.82); }
.navbar .nav-link:hover { color: #fff; }

footer.border-top {
  border-color: var(--edms-line) !important;
  color: var(--edms-ink-soft) !important;
  background: transparent;
  font-family: var(--edms-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- cards: paper plates with a quiet lift ------------------------------ */
.card {
  --bs-card-bg: var(--edms-surface);
  --bs-card-border-color: var(--edms-line);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--edms-shadow);
  border-width: 1px;
}
.card-header {
  font-weight: 600;
  color: var(--edms-ink);
  border-bottom: 1px solid var(--edms-line);
  padding-top: 0.65rem;
  padding-bottom: 0.6rem;
}
.card-header.text-bg-danger {
  background: linear-gradient(180deg, #c0362c, var(--edms-alert)) !important;
  color: #fff;
  border-bottom-color: transparent;
}
a .card:hover, a.text-decoration-none .card:hover {
  box-shadow: var(--edms-shadow-hover);
  border-color: var(--edms-line-strong);
  transform: translateY(-1px);
}
a .card { transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease; }

/* one composed page-load: cards surface like readings settling in */
@media (prefers-reduced-motion: no-preference) {
  main .card {
    animation: edms-settle 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  main .card:nth-of-type(2), main .row > div:nth-child(2) .card { animation-delay: 45ms; }
  main .card:nth-of-type(3), main .row > div:nth-child(3) .card { animation-delay: 90ms; }
  main .card:nth-of-type(4), main .row > div:nth-child(4) .card { animation-delay: 135ms; }
  main .card:nth-of-type(n+5) { animation-delay: 170ms; }
}
@keyframes edms-settle {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* ---- tables: log-book discipline ---------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--edms-water-wash);
}
.table thead th {
  font-family: var(--edms-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--edms-ink-soft);
  border-bottom: 2px solid var(--edms-ink);
  padding-top: 0.55rem;
  padding-bottom: 0.45rem;
  white-space: nowrap;
}
.table > tbody > tr > td { border-color: #e9e5d8; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---- badges: stamped, not glowing --------------------------------------- */
.badge {
  font-weight: 600;
  letter-spacing: 0.015em;
  border-radius: 0.3rem;
  padding: 0.32em 0.55em;
}
.badge.text-bg-danger { background-color: var(--edms-alert) !important; }
.badge.text-bg-success { background-color: var(--edms-moss) !important; }
.badge.text-bg-warning { background-color: #f2c14e !important; color: #4a3403 !important; }
.badge.text-bg-secondary { background-color: #5c7078 !important; }
.badge.text-bg-info { background-color: #3d7f96 !important; color: #fff !important; }
.badge.text-bg-light { background-color: #f2efe6 !important; border: 1px solid var(--edms-line-strong); }

/* ---- buttons ------------------------------------------------------------ */
.btn { font-weight: 500; letter-spacing: 0.01em; }
.btn-primary {
  --bs-btn-bg: var(--edms-water-deep);
  --bs-btn-border-color: var(--edms-water-deep);
  --bs-btn-hover-bg: var(--edms-water);
  --bs-btn-hover-border-color: var(--edms-water);
  --bs-btn-active-bg: #084a5e;
  --bs-btn-active-border-color: #084a5e;
  --bs-btn-focus-shadow-rgb: 14, 116, 144;
}
.btn-outline-primary {
  --bs-btn-color: var(--edms-water-deep);
  --bs-btn-border-color: #7fb4c4;
  --bs-btn-hover-bg: var(--edms-water-deep);
  --bs-btn-hover-border-color: var(--edms-water-deep);
  --bs-btn-focus-shadow-rgb: 14, 116, 144;
}
.btn-outline-secondary {
  --bs-btn-color: var(--edms-ink-soft);
  --bs-btn-border-color: var(--edms-line-strong);
  --bs-btn-hover-bg: var(--edms-ink);
  --bs-btn-hover-border-color: var(--edms-ink);
}
.btn-outline-secondary.active {
  background-color: var(--edms-ink);
  border-color: var(--edms-ink);
  color: #fff;
}

/* ---- tabs (well detail): gauge needles ---------------------------------- */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--edms-line);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  gap: 0.25rem;
}
.nav-tabs .nav-link {
  font-family: var(--edms-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--edms-ink-soft);
  border: 0;
  border-bottom: 2.5px solid transparent;
  padding: 0.45rem 0.8rem;
}
.nav-tabs .nav-link:hover { color: var(--edms-ink); border-bottom-color: var(--edms-line-strong); }
.nav-tabs .nav-link.active {
  color: var(--edms-water-deep);
  background: transparent;
  border-bottom: 2.5px solid var(--edms-water);
}

/* ---- breadcrumbs: survey stationing ------------------------------------- */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--edms-line-strong);
  font-size: 0.8rem;
  font-family: var(--edms-mono);
  letter-spacing: 0.01em;
}
.breadcrumb-item.active { color: var(--edms-ink); font-weight: 600; }

/* ---- import wizard: survey stations --------------------------------------- */
.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  counter-reset: station;
  font-family: var(--edms-body);
  font-size: 0.82rem;
}
.wizard-steps .breadcrumb-item {
  display: flex;
  align-items: center;
  padding-left: 0;
  color: var(--edms-ink-soft);
}
.wizard-steps .breadcrumb-item::before {
  counter-increment: station;
  content: counter(station);
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--edms-line-strong);
  background: var(--edms-surface);
  color: var(--edms-ink-soft);
  font-family: var(--edms-mono);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0;
  margin-right: 0.45rem;
}
.wizard-steps .breadcrumb-item:not(:last-child)::after {
  content: "";
  width: 1.7rem;
  border-top: 1.5px dashed var(--edms-line-strong);
  margin: 0 0.6rem 0 0.7rem;
}
.wizard-steps .breadcrumb-item:has(~ .active)::before {
  border-color: var(--edms-water);
  color: var(--edms-water-deep);
  background: rgba(14, 116, 144, 0.08);
}
.wizard-steps .breadcrumb-item.active { color: var(--edms-ink); }
.wizard-steps .breadcrumb-item.active::before {
  border-color: var(--edms-water-deep);
  background: var(--edms-water-deep);
  color: #fff;
}

/* ---- alerts: margin flags ------------------------------------------------ */
.alert { border-left-width: 4px; box-shadow: var(--edms-shadow); }
.alert-danger { border-left-color: var(--edms-alert); }
.alert-warning { border-left-color: var(--edms-amber); }
.alert-success { border-left-color: var(--edms-moss); }
.alert-info { border-left-color: var(--edms-water); }

/* ---- forms ---------------------------------------------------------------- */
.form-control, .form-select {
  background-color: #fff;
  border-color: var(--edms-line-strong);
}
.form-control:focus, .form-select:focus {
  border-color: var(--edms-water);
  box-shadow: 0 0 0 0.22rem rgba(14, 116, 144, 0.14);
}
:focus-visible { outline-color: var(--edms-water); }

/* ---- charts & maps: mounted instruments ----------------------------------- */
#well-map, #hydro-chart, #trend-chart, .js-plotly-plot {
  background: #fff;
  border: 1px solid var(--edms-line);
  border-radius: 0.4rem;
}
#well-map { box-shadow: var(--edms-shadow); }

/* ---- stat cards: panel readouts ------------------------------------------ */
.stat-card { border-top: 3px solid var(--edms-line-strong); }
.stat-card .stat-value {
  font-family: var(--edms-mono);
  font-weight: 600;
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--edms-ink);
}
.stat-card .stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--edms-ink-soft);
  margin-top: 0.15rem;
}
.stat-card-alert {
  border-top-color: var(--edms-alert);
  background:
    linear-gradient(180deg, rgba(179, 38, 30, 0.05), transparent 45%),
    var(--edms-surface);
}
.stat-card-alert .stat-value { color: var(--edms-alert) !important; }

/* ---- auth pages: a bench card under the bezel ---------------------------- */
main:has(input[name="auth-username"]),
main:has(input[name="old_password"]),
main:has(input[name$="otp_token"]),
main:has(input[name$="-token"]) {
  flex-grow: 0 !important;
  width: min(94vw, 26.5rem);
  margin: 7vh auto 0;
  background: var(--edms-surface);
  border: 1px solid var(--edms-line);
  border-radius: 0.6rem;
  box-shadow: var(--edms-shadow-hover);
  padding: 1.9rem 2.1rem 1.6rem !important;
}
body:has(input[name="auth-username"]) footer,
body:has(input[name$="otp_token"]) footer,
body:has(input[name$="-token"]) footer { margin-top: auto; }
main:has(input[name="auth-username"]) table th,
main:has(input[name$="otp_token"]) table th {
  font-weight: 500;
  color: var(--edms-ink-soft);
  padding-right: 0.75rem;
  padding-bottom: 0.55rem;
}
main:has(input[name="auth-username"]) table td { padding-bottom: 0.55rem; }
main:has(input[name="auth-username"]) .form-control { min-width: 13rem; }

/* ---- empty states: penciled-in placeholders ------------------------------ */
main div.text-muted.text-center[class*="py-"] {
  border: 1.5px dashed var(--edms-line-strong);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

/* ---- scrollbars (webkit): slim ink -------------------------------------- */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #c6c0ae; border-radius: 5px; border: 2px solid var(--edms-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--edms-ink-soft); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- print: the handout promise ------------------------------------------ */
@media print {
  body { background: #fff !important; }
  nav.navbar, footer, .btn, .navbar-toggler, form[action*="logout"] { display: none !important; }
  main { padding: 0 !important; }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; animation: none !important; }
  a { text-decoration: none; color: inherit; }
}