/* ============================================================
   EcomHub — customs declaration console
   Design tokens: navy authority bar, paper work area, mono data.
   Signature element: stamp-style status chips.
   ============================================================ */

:root {
  --ink: #16233a;
  --ink-2: #0e1728;
  --paper: #f2f4f8;
  --card: #ffffff;
  --line: #dde3ec;
  --line-strong: #c6cfdd;
  --muted: #5a6678;
  --accent: #2e5aac;
  --accent-dark: #244789;
  --accent-soft: #e7edf8;
  --stamp-red: #b3402f;
  --stamp-red-soft: #fbeae7;
  --ok: #2f7d4f;
  --ok-soft: #e6f2ea;
  --warn: #9a6b0a;
  --warn-soft: #fbf3e0;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(22, 35, 58, .06), 0 1px 8px rgba(22, 35, 58, .05);
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15.5px; } }

body {
  background: var(--paper);
  color: #232b38;
  font-family: var(--sans);
  margin-bottom: 60px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typography helpers ---------- */
.mono, td.mono, .table td code {
  font-family: var(--mono);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin: 0 0 1.1rem;
}
.page-head h1, .page-head h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ink);
}
.page-sub {
  color: var(--muted);
  font-size: .9rem;
}

/* ---------- Top bar ---------- */
.appbar {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 10px rgba(14, 23, 40, .35);
}
.appbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.appbar .navbar-brand:hover { color: #fff; }

/* Brand mark: a stamp-box around the product name */
.brandmark {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 4px;
  padding: .1rem .45rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.brandmark .dot { color: #7fa4e8; }

.appbar .nav-link {
  color: #aeb9cc;
  font-weight: 500;
  padding: .55rem .9rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.appbar .nav-link:hover { color: #fff; }
.appbar .nav-link.active {
  color: #fff;
  border-bottom-color: #6f97dd;
}

/* ---------- Work panels ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}
.panel-flush { padding: 0; overflow: hidden; }

/* ---------- Tables ---------- */
.table { margin-bottom: 0; color: #2a3342; }
.table > :not(caption) > * > * {
  padding: .6rem .75rem;
  vertical-align: middle;
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f9fc;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.table tbody tr { border-color: var(--line); }
.table tbody tr:hover > td { background: #f4f7fc; }
.table td, .table th { border-color: var(--line); }

/* ---------- Stamp chips (signature element) ---------- */
.stamp {
  display: inline-block;
  padding: .18em .55em;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 650;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.4;
  background: transparent;
  white-space: nowrap;
}
.stamp-ok      { color: var(--ok);       background: var(--ok-soft); }
.stamp-danger  { color: var(--stamp-red); background: var(--stamp-red-soft); }
.stamp-warn    { color: var(--warn);     background: var(--warn-soft); }
.stamp-info    { color: var(--accent);   background: var(--accent-soft); }
.stamp-muted   { color: var(--muted);    background: #eef1f5; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 550; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .18rem rgba(46, 90, 172, .28);
  outline: none;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-outline-primary { color: var(--accent); border-color: var(--accent); }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
}
.form-control-sm { font-size: .86rem; }
label.form-label, .form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .25rem;
}
.input-group-text {
  background: #f7f9fc;
  border-color: var(--line-strong);
  color: var(--muted);
}

/* ---------- Search toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.toolbar form { flex: 0 1 auto; }

/* ---------- Pager ---------- */
.pager {
  display: flex;
  align-items: center;
  gap: .35rem;
  justify-content: flex-end;
  margin-top: .9rem;
  font-size: .88rem;
}
.pager a, .pager span.current {
  min-width: 2rem;
  text-align: center;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--accent);
  text-decoration: none;
}
.pager a:hover { border-color: var(--accent); }
.pager span.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.pager span.ellipsis { border: none; background: none; color: var(--muted); }

/* ---------- Missing-data highlight ---------- */
.missing-field { background-color: var(--stamp-red-soft) !important; border-color: #e4b3aa !important; }

/* ---------- Empty state ---------- */
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1rem;
}
.empty-state .stamp { font-size: .8rem; margin-bottom: .6rem; }

/* ---------- Footer ---------- */
.appfooter {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
  background: transparent;
}
.appfooter a { color: var(--muted); }

/* ---------- Login ---------- */
.login-hero {
  max-width: 380px;
  margin: 12vh auto 0;
  text-align: center;
}
.login-hero .brandmark {
  font-size: 1rem;
  border-color: var(--ink);
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.login-hero h1 { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.login-hero p { color: var(--muted); }

/* ---------- Scanner workbench ---------- */
.scan-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 1.25rem;
}
@media (max-width: 767.98px) {
  .scan-grid { grid-template-columns: 1fr; }
}
.scan-list { max-height: 60vh; overflow-y: auto; }
.scan-list li {
  padding: .3rem .1rem;
  border-bottom: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: .88rem;
}

/* ---------- Upload dropzone ---------- */
.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #f9fbfd;
}
.dropzone:focus-within { border-color: var(--accent); }

/* ---------- Detail rows (edit forms) ---------- */
.dl-defs dt {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.dl-defs dd { margin-bottom: .6rem; font-family: var(--mono); font-size: .9rem; }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}