/* E.K Elite Motors — invoice admin. Site design language:
   white, ink #111213, off-white cards #f6f5f2, Inter, shadows only. */

* { box-sizing: border-box; margin: 0; }
:root { --ink: #111213; --card: #f6f5f2; --gray: #6e6e73; --line: #e8e6e1; }
body { background: #fff; color: var(--ink);
  font: 400 15px/1.5 Inter, -apple-system, "Segoe UI", sans-serif; }

.top { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.word { font-size: 17px; font-weight: 800; }
.word span { font-weight: 500; }
.word em { font-style: normal; font-weight: 500; color: var(--gray); margin-left: 8px; }

main { max-width: 1060px; margin: 0 auto; padding: 22px 18px 80px; }
.loading { color: var(--gray); padding: 40px 0; text-align: center; }

.btn { border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer;
  font: 700 14px Inter, sans-serif; background: var(--card); color: var(--ink);
  transition: transform .06s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }
.btn.danger { color: #a33; }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- dashboard ---------- */
.tools { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tools input { flex: 1; min-width: 220px; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; font: 400 14px Inter, sans-serif; }
.chips { display: flex; gap: 6px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 14px; font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.invrow { display: grid; grid-template-columns: 110px 1fr 120px 110px auto;
  gap: 12px; align-items: center; background: var(--card); border-radius: 12px;
  padding: 13px 16px; margin-bottom: 8px; }
.invrow .num { font-weight: 700; font-size: 13.5px; }
.invrow .date { font-size: 11.5px; color: var(--gray); }
.invrow .who { font-weight: 600; }
.invrow .what { font-size: 12.5px; color: var(--gray); }
.invrow .amt { font-weight: 800; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.invrow .kind { font-size: 11px; color: var(--gray); text-align: right; text-transform: capitalize; }
.status { justify-self: start; font: 700 10.5px Inter, sans-serif; letter-spacing: .07em;
  border-radius: 6px; padding: 4px 9px; }
.status.draft { background: #e8e6e1; color: #555; }
.status.sent  { background: #f3e8c8; color: #8a6d1d; }
.status.paid  { background: #dcecdf; color: #2e6b3f; }
.status.void  { background: #eee; color: #999; text-decoration: line-through; }
.status.refunded { background: #e4e0f2; color: #4a3d78; }
.rowbtns { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.empty { text-align: center; color: var(--gray); padding: 50px 0; }
@media (max-width: 760px) {
  .invrow { grid-template-columns: 1fr auto; }
  .invrow .amt, .invrow .kind { text-align: left; }
  .rowbtns { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- wizard ---------- */
.crumbs { display: flex; gap: 8px; align-items: center; color: var(--gray);
  font-size: 13px; margin-bottom: 18px; }
.crumbs b { color: var(--ink); }
.back { cursor: pointer; border: 0; background: none; font: 600 13px Inter, sans-serif;
  color: var(--gray); padding: 0; margin-right: 6px; }

.cargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.carcard { background: var(--card); border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: transform .08s, box-shadow .08s; position: relative; }
.carcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17,18,19,.10); }
.carcard img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: #e4e2dd; }
.carcard .cc { padding: 10px 12px 12px; }
.carcard .t { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.carcard .f { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--gray); }
.carcard .reg { font-family: "Courier New", monospace; font-weight: 700; background: #ffd307;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; padding: 0 6px; font-size: 11.5px; }
.carcard .flag { position: absolute; top: 8px; left: 8px; font: 800 10px Inter, sans-serif;
  letter-spacing: .06em; background: var(--ink); color: #fff; border-radius: 5px; padding: 4px 8px; }
.carcard .flag.res { background: #8a6d1d; }
.carcard.other { display: flex; align-items: center; justify-content: center;
  min-height: 130px; font-weight: 700; color: var(--gray); border: 1.5px dashed var(--line); background: #fff; }

.statebanner { background: var(--card); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 14px; font-size: 13.5px; }
.statebanner b { margin-bottom: 2px; }
.invline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #fff; border-radius: 9px; padding: 9px 12px; margin-top: 8px;
  font-size: 13px; }
.invline b { font-weight: 700; }
.invline a { margin-left: auto; font-weight: 700; color: var(--ink);
  text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.kindbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.kindbtn { background: var(--card); border: 2px solid transparent; border-radius: 12px;
  padding: 16px; text-align: left; cursor: pointer; font: inherit; }
.kindbtn:hover { border-color: var(--ink); }
.kindbtn b { display: block; font-size: 15px; }
.kindbtn span { font-size: 12.5px; color: var(--gray); }

.hero { display: flex; gap: 14px; align-items: center; background: var(--card);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.hero img { width: 150px; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; background: #e4e2dd; }
.hero .t { font-size: 17px; font-weight: 800; }
.hero .f { display: flex; gap: 12px; margin-top: 5px; font-size: 12.5px; color: var(--gray); align-items: center; flex-wrap: wrap; }
.hero .reg { font-family: "Courier New", monospace; font-weight: 700; background: #ffd307;
  color: var(--ink); border: 1px solid var(--ink); border-radius: 4px; padding: 0 7px; }

form.inv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; }
form.inv .full { grid-column: 1 / -1; }
form.inv label { display: block; font: 600 11px Inter, sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gray); margin-bottom: 5px; }
form.inv input, form.inv textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font: 400 14.5px Inter, sans-serif; background: #fff; }
form.inv textarea { min-height: 64px; resize: vertical; }
form.inv .money { position: relative; }
form.inv .money::before { content: "£"; position: absolute; left: 12px; top: 36px; font-weight: 700; }
form.inv .money input { padding-left: 26px; font-weight: 700; }
.formfoot { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; }
.err { grid-column: 1 / -1; color: #a33; font-size: 13px; min-height: 18px; }
@media (max-width: 640px) { form.inv { grid-template-columns: 1fr; } }
/* 16px inputs stop mobile browsers auto-zooming on focus */
@media (max-width: 760px) {
  input, textarea { font-size: 16px !important; }
  .pvwrap { padding: 6px; }
  .pvwrap iframe { height: 72vh; }
  main { overflow-x: hidden; }
}

/* ---------- preview ---------- */
.pvwrap { background: #eceae6; border-radius: 14px; padding: 14px; }
.pvwrap iframe { width: 100%; height: 78vh; border: 0; border-radius: 8px; background: #fff; }
.pvbar { display: flex; gap: 10px; margin: 14px 0 0; flex-wrap: wrap; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 10px; padding: 11px 18px;
  font: 600 13.5px Inter, sans-serif; box-shadow: 0 10px 26px rgba(17,18,19,.25); z-index: 20; }