/* ==========================================================================
   Truffle Retail POS - Web Theme
   Derived from the Android app. Do not invent values.
     colours   -> res/values/colors.xml      (see _colors.css)
     fonts     -> res/font/roboto_*.ttf
     baseline  -> Lenovo TB-J606F, 2000x1200px @ density 204
                  = 1568 x 941 dp, smallestWidth 941dp, sdp/ssp bucket sw900dp
   ========================================================================== */

@import url("_colors.css");

/* ---------- fonts (actual Android TTFs) ---------- */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto_regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto_medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto_bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- responsive scale ----------
   --u is ONE design pixel of the 1568 x 941 canvas.
   Every dimension is calc(var(--u) * N) where N is the Android measurement.
   The layout never changes - only its size. Clamped so it stays usable
   on a small laptop and does not become absurd on 4K.                     */
:root {
  --design-w: 1568;
  --design-h: 941;
  --u: clamp(0.75px, min(100vw / 1568, 100vh / 941), 1.6px);

  /* semantic aliases onto the Android palette */
  --brand:            var(--c-vermilion-orange);   /* #FF4C00 colorPrimary */
  --brand-dark:       var(--c-orange-light_);
  --sidebar-bg:       var(--c-header);             /* #212325 */
  --page-bg:          var(--c-light-silver);
  --card-bg:          #FFFFFF;
  --text-primary:     var(--c-black);
  --text-secondary:   var(--c-shuttle-gray);
  --text-muted:       var(--c-new-gary-txt);
  --border:           var(--c-chinese-white);
  --border-strong:    var(--c-dark-silver);
  --price:            var(--c-dark-green2);        /* cart price green */
  --danger:           var(--c-red);
  --success:          var(--c-new-green);
  --toast-bg:         var(--c-new-green);
}

*, *::before, *::after { box-sizing: border-box; }

html, body, input, select, textarea, button, label {
  margin: 0; padding: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html, body {
  height: 100%;
  background: var(--card-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* POS is a fixed terminal surface - never scroll the page itself */
body { overflow: hidden; }

/* ---------- type scale (from themes.xml / measured captures) ---------- */
.t-title   { font-size: calc(var(--u) * 30); font-weight: 700; }
.t-heading { font-size: calc(var(--u) * 26); font-weight: 700; }
.t-body    { font-size: calc(var(--u) * 22); font-weight: 400; }
.t-label   { font-size: calc(var(--u) * 22); font-weight: 400; }
.t-small   { font-size: calc(var(--u) * 18); font-weight: 400; }

/* ---------- shared primitives ---------- */
.pos-field {
  width: 100%;
  height: calc(var(--u) * 72);
  padding: 0 calc(var(--u) * 24);
  font-family: inherit;
  font-size: calc(var(--u) * 24);
  color: var(--text-primary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--u) * 4);
  outline: none;
}
.pos-field::placeholder { color: var(--c-gray-light); }
.pos-field:focus { border-color: var(--brand); }

.pos-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--u) * 72);
  padding: 0 calc(var(--u) * 40);
  font-family: inherit;
  font-size: calc(var(--u) * 26);
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: calc(var(--u) * 4);
  cursor: pointer;
  user-select: none;
}
.pos-btn:active { filter: brightness(0.92); }
.pos-btn--ghost {
  color: var(--brand);
  background: transparent;
  border: 1px solid var(--brand);
}
.pos-btn--grey { background: var(--c-dark-gray); color: var(--text-primary); }

.pos-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--u) * 8);
}

/* ---------- toast (green pill, centred) ---------- */
.pos-toast {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: calc(var(--u) * 14) calc(var(--u) * 26);
  font-size: calc(var(--u) * 22);
  color: #fff;
  background: var(--toast-bg);
  border-radius: calc(var(--u) * 8);
  z-index: 9000;
  pointer-events: none;
  animation: toast-fade 3s forwards;
}
.pos-toast--error { background: var(--danger); }
@keyframes toast-fade {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; }
}