/* DreamFactory demo – self-contained stylesheet (no CDN). */

/* ---------- Reset & tokens ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #1e293b;
  background: #f8fafc;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: #8c6d3b; text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, SFMono-Regular, "JetBrains Mono",
  Menlo, Consolas, monospace; }
.upper { text-transform: uppercase; }

/* ---------- Layout ---------- */
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.main { padding-block: 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.space-y > * + * { margin-top: 1rem; }
.stack > * + * { margin-top: 1rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.hidden { display: none !important; }
.grid-1 { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1rem; }
.grid-3 { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 2fr 3fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.row { display: flex; flex-wrap: wrap; align-items: center; }
.row-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.gap-2 { gap: .5rem; }
.inline-block { display: inline-block; }
.right { text-align: right; }

/* ---------- Topbar ---------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 30;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-logo {
  width: 2.25rem; height: 2.25rem;
  border-radius: .6rem;
  background: #b08d57; color: #fff;
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 4px 10px rgba(176,141,87,.35);
}
.brand-name { font-weight: 600; line-height: 1.15; }
.brand-sub { font-size: .75rem; color: #64748b; line-height: 1.15; }
.topbar-tag { font-size: .75rem; color: #64748b; }
@media (max-width: 720px) { .topbar-tag { display: none; } }
.topnav { display: flex; gap: .25rem; background: #f1f5f9; padding: .25rem; border-radius: 999px; }
.topnav-link {
  padding: .375rem .875rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
}
.topnav-link:hover { background: #e2e8f0; text-decoration: none; }
.topnav-link.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.08); }

/* ---------- Hero / scanner ---------- */
.hero {
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(1200px 400px at 50% -100px, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px) 0 0 / 32px 32px,
    #ffffff;
}
.hero-head { text-align: center; max-width: 44rem; margin-inline: auto; }
.hero-head h1 { font-size: clamp(1.5rem, 3.2vw, 1.875rem); margin: 0; color: #0f172a; }
.hero-desc { color: #475569; margin-top: .5rem; }

.tabs { display: flex; justify-content: center; margin-top: 1.5rem; }
.tabs {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: .25rem;
  display: inline-flex;
  gap: .25rem;
  margin-inline: auto;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.hero > .tabs { display: flex; }
.hero > .tabs::before,
.hero > .tabs::after { content: ""; flex: 1; }
.tab {
  padding: .5rem 1rem;
  border: 0;
  background: transparent;
  color: #475569;
  border-radius: 999px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.tab:hover { background: #f1f5f9; }
.tab.is-active { background: #b08d57; color: #fff; }

.panel { margin-top: 1.5rem; }
.qr-reader {
  width: 100%; max-width: 420px; margin-inline: auto;
  background: rgba(15,23,42,.05); border-radius: .75rem; overflow: hidden;
  min-height: 40px;
}
.qr-reader video { border-radius: .75rem; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem;
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.card-title { margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a; }
.card-sub { margin: .125rem 0 0; font-size: .875rem; color: #64748b; }
.pad { padding: 1rem 1.25rem; }

/* ---------- Buttons / inputs ---------- */
.btn {
  padding: .5rem .9rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  display: inline-flex; align-items: center; gap: .375rem;
  background: #fff;
  color: #1e293b;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: #b08d57; color: #fff; box-shadow: 0 4px 10px rgba(176,141,87,.28); }
.btn-primary:hover { background: #8c6d3b; }
.btn-ghost { background: #fff; border-color: #cbd5e1; color: #1e293b; }
.btn-ghost:hover { background: #f8fafc; }
.btn-quiet { background: transparent; color: #64748b; border-color: transparent; }
.btn-quiet:hover { color: #0f172a; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { color: #8c6d3b; font-weight: 500; cursor: pointer; background: none; border: 0; padding: 0; }
.link:hover { text-decoration: underline; }
.link.is-active { color: #0f172a; }

.label { display: block; font-size: .875rem; font-weight: 500; color: #334155; margin-bottom: .25rem; }
.input, .select {
  width: 100%;
  padding: .55rem .75rem;
  border-radius: .5rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  outline: none;
  font-size: .875rem;
}
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.input:focus, .select:focus { border-color: #b08d57; box-shadow: 0 0 0 3px rgba(176,141,87,.18); }
.form { max-width: 42rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.or { text-align: center; color: #94a3b8; font-size: .875rem; }
.hint { font-size: .75rem; color: #64748b; margin-top: .375rem; }
.hint code { background: #f1f5f9; padding: .05rem .3rem; border-radius: .25rem; font-size: .95em; }

/* ---------- Feedback ---------- */
.error {
  margin-top: 1.5rem;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: .875rem;
  max-width: 42rem; margin-inline: auto;
}
.loading { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; color: #64748b; }
.spinner {
  width: 40px; height: 40px; border-radius: 999px;
  border: 3px solid #e2e8f0; border-top-color: #b08d57;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.banner { border-radius: .75rem; padding: .75rem 1rem; font-size: .875rem; border: 1px solid; }
.banner-warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* ---------- Result details ---------- */
.kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 600; }
.section-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: #0f172a; }
.identity-code { font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 700; color: #8c6d3b; letter-spacing: .02em; word-break: break-all; }
.model-code { font-size: 1.125rem; font-weight: 700; color: #0f172a; }
.batch-code { font-size: 1.05rem; font-weight: 600; }
.product-name { color: #334155; margin-top: .125rem; }
.muted { color: #64748b; }
.sm { font-size: .8rem; }
.strong { font-weight: 500; }
.ok { color: #047857; }

.img-frame {
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
  border-radius: .75rem;
  display: grid; place-items: center;
  overflow: hidden;
}
.img-frame img { max-height: 100%; max-width: 100%; object-fit: contain; }

.kv { margin: 0; }
.kv > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: .25rem;
  border-bottom: 1px dashed #f1f5f9;
  font-size: .875rem;
}
.kv dt { color: #64748b; white-space: nowrap; }
.kv dd { margin: 0; font-weight: 500; text-align: right; }
@media (max-width: 720px) {
  .kv > div { flex-direction: column; align-items: stretch; gap: .125rem; }
  .kv dd { text-align: left; }
}

.chip { font-size: .7rem; padding: .25rem .5rem; border-radius: .375rem; font-weight: 700; letter-spacing: .04em; }
.chip-warn { background: #fef3c7; color: #92400e; }
.chip-ok { background: #dcfce7; color: #166534; }

.flag { font-size: 1.05em; line-height: 1; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table thead th {
  text-align: left;
  background: #f8fafc;
  color: #475569;
  font-weight: 500;
  padding: .6rem .875rem;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.table tbody td {
  padding: .6rem .875rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table td.mono { color: #0f172a; }
.status-ok { color: #047857; font-weight: 500; }
.status-warn { color: #b45309; font-weight: 500; }

/* ---------- Origin summary ---------- */
.origin-list { display: flex; flex-direction: column; gap: .5rem; }
.origin-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3rem;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
}
.origin-label { color: #334155; }
.origin-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.origin-fill {
  height: 100%;
  background: linear-gradient(90deg, #d9bd86, #b08d57);
  border-radius: 999px;
  transition: width .3s ease;
}
.origin-pct { text-align: right; color: #64748b; font-variant-numeric: tabular-nums; }

/* ---------- Browse page ---------- */
.stat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 1.25rem;
}
.stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: .875rem 1rem;
}
.stat-value { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-top: .25rem; }
.filters {
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .filters { grid-template-columns: 1.4fr 1.4fr 1.4fr auto auto; align-items: end; }
}
.filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .875rem; color: #334155; }
.filters label.grow { grid-column: span 1; }
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: .875rem;
}

.foot { text-align: center; color: #94a3b8; font-size: .75rem; padding-block: 1rem 0; }
.foot code { background: #f1f5f9; padding: .05rem .3rem; border-radius: .25rem; }

/* ---------- Box / carton view ---------- */
.unit-details {
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
}
.unit-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .75rem 1rem;
  font-size: .9rem;
  background: #f8fafc;
}
.unit-details > summary::-webkit-details-marker { display: none; }
.unit-details[open] > summary { border-bottom: 1px solid #e2e8f0; }
.ud-flag { font-weight: 700; }
.ud-flag.ok { color: #047857; }
.ud-flag.warn { color: #b45309; }
.ud-code { font-weight: 700; color: #8c6d3b; letter-spacing: .01em; }
.ud-meta { font-size: .8rem; }
.ud-body { padding: .25rem 0; }
.ud-body .table thead th { background: #fff; }

/* ---------- Print ---------- */
@media print {
  body { background: #fff; }
  .topbar, .hero, .btn, .link, .foot, #btn-reset { display: none !important; }
  .card { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- Production lifecycle timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: #e2e8f0;
}
.tl-item { position: relative; padding: 0 0 1.1rem 2.25rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: 4px; top: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: #fff; border: 2px solid #cbd5e1; z-index: 1;
}
.tl-item.is-done .tl-dot { background: #b08d57; border-color: #b08d57; box-shadow: 0 0 0 3px rgba(176,141,87,.15); }
.tl-item.is-current .tl-dot { background: #fff; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.tl-item.is-pending .tl-dot { background: #f1f5f9; border-color: #cbd5e1; }

.tl-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.tl-label { font-weight: 600; color: #0f172a; }
.tl-badge { font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .12rem .45rem; border-radius: .375rem; }
.tl-badge-done { background: #dcfce7; color: #166534; }
.tl-badge-current { background: #fef3c7; color: #92400e; }
.tl-badge-pending { background: #f1f5f9; color: #64748b; }

.tl-when { font-size: .82rem; color: #8c6d3b; font-weight: 600; margin-top: .125rem; }
.tl-item.is-pending .tl-when { color: #94a3b8; font-weight: 500; }
.tl-actor { font-size: .85rem; color: #334155; margin-top: .125rem; }
.tl-actor-name { font-weight: 600; color: #1e293b; }
.tl-actor-role { color: #64748b; }
.tl-loc { font-size: .8rem; color: #64748b; margin-top: .125rem; }
.tl-ref { font-size: .78rem; color: #475569; margin-top: .25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .375rem; padding: .1rem .45rem; display: inline-block; }
.tl-note { font-size: .8rem; color: #64748b; margin-top: .25rem; line-height: 1.45; }

/* ── Browse: product thumbnails ─────── */
.thumb {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.55rem;
}
.thumb-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 0.55rem;
  color: #64748b;
}

/* ── Dashboard ─────────────────────── */
.dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 820px) {
  .dash-cols { grid-template-columns: 1fr; }
}
.barlist { display: flex; flex-direction: column; gap: 1rem; }
.bar-item { display: flex; flex-direction: column; gap: .35rem; }
.bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bar-label { font-weight: 600; color: #0f172a; font-size: .9rem; }
.bar-val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; color: #475569; }
.bar-track { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }
.bar-ok { background: #16a34a; }
.bar-warn { background: #f59e0b; }
.num-ok { color: #15803d; font-weight: 600; font-variant-numeric: tabular-nums; }
.num-warn { color: #b45309; font-weight: 600; font-variant-numeric: tabular-nums; }
.stack { display: flex; width: 150px; height: 12px; border-radius: 999px; overflow: hidden; background: #f1f5f9; }
.seg { height: 100%; }
.seg-dispatched { background: #16a34a; }
.seg-infg { background: #f59e0b; }

/* ---------- Ancora brand ---------- */
.brand-logo-img { width: 40px; height: 40px; object-fit: contain; border-radius: .5rem; }
.hero-logo { height: 72px; width: auto; margin: 0 auto .75rem; display: block; }
#btn-label-box { margin-top: 1rem; }
@media print { .hero-logo { display: none !important; } }