/* ============================================================
   EIDSHOW VENDOR CONSOLE — shared design system
   Used by all admin + vendor portal screens.
   ============================================================ */

:root {
  --ivory: #FAF6EF;
  --ivory-2: #F3ECE0;
  --paper: #FFFDF8;
  --paper-2: #FBF7EE;
  --ink: #17160F;
  --ink-2: #3A352A;
  --muted: #7A7262;
  --rule: #E8DFCD;
  --rule-strong: #D6C9AE;
  --emerald: #1F3D2E;
  --emerald-2: #2B5540;
  --emerald-3: #E6EFE8;
  --gold: #B8894A;
  --gold-2: #8F6A36;
  --gold-soft: #EFE2C7;
  --gold-softer: #F9F1DE;
  --amber: #C47A2B;
  --amber-soft: #F7EBD6;
  --claret: #8E2B2B;
  --claret-soft: #F3E0DE;
  --info: #1F3550;
  --info-soft: #E6ECF3;

  --shadow-card: 0 1px 0 rgba(23,22,15,.04), 0 12px 32px -20px rgba(23,22,15,.18);
  --shadow-pop: 0 20px 60px -30px rgba(23,22,15,.4), 0 4px 12px -6px rgba(23,22,15,.12);
  --shadow-drawer: -20px 0 60px -30px rgba(23,22,15,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01','cv11';
  background: var(--ivory);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px; line-height: 1.45;
}
a { color: inherit; }
input, select, button, textarea { font-family: inherit; }

/* --- Brand mark --- */
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 30% 20%, #FFF6E2 0%, var(--gold-soft) 55%, #D9B87A 100%);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(143,106,54,.25), 0 2px 6px rgba(184,137,74,.18);
  overflow: hidden; flex: 0 0 44px;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brand-name {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em; color: var(--ink);
  line-height: 1.1;
}
.brand-name em { font-style: italic; color: var(--gold-2); font-weight: 500; }
.brand-sub {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 8px;
  font: 500 13px 'Inter', sans-serif;
  border: 1px solid var(--rule-strong);
  background: var(--paper); color: var(--ink);
  cursor: pointer; transition: all .14s ease;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-2); }
.btn svg { width: 14px; height: 14px; }
.btn.primary {
  background: var(--emerald); color: var(--gold-soft); border-color: var(--emerald);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px -10px rgba(31,61,46,.6);
}
.btn.primary:hover { background: var(--emerald-2); }
.btn.gold {
  background: linear-gradient(180deg, #E7C688 0%, #B8894A 100%);
  color: #2B1E0A; border: 1px solid #8F6A36;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 20px -14px rgba(143,106,54,.7);
  font-weight: 600;
}
.btn.danger {
  background: #FBECEA; color: var(--claret); border-color: #E8C6C2;
}
.btn.danger:hover { background: var(--claret); color: #FBECEA; border-color: var(--claret); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--ivory-2); }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.lg { padding: 11px 18px; font-size: 14px; border-radius: 10px; }
.btn.full { width: 100%; justify-content: center; }

/* --- Pills / status --- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.pill.approved { background: var(--emerald-3); color: var(--emerald); }
.pill.approved .dot { background: var(--emerald); }
.pill.pending { background: var(--amber-soft); color: #6E4512; }
.pill.pending .dot { background: var(--amber); animation: pulse 1.6s infinite; }
.pill.rejected { background: var(--claret-soft); color: var(--claret); }
.pill.rejected .dot { background: var(--claret); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.info .dot { background: #3E5C7B; }
.pill.draft { background: var(--ivory-2); color: var(--muted); }
.pill.draft .dot { background: var(--muted); }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,122,43,.5); }
  50% { box-shadow: 0 0 0 5px rgba(196,122,43,0); }
}

/* --- Type tags --- */
.type-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-2); white-space: nowrap;
}
.type-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.85; }
.type-tag.retail { color: #8F6A36; border-color: #E0CFA2; background: #FBF4E1; }
.type-tag.food { color: #8E2B2B; border-color: #EED1CD; background: #FBEAE6; }
.type-tag.service { color: #3F2960; border-color: #DDD0EA; background: #F3ECFA; }
.type-tag.craft { color: #5D6828; border-color: #D8DAB2; background: #F2F3D7; }
.type-tag.nonprofit { color: var(--emerald); border-color: #CDE0D3; background: var(--emerald-3); }

/* --- Fields --- */
.field {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 10px;
  color: var(--ink-2); font-size: 13px;
  min-width: 0;
}
.field svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 14px; }
.field input, .field select, .field textarea {
  border: 0; background: transparent; outline: 0; width: 100%;
  font: inherit; color: var(--ink);
}
.field.focus, .field:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 3px var(--gold-soft); }

.label {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}

/* --- Checkbox --- */
.check {
  appearance: none; width: 16px; height: 16px;
  border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--paper);
  display: inline-grid; place-items: center; cursor: pointer;
}
.check:checked { background: var(--ink); border-color: var(--ink); }
.check:checked::after {
  content: ''; width: 8px; height: 4px;
  border-left: 1.6px solid var(--gold-soft);
  border-bottom: 1.6px solid var(--gold-soft);
  transform: translateY(-1px) rotate(-45deg);
}

/* --- Card --- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

/* --- Vendor avatar colors --- */
.vendor-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--gold-soft);
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  flex: 0 0 36px;
}
.vendor-avatar.v1 { background: linear-gradient(140deg, #2B5540, #1F3D2E); }
.vendor-avatar.v2 { background: linear-gradient(140deg, #B8894A, #8F6A36); color: #2B1E0A; }
.vendor-avatar.v3 { background: linear-gradient(140deg, #7B3A2F, #4D2018); }
.vendor-avatar.v4 { background: linear-gradient(140deg, #3E5C7B, #1F3550); }
.vendor-avatar.v5 { background: linear-gradient(140deg, #6D4A8F, #3F2960); }
.vendor-avatar.v6 { background: linear-gradient(140deg, #8E9A4A, #5D6828); }
.vendor-avatar.v7 { background: linear-gradient(140deg, #C47A2B, #8F4F12); color: #2B1E0A; }
.vendor-avatar.v8 { background: linear-gradient(140deg, #2F6B63, #174B43); }

/* --- H1 editorial --- */
h1.editorial {
  margin: 0; font-family: 'Fraunces', serif; font-weight: 400;
  letter-spacing: -0.02em; font-size: 40px; line-height: 1.05; color: var(--ink);
}
h1.editorial em { font-style: italic; color: var(--gold-2); font-weight: 400; }

/* --- mono utility --- */
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }