/* ============================================================
   base.css — Variables, resets, typography, buttons, frame shell,
              menubar, common components.
   Stars Antique Market POS
   ============================================================ */

/* ---- custom properties ---- */
:root{
  --bg:#f4f6f9; --panel:#fff; --line:#dde3ea; --line-soft:#eef1f5;
  --ink:#0f1b26; --ink-soft:#5a6a78; --ink-faint:#93a1af;
  --accent:#0d8b7d; --accent-ink:#fff; --sel:#dcf3ef; --sel-ink:#0a3b35;
  --head:#0f1b26; --ok:#16875a; --warn:#e8b93b; --stop:#c2402f;

  --sh-1:0 1px 2px rgba(15,27,38,.05);
  --sh-2:0 1px 3px rgba(15,27,38,.07),0 4px 12px rgba(15,27,38,.05);
  --sh-3:0 2px 6px rgba(15,27,38,.09),0 12px 32px rgba(15,27,38,.10);
  --r:9px;
  --r-s:6px;

  --fin:#12924e; --fin-ink:#fff;
  --clr:#f2c200; --clr-ink:#3a2e00;
  --exit:#c8372a; --exit-ink:#fff;
  --mop:#1f4fd8; --mop-ink:#fff;
  --tender:#d4f3fc; --tender-line:#6fc7de;
  --change:#d5f5dd; --change-line:#72c98a;

  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ui:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,
       "Helvetica Neue",sans-serif;
}

/* ---- resets ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--ui);font-size:13px;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
button{font:inherit;color:inherit}
button,input,select,.card,.sblock{transition:background-color .13s ease,
  border-color .13s ease,color .13s ease,box-shadow .13s ease}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- frame ---- */
.app{display:grid;grid-template-rows:auto auto minmax(0,1fr);
  height:100vh;height:100dvh}

/* ---- title bar ---- */
.title{background:linear-gradient(180deg,#16273a 0%,var(--head) 100%);
  color:#fff;padding:9px 16px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--sh-1);position:relative;z-index:3}
.title b{font-weight:650;letter-spacing:-.01em;font-size:14px}
.title .btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.20);
  color:#e3ebf0;padding:5px 13px;box-shadow:none}
.title .btn:hover{background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.45);color:#fff}
.title .sp{flex:1}
.title small{color:#9fb0bb;font-family:var(--mono);font-size:11px}

/* ---- menubar ---- */
.menubar{background:#1c2c3c;border-bottom:1px solid #0b1218;display:flex;
  gap:2px;padding:0 8px;box-shadow:var(--sh-1);position:relative;z-index:20}
.menu{position:relative}
.mtitle{background:none;border:0;padding:9px 12px;cursor:pointer;color:#b7c7d4;
  font-weight:600;font-size:12.5px;border-radius:var(--r-s) var(--r-s) 0 0}
.mtitle:hover{background:rgba(255,255,255,.08);color:#fff}
.menu.open .mtitle{background:var(--panel);color:var(--ink)}
.mtitle:focus-visible{outline:2px solid #3fc7b4;outline-offset:-2px}
.mtitle.home{margin-right:6px;font-weight:700;color:#fff}
.mtitle.home[aria-current="true"]{background:rgba(13,139,125,.28);
  box-shadow:inset 0 -2px 0 #3fc7b4}
.mdrop{display:none;position:absolute;top:100%;left:0;min-width:250px;
  background:var(--panel);border:1px solid var(--line);border-top:0;
  border-radius:0 var(--r-s) var(--r-s) var(--r-s);box-shadow:var(--sh-3);
  padding:5px 0;z-index:30;max-height:78vh;overflow:auto}
.menu.open .mdrop{display:block}
.mitem{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:none;border:0;padding:6px 14px;cursor:pointer;font-size:12.5px;
  color:var(--ink);white-space:nowrap}
.mitem:hover:not(:disabled){background:var(--accent);color:#fff}
.mitem:hover:not(:disabled) kbd{color:#dff2ef}
.mitem kbd{margin-left:auto;font-family:var(--mono);font-size:11px;
  color:var(--ink-faint)}
.mitem:disabled{color:var(--ink-faint);cursor:default}
.mitem[aria-current="true"]{font-weight:700}
.mitem[aria-current="true"]::after{content:"\2022";margin-left:8px;
  color:var(--accent)}
.msep{height:1px;background:var(--line-soft);margin:5px 0}

/* ---- buttons ---- */
.btn{padding:6px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;cursor:pointer;font-weight:600;box-shadow:var(--sh-1)}
.btn:hover{border-color:var(--accent);color:var(--accent);
  box-shadow:var(--sh-2)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(13,139,125,.20)}
.btn:disabled{color:var(--ink-faint);background:#f5f7f9;cursor:default;
  border-color:var(--line-soft);box-shadow:none;transform:none}
.btn:disabled:hover{color:var(--ink-faint)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--sh-2)}
.btn.pri:hover{background:#0a7a6d;border-color:#0a7a6d;color:#fff;
  box-shadow:var(--sh-3)}

/* ---- card ---- */
.card{background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--sh-2)}

/* ---- empty state ---- */
.empty{padding:40px;text-align:center;color:var(--ink-faint)}

/* ---- pill badge ---- */
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;
  font-family:var(--mono);border:1px solid var(--line);color:var(--ink-soft)}
.pill.d{border-color:var(--accent);color:var(--accent)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--head);color:#fff;padding:12px 20px;border-radius:var(--r);
  box-shadow:var(--sh-3);z-index:50;max-width:80vw;font-weight:600}
.toast.bad{background:var(--stop)}

/* ---- separator ---- */
hr.sep{border:0;border-top:1px solid var(--line-soft);margin:7px 0}
.grpsep{grid-column:1/-1;height:0;border-top:1px solid var(--line-soft);
  margin:5px 0}

/* ---- modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,27,38,.42);
  backdrop-filter:blur(2px);display:flex;align-items:center;
  justify-content:center;z-index:200}
.modal{background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r);box-shadow:var(--sh-3);width:90%;max-width:480px}
.modal-head{padding:14px 18px;font-weight:700;font-size:15px;
  border-bottom:1px solid var(--line-soft)}
.modal-body{padding:18px}
.modal-foot{padding:12px 18px;display:flex;gap:8px;justify-content:flex-end;
  border-top:1px solid var(--line-soft)}