/* StallPOS portal.css — shared design tokens + chrome for merchant-portal pages.
 * Served at /assets/portal.css. Brand: maroon #7a1f1f on warm #faf7f2, white
 * cards, system-ui, radius 8–14px. Page-local <style> blocks extend this. */

:root {
  --maroon: #7a1f1f;
  --maroon-soft: #ffd9d9;
  --bg: #faf7f2;
  --card: #fff;
  --line: #eee;
  --ink: #222;
  --muted: #777;
  --faint: #999;
  --green: #1c6b1c;
  --green-bg: #e8f5e8;
  --red: #a33333;
  --red-bg: #fde8e8;
  --amber: #8a6d1a;
  --amber-bg: #fff8e8;
  --amber-line: #caa53d;
}

* { box-sizing: border-box }
body { font-family: system-ui, Arial, sans-serif; background: var(--bg); color: var(--ink); margin: 0; min-height: 100vh; display: flex; flex-direction: column }

/* ── top bar ─────────────────────────────────────────────── */
.bar { background: var(--maroon); color: #fff; padding: 14px 20px; font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px }
.bar .sub-brand { font-weight: 400; font-size: 14px }
.bar a { color: var(--maroon-soft); font-size: 13px; text-decoration: none; font-weight: 600 }
.bar .bar-right { display: flex; gap: 14px; align-items: center }

/* ── layout ──────────────────────────────────────────────── */
.wrap { max-width: var(--wrap, 880px); width: 100%; margin: 22px auto; padding: 0 16px; flex: 1 }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 16px }
.card.thin { padding: 12px 16px }
h1, h2, h3 { margin: 0 0 4px }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 14px }
.mini { font-size: 12px; color: var(--faint) }
.hint { font-size: 12px; color: #888; margin-top: 4px }
.hint.bad { color: #a33 }
.foot { color: var(--faint); font-size: 12px; text-align: center; padding: 18px }
#loading { color: #888; text-align: center; padding: 36px 12px; font-size: 14px }

/* shop-context header (dashboard pattern: name + slug on one line) */
.shop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap }
.shop-head h2 { margin: 0; font-size: 20px }
.slugline { color: var(--faint); font-size: 12px; margin-top: 2px }
.chipst { display: inline-block; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 5px 12px; white-space: nowrap }
.chipst.grey { background: #eee; color: #555 }
.chipst.orange { background: #fff3df; color: var(--amber) }
.chipst.green { background: var(--green-bg); color: var(--green) }
.chipst.red { background: var(--red-bg); color: var(--red) }

/* ── buttons: primary maroon / outline ghost / neutral quiet ── */
.btn { background: var(--maroon); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font-family: inherit }
.btn:disabled { opacity: .5; cursor: default }
.btn.ghost { background: #fff; color: var(--maroon); border: 1px solid var(--maroon) }
.btn.quiet { background: #fff; color: #555; border: 1px solid #ddd }
.btn.danger { background: var(--red) }
.btn.tiny { padding: 6px 10px; font-size: 12px; border-radius: 6px }
.btn.big { display: flex; width: 100%; padding: 13px 16px; font-size: 16px; border-radius: 10px; justify-content: center; margin-top: 12px }
.btn svg { width: 16px; height: 16px; flex: none }

/* icon-only square button (list row actions) */
.ibtn { background: #fff; border: 1px solid #ddd; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #666; padding: 0 }
.ibtn:hover { border-color: var(--maroon); color: var(--maroon) }
.ibtn.danger:hover { border-color: var(--red); color: var(--red) }
.ibtn svg { width: 16px; height: 16px }

/* ── forms ───────────────────────────────────────────────── */
label { display: block; font-size: 13px; margin: 10px 0 4px; color: #444 }
input, select, textarea { font-family: inherit }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff }
input:focus, select:focus, textarea:focus { outline: 2px solid #7a1f1f33; border-color: var(--maroon) }
input[readonly] { background: var(--bg); color: #888 }
textarea { resize: vertical }
.chkrow { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; font-size: 14px }
.chkrow input { width: auto }

/* ── messages / toasts ───────────────────────────────────── */
.msg { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 10px 0; display: none }
.msg.err { background: var(--red-bg); color: var(--maroon); display: block }
.msg.ok { background: var(--green-bg); color: var(--green); display: block }
#boot-err { display: none; background: var(--red-bg); color: var(--maroon); border-radius: 10px; padding: 14px 18px; margin: 16px; font-size: 14px }
#toasts { position: fixed; right: 14px; bottom: 14px; z-index: 80; display: flex; flex-direction: column; gap: 8px }
.toast { background: var(--green); color: #fff; border-radius: 8px; padding: 10px 14px; font-size: 13px; max-width: 320px; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: opacity .3s }
.toast.err { background: var(--red) }
.toast.out { opacity: 0 }

/* ── tables / chips ──────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 13px }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
th { color: #888; font-size: 12px }
.role { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; padding: 1px 7px; font-weight: 600; color: #666 }
#cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; align-items: center }
.chip { background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; color: #444; flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit }
.chip.on { background: var(--maroon); color: #fff; border-color: var(--maroon); font-weight: 600 }
.chip svg { width: 14px; height: 14px }

/* ── empty states ────────────────────────────────────────── */
.empty { text-align: center; color: #888; padding: 36px 16px; font-size: 14px; border: 1px dashed #e2dbd2; border-radius: 10px; background: #fffdf9 }
.empty .btn { margin-top: 12px }
.empty .eic { color: #c9bfb2; margin-bottom: 8px }
.empty .eic svg { width: 34px; height: 34px }

/* ── language pill (injected by portal-i18n.js into #lang-slot) ── */
.lang-pill { position: fixed; top: 64px; right: 14px; z-index: 90; display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: 0 3px 12px rgba(0,0,0,.10); font-size: 12px }
.lang-pill button { background: none; border: 0; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; color: #888; font-family: inherit }
.lang-pill button.on { background: var(--maroon); color: #fff }
.lang-pill .sep { color: #ddd; padding: 0 2px }
@media (max-width: 560px) { .lang-pill { top: 96px; right: 10px } .wrap { margin: 16px auto } }