/* ============================================================
   base.css — Variables, resets, typography, buttons, frame shell,
              menubar, common components.
   SAVD — Sales And Vendor Database
   ============================================================ */

/* ---- 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 .brand{height:34px;display:block}
/* SAVD's logo at the top of a sign-in or registration dialog */
.dlg-brand{height:46px;display:block;margin:0 auto 14px}
.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)}

/* ---- sign-in cards: SAVD's wordmark on top, the kind of sign-in under it,
   and the SAVD cube in the corner of the screen ---- */
.brand-head{padding:22px 20px 14px;text-align:center;border-bottom:1px solid var(--line-soft, #eef1f5)}
.brand-head img{width:210px;max-width:80%;display:block;margin:0 auto}
.brand-head .which{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent, #0d8b7d);font-weight:700}
.brand-head .what{margin-top:2px;font-size:18px;font-weight:650;color:var(--ink, #0f1b26)}
.corner-cube{position:fixed;right:22px;bottom:18px;width:92px;height:92px;perspective:640px;
  pointer-events:none;z-index:1;opacity:.95}
@media (max-width:600px){.corner-cube{width:56px;height:56px;right:10px;bottom:10px}}
/* The SAVD cube, spinning in 3D -- the corner mark on every login screen.
   Faces are scoped under .corner-cube so they never touch the splash cubes. */
.corner-cube .cube3d{position:absolute;left:14px;top:14px;width:64px;height:64px;
  transform-style:preserve-3d;animation:cubespin 7s linear infinite}
@keyframes cubespin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
.corner-cube .cf{position:absolute;width:64px;height:64px;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:22px;letter-spacing:-2.7px;color:#7d848c;
  border:1.5px solid #0093a3;box-sizing:border-box;overflow:hidden}
.corner-cube .cf::after{transform:scale(2.6);position:relative;left:-1px}
.corner-cube .front{background:#00e5ff;transform:translateZ(32px)}
.corner-cube .front::after{content:"SA"}
.corner-cube .right{background:#00bcd4;transform:rotateY(90deg) translateZ(32px)}
.corner-cube .right::after{content:"VD"}
.corner-cube .back{background:#00e5ff;transform:rotateY(180deg) translateZ(32px)}
.corner-cube .back::after{content:"SA"}
.corner-cube .left{background:#00bcd4;transform:rotateY(-90deg) translateZ(32px)}
.corner-cube .left::after{content:"VD"}
.corner-cube .top{background:#007a87;transform:rotateX(90deg) translateZ(32px)}
.corner-cube .bottom{background:#005b66;transform:rotateX(-90deg) translateZ(32px)}
@media (max-width:600px){
  .corner-cube .cube3d{left:8px;top:8px;width:40px;height:40px}
  .corner-cube .cf{width:40px;height:40px;font-size:14px;letter-spacing:-1.7px}
  .corner-cube .front{transform:translateZ(20px)}
  .corner-cube .right{transform:rotateY(90deg) translateZ(20px)}
  .corner-cube .back{transform:rotateY(180deg) translateZ(20px)}
  .corner-cube .left{transform:rotateY(-90deg) translateZ(20px)}
  .corner-cube .top{transform:rotateX(90deg) translateZ(20px)}
  .corner-cube .bottom{transform:rotateX(-90deg) translateZ(20px)}}