/* ==========================================================
   getStorena Business Suite — نظام التصميم
   الملف: pos-design-system.css
   المرحلة 1 · Powered by S-Tech
   ----------------------------------------------------------
   ملف واحد مستقل. ما بيتعارض مع ستايل لوحة الأدمن —
   كل المتغيّرات مسبوقة بـ--g و كل الكلاسات مسبوقة بـ.g
   ----------------------------------------------------------
   القاعدة: الأرقام هي البطل. كل شي تاني بيخدمها.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* ==========================================================
   1) الرموز — Design Tokens
   ========================================================== */
:root {
  /* ---------- الهوية ---------- */
  --g-primary:        #0F5BD8;
  --g-primary-600:    #0D4EBB;
  --g-primary-400:    #3B7BE5;
  --g-primary-100:    #E3ECFD;

  --g-turquoise:      #0BC5E0;
  --g-turquoise-600:  #06A3BA;
  --g-turquoise-100:  #DEF7FC;

  --g-silver:         #94A3B8;
  --g-silver-100:     #F1F5F9;

  --g-success:        #10B981;
  --g-success-100:    #D8F6EA;
  --g-warning:        #F97316;
  --g-warning-100:    #FEEBDD;
  --g-error:          #EF4444;
  --g-error-100:      #FDE1E1;

  --g-ink:            #0F1419;
  --g-ink-soft:       #1A222C;

  /* ---------- التدرجات ---------- */
  --g-grad-brand:  linear-gradient(135deg, #0F5BD8 0%, #0BC5E0 100%);
  --g-grad-deep:   linear-gradient(160deg, #0F1419 0%, #1A222C 100%);
  --g-grad-success:linear-gradient(135deg, #10B981 0%, #0BC5E0 100%);
  --g-grad-warn:   linear-gradient(135deg, #F97316 0%, #EF4444 100%);
  /* لمعة زجاجية بتمرق فوق الأسطح البارزة */
  --g-gloss: linear-gradient(180deg,
              rgba(255,255,255,.28) 0%,
              rgba(255,255,255,.06) 42%,
              rgba(255,255,255,0)   43%,
              rgba(0,0,0,.05)      100%);

  /* ---------- الأسطح (الوضع الفاتح) ---------- */
  --g-bg:          #F5F7FB;
  --g-bg-deep:     #E9EEF7;
  --g-surface:     #FFFFFF;
  --g-surface-2:   #FAFBFE;
  --g-glass:       rgba(255,255,255,.72);
  --g-glass-brd:   rgba(255,255,255,.85);
  --g-border:      #E2E8F0;
  --g-border-soft: #EEF2F7;

  --g-text:        #0F1419;
  --g-text-2:      #475569;
  --g-text-3:      #94A3B8;
  --g-on-brand:    #FFFFFF;

  /* ---------- الظلال الملوّنة ---------- */
  --g-sh-sm:    0 1px 2px rgba(15,20,25,.06), 0 1px 3px rgba(15,20,25,.04);
  --g-sh-md:    0 4px 12px rgba(15,20,25,.07), 0 2px 4px rgba(15,20,25,.04);
  --g-sh-lg:    0 12px 32px rgba(15,20,25,.10), 0 4px 8px rgba(15,20,25,.05);
  --g-sh-brand: 0 8px 24px rgba(15,91,216,.28), 0 2px 6px rgba(15,91,216,.18);
  --g-sh-turq:  0 8px 24px rgba(11,197,224,.26);
  --g-sh-ok:    0 8px 24px rgba(16,185,129,.26);
  --g-sh-err:   0 8px 24px rgba(239,68,68,.24);

  /* ---------- الاستدارات ---------- */
  --g-r-sm:  10px;
  --g-r-md:  14px;
  --g-r-lg:  18px;
  --g-r-xl:  24px;
  --g-r-full:999px;

  /* ---------- المسافات ---------- */
  --g-s1: 4px;  --g-s2: 8px;  --g-s3: 12px; --g-s4: 16px;
  --g-s5: 20px; --g-s6: 24px; --g-s8: 32px; --g-s10:40px; --g-s12:48px;

  /* ---------- الخطوط ---------- */
  --g-font-display: 'Rubik', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --g-font-body:    'IBM Plex Sans Arabic', system-ui, 'Segoe UI', sans-serif;
  --g-font-num:     'IBM Plex Mono', ui-monospace, monospace;

  /* سلّم الأحجام */
  --g-t-xs:   12px;
  --g-t-sm:   13px;
  --g-t-base: 15px;
  --g-t-md:   17px;
  --g-t-lg:   21px;
  --g-t-xl:   27px;
  --g-t-2xl:  34px;
  --g-t-3xl:  44px;

  /* ---------- الحركة ---------- */
  --g-fast: 140ms cubic-bezier(.4,0,.2,1);
  --g-mid:  240ms cubic-bezier(.4,0,.2,1);
  --g-slow: 420ms cubic-bezier(.16,1,.3,1);

  /* ---------- مقاسات اللمس (تابلت الكاشير) ---------- */
  --g-touch:  56px;
  --g-touch-lg: 68px;

  --g-z-splash: 9000;
  --g-z-modal:  8000;
  --g-z-toast:  8500;
}

/* ==========================================================
   2) الوضع الليلي — إجباري ومدعوم بالكامل
   ========================================================== */
[data-theme="dark"] {
  --g-bg:          #0F1419;
  --g-bg-deep:     #0A0E12;
  --g-surface:     #1A222C;
  --g-surface-2:   #212B37;
  --g-glass:       rgba(26,34,44,.72);
  --g-glass-brd:   rgba(255,255,255,.10);
  --g-border:      #2C3846;
  --g-border-soft: #232D39;

  --g-text:        #F1F5F9;
  --g-text-2:      #A9B6C6;
  --g-text-3:      #6B7A8C;

  --g-primary-100: #16264A;
  --g-turquoise-100:#0C3B45;
  --g-success-100: #0D3A2E;
  --g-warning-100: #3D2413;
  --g-error-100:   #3D1A1A;
  --g-silver-100:  #212B37;

  --g-sh-sm:  0 1px 2px rgba(0,0,0,.4);
  --g-sh-md:  0 4px 12px rgba(0,0,0,.45);
  --g-sh-lg:  0 12px 32px rgba(0,0,0,.55);

  --g-gloss: linear-gradient(180deg,
              rgba(255,255,255,.10) 0%,
              rgba(255,255,255,.03) 42%,
              rgba(255,255,255,0)   43%,
              rgba(0,0,0,.18)      100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/* ==========================================================
   3) الأساس
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.g-app {
  margin: 0;
  direction: rtl;
  font-family: var(--g-font-body);
  font-size: var(--g-t-base);
  line-height: 1.6;
  color: var(--g-text);
  background: var(--g-bg);
  -webkit-font-smoothing: antialiased;
  /* الكاشير بيشتغل بإصبعه — ما بدنا تحديد نص عرضي */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* الأرقام دايماً بمحاذاة جدولية — الأعمدة بتضل مصطفّة */
.g-num, .g-money, input[type="number"], td.g-num {
  font-family: var(--g-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
}

h1, h2, h3, h4 {
  font-family: var(--g-font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--g-s3);
  letter-spacing: -.01em;
}
h1 { font-size: var(--g-t-2xl); }
h2 { font-size: var(--g-t-xl); }
h3 { font-size: var(--g-t-lg); }
h4 { font-size: var(--g-t-md); }

/* ==========================================================
   4) الأسطح
   ========================================================== */
.g-card {
  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-sh-sm);
  padding: var(--g-s5);
}

.g-card--raised { box-shadow: var(--g-sh-md); border-radius: var(--g-r-xl); }
.g-card--flush  { padding: 0; overflow: hidden; }

/* زجاجي — للأشرطة العائمة والرؤوس الثابتة */
.g-glass {
  background: var(--g-glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--g-glass-brd);
  border-radius: var(--g-r-xl);
  box-shadow: var(--g-sh-md);
}

/* بطاقة بالهوية — مع لمعة */
.g-card--brand {
  position: relative;
  background: var(--g-grad-brand);
  color: var(--g-on-brand);
  border: none;
  border-radius: var(--g-r-xl);
  box-shadow: var(--g-sh-brand);
  overflow: hidden;
}
.g-card--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-gloss);
  pointer-events: none;
}
.g-card--brand > * { position: relative; }

/* ==========================================================
   5) الأزرار
   ========================================================== */
.g-btn {
  --_bg: var(--g-surface);
  --_fg: var(--g-text);
  --_bd: var(--g-border);
  --_sh: var(--g-sh-sm);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-s2);
  min-height: var(--g-touch);
  padding: 0 var(--g-s5);
  font-family: var(--g-font-body);
  font-size: var(--g-t-base);
  font-weight: 600;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--g-r-md);
  box-shadow: var(--_sh);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--g-fast), box-shadow var(--g-fast), filter var(--g-fast);
  user-select: none;
}
.g-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--g-gloss);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--g-fast);
}
.g-btn:hover  { filter: brightness(1.04); }
.g-btn:active { transform: translateY(1px) scale(.995); }
.g-btn:focus-visible {
  outline: 3px solid var(--g-turquoise);
  outline-offset: 2px;
}
.g-btn[disabled], .g-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; filter: none;
}

.g-btn--primary {
  --_bg: var(--g-grad-brand);
  --_fg: var(--g-on-brand);
  --_bd: transparent;
  --_sh: var(--g-sh-brand);
}
.g-btn--primary::before { opacity: 1; }

.g-btn--ok   { --_bg: var(--g-grad-success); --_fg:#fff; --_bd:transparent; --_sh: var(--g-sh-ok); }
.g-btn--ok::before { opacity: 1; }

.g-btn--danger { --_bg: var(--g-grad-warn); --_fg:#fff; --_bd:transparent; --_sh: var(--g-sh-err); }
.g-btn--danger::before { opacity: 1; }

.g-btn--ghost { --_bg: transparent; --_bd: var(--g-border); --_sh: none; }
.g-btn--quiet { --_bg: transparent; --_bd: transparent; --_sh: none; --_fg: var(--g-text-2); }

.g-btn--lg    { min-height: var(--g-touch-lg); font-size: var(--g-t-md); padding: 0 var(--g-s6); border-radius: var(--g-r-lg); }
.g-btn--block { display: flex; width: 100%; }
.g-btn--icon  { padding: 0; width: var(--g-touch); }

/* ==========================================================
   6) الحقول
   ========================================================== */
.g-field { display: block; margin-bottom: var(--g-s4); }

.g-label {
  display: block;
  font-size: var(--g-t-sm);
  font-weight: 600;
  color: var(--g-text-2);
  margin-bottom: var(--g-s2);
}

.g-input, .g-select, .g-textarea {
  width: 100%;
  min-height: var(--g-touch);
  padding: 0 var(--g-s4);
  font-family: inherit;
  font-size: var(--g-t-base);
  color: var(--g-text);
  background: var(--g-surface);
  border: 1.5px solid var(--g-border);
  border-radius: var(--g-r-md);
  transition: border-color var(--g-fast), box-shadow var(--g-fast);
}
.g-textarea { min-height: 110px; padding: var(--g-s3) var(--g-s4); line-height: 1.6; resize: vertical; }

.g-input:focus, .g-select:focus, .g-textarea:focus {
  outline: none;
  border-color: var(--g-primary);
  box-shadow: 0 0 0 4px var(--g-primary-100);
}
.g-input::placeholder { color: var(--g-text-3); }

.g-input[aria-invalid="true"] {
  border-color: var(--g-error);
  box-shadow: 0 0 0 4px var(--g-error-100);
}

.g-hint  { font-size: var(--g-t-xs); color: var(--g-text-3); margin-top: var(--g-s2); }
.g-error { font-size: var(--g-t-xs); color: var(--g-error); margin-top: var(--g-s2); font-weight: 600; }

/* ==========================================================
   7) الشارات وحالات الاشتراك
   ========================================================== */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--g-s1);
  padding: 3px var(--g-s3);
  font-size: var(--g-t-xs);
  font-weight: 700;
  border-radius: var(--g-r-full);
  background: var(--g-silver-100);
  color: var(--g-text-2);
  white-space: nowrap;
}
.g-badge--ok    { background: var(--g-success-100); color: var(--g-success); }
.g-badge--warn  { background: var(--g-warning-100); color: var(--g-warning); }
.g-badge--err   { background: var(--g-error-100);   color: var(--g-error); }
.g-badge--brand { background: var(--g-primary-100); color: var(--g-primary); }
.g-badge--turq  { background: var(--g-turquoise-100); color: var(--g-turquoise-600); }

/* ==========================================================
   8) التوقيع البصري — سطر المبلغ
   ----------------------------------------------------------
   العنصر اللي بينحفظ بالذاكرة. الرقم كبير بخط أحادي المسافة
   واللمعة بتمرق فوقه لما يتغيّر — الكاشير بيلاحظ التغيير
   من غير ما يقرا. هيدا كل الفرق بشاشة بيع سريعة.
   ========================================================== */
.g-total {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--g-s4);
  padding: var(--g-s5) var(--g-s6);
  background: var(--g-grad-deep);
  color: #fff;
  border-radius: var(--g-r-xl);
  box-shadow: var(--g-sh-lg);
  overflow: hidden;
}
.g-total::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 45%;
  inset-inline-start: -50%;
  background: linear-gradient(90deg,
    transparent, rgba(11,197,224,.30), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.g-total.is-changed::after {
  animation: g-sweep 700ms cubic-bezier(.16,1,.3,1);
}
@keyframes g-sweep {
  from { inset-inline-start: -50%; }
  to   { inset-inline-start: 115%; }
}

.g-total__label {
  font-size: var(--g-t-sm);
  font-weight: 600;
  color: var(--g-silver);
  letter-spacing: .04em;
}
.g-total__value {
  font-family: var(--g-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--g-t-3xl);
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
.g-total__second {
  font-family: var(--g-font-num);
  font-size: var(--g-t-sm);
  color: var(--g-turquoise);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================
   9) الجداول
   ========================================================== */
.g-table { width: 100%; border-collapse: collapse; font-size: var(--g-t-sm); }
.g-table th {
  text-align: start;
  padding: var(--g-s3) var(--g-s4);
  font-weight: 700;
  font-size: var(--g-t-xs);
  color: var(--g-text-3);
  background: var(--g-surface-2);
  border-bottom: 1px solid var(--g-border);
  position: sticky; top: 0; z-index: 1;
}
.g-table td {
  padding: var(--g-s3) var(--g-s4);
  border-bottom: 1px solid var(--g-border-soft);
}
.g-table tbody tr:hover td { background: var(--g-surface-2); }
.g-table .g-num { text-align: end; }

/* ==========================================================
   10) رسائل الفراغ والتحميل
   ========================================================== */
.g-empty {
  text-align: center;
  padding: var(--g-s12) var(--g-s5);
  color: var(--g-text-3);
}
.g-empty__title { font-family: var(--g-font-display); font-size: var(--g-t-md); color: var(--g-text-2); margin-bottom: var(--g-s2); }

.g-skeleton {
  background: linear-gradient(90deg,
    var(--g-border-soft) 25%, var(--g-border) 37%, var(--g-border-soft) 63%);
  background-size: 400% 100%;
  animation: g-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--g-r-sm);
}
@keyframes g-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* شريط "شغّال أوفلاين" */
.g-offline-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--g-s2);
  padding: var(--g-s2) var(--g-s4);
  font-size: var(--g-t-sm);
  font-weight: 600;
  color: #fff;
  background: var(--g-grad-warn);
}

/* ==========================================================
   11) التذييل — Powered by S-Tech
   ========================================================== */
.g-stech {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--g-s4);
  font-size: var(--g-t-xs);
  color: var(--g-text-3);
  letter-spacing: .03em;
}
.g-stech strong {
  font-family: var(--g-font-display);
  font-weight: 700;
  background: var(--g-grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================
   12) أدوات
   ========================================================== */
.g-row    { display: flex; align-items: center; gap: var(--g-s3); }
.g-row--between { justify-content: space-between; }
.g-col    { display: flex; flex-direction: column; gap: var(--g-s3); }
.g-grow   { flex: 1 1 auto; min-width: 0; }
.g-muted  { color: var(--g-text-2); }
.g-dim    { color: var(--g-text-3); }
.g-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-hidden { display: none !important; }

.g-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================
   13) الاستجابة والوصولية
   ========================================================== */
@media (max-width: 640px) {
  :root { --g-t-3xl: 34px; --g-t-2xl: 27px; --g-touch: 52px; }
  .g-card { padding: var(--g-s4); border-radius: var(--g-r-md); }
  .g-total { padding: var(--g-s4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .g-no-print { display: none !important; }
  body.g-app { background: #fff; color: #000; }
}