/* ============================================================
   قهرمانی — داشبورد فروش حضوری (POS)

   قالب POS نام متغیرهای مخصوص خودش را دارد (--bg، --text، --primary-s، …)
   و همه‌ی استایل‌هایش inline با همین نام‌ها نوشته شده. این نام‌ها زیر
   .pos-root به توکن‌های tokens.css نگاشت می‌شوند.
   ============================================================ */

.pos-root {
  --bg:        var(--canvas);
  --surface2:  var(--surface-sunken);
  --text:      var(--foreground);

  /* ⚠️ --surface و --border عمداً اینجا تعریف نمی‌شوند.
     tokens.css همین نام‌ها را با همین معنا در :root دارد، پس به ارث می‌رسند.
     نوشتن `--surface: var(--surface)` ارجاع به خود است و طبق مشخصات CSS
     متغیر را «نامعتبر» می‌کند؛ نتیجه‌اش این بود که کل سطح‌ها و کادرهای
     صندوق بی‌رنگ می‌شدند. */

  /* --muted در قالب POS رنگِ متنِ کم‌رنگ است، ولی در tokens.css یک سطحِ
     خاکستری. چون هیچ‌جای صندوق به معنیِ tokens نیاز ندارد، اینجا به
     متنِ کم‌رنگ نگاشت می‌شود. */
  --muted:     var(--muted-foreground);

  --primary:    var(--brand-700);
  --primary-h:  var(--brand-800);
  --primary-s:  var(--primary-subtle);
  --on-primary: var(--primary-foreground);

  --accent:    var(--accent-foreground);
  --accent-s:  var(--accent-subtle);

  --success:   var(--success-text);
  --success-s: var(--success-subtle);
  --warning:   var(--warning-text);
  --warning-s: var(--warning-subtle);
  --danger:    var(--danger-text);
  --danger-s:  var(--danger-subtle);
  --info:      var(--info-text);
  --info-s:    var(--info-subtle);

  --sh-md: var(--pc-shadow-md);
  --sh-lg: var(--pc-shadow-lg);

  direction: rtl;
  background: var(--bg);
  color: var(--text);
  font-family: var(--pc-font-sans);
  font-size: 14px;
  min-height: 100vh;
}

/* حالت پرکنتراست صندوق — برای نور زیاد مغازه (tokens.css → .pos-contrast) */
.pos-root.pos-contrast {
  --primary: var(--brand-800);
}

  /* کی‌فریم‌های قالب POS */
  @keyframes nx-in  { from { background: var(--accent-subtle); } to { background: transparent; } }
  @keyframes nx-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes nx-spin { to { transform: rotate(360deg); } }

  .pos-root .nx-in  { animation: nx-in 700ms var(--pc-ease-default); }
  .pos-root .nx-pop { animation: nx-pop 220ms var(--pc-ease-spring); }
  .pos-root .nx-spin { animation: nx-spin 900ms linear infinite; }

  /* پایه‌های قالب POS که در inline تکرار شده‌اند */
  .pos-root button { cursor: pointer; }
  .pos-root button:disabled { cursor: not-allowed; }
  .pos-root :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .pos-root a { color: var(--primary); text-decoration: none; }
  .pos-root a:hover { color: var(--primary-h); text-decoration: underline; }

/* ============================================================
   اجزای صفحه‌های مدیریت صندوق (شعبه‌ها، گزارش، مرجوعی، پرینتر)
   ============================================================ */
.pos-scope { color: var(--foreground); font-family: var(--pc-font-sans); }

.pos-scope .adm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.pos-scope .adm-stat-dark { background: var(--brand-950); color: var(--on-brand); border-radius: 14px; padding: 16px; }
.pos-scope .adm-btn {
  border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  height: 34px; padding: 0 13px; font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--foreground); transition: background var(--pc-dur-micro) var(--pc-ease-default);
}
.pos-scope .adm-btn:hover { background: var(--canvas); }
.pos-scope .adm-btn-primary {
  border: 1px solid var(--primary); background: var(--primary); color: var(--primary-foreground);
  border-radius: 10px; height: 34px; padding: 0 13px; font-size: 12px; font-weight: 650;
  cursor: pointer; transition: filter var(--pc-dur-micro) var(--pc-ease-default);
}
.pos-scope .adm-btn-primary:hover { filter: brightness(1.08); }
.pos-scope .adm-btn:disabled, .pos-scope .adm-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.pos-scope .adm-card-head {
  padding: 16px 20px; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pos-scope .adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pos-scope .adm-table thead th {
  text-align: start; padding: 11px 16px; font-weight: 650; color: var(--muted-foreground);
  background: var(--canvas); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pos-scope .adm-table tbody td {
  padding: 13px 16px; border-bottom: 1px solid color-mix(in oklch, var(--border) 55%, transparent);
  color: var(--foreground);
}
.pos-scope .adm-table tbody tr:hover td { background: var(--canvas); }
.pos-scope .adm-badge {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 99px;
  padding: 3px 9px; font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
@keyframes omPop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes omFade { from { opacity: 0; } to { opacity: 1; } }
.pos-scope .adm-pop { animation: omPop 0.18s var(--pc-ease-default) both; }
.pos-scope .adm-fade { animation: omFade 0.14s ease both; }

.pos-scope .hairline { border: 0.5px solid var(--hairline); }
.pos-scope .hairline-b { border-bottom: 0.5px solid var(--hairline); }
.pos-scope .hairline-t { border-top: 0.5px solid var(--hairline); }
.pos-scope .glass-sheet {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--pc-radius-2xl); box-shadow: var(--pc-shadow-overlay);
}
.pos-scope input, .pos-scope select, .pos-scope textarea { color: var(--foreground); }

/* ریزبرچسب ۱۱ پیکسلی و دکمه‌ی اصلی بزرگ — در قالب مبدأ ابزار Tailwind بودند */
.pos-scope .text-2xs { font-size: var(--pc-text-2xs); }
.pos-scope .btn-cta {
  display: inline-flex; align-items: center; justify-content: center; height: 46px;
  border-radius: var(--pc-radius-sm); background: var(--primary); color: var(--primary-foreground);
  font-size: 14px; font-weight: 650; cursor: pointer; border: 0;
}
.pos-scope .btn-cta:hover { background: var(--primary-hover); }
.pos-scope .btn-cta:disabled { opacity: .55; cursor: not-allowed; }
.pos-scope .latin-nums { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.pos-scope .no-scrollbar { scrollbar-width: none; }
.pos-scope .no-scrollbar::-webkit-scrollbar { display: none; }
.pos-scope .bg-danger-subtle\/40 { background: color-mix(in oklch, var(--danger-subtle) 40%, transparent); }
.pos-scope .border-\[color\:var\(--danger\)\]\/40 { border-color: color-mix(in oklch, var(--danger) 40%, transparent); }
.pos-scope .hover\:bg-surface-sunken\/60:hover { background: color-mix(in oklch, var(--surface-sunken) 60%, transparent); }