/* ============================================================================
   POS PRODUCT LAYER
   Loads after sarp-tokens.css, sarp-components.css and pos.shell.css.

   Everything here maps the class names the POS pages already use onto the
   shared design system, so twenty pages keep their markup and gain the
   palette. Nothing below invents a colour - every value is a token.
   ========================================================================= */

/* ── Page header ────────────────────────────────────────────────────────── */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sarp-s4);
  margin: 0 0 var(--sarp-s4);
}
.page-head h1 {
  margin: 0 0 var(--sarp-s1);
  font-size: var(--sarp-fs-page-title);
  font-weight: var(--sarp-fw-bold);
  letter-spacing: var(--sarp-ls-title);
  color: var(--sarp-text-strong);
}
.page-head p {
  margin: 0;
  font-size: var(--sarp-fs-data);
  color: var(--sarp-text-muted);
  max-width: 80ch;
}

/* The eyebrow is a real type role again. It used to be display:none, which
   left every page shouting its title with no context line above it. */
.eyebrow {
  display: block;
  margin-bottom: var(--sarp-s1);
  font-size: var(--sarp-fs-eyebrow);
  font-weight: var(--sarp-fw-semi);
  letter-spacing: var(--sarp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sarp-action);
}

h2 { margin: 0 0 var(--sarp-s2); font-size: var(--sarp-fs-section); font-weight: var(--sarp-fw-bold); color: var(--sarp-text-strong); }
h3 { margin: 0 0 var(--sarp-s2); font-size: var(--sarp-fs-body); font-weight: var(--sarp-fw-semi); color: var(--sarp-text-strong); }
p  { color: var(--sarp-text-muted); }

/* ── Surfaces ───────────────────────────────────────────────────────────── */

.workspace-card,
.data-card,
.catalog,
.basket {
  padding: var(--sarp-s4);
  margin-bottom: var(--sarp-s4);
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-radius: var(--sarp-r-surface);
  box-shadow: var(--sarp-e1);
}

/* ── Stat tiles ─────────────────────────────────────────────────────────
   One treatment for every number on every page: metric-grid, kpis,
   report-kpis, posting-kpis, kitchen-metrics all used to look different. */

.metric-grid,
.kpis,
.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sarp-s3);
  margin: 0 0 var(--sarp-s4);
}

.metric-card,
.kpis article,
.report-kpis article {
  display: grid;
  gap: var(--sarp-s1);
  padding: 11px var(--sarp-s3) var(--sarp-s3);
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-top: 2px solid var(--sarp-action);
  border-radius: var(--sarp-r-surface);
  box-shadow: var(--sarp-e1);
}
.metric-card span,
.kpis small,
.report-kpis span {
  display: block;
  font-size: var(--sarp-fs-eyebrow);
  font-weight: var(--sarp-fw-semi);
  letter-spacing: var(--sarp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sarp-text-faint);
}
.metric-card strong,
.kpis b,
.report-kpis strong {
  display: block;
  font-size: var(--sarp-fs-metric);
  font-weight: var(--sarp-fw-bold);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sarp-text-strong);
}
/* Net sales is the one figure that earns emphasis on the reports page. */
.report-kpis article.net { background: var(--sarp-surface-dark); border-color: var(--sarp-surface-dark); }
.report-kpis article.net span   { color: var(--sarp-brand-edge); }
.report-kpis article.net strong { color: var(--sarp-n-0); }

/* ── Launch tiles (dashboard) ───────────────────────────────────────────── */

.launch-grid,
.feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sarp-s3);
  margin-bottom: var(--sarp-s4);
}
.launch-grid a,
.feature-strip article {
  display: grid;
  gap: var(--sarp-s1);
  align-content: start;
  padding: var(--sarp-s4);
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-radius: var(--sarp-r-surface);
  box-shadow: var(--sarp-e1);
  text-decoration: none;
  color: var(--sarp-text);
}
.launch-grid a:hover { border-color: var(--sarp-action); box-shadow: var(--sarp-e2); }
.launch-grid a b { font-size: 13px; font-weight: var(--sarp-fw-semi); color: var(--sarp-text-strong); }
.launch-grid span,
.feature-strip span { font-size: var(--sarp-fs-data); color: var(--sarp-text-muted); }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrap { width: 100%; overflow-x: auto; }

.data-table,
.group-table,
.counter-table,
.product-table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sarp-fs-data);
}
.data-table th,
.group-table th,
.counter-table th,
.product-table th,
.monitor th,
.item-register th,
.access-list th,
.customer-list th,
.price-lines th,
.price-history th,
.label-queue th,
.return-lines th {
  padding: var(--sarp-s2) var(--sarp-s3);
  background: var(--sarp-grid-head);
  color: var(--sarp-grid-head-text);
  text-align: left;
  font-size: var(--sarp-fs-caption);
  font-weight: var(--sarp-fw-semi);
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
  border-bottom: 0;
}
.data-table td,
.group-table td,
.counter-table td,
.product-table td,
.monitor td,
.item-register td,
.access-list td,
.customer-list td,
.price-lines td,
.price-history td,
.label-queue td,
.return-lines td {
  padding: var(--sarp-s2) var(--sarp-s3);
  border-bottom: 1px solid var(--sarp-divider);
  color: var(--sarp-text-body);
  vertical-align: middle;
}
tbody tr:hover td { background: var(--sarp-grid-row-hover); }
tbody tr:last-child td { border-bottom: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────
   POS pages call their buttons a dozen different names. They all resolve to
   the two shapes the design system defines: one filled action, one outline. */

.primary,
.secondary-button,
.search-row button,
.filters button,
.actions button,
.tenders button,
.command-card button,
.cycle-card button,
.posting-command button,
.report-filter button,
.station-bar button,
.ticket-actions button,
.chart-action,
.template-button,
.price-search button,
.save-bar button,
.inline-add button,
.add-group,
.item-search button,
.save,
.queue-head button,
.customer-actions button,
.counter-actions button,
.offer-cards article > button,
.return-search button,
.return-total button,
.chooser-actions button,
.register-head a,
.excel-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sarp-s1);
  min-height: var(--sarp-control-h);
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: var(--sarp-r-control);
  background: var(--sarp-action);
  color: var(--sarp-action-text);
  font-size: var(--sarp-fs-body);
  font-weight: var(--sarp-fw-semi);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease;
}
.primary:hover,
.secondary-button:hover,
.search-row button:hover,
.actions button:hover,
.command-card button:hover,
.cycle-card button:hover,
.chart-action:hover,
.template-button:hover,
.save:hover,
.customer-actions button:hover,
.counter-actions button:hover,
.excel-download:hover { background: var(--sarp-action-hover); color: var(--sarp-action-text); }

button:disabled, .chart-action:disabled {
  background: var(--sarp-surface-alt);
  color: var(--sarp-n-400);
  cursor: not-allowed;
}

/* Secondary / cancel / edit - outline, never a second filled colour. */
.cancel,
.actions .secondary,
.customer-actions .cancel,
.cancel-edit,
.edit-item,
.cancel-price,
.edit-price,
.edit-group,
.cancel-group,
.edit,
.remove-button,
.clear-button,
.link-button,
.small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sarp-control-h);
  padding: 6px 12px;
  border: 1px solid var(--sarp-border-strong);
  border-radius: var(--sarp-r-control);
  background: var(--sarp-surface);
  color: var(--sarp-text-body);
  font-size: var(--sarp-fs-body);
  font-weight: var(--sarp-fw-semi);
  cursor: pointer;
}
.cancel:hover,
.edit:hover,
.edit-item:hover,
.edit-price:hover,
.edit-group:hover,
.link-button:hover,
.small-button:hover { background: var(--sarp-surface-sunk); border-color: var(--sarp-n-400); }

.danger,
.command-card button.danger,
.cycle-card button.danger,
.ticket-actions .cancel,
.remove-line {
  background: var(--sarp-danger);
  border-color: var(--sarp-danger);
  color: var(--sarp-n-0);
}
.cycle-card button.warning { background: var(--sarp-warn-mark); border-color: var(--sarp-warn-mark); color: var(--sarp-n-0); }

/* ── Inputs ─────────────────────────────────────────────────────────────
   One control height and one border across every form in the module. */

input:not([type=checkbox]):not([type=radio]):not([type=submit]),
select,
textarea {
  min-height: var(--sarp-control-h);
  padding: 0 10px;
  border: 1px solid var(--sarp-border-input);
  border-radius: var(--sarp-r-control);
  background: var(--sarp-surface);
  color: var(--sarp-text);
  font-size: var(--sarp-fs-body);
}
textarea { min-height: 62px; padding: 7px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--sarp-action);
  box-shadow: var(--sarp-focus-ring);
  outline: none;
}
input:disabled, select:disabled { background: var(--sarp-surface-alt); color: var(--sarp-n-400); }

label { font-size: var(--sarp-fs-label); font-weight: var(--sarp-fw-semi); color: var(--sarp-text-body); }

.search-row, .filters { display: flex; gap: var(--sarp-s2); margin-bottom: var(--sarp-s3); }
.search-row input, .filters input, .filters select { flex: 1; }

/* ── Status pills ───────────────────────────────────────────────────────── */

.status-pill,
.list-status,
.item-count,
.counter-badge,
.chips span {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 9px;
  border-radius: var(--sarp-r-pill);
  background: var(--sarp-surface-alt);
  color: var(--sarp-text-muted);
  font-size: var(--sarp-fs-caption);
  font-weight: var(--sarp-fw-semi);
  white-space: nowrap;
}
.status-pill.is-active,
.list-status { background: var(--sarp-ok-tint); color: var(--sarp-ok); }
.status-pill.is-inactive { background: var(--sarp-surface-alt); color: var(--sarp-text-muted); }
.item-count, .chips span { background: var(--sarp-info-tint); color: var(--sarp-info); }
.counter-badge { background: var(--sarp-action-tint); color: var(--sarp-action-on-tint); }

/* ── Empty state ────────────────────────────────────────────────────────── */

.empty, .empty-state, .pick-empty {
  padding: var(--sarp-s6) var(--sarp-s5);
  text-align: center;
  color: var(--sarp-text-faint);
  font-size: var(--sarp-fs-data);
}

/* ── Dashboard hero ─────────────────────────────────────────────────────── */

.hero, .workspace-head, .counter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sarp-s5);
  padding: var(--sarp-s5);
  margin-bottom: var(--sarp-s4);
  border-radius: var(--sarp-r-surface);
  background: linear-gradient(100deg, var(--sarp-brand-pressed), var(--sarp-brand));
  color: var(--sarp-n-0);
  box-shadow: var(--sarp-e1);
}
.hero h1 { margin: 0; font-size: 26px; font-weight: var(--sarp-fw-bold); letter-spacing: var(--sarp-ls-title); color: var(--sarp-n-0); }
.hero p  { margin: var(--sarp-s2) 0 0; font-size: var(--sarp-fs-body); color: var(--sarp-brand-tint); }
.hero .eyebrow { color: var(--sarp-brand-edge); }
.hero .primary { background: var(--sarp-n-0); color: var(--sarp-action); }
.hero .primary:hover { background: var(--sarp-brand-tint); color: var(--sarp-action); }

/* ── Sign in / sign up ──────────────────────────────────────────────────── */

.public-page { min-height: 100vh; }

.public-shell {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 6vw;
  min-height: 100vh;
  padding: 6vw;
  background: linear-gradient(135deg, var(--sarp-brand-pressed), var(--sarp-brand));
  color: var(--sarp-n-0);
}
.public-shell .logo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sarp-s5);
  border-radius: var(--sarp-r-surface);
  background: var(--sarp-n-0);
  color: var(--sarp-action);
  font-weight: var(--sarp-fw-bold);
}
.public-shell .eyebrow { color: var(--sarp-brand-edge); }
.public-shell h1 { max-width: 20ch; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: var(--sarp-n-0); }
.public-shell p  { max-width: 52ch; font-size: 15px; color: var(--sarp-brand-tint); }

.auth-card {
  align-self: center;
  width: 100%;
  padding: var(--sarp-s5);
  background: var(--sarp-surface);
  color: var(--sarp-text);
  border-radius: var(--sarp-r-surface);
  box-shadow: var(--sarp-e3);
}
.auth-card h2 { margin: 0 0 var(--sarp-s4); font-size: var(--sarp-fs-page-title); }
.auth-card label { display: block; margin: 0 0 var(--sarp-s3); }
.auth-card input { display: block; width: 100%; margin-top: var(--sarp-s1); }
.auth-card .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sarp-s3); }
.auth-card button {
  width: 100%;
  min-height: 38px;
  margin: var(--sarp-s3) 0;
  border: 0;
  border-radius: var(--sarp-r-control);
  background: var(--sarp-action);
  color: var(--sarp-action-text);
  font-size: var(--sarp-fs-body);
  font-weight: var(--sarp-fw-semi);
  cursor: pointer;
}
.auth-card button:hover { background: var(--sarp-action-hover); }
.auth-card > a { display: block; text-align: center; font-size: var(--sarp-fs-data); color: var(--sarp-action-on-tint); }

@media (max-width: 900px) {
  .public-shell { grid-template-columns: 1fr; padding: var(--sarp-s5); }
  .public-shell > section { display: none; }
}

/* Centralized safe error experience */
.pos-error-page { min-height: min(72vh, 720px); display: grid; place-items: center; padding: clamp(24px, 6vw, 72px); background: radial-gradient(circle at 15% 10%, var(--sarp-action-tint), transparent 34%), linear-gradient(145deg, var(--sarp-surface-alt), var(--sarp-surface)); }
.pos-error-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sarp-s5); width: min(680px, 100%); padding: clamp(24px, 4vw, 42px); border: 1px solid var(--sarp-border); border-top: 4px solid var(--sarp-action); border-radius: var(--sarp-r-surface); background: var(--sarp-surface); box-shadow: var(--sarp-e3); }
.pos-error-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sarp-action-tint); color: var(--sarp-action); font-size: 28px; font-weight: var(--sarp-fw-bold); }
.pos-error-card h1 { margin: 4px 0 var(--sarp-s3); font-size: clamp(24px, 4vw, 34px); }
.pos-error-card p { color: var(--sarp-text-muted); line-height: 1.6; }
.pos-error-card .eyebrow { margin: 0; color: var(--sarp-action); }
.pos-error-reference { padding: var(--sarp-s3); border-radius: var(--sarp-r-control); background: var(--sarp-surface-alt); }
.pos-error-actions { display: flex; flex-wrap: wrap; gap: var(--sarp-s3); margin-top: var(--sarp-s4); }
.pos-error-actions .button { text-decoration: none; }
@media (max-width: 560px) { .pos-error-card { grid-template-columns: 1fr; } }

/* ── Public / auth screen polish ───────────────────────────────────────────
   The split layout and palette gradient were already right. What was missing:
   the grid was top-aligned so the copy floated above a large empty field, and
   the switch link fell back to a default underlined anchor. */
.public-shell { align-items: center; min-height: 100vh; }
.public-shell > section { align-self: center; }

.public-shell .logo {
  box-shadow: 0 8px 22px rgb(0 0 0 / 22%);
  font-weight: var(--sarp-fw-bold);
}

/* A short proof row gives the left column a floor and says what the product
   actually does, rather than leaving the space empty. */
.public-shell .proof {
  display: flex; flex-wrap: wrap; gap: var(--sarp-s3) var(--sarp-s5);
  margin-top: var(--sarp-s5);
  color: var(--sarp-brand-tint);
  font-size: var(--sarp-fs-data);
}
.public-shell .proof span { display: inline-flex; align-items: center; gap: var(--sarp-s2); }
.public-shell .proof .material-symbols-outlined { font-size: 17px; color: var(--sarp-brand-edge); }

.auth-card {
  align-self: center;
  box-shadow: 0 22px 54px rgb(0 0 0 / 26%);
  border-radius: var(--sarp-r-surface);
}
.auth-card button[type="submit"] { width: 100%; }

/* the sign-in / sign-up switch reads as a control, not a raw link */
.auth-card > a {
  display: block;
  margin-top: var(--sarp-s3);
  padding-top: var(--sarp-s3);
  border-top: 1px solid var(--sarp-border);
  text-align: center;
  text-decoration: none;
  font-size: var(--sarp-fs-data);
  font-weight: var(--sarp-fw-medium);
  color: var(--sarp-action);
}
.auth-card > a:hover { color: var(--sarp-action-hover); text-decoration: underline; }

@media (max-width: 900px) {
  .public-shell { align-items: start; padding-top: var(--sarp-s5); }
  .public-shell .proof { gap: var(--sarp-s2) var(--sarp-s4); margin-top: var(--sarp-s4); }
}