/* =========================================
   Intnt Vendor Hub — Light Theme (matches app.js/classes)
   ========================================= */

:root{
  --bg:#f5f7fb;         /* page background */
  --surface:#ffffff;     /* cards, header, footer */
  --text:#1f2937;        /* main text */
  --muted:#6b7280;       /* secondary text */
  --brand:#2563eb;       /* primary */
  --ok:#16a34a;          /* success */
  --warn:#f59e0b;        /* warning */
  --err:#dc2626;         /* error */
  --border:#e5e7eb;      /* subtle borders */
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Header ---------- */
.app-header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 20px; min-height:64px;
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow); position:sticky; top:0; z-index:2;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; }
.brand img.brand-logo{ height:36px; width:auto; display:block; }

/* Steps */
.steps{ display:flex; gap:8px; flex-wrap:wrap; }
.steps .pill{
  padding:8px 10px; border-radius:999px; font-size:12px;
  background:#eef2ff; color:#1e293b; border:1px solid var(--border);
}
.steps .pill.active{ background:var(--brand); color:#ffffff; border-color:var(--brand); }

/* ---------- Main ---------- */
.app-main{ max-width:980px; margin:20px auto; padding:0 16px 60px; }

/* Cards / containers used by components */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow); }
.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

label{ display:block; margin:2px 0 6px; font-size:13px; color:#374151; }

/* Inputs */
input[type=text], input[type=email], input[type=url], input[type=number], select, textarea {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
}
textarea{ min-height:96px }
input::placeholder, textarea::placeholder{ color:var(--muted); }

/* Buttons */
button.btn{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:#eef2ff; color:#1e293b; cursor:pointer; }
button.btn.primary{ background:var(--brand); border-color:var(--brand); color:#ffffff; font-weight:600; }
button.btn.ghost{ background:transparent; border-color:var(--border); color:var(--text); }
button.btn:disabled{ opacity:.6; cursor:not-allowed }

/* Grids used by multiSelect */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }

/* Key-value rows */
.kv{ display:flex; gap:10px; align-items:center }

/* Badges, small text, helper messages */
.badge{ padding:4px 8px; border-radius:999px; background:#eef2ff; color:#1f2937; font-size:12px; border:1px solid var(--border); }
.small{ font-size:12px; color:var(--muted) }
.help{ color:var(--muted); font-size:12px }

/* Alerts */
.msg{ padding:12px; border-radius:10px }
.msg.ok{ background:#ecfdf5; border:1px solid #86efac; color:#065f46 }
.msg.err{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d }

/* Tags used by listChips */
.tag{ display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:#eef2ff; margin:4px; border:1px solid var(--border) }
.tag button{ border:none; background:transparent; color:#4b5563; cursor:pointer; margin-left:6px }

/* Tables */
.table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden }
.table th,.table td{ border-bottom:1px solid var(--border); padding:10px; text-align:left }
.table th{ background:#f9fafb; color:#4b5563; font-weight:600 }

/* Slider */
.slider{ width:100% }

/* Footer */
.app-footer{ color:#6b7280; text-align:center; padding:16px; border-top:1px solid var(--border); background:var(--surface) }

/* Accessibility */
a{ color:var(--brand); text-decoration:none }
a:hover, a:focus{ text-decoration:underline }
:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px }

/* Images */
img{ max-width:100%; height:auto; display:block }