/* ══════════════════════════════════════════════════════════════════════════
   Photobooth — نظام التصميم الموحّد

   مصدر واحد لكل قيمة بصرية في المنتج: لوحة المطوّر، صفحة العميل، وصفحة
   التحميل. الثلاث تستدعي هذا الملف، فتغيير رمز واحد هنا يغيّرها كلها معًا.

   القواعد الثلاث:
     ١. لا لون ولا مسافة ولا حجم خط مكتوب يدويًا خارج كتلة الرموز.
     ٢. كل سلّم يشتقّ من مقياس واحد، فتضبط الكثافة برقم واحد.
     ٣. كل مكوّن يعمل من ٣٢٠px إلى ٢٥٦٠px بلا استثناء.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── الخطوط ──
     Tajawal للنص العربي. لا يحتوي أرقامًا عربية-هندية، ولهذا يكتب النظام
     أرقامًا لاتينية في كل مكان — الخلط بينهما كان يُسقط الأرقام على خط رموز
     فتُرسم معيّنات بدل أرقام. */
  --font-ui: Tajawal, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ── الهوية ── */
  --primary: #8b5cf6;
  --primary-light: #a78bfa;
  --primary-dark: #6d28d9;
  --primary-soft: #c4b5fd;

  /* ── الدلالات ──
     منفصلة عن لون الهوية عمدًا: «نجح» و«خطر» يجب أن يبقيا مقروءين حتى لو
     تغيّر البنفسجي غدًا. */
  --green: #22c55e;
  --green-dark: #059669;
  --yellow: #f59e0b;
  --yellow-dark: #d97706;
  --red: #ef4444;
  --info: #3b82f6;
  --cyan: #22d3ee;

  /* ── الأسطح ── */
  --bg: #0f0f1a;
  --bg-2: #141428;
  --bg-3: #1a1a35;
  --card-bg: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);

  --text: #f0f0ff;
  --text-muted: rgba(240, 240, 255, 0.5);
  --text-dim: rgba(240, 240, 255, 0.3);

  /* أسطح شفّافة مشتقّة من النص، فتتبع الثيم بدل أن تتجمّد */
  --tint-1: color-mix(in srgb, var(--text) 5%, transparent);
  --tint-2: color-mix(in srgb, var(--text) 10%, transparent);
  --tint-3: color-mix(in srgb, var(--text) 16%, transparent);

  /* ── سلّم المسافات ── 0.25rem × المقياس */
  --space-scale: 1;
  --sp-1: calc(0.25rem * var(--space-scale));
  --sp-2: calc(0.5rem * var(--space-scale));
  --sp-3: calc(0.75rem * var(--space-scale));
  --sp-4: calc(1rem * var(--space-scale));
  --sp-5: calc(1.25rem * var(--space-scale));
  --sp-6: calc(1.5rem * var(--space-scale));
  --sp-8: calc(2rem * var(--space-scale));
  --sp-10: calc(2.5rem * var(--space-scale));

  /* ── سلّم الخطوط ──
     يكبر مع الشاشة بلا نقاط انكسار، فالعنوان لا يقفز قفزة مفاجئة. */
  --font-scale: 1;
  --fs-xs: calc(0.75rem * var(--font-scale));
  --fs-sm: calc(0.85rem * var(--font-scale));
  --fs-base: calc(0.95rem * var(--font-scale));
  --fs-md: calc(1.05rem * var(--font-scale));
  --fs-lg: calc(1.2rem * var(--font-scale));
  --fs-xl: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-2xl: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ── سلّم الحواف ── */
  --radius-scale: 1;
  --radius-xs: calc(4px * var(--radius-scale));
  --radius-sm: calc(8px * var(--radius-scale));
  --radius-md: calc(12px * var(--radius-scale));
  --radius: calc(16px * var(--radius-scale));
  --radius-lg: calc(24px * var(--radius-scale));

  /* ── الظلال ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
  --glow-primary: 0 6px 22px color-mix(in srgb, var(--primary) 35%, transparent);

  /* ── الانتقالات ── */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.35s ease;

  /* ── هدف اللمس ── الحدّ الموصى به عالميًا */
  --tap: 44px;

  /* ── المناطق الآمنة على الجوال ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* متصفح بلا color-mix: قيم قريبة حتى لا تختفي الأسطح */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --tint-1: rgba(255, 255, 255, 0.05);
    --tint-2: rgba(255, 255, 255, 0.1);
    --tint-3: rgba(255, 255, 255, 0.16);
    --glow-primary: 0 6px 22px rgba(139, 92, 246, 0.35);
  }
}

/* ══ الأساس ══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
a { color: var(--primary-light); }

h1, h2, h3, h4 { font-weight: var(--fw-bold); line-height: 1.4; margin-top: 0; text-wrap: balance; }

/* ══ الأرقام ══════════════════════════════════════════════════════════════
   عمود أرقام يجب أن يصطفّ. عرض موحّد للرقم يمنع الاهتزاز عند تغيّر القيمة. */
.num, .u-num, td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* اللاتيني داخل جملة عربية يحتفظ باتجاهه ولا يقلب ما حوله */
.ltr, code, kbd, .mono, .serial {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
}

/* ══ الأزرار ══════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 30%, transparent);
}

.ds-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--glow-primary); }
.ds-btn:not(:disabled):active { transform: translateY(1px); }
.ds-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.ds-btn:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

.ds-btn--quiet {
  background: var(--card-bg);
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}
.ds-btn--quiet:not(:disabled):hover { background: var(--tint-2); box-shadow: none; }

.ds-btn--danger { background: var(--red); box-shadow: 0 4px 15px color-mix(in srgb, var(--red) 28%, transparent); }
.ds-btn--sm { min-height: 34px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.ds-btn--block { width: 100%; }

/* ══ البطاقات ═════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  backdrop-filter: blur(6px);
}

/* ══ البلاطة الرقمية ══════════════════════════════════════════════════════
   عنوان صغير فوق ورقم كبير تحت — دائمًا، مهما كان ترتيب العناصر في الصفحة.
   `order` يضمن ذلك بلا تعديل أي صفحة. */
.ds-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: border-color var(--t-base), transform var(--t-base);
}

.ds-tile:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(-2px);
}

.ds-tile > span { order: 1; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); line-height: 1.5; }
.ds-tile > b {
  order: 2;
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  overflow-wrap: anywhere;
}
.ds-tile > small { order: 3; font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.7; }

/* ══ الشارات ══════════════════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary-light);
}

.ds-badge--ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.ds-badge--warn { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.ds-badge--bad { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.ds-badge--mute { background: var(--tint-2); color: var(--text-muted); }

/* ══ الحقول ═══════════════════════════════════════════════════════════════ */
.ds-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ds-field > label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }

.ds-input {
  min-height: var(--tap);
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.ds-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.ds-input::placeholder { color: var(--text-dim); }

/* ══ الشبكات ══════════════════════════════════════════════════════════════
   تلقائية: تملأ العرض المتاح بلا نقاط انكسار مكتوبة يدويًا. */
.ds-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.ds-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* ══ الجداول ══════════════════════════════════════════════════════════════ */
.ds-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}

.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
.ds-table th, .ds-table td { padding: var(--sp-3) var(--sp-4); text-align: right; border-bottom: 1px solid var(--border); line-height: 1.6; }
.ds-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
  border-bottom: 0;
}
.ds-table tbody tr:hover { background: var(--tint-1); }
.ds-table tbody tr:last-child td { border-bottom: 0; }

/* ══ الحركة ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ الجوال ═══════════════════════════════════════════════════════════════
   الكثافة تُضبط برقم واحد بدل إعادة كتابة كل مكوّن. */
@media (max-width: 860px) {
  :root { --space-scale: 0.9; }
  .ds-card { padding: var(--sp-4); border-radius: var(--radius-md); }
}

@media (max-width: 420px) {
  :root { --space-scale: 0.85; --font-scale: 0.96; }
}

/* اللمس: لا تأخير على النقر، وأهداف يمكن إصابتها بالإبهام */
@media (pointer: coarse) {
  button, a, [role="button"], label { touch-action: manipulation; }
  /* الروابط النصّية داخل الفقرات تبقى كما هي؛ الروابط المستقلّة تأخذ مساحة لمس. */
  nav a, header a, footer a { display: inline-block; padding: var(--sp-2) 0; }
}