/* BeeStorePOS - POS UI Styles */

/* ========== Fonts ==========
   Served from this application rather than from Google's CDN.

   Two reasons, and the security one is the smaller: the content security policy names
   no origin but this one, so a font cannot become the hole in it. The larger reason is
   that a till at a market stall on a phone hotspot should not have to reach a third
   party to render its own buttons, and every page load was doing exactly that.

   Cinzel and Hanken Grotesk are variable fonts — one file covers the whole weight
   range. IBM Plex Mono ships a file per weight. Latin only, which is what the shop
   trades in; the other unicode ranges Google serves are not downloaded. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/cinzel-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ========== CSS Variables (Design Tokens) ========== */
:root {
  /* Colors */
  --color-primary: #2A5FB0;
  --color-primary-hover: #24539B;
  --color-primary-tint: #EAF1FB;
  --color-sidebar-bg: #16202E;
  --color-sidebar-divider: #243243;
  --color-sidebar-text: #9FB0C2;
  --color-sidebar-card-bg: #1D2A3A;
  --color-brand-gold: #F0D98A;
  --color-canvas: #F4F6F9;
  --color-surface: #FFFFFF;
  --color-border: #E2E7EE;
  --color-row-divider: #EEF1F6;
  --color-row-divider-alt: #F2F4F8;
  --color-subtle-fill: #F7F9FC;
  --color-subtle-fill-alt: #EEF2F7;
  --color-text-primary: #1C2430;
  --color-text-secondary: #5A6573;
  --color-text-muted: #8995A4;
  --color-success: #2E8B57;
  --color-success-bg: #E8F4EC;
  --color-warning: #C77F1A;
  --color-warning-bg: #FBF1E3;
  --color-danger: #B6394A;
  --color-danger-bg: #FBEEF0;

  /* Typography */
  --font-ui: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-brand: 'Cinzel', serif;

  /* Spacing */
  --radius-btn: 10px;
  --radius-card: 12px;
  --radius-chip: 6px;
  --radius-pill: 8px;

  /* Shadows */
  --shadow-button: 0 4px 14px rgba(42, 95, 176, 0.28);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* ========== Base Styles ========== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--color-text-primary);
  background: var(--color-canvas);
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: #CFD6DF;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ========== App Shell ========== */
.pos-app {
  height: 100vh;
  overflow: hidden;
  display: flex;
}

/* ========== Sidebar ========== */
.pos-sidebar {
  width: 222px;
  flex: none;
  background: var(--color-sidebar-bg);
  display: flex;
  flex-direction: column;
  color: var(--color-sidebar-text);
}

.pos-sidebar-brand {
  padding: 20px 20px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--color-sidebar-divider);
}

.pos-sidebar-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.pos-sidebar-brand-text {
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-brand-gold);
  line-height: 1.4;
}

.pos-sidebar-nav {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pos-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--color-sidebar-text);
}

.pos-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pos-nav-item.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.pos-nav-badge {
  font-size: 11px;
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
  border-radius: 20px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  margin-left: auto;
}

.pos-sidebar-user {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--color-sidebar-divider);
}

.pos-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: var(--color-sidebar-card-bg);
}

.pos-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-avatar-lg {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.pos-user-info {
  flex: 1;
  min-width: 0;
}

.pos-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #E4ECF3;
}

.pos-user-role {
  font-size: 11px;
  color: #6F8298;
  font-family: var(--font-mono);
}

.pos-signout {
  font-size: 15px;
  color: #6F8298;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ========== Main Area ========== */
.pos-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pos-topbar {
  height: 64px;
  flex: none;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
}

.pos-topbar-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.pos-topbar-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos-clock {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-subtle-fill-alt);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-mono);
}

.pos-api-pill {
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pos-api-pill.live {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.pos-api-pill.connecting {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.pos-api-pill.offline {
  background: #E8EAED;
  color: #6B7280;
}

.pos-api-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pos-api-pill.connecting .pos-api-dot {
  animation: pos-busy-pulse 0.9s ease-in-out infinite;
}

@keyframes pos-busy-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ========== Busy Indicator (active API calls) ========== */
.pos-busy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2000;
  overflow: hidden;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

body.pos-busy .pos-busy-bar {
  opacity: 1;
}

.pos-busy-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  animation: pos-busy-slide 1.1s ease-in-out infinite;
}

@keyframes pos-busy-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(385%); }
}

body.pos-busy,
body.pos-busy button,
body.pos-busy a,
body.pos-busy input,
body.pos-busy select {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .pos-busy-bar::after,
  .pos-api-pill.connecting .pos-api-dot {
    animation: none;
  }
}

.pos-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ========== Login ========== */
.pos-login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #1E2C3D 0%, #141C27 55%, #0F151D 100%);
  position: relative;
  overflow: hidden;
}

.pos-login-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  object-fit: cover;
  opacity: 0.5;
}

.pos-login-card {
  width: 380px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 34px 32px;
  position: relative;
  z-index: 1;
}

.pos-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}

.pos-login-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 12px;
}

.pos-login-wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.13em;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.pos-login-terminal {
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-top: 8px;
}

.pos-login-user {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 18px;
}

.pos-login-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-login-user-role {
  font-size: 11px;
  color: var(--color-text-muted);
}

.pos-pin-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}

.pos-pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
}

.pos-pin-dot.filled {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pos-pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pos-pin-key {
  height: 54px;
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--color-text-primary);
  font-size: 21px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-pin-key:hover:not(:disabled) {
  background: var(--color-canvas);
}

.pos-pin-key:disabled {
  opacity: 0;
  cursor: default;
  border: none;
}

.pos-btn-signin {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-btn);
  background: #A7B2C0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: not-allowed;
  margin-top: 18px;
}

.pos-btn-signin.ready {
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.pos-btn-signin.ready:hover {
  background: var(--color-primary-hover);
}

/* ========== Buttons ========== */
.btn-pos-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: all 0.15s;
}

.btn-pos-primary:hover {
  background: var(--color-primary-hover);
}

.btn-pos-secondary {
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-pos-secondary:hover {
  background: var(--color-canvas);
}

.btn-pos-danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-pos-danger:hover {
  background: #9F2F3D;
}

/* ========== Forms ========== */
.pos-input {
  width: 100%;
  height: 44px;
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  padding: 0 13px;
  font-size: 15px;
  color: var(--color-text-primary);
  outline: none;
}

.pos-input:focus {
  border-color: var(--color-primary);
}

.pos-input-mono {
  font-family: var(--font-mono);
}

.pos-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
}

.pos-select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
}

.pos-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(42, 95, 176, 0.1);
}

.pos-textarea {
  width: 100%;
  height: auto;
  padding: 10px 13px;
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--color-text-primary);
  resize: vertical;
}

.pos-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.pos-form-group {
  margin-bottom: 16px;
  flex: 1;
}

.pos-form-row {
  display: flex;
  gap: 16px;
}

/* ========== Modals ==========
   Shared by every screen. Keep display off the base rule: markup starts with an
   inline display:none and JS switches it to flex to open. */
.pos-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.pos-modal-content {
  background: var(--color-surface);
  border-radius: 8px;
  width: min(92vw, 760px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.pos-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
}

.pos-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

.pos-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
}

.pos-modal-close:hover {
  color: var(--color-text-primary);
}

.pos-modal-body {
  padding: 24px;
  max-height: 65vh;
  overflow-y: auto;
}

.pos-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}

/* For footers carrying content on the left (e.g. a running total) as well as actions. */
.pos-modal-footer-split {
  justify-content: space-between;
}

.pos-btn-secondary {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--color-text-primary);
  cursor: pointer;
}

.pos-btn-secondary:hover {
  background: var(--color-subtle-fill);
}

/* ========== Price override ========== */
/* The cart price is the control that opens the override dialog, so it has to
   look tappable without turning the cart line into a row of buttons. */
.pos-price-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px dashed var(--color-text-muted);
}

.pos-price-btn:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.pos-price-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pos-price-was {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.pos-override-badge {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ========== Picker lists ==========
   Search-and-choose lists inside a modal, drivable by mouse or keyboard. The
   highlighted row is the one Enter will select, whether the arrow keys or the
   mouse put it there. */
.pos-picker-list {
  margin-top: 14px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.pos-picker-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-row-divider);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.pos-picker-item:last-child {
  border-bottom: 0;
}

.pos-picker-item.active {
  background: var(--color-primary-tint);
}

.pos-picker-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.pos-picker-name {
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-picker-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-picker-empty {
  padding: 26px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Small supporting bits forms need: hints, notes and read-only values. */
.pos-field-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.pos-note {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 10px 12px;
  background: var(--color-subtle-fill);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.pos-readonly-value {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--color-subtle-fill);
}

/* ========== Utility Classes ========== */
.mono {
  font-family: var(--font-mono);
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-danger {
  color: var(--color-danger);
}

.fw-semibold {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.fw-extrabold {
  font-weight: 800;
}

/* ========== Register (POS) ========== */
.pos-register {
  display: flex;
  height: 100%;
  min-height: 0;
  min-width: 1080px;
}

/* Category Rail */
.pos-category-rail {
  width: 150px;
  flex: none;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
}

.pos-category-item {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-secondary);
}

.pos-category-item:hover {
  background: #F7F9FC;
}

.pos-category-item.active {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 700;
  border-left: 3px solid var(--color-primary);
  padding-left: 9px;
}

.pos-category-item.pos-category-back {
  background: var(--color-subtle-fill);
  color: var(--color-text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
}

.pos-category-item.pos-category-back:hover {
  background: var(--color-subtle-fill-alt);
}

.pos-category-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

/* Product Area */
.pos-products {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.pos-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex: none;
}

.pos-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  padding: 0 14px;
  height: 46px;
}

.pos-search-icon {
  color: var(--color-primary);
  font-size: 16px;
}

.pos-search-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  color: var(--color-text-primary);
}

.pos-hint-chips {
  display: flex;
  gap: 6px;
}

.pos-hint-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-subtle-fill-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  padding: 7px 9px;
  font-family: var(--font-mono);
}

.pos-product-table {
  flex: 1;
  overflow: auto;
  min-height: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.pos-table-header {
  display: grid;
  grid-template-columns: 1fr 96px 64px 84px 56px;
  padding: 11px 16px;
  background: var(--color-subtle-fill);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}

.pos-product-row {
  display: grid;
  grid-template-columns: 1fr 96px 64px 84px 56px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-row-divider);
  transition: background 0.15s;
}

.pos-product-row:hover {
  background: var(--color-subtle-fill);
}

.pos-product-name-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.pos-product-swatch {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  flex: none;
  background: linear-gradient(135deg, #E2E7EE 25%, transparent 25%, transparent 50%, #E2E7EE 50%, #E2E7EE 75%, transparent 75%, transparent);
  background-size: 8px 8px;
}

.pos-product-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-product-sku {
  font-size: 12px;
  color: #7A8696;
  font-family: var(--font-mono);
}

.pos-product-stock {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

.pos-product-price {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.pos-add-btn {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}

.pos-add-btn:hover {
  background: var(--color-primary-hover);
}

/* Cart Panel */
.pos-cart {
  width: 404px;
  flex: none;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  padding: 18px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pos-customer-selector {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 8px 11px;
  cursor: pointer;
  margin-bottom: 11px;
  transition: background 0.15s;
}

.pos-customer-selector:hover {
  background: #EEF2F7;
}

.pos-customer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #DCE3EC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.pos-customer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}

.pos-customer-change {
  font-size: 11px;
  color: var(--color-primary);
  font-weight: 600;
}

.pos-cart-lines {
  flex: 1;
  overflow: auto;
  min-height: 0;
  border-top: 1px solid var(--color-row-divider);
  padding-top: 4px;
}

.pos-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #A7B2C0;
  text-align: center;
  gap: 8px;
}

.pos-empty-cart-icon {
  font-size: 30px;
}

.pos-cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-row-divider-alt);
}

.pos-qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-canvas);
  border: 1px solid #E5EAF1;
  border-radius: 8px;
  padding: 3px 4px;
}

.pos-qty-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  background: transparent;
  transition: background 0.15s;
}

.pos-qty-btn.minus {
  color: var(--color-text-secondary);
}

.pos-qty-btn.plus {
  color: var(--color-primary);
}

.pos-qty-btn:hover {
  background: #E2E7EE;
}

.pos-qty-value {
  font-size: 13px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.pos-line-info {
  flex: 1;
  min-width: 0;
}

.pos-line-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.pos-line-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.pos-line-price {
  text-align: right;
}

.pos-line-total {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.pos-line-remove {
  font-size: 10px;
  color: var(--color-danger);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
}

.pos-cart-totals {
  padding-top: 13px;
  flex: none;
}

.pos-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.pos-total-final {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 11px;
  border-top: 1px solid var(--color-border);
  margin-bottom: 14px;
}

.pos-total-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-total-amount {
  font-size: 25px;
  font-weight: 800;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.pos-payment-methods {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.pos-payment-btn {
  flex: 1;
  height: 44px;
  border: 1.5px solid #DCE3EC;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}

.pos-payment-btn:hover {
  background: var(--color-canvas);
}

.pos-payment-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: 700;
}

.pos-complete-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--shadow-button);
  transition: background 0.15s;
}

.pos-complete-btn:hover {
  background: var(--color-primary-hover);
}

.pos-complete-btn:disabled {
  background: #A7B2C0;
  cursor: not-allowed;
  box-shadow: none;
}

.pos-hotkey {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 7px;
  border-radius: 5px;
}

.pos-cart-actions {
  display: flex;
  gap: 9px;
  margin-top: 9px;
}

.pos-cart-action-btn {
  flex: 1;
  height: 42px;
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  background: #fff;
  color: #3A4757;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.pos-cart-action-btn:hover {
  background: var(--color-canvas);
}

/* =========================================
   CUSTOMERS SCREEN
   ========================================= */

.pos-screen-customers {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pos-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pos-data-card {
  flex: 1;
  min-height: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
}

.pos-table-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scrolling body for a .pos-table-container, whose header stays put above it */
.pos-table-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Sortable column headers — inline-flex so the cell's text-align still applies */
.pos-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.pos-th-sort:hover,
.pos-th-sort.sorted {
  color: var(--color-text-secondary);
}

.pos-th-sort:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.pos-sort-caret {
  font-size: 9px;
  opacity: 0;
}

.pos-th-sort:hover .pos-sort-caret {
  opacity: 0.45;
}

.pos-th-sort.sorted .pos-sort-caret {
  opacity: 1;
}

.pos-table-grid-customers {
  display: grid;
  grid-template-columns: 2fr 120px 1.5fr 140px 110px 180px;
  gap: 16px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-vendors {
  display: grid;
  grid-template-columns: 2fr 140px 1.5fr 140px 90px 200px;
  gap: 16px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-invoices {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 130px 110px 120px 200px;
  gap: 16px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-invoice-lines {
  display: grid;
  grid-template-columns: 2fr 110px 120px 110px 100px 110px 100px 100px;
  gap: 10px;
  align-items: center;
  padding: 0 18px;
}

/*
 * A table that lives inside a modal or a form panel rather than filling a screen.
 * .pos-table-header pins to its nearest scrolling ancestor, which on a screen is
 * the table's own body — correct. Drop the same markup into a modal and the
 * ancestor becomes the whole modal body, so the header floats over the fields
 * above it. Giving the table its own scroll box puts the header back above the
 * rows it actually labels.
 */
.pos-panel-table {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  overflow: hidden;
}

.pos-panel-table .pos-table-header {
  border-radius: 0;
}

.pos-table-grid-rtv {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.1fr 110px 110px 120px 190px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-rtv-lines {
  display: grid;
  grid-template-columns: 2fr 100px 110px 120px 110px 110px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-reorder {
  display: grid;
  grid-template-columns: 2fr 140px 110px 110px 110px 110px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-valuation {
  display: grid;
  grid-template-columns: 2fr 1.2fr 110px 100px 110px 110px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-ledger {
  display: grid;
  grid-template-columns: 160px 130px 2fr 100px 100px 130px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-counts {
  display: grid;
  grid-template-columns: 2fr 1.4fr 130px 110px 120px 120px;
  gap: 16px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-count-lines {
  display: grid;
  grid-template-columns: 2fr 120px 140px 130px 120px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-table-grid-adjust-lines {
  display: grid;
  grid-template-columns: 2fr 120px 140px 140px 120px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

/* This table lives inside a modal, so it has about 700px to work with rather than the
   width of the screen. The fixed columns were taking 380px of it and left the item name
   123px — enough for "Inner Cover" and not for "Medium Frame (Unassembled)", so half the
   rows wrapped to two lines and the list came out ragged. The three narrow columns hold
   a dash, a star and one button; they are sized to that, and what is left goes to the
   name. */
.pos-table-grid-vendor-items {
  display: grid;
  grid-template-columns: minmax(90px, 0.9fr) minmax(0, 2fr) 90px 80px 100px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
}

.pos-customer-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.pos-customer-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-group-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pos-group-tag.retail {
  background: #EAF1FB;
  color: #2A5FB0;
}

.pos-group-tag.wholesale {
  background: #FBF1E3;
  color: #C77F1A;
}

.pos-cell-secondary {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.pos-cell-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-muted);
}

.pos-cell-money {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: right;
}

.pos-select-btn {
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-select-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.pos-btn-primary {
  height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background 0.15s;
}

.pos-btn-primary:hover {
  background: var(--color-primary-hover);
}

/* =========================================
   HELD CARTS SCREEN
   ========================================= */

.pos-screen-held-carts {
  padding: 24px;
  max-width: 860px;
}

.pos-held-intro {
  padding: 14px 18px;
  background: #FBF1E3;
  border: 1px solid #F4E4C6;
  border-radius: var(--radius-card);
  margin-bottom: 20px;
}

.pos-held-intro p {
  margin: 0;
  font-size: 13px;
  color: #5A4520;
  line-height: 1.5;
}

.pos-held-cart-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  margin-bottom: 12px;
  transition: box-shadow 0.15s;
}

.pos-held-cart-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pos-held-cart-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas);
  border-radius: 10px;
  font-size: 24px;
  color: var(--color-text-muted);
}

.pos-held-cart-info {
  flex: 1;
  min-width: 0;
}

.pos-held-cart-customer {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.pos-held-cart-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-held-cart-total {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-right: 8px;
}

.pos-held-cart-actions {
  display: flex;
  gap: 8px;
}

.pos-btn-restore {
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.pos-btn-restore:hover {
  background: var(--color-primary-hover);
}

.pos-btn-delete {
  height: 38px;
  padding: 0 18px;
  border: 1px solid #DCE3EC;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-btn-delete:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: #FBEEF0;
}

.pos-empty-state {
  padding: 60px 20px;
  text-align: center;
}

.pos-empty-icon {
  display: inline-block;
  font-size: 64px;
  color: #D5DBE3;
  margin-bottom: 16px;
}

.pos-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.pos-empty-message {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 420px;
  margin: 0 auto;
}

/* =========================================
   RETURNS & VOIDS SCREEN
   ========================================= */

.pos-screen-returns {
  padding: 24px;
  max-width: 860px;
}

.pos-returns-lookup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pos-mono-input {
  font-family: var(--font-mono);
}

.pos-sale-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.pos-sale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 16px 18px;
  border-bottom: 1px solid var(--color-border);
}

.pos-sale-number {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.pos-sale-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-status-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pos-status-tag.completed {
  background: #E8F4EC;
  color: #2E8B57;
}

.pos-status-tag.voided {
  background: #FBEEF0;
  color: #B6394A;
}

.pos-return-lines {
  padding: 8px;
}

.pos-return-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
  margin-bottom: 2px;
}

.pos-return-line:hover:not(.disabled) {
  background: var(--color-canvas);
}

.pos-return-line.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pos-line-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #C5CDD8;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  position: relative;
}

.pos-line-checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pos-line-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.pos-line-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.pos-line-details {
  flex: 1;
  min-width: 0;
}

.pos-line-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pos-final-sale-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #F7F9FC;
  color: var(--color-text-muted);
}

.pos-line-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-line-price {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-return-footer {
  padding: 18px;
  border-top: 1px solid var(--color-border);
  background: #FAFBFC;
}

.pos-refund-note {
  padding: 10px 14px;
  background: #EAF1FB;
  border-radius: 8px;
  font-size: 12px;
  color: #2A5FB0;
  margin-bottom: 16px;
}

.pos-refund-reason {
  margin-bottom: 18px;
}

/* .pos-label and .pos-select are defined once, in the Forms section above. */

.pos-refund-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.pos-refund-total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.pos-refund-total-amount {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-danger);
}

.pos-btn-process-refund {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-danger);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.pos-btn-process-refund:hover:not(:disabled) {
  opacity: 0.9;
}

.pos-btn-process-refund:disabled {
  background: #C5CDD8;
  cursor: not-allowed;
}

.pos-btn-void-sale {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--color-danger);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.pos-btn-void-sale:hover:not(:disabled) {
  background: #FBEEF0;
}

.pos-btn-void-sale:disabled {
  border-color: #C5CDD8;
  color: #C5CDD8;
  cursor: not-allowed;
}

/* =========================================
   REPORTS SCREEN
   ========================================= */

.pos-screen-reports {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
}

/* ========== Dialogs (posAlert / posConfirm / posPrompt) ========== */
/* Matches the modal styling used on the Products screen. */
.pos-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pos-dialog {
  background: var(--color-surface);
  border-radius: 8px;
  width: min(92vw, 440px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.pos-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
}

.pos-dialog-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

.pos-dialog-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
}

.pos-dialog-close:hover {
  color: var(--color-text-primary);
}

.pos-dialog-body {
  padding: 22px 24px;
}

.pos-dialog-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: pre-line;
}

.pos-dialog-input {
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.pos-dialog-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(42, 95, 176, 0.12);
}

.pos-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}

/* Destructive confirmations: voids and refunds cannot be undone. */
.pos-btn-primary.pos-btn-danger {
  background: var(--color-danger);
  box-shadow: none;
}

.pos-btn-primary.pos-btn-danger:hover {
  background: #9E3040;
}

/* Period toggle (Today / Month to date) */
.pos-report-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pos-segmented {
  display: inline-flex;
  background: var(--color-subtle-fill-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 3px;
}

.pos-segment,
.pos-stock-segment {
  border: 0;
  background: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.pos-segment:hover,
.pos-stock-segment:hover {
  color: var(--color-text-primary);
}

.pos-segment.active,
.pos-stock-segment.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pos-segment:focus-visible,
.pos-stock-segment:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pos-report-range {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.pos-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pos-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px;
}

.pos-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.pos-kpi-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-reports-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.pos-report-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pos-report-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
}

.pos-report-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-report-card-body {
  padding: 18px;
  flex: 1;
  overflow: auto;
}

.pos-report-table-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pos-table-grid-sales {
  display: grid;
  grid-template-columns: 100px 1fr 80px 110px 110px 100px;
  gap: 16px;
  align-items: center;
  padding: 0 18px;
}

.pos-cell-center {
  text-align: center;
}

.pos-no-data {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.pos-reports-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pos-payment-mix-item {
  margin-bottom: 16px;
}

.pos-payment-mix-item:last-child {
  margin-bottom: 0;
}

.pos-payment-mix-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.pos-payment-mix-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-payment-mix-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-payment-mix-bar {
  height: 8px;
  background: var(--color-canvas);
  border-radius: 4px;
  overflow: hidden;
}

.pos-payment-mix-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s;
}

.pos-top-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-row-divider);
}

.pos-top-product-item:last-child {
  border-bottom: none;
}

.pos-top-product-info {
  flex: 1;
  min-width: 0;
}

.pos-top-product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}

.pos-top-product-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-top-product-revenue {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-top-product-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.pos-top-product-profit {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* =========================================
   SETUP SCREEN
   ========================================= */

.pos-screen-setup {
  padding: 24px;
  max-width: 1200px;
}

.pos-setup-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #E8F4EC;
  border: 1px solid #C3E4CC;
  border-radius: var(--radius-card);
  margin-bottom: 24px;
}

.pos-setup-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2E8B57;
  color: #fff;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
}

.pos-setup-banner-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A5635;
  margin-bottom: 3px;
}

.pos-setup-banner-subtitle {
  font-size: 13px;
  color: #3D7356;
}

.pos-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pos-setup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pos-setup-section-title {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.pos-checklist {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 8px;
}

.pos-checklist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 8px;
  transition: background 0.15s;
  margin-bottom: 4px;
}

.pos-checklist-item:last-child {
  margin-bottom: 0;
}

.pos-checklist-item:hover {
  background: var(--color-canvas);
}

.pos-checklist-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.pos-checklist-icon.complete {
  background: #E8F4EC;
  color: #2E8B57;
}

.pos-checklist-info {
  flex: 1;
  min-width: 0;
}

.pos-checklist-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}

.pos-checklist-value {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-checklist-edit {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #DCE3EC;
  border-radius: 8px;
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.pos-checklist-edit:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

.pos-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px;
}

.pos-info-card-title {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pos-info-item {
  min-width: 0;
}

.pos-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.pos-info-value {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.pos-mono {
  font-family: var(--font-mono);
}

.pos-tax-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pos-tax-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-row-divider);
}

.pos-tax-name {
  font-size: 13px;
  color: var(--color-text-primary);
}

.pos-tax-rate {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.pos-tax-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.pos-tax-total-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pos-tax-total-rate {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ==========================================================================
   Screen styles, moved out of the pages themselves.

   These were <style> blocks in the views. A block can carry a nonce and would have
   satisfied the policy that way, but a stylesheet fetched from this origin needs no
   exception at all — style-src stays a plain 'self', and no inline styling is left
   anywhere for a policy to have an opinion about.
   ========================================================================== */

/* ---------- Account/Index.cshtml ---------- */
    /* Local to these two screens, and prefixed so they cannot be mistaken for the
       shared vocabulary in pos.css. The first version used pos-page, pos-card and
       pos-table — none of which exist — so the page rendered as bare HTML while
       looking, in the markup, as though it had been styled. */
    .acct-page { padding: 20px 24px; overflow-y: auto; }
    .acct-title { font-size: 20px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }
    .acct-card { background: var(--color-surface); border: 1px solid var(--color-border);
                 border-radius: var(--radius-card); padding: 20px; margin-bottom: 18px; max-width: 900px; }
    .acct-card h2 { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }
    .acct-hint { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 16px; }
    .acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
    .acct-msg { margin-top: 12px; font-size: 13px; font-weight: 600; display: none; }
    .acct-msg.bad { color: var(--color-danger); }
    .acct-msg.good { color: var(--color-success); }
    .acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .acct-table th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
                     color: var(--color-text-muted); padding: 8px 10px;
                     border-bottom: 1px solid var(--color-border); }
    .acct-table td { padding: 10px; border-bottom: 1px solid var(--color-row-divider);
                     color: var(--color-text-primary); vertical-align: middle; }
    .acct-table .pos-btn-secondary { margin-right: 6px; }
    .acct-pill-locked { background: #FDECEC; color: var(--color-danger); border-radius: 10px;
                        padding: 2px 9px; font-size: 12px; font-weight: 600; }
    .acct-pill-quiet { color: var(--color-text-muted); font-size: 12px; }
    .acct-hintword { font-weight: 400; color: var(--color-text-secondary); }

/* ---------- Account/Users.cshtml ---------- */
    /* Local to these two screens, and prefixed so they cannot be mistaken for the
       shared vocabulary in pos.css. The first version used pos-page, pos-card and
       pos-table — none of which exist — so the page rendered as bare HTML while
       looking, in the markup, as though it had been styled. */
    .acct-page { padding: 20px 24px; overflow-y: auto; }
    .acct-title { font-size: 20px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }
    .acct-card { background: var(--color-surface); border: 1px solid var(--color-border);
                 border-radius: var(--radius-card); padding: 20px; margin-bottom: 18px; max-width: 900px; }
    .acct-card h2 { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 4px; }
    .acct-hint { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 16px; }
    .acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
    .acct-msg { margin-top: 12px; font-size: 13px; font-weight: 600; display: none; }
    .acct-msg.bad { color: var(--color-danger); }
    .acct-msg.good { color: var(--color-success); }
    .acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .acct-table th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
                     color: var(--color-text-muted); padding: 8px 10px;
                     border-bottom: 1px solid var(--color-border); }
    .acct-table td { padding: 10px; border-bottom: 1px solid var(--color-row-divider);
                     color: var(--color-text-primary); vertical-align: middle; }
    .acct-table .pos-btn-secondary { margin-right: 6px; }
    .acct-pill-locked { background: #FDECEC; color: var(--color-danger); border-radius: 10px;
                        padding: 2px 9px; font-size: 12px; font-weight: 600; }
    .acct-pill-quiet { color: var(--color-text-muted); font-size: 12px; }
    .acct-hintword { font-weight: 400; color: var(--color-text-secondary); }

/* ---------- Enrol/Index.cshtml ---------- */
        .enrol-card { max-width: 460px; margin: 48px auto; background: white;
                      border-radius: 12px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
        .enrol-card h1 { font-size: 20px; margin: 0 0 6px; color: #2D3748; }
        .enrol-card p.lead { font-size: 14px; color: #718096; margin: 0 0 22px; }
        .enrol-field { margin-bottom: 16px; }
        .enrol-field label { display: block; font-size: 13px; font-weight: 600;
                             color: #2D3748; margin-bottom: 6px; }
        .enrol-field input { width: 100%; padding: 10px 12px; font-size: 15px;
                             border: 2px solid #E5E9ED; border-radius: 8px; }
        .enrol-field input:focus { outline: none; border-color: #3182CE; }
        .enrol-msg { margin-top: 16px; font-size: 13px; font-weight: 600; display: none; }
        .enrol-msg.bad { color: var(--color-danger); }
        .enrol-msg.good { color: #2F855A; }

/* ---------- Login/Index.cshtml ---------- */
        .pos-user-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }
        .pos-user-select-btn {
            background: white;
            border: 2px solid #E5E9ED;
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
        }
        .pos-user-select-btn:hover {
            border-color: #3182CE;
            background: #EBF8FF;
        }
        .pos-user-select-btn .pos-avatar {
            flex-shrink: 0;
        }
        .pos-user-select-info {
            flex: 1;
            min-width: 0;
        }
        .pos-user-select-name {
            font-weight: 600;
            font-size: 14px;
            color: #2D3748;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .pos-user-select-role {
            font-size: 12px;
            color: #718096;
        }
        .pos-back-btn {
            background: none;
            border: none;
            color: #3182CE;
            font-size: 14px;
            font-weight: 600;
            padding: 8px 16px;
            cursor: pointer;
            margin-bottom: 16px;
            display: none;
        }
        .pos-back-btn:hover {
            text-decoration: underline;
        }
        #user-selection-view {
            display: block;
        }
        #pin-entry-view {
            display: none;
        }

/* ---------- Login/Password.cshtml ---------- */
        .pw-card { max-width: 420px; margin: 48px auto; background: white;
                   border-radius: 12px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
        .pw-card h1 { font-size: 20px; margin: 0 0 6px; color: #2D3748; }
        .pw-card p.lead { font-size: 14px; color: #718096; margin: 0 0 22px; }
        .pw-field { margin-bottom: 16px; }
        .pw-field label { display: block; font-size: 13px; font-weight: 600;
                          color: #2D3748; margin-bottom: 6px; }
        .pw-field input { width: 100%; padding: 10px 12px; font-size: 15px;
                          border: 2px solid #E5E9ED; border-radius: 8px; }
        .pw-field input:focus { outline: none; border-color: #3182CE; }
        .pw-msg { margin-top: 16px; font-size: 13px; font-weight: 600;
                  color: var(--color-danger); display: none; }
        .pw-alt { margin-top: 20px; font-size: 13px; text-align: center; }
        .pw-alt a { color: #3182CE; font-weight: 600; text-decoration: none; }

/* ---------- POS/Index.cshtml ---------- */
/* Modal styles are shared: see pos.css */







.pos-option-group {
    margin-bottom: 24px;
}

.pos-option-label {
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.pos-option-required {
    color: #E53E3E;
    font-size: 12px;
    margin-left: 4px;
}

.pos-option-value {
    display: block;
    padding: 12px;
    margin-bottom: 8px;
    border: 2px solid #E5E9ED;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.pos-option-value:hover {
    border-color: #CBD5E0;
}

.pos-option-value.selected {
    border-color: #3182CE;
    background: #EBF8FF;
}

.pos-option-value-name {
    font-weight: 500;
}

.pos-option-value-price {
    float: right;
    color: #4A5568;
}


.pos-options-total {
    font-size: 18px;
    font-weight: 600;
}

.pos-variant-btn {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 2px solid #E5E9ED;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.15s;
}
.pos-variant-btn:hover { border-color: #3182CE; background: #EBF8FF; }
.pos-variant-name { font-weight: 600; }
.pos-variant-sku { color: #718096; font-size: 12px; }
.pos-variant-price { font-weight: 700; white-space: nowrap; }
.pos-variant-stock { font-size: 12px; white-space: nowrap; }

/* ---------- POS/_ReceiptModal.cshtml ---------- */

/* The receipt itself: the same 48 characters a line the thermal printer is sent, so the
   two cannot disagree. Monospace is not decoration here — the columns are made of spaces,
   and a proportional font would throw every one of them out. */
/* The logos above the receipt text.

   The block is given its width in ch units to match the text below it, so the two marks
   take the same share of the paper on screen that the printer gives them -- the receipt
   is the same document either way, and that has to include the picture. */
.receipt-logo {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 12px;
    margin: 0 auto;
    padding: 16px 16px 0;
    background: #FFFFFF;

    /* The width is set in ch to match the receipt's line length, and that has to be the
       content width. Under the border-box default the padding is taken out of it
       instead, leaving the logos 32px narrower than the text they sit above. */
    box-sizing: content-box;
}

.receipt-logo img {
    display: block;
    margin: 0 auto;
    height: auto;
}

.receipt-logo-name { width: 80%; }

.receipt-paper {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre;
    margin: 0;
    padding: 16px;
    background: #FFFFFF;
    color: #16202E;
    overflow-x: auto;
}
/* Receipt Modal Styles */
.receipt-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.receipt-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.receipt-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E9ED;
}

.receipt-modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: #2D3748;
}

.receipt-close-btn {
    background: none;
    border: none;
    font-size: 32px;
    color: #718096;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.receipt-close-btn:hover {
    color: #2D3748;
}

.receipt-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.receipt-modal-actions {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #E5E9ED;
    justify-content: flex-end;
}

.receipt-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.receipt-btn-secondary {
    background: white;
    border: 1px solid #CBD5E0;
    color: #2D3748;
}

.receipt-btn-secondary:hover {
    background: #F7FAFC;
}

.receipt-btn-primary {
    background: #3182CE;
    color: white;
}

.receipt-btn-primary:hover {
    background: #2C5282;
}

/* Receipt Styles */
.receipt-container {
    background: white;
    padding: 30px;
    font-family: 'Courier New', monospace;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid #E5E9ED;
}

.receipt-header {
    text-align: center;
    margin-bottom: 20px;
}

.receipt-store-name {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.receipt-store-info {
    font-size: 12px;
    margin: 0;
    line-height: 1.6;
}

.receipt-sale-info {
    margin-bottom: 15px;
}

.receipt-info-table {
    width: 100%;
    font-size: 12px;
}

.receipt-info-table td:first-child {
    font-weight: bold;
    width: 100px;
}

.receipt-divider {
    border-top: 1px dashed #000;
    margin: 15px 0;
}

.receipt-items-table {
    width: 100%;
    font-size: 12px;
}

.receipt-items-table th {
    text-align: left;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    font-weight: bold;
}

.receipt-items-table td {
    padding: 5px 0;
}

.receipt-text-right {
    text-align: right !important;
}

.receipt-totals {
    margin-top: 15px;
}

.receipt-totals-table {
    width: 100%;
    font-size: 12px;
}

.receipt-totals-table td:first-child {
    text-align: left;
}

.receipt-totals-table td:last-child {
    text-align: right;
}

.receipt-total-row {
    font-size: 14px;
    border-top: 1px solid #000;
    border-bottom: 2px double #000;
}

.receipt-total-row td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.receipt-footer {
    margin-top: 20px;
    text-align: center;
}

.receipt-footer-text {
    font-size: 11px;
    margin: 5px 0;
}

.receipt-barcode {
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Print Styles */
/* Printing from the browser.
   Everything but the receipt is hidden, and what is left is the same monospace text the
   thermal printer is sent — so a receipt run off an office printer reads exactly like one
   off the till. The rules that dressed the old table receipt are gone with it. */
@media print {
    body * {
        visibility: hidden;
    }

    .receipt-modal,
    .receipt-modal * {
        visibility: visible;
    }

    .receipt-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }

    .receipt-modal-overlay,
    .receipt-modal-header,
    .receipt-modal-actions,
    .receipt-close-btn {
        display: none !important;
    }

    .receipt-modal-content {
        box-shadow: none;
        max-width: 100%;
        max-height: none;
        border-radius: 0;
    }

    .receipt-modal-body {
        padding: 0;
        overflow: visible;
    }

    .receipt-logo {
        padding: 0;
        font-size: 10pt;
    }

    .receipt-paper {
        padding: 0;
        /* 48 characters have to fit the page whatever it is. At this size the block is
           about 80mm wide, which is the paper the layout is built for. */
        font-size: 10pt;
        overflow: visible;
    }
}

/* ---------- Products/Index.cshtml ---------- */
    .products-admin { display: flex; flex-direction: column; gap: 16px; }
    .products-toolbar { align-items: center; }
    .products-search { flex: 1; min-width: 260px; }
    .products-filter { width: 220px; }
    .products-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; min-height: 620px; }
    .products-list-card, .products-detail-card { min-height: 620px; overflow: hidden; }
    .products-list-header, .products-detail-header, .products-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .products-list-header { padding: 14px 16px; border-bottom: 1px solid var(--color-border); font-weight: 700; }
    .products-list { max-height: 560px; overflow-y: auto; }
    .products-list-item { width: 100%; border: 0; border-bottom: 1px solid var(--color-border); background: white; padding: 14px 16px; text-align: left; cursor: pointer; }
    .products-list-item:hover, .products-list-item.active { background: #F7FAFC; }
    .products-list-name { font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
    .products-list-meta, .products-muted { color: var(--color-text-muted); font-size: 13px; }
    .products-detail-card { padding: 20px; }
    .products-empty { min-height: 560px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; }
    .products-empty-title, .products-detail-title { font-size: 20px; font-weight: 800; color: var(--color-text); }
    .products-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .products-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
    .products-fields > div { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; min-height: 68px; }
    .products-label { display: block; color: var(--color-text-muted); font-size: 12px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
    .products-description { color: var(--color-text); margin-bottom: 22px; }
    .products-section-header { border-top: 1px solid var(--color-border); padding-top: 18px; margin-bottom: 12px; }
    .products-options-header { margin-top: 22px; }
    .products-section-title { font-weight: 800; color: var(--color-text); }
    .products-options-list { display: flex; flex-direction: column; gap: 10px; }
    .products-option-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; }
    .products-option-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
    .products-value-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .products-value-pill { border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 8px; font-size: 13px; background: #F7FAFC; }
    .products-table { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
    .products-table-head, .products-table-row { display: grid; grid-template-columns: minmax(170px, 1.5fr) minmax(110px, 0.9fr) minmax(110px, 0.9fr) minmax(90px, 0.7fr) minmax(80px, 0.6fr) minmax(140px, 0.8fr); gap: 12px; align-items: center; padding: 10px 12px; }
    .products-tier-grid { grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(140px, 1.2fr) minmax(80px, 0.8fr) minmax(120px, 1fr); }
    .products-table-head { background: #F7FAFC; color: var(--color-text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .products-table-row { border-top: 1px solid var(--color-border); font-size: 14px; }
    .products-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; background: #E6FFFA; color: #047857; }
    .products-status.inactive { background: #EDF2F7; color: #718096; }
    .products-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
    .products-inline-checks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
    .products-modal { max-width: 760px; }
    .products-import-actions { display: flex; justify-content: flex-end; margin-bottom: 16px; }
    .products-download-link { text-decoration: none; display: inline-flex; align-items: center; }
    .products-import-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
    .products-import-summary-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px; }
    .products-import-errors { margin-top: 14px; max-height: 220px; overflow-y: auto; color: #9B2C2C; font-size: 13px; }
    /* Modal, form and button styles are shared: see pos.css */
    @media (max-width: 1100px) {
        .products-layout { grid-template-columns: 1fr; }
        .products-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
        .products-toolbar, .pos-form-row { flex-direction: column; align-items: stretch; }
        .products-filter { width: 100%; }
        .products-fields, .products-table-head, .products-table-row { grid-template-columns: 1fr; }
        .products-table-head { display: none; }
    }

/* ---------- Setup/Index.cshtml (1 of 2) ---------- */
    .pos-field { margin-bottom: 14px; }
    .pos-field label { display:block; font-size:13px; font-weight:600; color:#2D3748; margin-bottom:5px; }
    .pos-field input { width:100%; padding:9px 12px; font-size:15px;
                       border:2px solid #E5E9ED; border-radius:8px; }
    .pos-field input:focus { outline:none; border-color:#3182CE; }
    .pos-inline-msg { margin-top:10px; font-size:13px; font-weight:600; display:none; }
    .pos-inline-msg.bad { color: var(--color-danger); }
    .pos-inline-msg.good { color:#2F855A; }

/* ---------- Setup/Index.cshtml (2 of 2) ---------- */
    .pos-inline-msg { margin-top:10px; font-size:13px; font-weight:600; display:none; }
    .pos-inline-msg.bad { color: var(--color-danger); }
    .pos-inline-msg.good { color: var(--color-success); }
    .pos-tender-row { display:flex; align-items:center; justify-content:space-between;
                      padding:8px 0; border-bottom:1px solid var(--color-row-divider); }
    .pos-tender-row:last-child { border-bottom:none; }
    .pos-tender-off { color: var(--color-text-muted); }

/* ---------- Logs/Index.cshtml ---------- */
.pos-screen-logs { display: flex; flex-direction: column; gap: 16px; }

.logs-search { flex: 1; min-width: 240px; }
.logs-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logs-oldest { font-size: 14px; }
.logs-note { margin: 0; }

.logs-table { width: 100%; table-layout: fixed; }

/* Fixed columns so the message gets what is left. A log read at a glance needs the
   timestamps aligned; a message column that jumps with the longest source name does
   not read as a list. */
.logs-col-when { width: 180px; white-space: nowrap; }
.logs-col-level { width: 90px; }
.logs-col-source { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.logs-row td { vertical-align: top; word-break: break-word; }

/* Level as colour, so the eye finds the errors before it reads anything. */
.logs-level-warning .logs-col-level { color: var(--color-warning, #B7791F); font-weight: 600; }
.logs-level-error .logs-col-level,
.logs-level-fatal .logs-col-level { color: var(--color-danger); font-weight: 600; }
.logs-level-fatal { background: rgba(197, 48, 48, 0.06); }

.logs-exception {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 8px 0 0;
    padding: 8px;
    background: var(--color-subtle-fill);
    border-radius: 4px;
    overflow-x: auto;
}

.logs-paging { display: flex; align-items: center; gap: 12px; }
.logs-position { margin: 0; border: none; background: none; padding: 0; }

/* ========== Utilities ==========
   One declaration per class, generated from the inline styles these screens used
   to carry. They are here because the content security policy forbids a style
   attribute — a nonce cannot cover one, there being no tag to put it on — and not
   because anybody wanted a utility framework.

   Last in the file on purpose: a utility and a component rule have the same
   specificity, so the one written later wins, which is the behaviour an inline
   style had. Anything JavaScript sets on element.style still beats both, which is
   how every modal on every screen still opens. */

.u-ai-center { align-items: center; }
.u-ai-flex-end { align-items: flex-end; }
.u-ai-flex-start { align-items: flex-start; }

.u-bg-hexc6f6d5 { background: #C6F6D5; }

.u-border-1-solid-border { border: 1px solid var(--color-border); }
.u-border-1-solid-cbd5e0 { border: 1px solid #CBD5E0; }
.u-border-1-solid-e5e9ed { border: 1px solid #E5E9ED; }

.u-bb-1-solid-edf2f7 { border-bottom: 1px solid #EDF2F7; }
.u-bb-1-solid-row-divider { border-bottom: 1px solid var(--color-row-divider); }

.u-bc-collapse { border-collapse: collapse; }

.u-border-color-danger { border-color: var(--color-danger); }

.u-rounded-4 { border-radius: 4px; }
.u-rounded-6 { border-radius: 6px; }
.u-rounded-8 { border-radius: 8px; }

.u-bt-1-solid-e5e9ed { border-top: 1px solid #E5E9ED; }

.u-color-danger { color: var(--color-danger); }
.u-color-hex047857 { color: #047857; }
.u-color-hex22543d { color: #22543D; }
.u-color-hex2d3748 { color: #2D3748; }
.u-color-hex3182ce { color: #3182CE; }
.u-color-hex4a5568 { color: #4A5568; }
.u-color-hex718096 { color: #718096; }
.u-color-hex8995a4 { color: #8995A4; }
.u-color-hex9b2c2c { color: #9B2C2C; }
.u-color-muted { color: var(--color-text-muted); }
.u-color-secondary { color: var(--color-text-secondary); }
.u-color-success { color: var(--color-success, #047857); }
.u-color-warning { color: var(--color-warning, #B45309); }
.u-color-warning-b45309 { color: var(--color-warning, #B45309); }

.u-cursor-pointer { cursor: pointer; }

.u-d-block { display: block; }
.u-d-flex { display: flex; }
.u-d-grid { display: grid; }
.u-d-inline-flex { display: inline-flex; }
.u-hidden { display: none; }

/* Honours the line breaks in a message written as sentences. Without it the
   paragraphs of a card error run together into one unreadable line. */
.u-preserve-lines { white-space: pre-line; }

.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }

.u-fsh-0 { flex-shrink: 0; }

.u-fxw-wrap { flex-wrap: wrap; }

.u-ff-monospace { font-family: monospace; }

.u-fs-10 { font-size: 10px; }
.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-15 { font-size: 15px; }
.u-fs-16 { font-size: 16px; }

.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }

.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-gap-20 { gap: 20px; }
.u-gap-8 { gap: 8px; }

.u-gtc-repeat-2-minmax-0-1fr { grid-template-columns: repeat(2, minmax(0,1fr)); }
.u-gtc-repeat-3-minmax-0-1fr { grid-template-columns: repeat(3, minmax(0,1fr)); }
.u-gtc-repeat-4-minmax-0-1fr { grid-template-columns: repeat(4, minmax(0,1fr)); }

.u-jc-flex-end { justify-content: flex-end; }
.u-jc-space-between { justify-content: space-between; }

.u-ls-0-03em { letter-spacing: 0.03em; }

.u-m-0-0-12 { margin: 0 0 12px; }
.u-m-0-0-14 { margin: 0 0 14px; }
.u-m-0-0-16 { margin: 0 0 16px; }
.u-m-0-0-4 { margin: 0 0 4px; }
.u-m-10-0-6 { margin: 10px 0 6px; }
.u-m-14-18 { margin: 14px 18px; }
.u-m-4-0 { margin: 4px 0; }
.u-m-4-0-14 { margin: 4px 0 14px; }
.u-m-8-0-18 { margin: -8px 0 18px; }

.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }

.u-ml-10 { margin-left: 10px; }

.u-mr-8 { margin-right: 8px; }

.u-mt-0 { margin-top: 0; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-4 { margin-top: 4px; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-neg10 { margin-top: -10px; }

.u-maxh-160 { max-height: 160px; }
.u-maxh-180 { max-height: 180px; }
.u-maxh-200 { max-height: 200px; }
.u-maxh-220 { max-height: 220px; }
.u-maxh-420 { max-height: 420px; }
.u-maxh-500 { max-height: 500px; }
.u-maxh-520 { max-height: 520px; }
.u-maxh-540 { max-height: 540px; }
.u-maxh-560 { max-height: 560px; }
.u-maxh-600 { max-height: 600px; }
.u-maxh-620 { max-height: 620px; }

.u-maxw-1040 { max-width: 1040px; }
.u-maxw-120 { max-width: 120px; }
.u-maxw-140 { max-width: 140px; }
.u-maxw-380 { max-width: 380px; }
.u-maxw-420 { max-width: 420px; }
.u-maxw-460 { max-width: 460px; }
.u-maxw-480 { max-width: 480px; }
.u-maxw-520 { max-width: 520px; }
.u-maxw-560 { max-width: 560px; }
.u-maxw-600 { max-width: 600px; }
.u-maxw-620 { max-width: 620px; }
.u-maxw-680 { max-width: 680px; }
.u-maxw-760 { max-width: 760px; }
.u-maxw-820 { max-width: 820px; }
.u-maxw-900 { max-width: 900px; }
.u-maxw-940 { max-width: 940px; }

.u-opacity-0-55 { opacity: 0.55; }
.u-bb-1-solid-hexedf2f7 { border-bottom: 1px solid #EDF2F7; }
.u-opacity-0-5 { opacity: 0.5; }
.u-p-6-0 { padding: 6px 0; }

.u-ox-auto { overflow-x: auto; }

.u-oy-auto { overflow-y: auto; }

.u-p-1-6 { padding: 1px 6px; }
.u-p-12 { padding: 12px; }
.u-p-12-18-6 { padding: 12px 18px 6px; }
.u-p-18 { padding: 18px; }
.u-p-20 { padding: 20px; }
.u-p-24 { padding: 24px; }
.u-p-4 { padding: 4px; }
.u-p-4-0 { padding: 4px 0; }
.u-p-4-10 { padding: 4px 10px; }
.u-p-4-6 { padding: 4px 6px; }
.u-p-40 { padding: 40px; }
.u-p-5 { padding: 5px; }
.u-p-6 { padding: 6px; }
.u-p-6-12 { padding: 6px 12px; }
.u-p-6-8 { padding: 6px 8px; }
.u-p-8-10 { padding: 8px 10px; }

.u-pt-16 { padding-top: 16px; }

.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

.u-td-none { text-decoration: none; }

.u-tt-uppercase { text-transform: uppercase; }

.u-ws-nowrap { white-space: nowrap; }

.u-w-100pct { width: 100%; }
.u-w-1pct { width: 1%; }
.u-w-70 { width: 70px; }
.u-w-80 { width: 80px; }