/* eBid Baju — "Monokrom Premium" theme (owner's request: premium car-maker look).
 * White ground, near-black ink, light-weight large type in Barlow (open alternative to a
 * proprietary grotesk), black 8px primary buttons, grey tiles, full-bleed photography.
 * Legacy class names (.font-serif/.font-mono/.lot-title/.price) now all map to Barlow.
 * Tenant brand tokens are set at runtime by EB.tenant.applyTheme(); brand colour is used
 * only for the logo mark and small identity accents. Read DESIGN.md. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Barlow+Semi+Condensed:wght@400;500&display=swap');

:root {
  /* neutrals: pure white ground, near-black ink, cool grey tiles */
  --paper: #ffffff;
  --surface: #ffffff;
  --tile: #eeeff2;
  --ink: #010205;
  --ink-2: #313236;
  --muted: #6b6d70;
  --line: #d8d8db;
  --line-strong: #949598;
  --font: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Barlow Semi Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  /* tenant (defaults) */
  --brand: #0b6b3a;
  --brand-2: #053d22;
  --accent: #e0b43c;
  --brand-ink: #ffffff;
  /* state */
  --live: #c4281c;
  --live-soft: #fbeae8;
  --ok: #17784a;
  --ok-soft: #e6f3ec;
  --warn: #9a5b00;
  --warn-soft: #fbf0dc;
}

html, body { background: var(--paper); color: var(--ink); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font);
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; }
h1 b, h2 b, h3 b, h1 strong, h2 strong { font-weight: 500; }
::selection { background: color-mix(in srgb, var(--brand) 20%, white); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- brand helpers (legacy names kept; gradients removed on purpose) ---------- */
.bg-brand, .bg-brand-grad { background: var(--brand); }
.bg-brand-2 { background: var(--brand-2); }
.bg-accent { background: var(--accent); }
.text-brand { color: var(--brand); }
.text-brand-ink { color: var(--brand-ink); }
.text-accent { color: var(--accent); }
.border-brand { border-color: var(--brand); }
.ring-brand { --tw-ring-color: var(--brand); }

/* ---------- type helpers (all Barlow; numbers tabular) ---------- */
.font-serif, .lot-title { font-family: var(--font-display) !important; }
.lot-title { font-weight: 400; letter-spacing: -.01em; line-height: 1.15; }
.font-mono, .price, .lot, .num { font-family: var(--font) !important; font-variant-numeric: tabular-nums; }
.price { font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.lot { font-size: 14px; color: var(--muted); letter-spacing: .02em; }
.eyebrow { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.meta { font-size: 14px; color: var(--muted); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 400; }
.link-arrow::before { content: "→"; transition: transform .15s; }
.link-arrow:hover::before { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- surfaces ---------- */
.panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tile { background: var(--tile); border-radius: 12px; }
.elevated { background: var(--surface); border-radius: 12px; box-shadow: 0 2px 10px rgba(1,2,5,.08); }
.rule { border-top: 1px solid var(--line); }
.divide-line > * + * { border-top: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px;
  border-radius: 8px; padding: 0 1.25rem; font-weight: 400; font-size: 16px; line-height: 1;
  border: 1px solid transparent; transition: background-color .12s, border-color .12s, color .12s; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-lg { min-height: 54px; font-size: 16px; padding: 0 1.75rem; }
.btn-sm { min-height: 36px; font-size: 14px; padding: 0 .9rem; }
.btn-brand { background: var(--ink); color: #fff; }
.btn-brand:hover:not(:disabled) { background: #3b3c40; }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-outline:hover:not(:disabled) { background: var(--tile); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-danger { background: var(--live); color: #fff; }
.btn-link { color: var(--ink); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- forms ---------- */
.input { width: 100%; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 8px; padding: .55rem .9rem;
  font-size: 16px; background: var(--surface); color: var(--ink); } /* 16px: stops iOS zoom on focus */
.input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: transparent; }
.input[aria-invalid="true"] { border-color: var(--live); }
.label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: .35rem; }
.field-error { font-size: 13px; color: var(--live); margin-top: .3rem; }
.hint { font-size: 13px; color: var(--muted); margin-top: .3rem; }

/* ---------- status (dot + text) ---------- */
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: none; }
.status-live { color: var(--live); } .status-live::before { background: var(--live); animation: pulse 1.6s ease-in-out infinite; }
.status-upcoming { color: var(--warn); } .status-upcoming::before { background: var(--warn); }
.status-ended { color: var(--muted); }
.status-ok { color: var(--ok); } .status-ok::before { background: var(--ok); }
.status-warn { color: var(--warn); } .status-warn::before { background: var(--warn); }
.status-bad { color: var(--live); } .status-bad::before { background: var(--live); }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted);
  padding: .6rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num, .table td.num { text-align: right; }
.table th.num { font-family: inherit; text-align: right; }
.is-soon { color: var(--live); }

/* ---------- tabs (underline) ---------- */
.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: .8rem 0; font-size: 16px; font-weight: 400; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.tab .count { font-variant-numeric: tabular-nums; color: var(--muted); margin-left: .35rem; }

/* ---------- header nav ---------- */
.nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .7rem .75rem; font-size: 16px; font-weight: 400;
  color: color-mix(in srgb, var(--brand-ink) 82%, transparent); cursor: pointer; list-style: none; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--brand-ink); }
.nav-active { color: var(--brand-ink); border-bottom-color: currentColor; font-weight: 400; }
details.eb-dd > summary::-webkit-details-marker { display: none; }
details.eb-dd > summary { list-style: none; }
.eb-dd-menu { position: absolute; left: 0; top: calc(100% + 2px); min-width: 210px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(1,2,5,.14); padding: .4rem 0; z-index: 60; }
.eb-dd-menu a { display: block; padding: .6rem 1.1rem; font-size: 16px; color: var(--ink); }
.eb-dd-menu a:hover { background: var(--tile); }
@media (max-width: 767px) {
  .eb-dd-menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 .25rem .75rem; }
  .eb-dd-menu a { color: color-mix(in srgb, var(--brand-ink) 85%, transparent); }
  .eb-dd-menu a:hover { background: transparent; color: var(--brand-ink); }
}

/* ---------- logo mark ---------- */
.logo-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 8px;
  background: var(--brand); color: #fff; font: 600 13px/1 var(--font); letter-spacing: .04em; }

/* ---------- site header (white, ink text; overrides brand-ink locally) ---------- */
/* the wrapper must not be the sticky header's containing block, or the header scrolls away */
#eb-header { display: contents; }
.site-header { --brand-ink: var(--ink); background: rgba(255,255,255,.96); color: var(--ink); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
.site-header .nav-active { border-bottom-color: var(--ink); }

/* ---------- full-bleed photo with text overlay (hero) ---------- */
.hero-photo { position: relative; overflow: hidden; background: #0e0f11; color: #fff; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(1,2,5,.72), rgba(1,2,5,.15) 55%, rgba(1,2,5,0)); pointer-events: none; }
.hero-photo .hero-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

/* ---------- feedback ---------- */
.eb-toast { transition: opacity .25s, transform .25s; }
.eb-modal-actions { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { background: var(--tile); } 100% { background: transparent; } }
.bump { animation: bump .45s ease-out; }
@keyframes bump { 0% { transform: translateY(-3px); opacity: .5; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flash, .bump, .status-live::before { animation: none !important; } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
img { max-width: 100%; }
/* keep the footer at the bottom on short pages */
main, #app { min-height: calc(100vh - 260px); }

/* ---------- phones (placed last so it wins over the base rules above) ---------- */
@media (max-width: 767px) {
  .btn, .input { min-height: 48px; }
  .btn-sm { min-height: 44px; }
  .eb-foot-link { display: inline-flex; align-items: center; min-height: 44px; }
  .link-arrow { min-height: 44px; }
  .eyebrow, .table th, .status { font-size: 14px; }
  .tab { padding: .8rem 0; }
  .nav-link { min-height: 44px; }
  .eb-dd-menu a { padding-top: .7rem; padding-bottom: .7rem; }
}

/* toasts: top on phones (bottom bars stay visible), bottom-right on larger screens */
.eb-toasts { top: calc(env(safe-area-inset-top, 0px) + 76px); }
@media (min-width: 640px) { .eb-toasts { top: auto; bottom: 1rem; } }

/* buttons on dark photos */
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover:not(:disabled) { background: #e4e5e8; }
.btn-outline-light { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-outline-light:hover:not(:disabled) { background: rgba(255,255,255,.14); }