/* ============================================================================
   SARP SHARED COMPONENTS
   Every primitive in the product family, built only from sarp-tokens.css.
   Load AFTER sarp-tokens.css and BEFORE any product stylesheet.

   There is not one hex literal below this line. If you need a colour that is
   not here, add a token - do not add a literal.
   ========================================================================= */

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

html, body {
  margin: 0;
  font-family: var(--sarp-font);
  font-size: var(--sarp-fs-body);
  line-height: var(--sarp-lh);
  color: var(--sarp-text);
  background: var(--sarp-page);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

a { color: var(--sarp-action-on-tint); }

::selection { background: var(--sarp-brand-tint-2); color: var(--sarp-text); }

/* Every focusable thing gets the same halo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sarp-action);
  outline-offset: 1px;
  box-shadow: var(--sarp-focus-ring);
}

/* ── Icons ──────────────────────────────────────────────────────────────
   The "Material Symbols" @font-face is supplied by the Radzen theme stylesheet
   (Radzen.Blazor ships the woff2). Radzen does NOT declare this utility class,
   so without the rule below every icon renders as its literal ligature text -
   which is exactly what the POS sidebar was doing. */

.material-symbols-outlined {
  font-family: "Material Symbols";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ── Type roles ─────────────────────────────────────────────────────────── */

.sarp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sarp-s4);
  margin: 0 0 var(--sarp-s3);
}
.sarp-page-head h1,
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);
}
.sarp-page-head p {
  margin: 0;
  font-size: var(--sarp-fs-data);
  color: var(--sarp-text-muted);
}
.sarp-eyebrow {
  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);
}
.sarp-section-title {
  margin: 0 0 var(--sarp-s3);
  padding-bottom: var(--sarp-s2);
  border-bottom: 1px solid var(--sarp-border);
  font-size: var(--sarp-fs-section);
  font-weight: var(--sarp-fw-bold);
  color: var(--sarp-text-strong);
}
.sarp-hint    { font-size: var(--sarp-fs-caption); color: var(--sarp-text-faint); }
.sarp-mono    { font-family: var(--sarp-font-mono); font-size: var(--sarp-fs-caption); color: var(--sarp-text-muted); }
.sarp-num     { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Buttons ────────────────────────────────────────────────────────────
   One filled button per screen region. Everything secondary is an outline
   or text button, so the primary path is findable without reading labels. */

.sarp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sarp-s1);
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: var(--sarp-r-control);
  background: none;
  font-size: 12px;
  font-weight: var(--sarp-fw-semi);
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.sarp-btn-sm { padding: 5px 10px; font-size: var(--sarp-fs-label); }
.sarp-btn-lg { padding: 9px 17px; font-size: 13px; }

.sarp-btn-primary { background: var(--sarp-action); color: var(--sarp-action-text); }
.sarp-btn-primary:hover  { background: var(--sarp-action-hover); color: var(--sarp-action-text); }
.sarp-btn-primary:active { background: var(--sarp-action-pressed); }

.sarp-btn-secondary { background: var(--sarp-surface); color: var(--sarp-text-body); border-color: var(--sarp-border-strong); }
.sarp-btn-secondary:hover { background: var(--sarp-surface-sunk); border-color: var(--sarp-n-400); }

.sarp-btn-quiet { background: transparent; color: var(--sarp-text-muted); }
.sarp-btn-quiet:hover { background: var(--sarp-surface-alt); color: var(--sarp-text-strong); }

.sarp-btn-danger { background: var(--sarp-surface); color: var(--sarp-danger); border-color: var(--sarp-danger-border); }
.sarp-btn-danger:hover { background: var(--sarp-danger-tint); }
.sarp-btn-danger-solid { background: var(--sarp-danger); color: var(--sarp-n-0); }

.sarp-btn:disabled,
.sarp-btn[disabled] {
  background: var(--sarp-surface-alt);
  color: var(--sarp-n-400);
  border-color: transparent;
  cursor: not-allowed;
}

.sarp-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: var(--sarp-r-control);
  background: none;
  color: var(--sarp-text-faint);
  cursor: pointer;
}
.sarp-icon-btn:hover { background: var(--sarp-surface-sunk); border-color: var(--sarp-border); color: var(--sarp-action); }

/* ── Form controls ──────────────────────────────────────────────────────── */

.sarp-field { display: flex; flex-direction: column; gap: var(--sarp-s1); min-width: 0; }
.sarp-field > label,
.sarp-label {
  font-size: var(--sarp-fs-label);
  font-weight: var(--sarp-fw-semi);
  color: var(--sarp-text-body);
}
.sarp-field > label .req { color: var(--sarp-danger); margin-left: 2px; }

.sarp-input,
.sarp-field input:not([type=checkbox]):not([type=radio]),
.sarp-field select,
.sarp-field textarea {
  height: 32px;
  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);
}
.sarp-field textarea { height: auto; min-height: 62px; padding: 7px 10px; resize: vertical; }
.sarp-input:hover { border-color: var(--sarp-n-400); }
.sarp-input:focus,
.sarp-field input:focus,
.sarp-field select:focus,
.sarp-field textarea:focus {
  border-color: var(--sarp-action);
  box-shadow: var(--sarp-focus-ring);
  outline: none;
}
.sarp-input:disabled { background: var(--sarp-surface-alt); color: var(--sarp-n-400); border-color: var(--sarp-border); cursor: not-allowed; }
.sarp-input.is-error { border-color: var(--sarp-danger); background: var(--sarp-danger-tint); }
.sarp-error-msg { font-size: var(--sarp-fs-caption); color: var(--sarp-danger); }

input[type=checkbox], input[type=radio] { accent-color: var(--sarp-action); }

.sarp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sarp-s3);
}

/* ── Cards and stat tiles ───────────────────────────────────────────────── */

.sarp-card {
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-radius: var(--sarp-r-surface);
  box-shadow: var(--sarp-e1);
}
.sarp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sarp-s3);
  padding: var(--sarp-s3);
  border-bottom: 1px solid var(--sarp-border);
}
.sarp-card-head b { font-size: 13px; font-weight: var(--sarp-fw-semi); }
.sarp-card-body { padding: var(--sarp-s3); }

.sarp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sarp-s3);
  margin-bottom: var(--sarp-s3);
}
.sarp-tile {
  position: relative;
  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);
  overflow: hidden;
}
.sarp-tile > span,
.sarp-tile u {
  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-text-faint);
  text-decoration: none;
}
.sarp-tile > strong,
.sarp-tile b {
  display: block;
  font-size: var(--sarp-fs-metric);
  font-weight: var(--sarp-fw-bold);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sarp-text-strong);
}
.sarp-tile s { text-decoration: none; font-size: var(--sarp-fs-caption); color: var(--sarp-text-faint); }

/* ── Data grid ──────────────────────────────────────────────────────────── */

.sarp-table-wrap {
  overflow-x: auto;
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-radius: var(--sarp-r-surface);
}
.sarp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sarp-fs-data);
}
.sarp-table 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;
  white-space: nowrap;
}
.sarp-table td {
  padding: var(--sarp-s2) var(--sarp-s3);
  border-bottom: 1px solid var(--sarp-divider);
  color: var(--sarp-text-body);
  vertical-align: middle;
}
.sarp-table tbody tr:last-child td { border-bottom: 0; }
.sarp-table tbody tr:hover td { background: var(--sarp-grid-row-hover); }
.sarp-table tbody tr.is-selected td { background: var(--sarp-grid-row-select); }
.sarp-table a { color: var(--sarp-action-on-tint); text-decoration: none; font-weight: var(--sarp-fw-medium); }
.sarp-table a:hover { text-decoration: underline; }
.sarp-table .sarp-num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Status chips - five colours cover every state in the product ───────── */

.sarp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2.5px 9px;
  border-radius: var(--sarp-r-pill);
  font-size: var(--sarp-fs-caption);
  font-weight: var(--sarp-fw-semi);
  white-space: nowrap;
}
.sarp-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.sarp-chip-ok      { background: var(--sarp-ok-tint);     color: var(--sarp-ok); }
.sarp-chip-warn    { background: var(--sarp-warn-tint);   color: var(--sarp-warn); }
.sarp-chip-danger  { background: var(--sarp-danger-tint); color: var(--sarp-danger); }
.sarp-chip-info    { background: var(--sarp-info-tint);   color: var(--sarp-info); }
.sarp-chip-neutral { background: var(--sarp-surface-alt);  color: var(--sarp-text-muted); }
.sarp-chip-brand   { background: var(--sarp-action-tint);  color: var(--sarp-action-on-tint); }

/* ── Alerts ──────────────────────────────────────────────────────────────
   Defined here so no product has to fall through to Bootstrap for them. */

.sarp-alert, .alert {
  display: flex;
  gap: var(--sarp-s2);
  align-items: flex-start;
  padding: var(--sarp-s2) var(--sarp-s3);
  margin: 0 0 var(--sarp-s3);
  border-radius: 0 var(--sarp-r-control) var(--sarp-r-control) 0;
  font-size: 12px;
  line-height: 1.45;
}
.sarp-alert-ok,     .alert-success { background: var(--sarp-ok-tint);     border-left: 3px solid var(--sarp-ok);        color: var(--sarp-ok); }
.sarp-alert-warn,   .alert-warning { background: var(--sarp-warn-tint);   border-left: 3px solid var(--sarp-warn-mark); color: var(--sarp-warn); }
.sarp-alert-danger, .alert-danger  { background: var(--sarp-danger-tint); border-left: 3px solid var(--sarp-danger);    color: var(--sarp-danger); }
.sarp-alert-info,   .alert-info    { background: var(--sarp-info-tint);   border-left: 3px solid var(--sarp-info);      color: var(--sarp-info); }
.text-danger { color: var(--sarp-danger); }

/* ── Tabs, breadcrumb, pagination ───────────────────────────────────────── */

.sarp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sarp-border); }
.sarp-tabs a, .sarp-tabs button {
  padding: var(--sarp-s2) 13px;
  border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: 12px; font-weight: var(--sarp-fw-medium);
  color: var(--sarp-text-muted);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sarp-tabs a:hover, .sarp-tabs button:hover { color: var(--sarp-text-strong); background: var(--sarp-surface-sunk); }
.sarp-tabs a.is-active, .sarp-tabs button.is-active {
  color: var(--sarp-action-on-tint);
  border-bottom-color: var(--sarp-action);
  font-weight: var(--sarp-fw-semi);
}

.sarp-breadcrumb { display: flex; align-items: center; gap: var(--sarp-s1); font-size: var(--sarp-fs-label); color: var(--sarp-text-faint); }
.sarp-breadcrumb a { color: var(--sarp-text-muted); text-decoration: none; }
.sarp-breadcrumb b { color: var(--sarp-text-strong); font-weight: var(--sarp-fw-semi); }

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

.sarp-empty, .empty-state {
  padding: var(--sarp-s6) var(--sarp-s5);
  text-align: center;
  color: var(--sarp-text-faint);
  font-size: var(--sarp-fs-data);
}
.sarp-empty b { display: block; margin-bottom: var(--sarp-s1); font-size: 13px; color: var(--sarp-text-strong); }

/* ── Toolbar / filter bar ───────────────────────────────────────────────── */

.sarp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sarp-s2);
  padding: var(--sarp-s2) 11px;
  background: var(--sarp-surface);
  border: 1px solid var(--sarp-border);
  border-radius: var(--sarp-r-surface) var(--sarp-r-surface) 0 0;
  border-bottom: 0;
}
.sarp-toolbar .spacer { margin-left: auto; font-size: var(--sarp-fs-label); color: var(--sarp-text-faint); font-variant-numeric: tabular-nums; }

/* ============================================================================
   RADZEN BRIDGE
   Radzen ships its own palette. These rules pull its widgets onto the SARP
   action colours so a Radzen button and a .sarp-btn cannot disagree.
   Scoped to .sarp-app so nothing leaks outside a SARP shell.
   ========================================================================= */

.sarp-app .rz-button-primary,   .sarp-app .rz-button.rz-primary,
.sarp-app .rz-button-secondary, .sarp-app .rz-button.rz-secondary {
  background: var(--sarp-action) !important;
  border-color: var(--sarp-action) !important;
  color: var(--sarp-action-text) !important;
}
.sarp-app .rz-button-primary:hover,   .sarp-app .rz-button.rz-primary:hover,
.sarp-app .rz-button-secondary:hover, .sarp-app .rz-button.rz-secondary:hover {
  background: var(--sarp-action-hover) !important;
  border-color: var(--sarp-action-hover) !important;
}
.sarp-app .rz-button-success, .sarp-app .rz-button.rz-success {
  background: var(--sarp-ok) !important; border-color: var(--sarp-ok) !important; color: var(--sarp-n-0) !important;
}
.sarp-app .rz-button-danger, .sarp-app .rz-button.rz-danger, .sarp-app .rz-button.rz-error {
  background: var(--sarp-danger) !important; border-color: var(--sarp-danger) !important; color: var(--sarp-n-0) !important;
}
.sarp-app .rz-button-info, .sarp-app .rz-button.rz-info {
  background: var(--sarp-info) !important; border-color: var(--sarp-info) !important; color: var(--sarp-n-0) !important;
}
.sarp-app .rz-alert-info    { background: var(--sarp-info-tint) !important;   border-color: var(--sarp-info-border) !important;   color: var(--sarp-info) !important; }
.sarp-app .rz-alert-success { background: var(--sarp-ok-tint) !important;     border-color: var(--sarp-ok-border) !important;     color: var(--sarp-ok) !important; }
.sarp-app .rz-alert-warning { background: var(--sarp-warn-tint) !important;   border-color: var(--sarp-warn-border) !important;   color: var(--sarp-warn) !important; }
.sarp-app .rz-alert-danger,
.sarp-app .rz-alert-error   { background: var(--sarp-danger-tint) !important; border-color: var(--sarp-danger-border) !important; color: var(--sarp-danger) !important; }

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .sarp-no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}