/* ═══════════════════════════════════════════════════════════
   CSP — طبقة المكوّنات | تُعرَّف مرة واحدة لكل المشروع
   يُستورَد بعد tokens.css وقبل ملف تخطيط الصفحة.
   قبل هذا الملف كانت .btn و .card و .field معرَّفة مرتين بقيم
   مختلفة، فصارت الكلمة الواحدة تعني شيئين حسب الصفحة.
   ═══════════════════════════════════════════════════════════ */

/* ───────── الحاوية ───────── */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--s5);
}

/* ───────── الأزرار ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-body);
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s, background-color .15s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-gold {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  color: var(--on-accent);
  box-shadow: var(--shadow-md);
}
.btn-green {
  background: var(--brand-whatsapp);
  color: var(--on-brand-whatsapp);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--on-bg);
}
.btn-outline:hover:not(:disabled) { border-color: var(--border-strong); }
.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}
.btn-block { width: 100%; }
.btn-lg { padding: var(--s3) var(--s6); font-size: var(--text-body-lg); }

/* ───────── البطاقات ───────── */
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  margin-bottom: var(--s5);
  color: var(--on-surface-2);
}
.card:last-child { margin-bottom: 0; }
.card h3 {
  margin: 0 0 var(--s4);
  color: var(--accent-hover);
  font-size: var(--text-body-lg);
}
/* عناوين الأقسام داخل بطاقة واحدة — تستبدل 4 نسخ من style="margin-top:22px" */
.card h3 + * { margin-top: 0; }
.card > h3:not(:first-child) { margin-top: var(--s5); }

/* ───────── الحقول ───────── */
.field label {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-bottom: var(--s1);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  color: var(--on-surface-3);
  font-size: var(--text-body);
}
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--ring) 25%, transparent);
}
.field select option {
  color: var(--option-fg);
  background: var(--option-bg);
}
.field.full { grid-column: 1 / -1; }

.input-with-btn { display: flex; gap: var(--s2); align-items: stretch; }
.input-with-btn input { flex: 1; }
.input-with-btn .btn-toggle-key { flex-shrink: 0; padding-inline: var(--s4); white-space: nowrap; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s3);
  align-items: end;
}
.row-actions { display: flex; gap: var(--s2); }

/* ───────── الرسائل ───────── */
.msg,
.form-msg {
  font-size: var(--text-body);
  margin-top: var(--s3);
  min-height: 18px;
  text-align: center;
}
.msg.err, .form-msg.err { color: var(--danger); }
.msg.ok,  .form-msg.ok  { color: var(--ok); }

.cap { font-size: var(--text-caption); color: var(--text-muted); }

/* ───────── الشارات ───────── */
.pill {
  display: inline-block;
  padding: 3px var(--s3);
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: 700;
}
.pill.active { background: var(--ok-bg); color: var(--ok); }
.pill.inactive { background: var(--danger-bg); color: var(--danger); }

/* ───────── الجداول ───────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}
th, td {
  padding: var(--s3);
  text-align: start;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
/* العناوين وحدها تبقى بسطر واحد — كان nowrap مفروضًا على كل خلية
   فتحوّل جدول العملاء (10 أعمدة) إلى جدار تمرير أفقي دائم */
th {
  color: var(--accent-hover);
  font-weight: 700;
  white-space: nowrap;
}
td { color: var(--text-muted); }
tr:hover td { color: var(--on-surface-2); }
/* للخلايا التي يجب ألا تُكسَر فعلًا (مبالغ، تواريخ، أزرار) */
.nowrap { white-space: nowrap; }

/* ───────── الحالات الموحّدة ───────── */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: var(--s6) 0;
  font-size: var(--text-body);
}

@media (max-width: 700px) {
  th, td { padding: var(--s2); font-size: var(--text-caption); }
}

/* ───────── Toast ───────── */
.csp-toast-host {
  position: fixed;
  top: var(--s5);
  inset-inline-end: var(--s5);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: min(360px, calc(100vw - var(--s5) * 2));
}
.csp-toast {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--s3) var(--s4);
  color: var(--on-surface-2);
  font-size: var(--text-body);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s;
}
.csp-toast.show { opacity: 1; transform: translateY(0); }
.csp-toast-ok { border-inline-start-color: var(--ok); }
.csp-toast-err { border-inline-start-color: var(--danger); }

/* ───────── حوار التأكيد ───────── */
.csp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}
.csp-confirm-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s5);
  max-width: 380px;
  width: 100%;
}
.csp-confirm-box p {
  margin: 0 0 var(--s5);
  color: var(--on-surface-2);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}
.csp-confirm-actions { display: flex; gap: var(--s3); justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════
   قشرة تطبيق بقائمة جانبية — مشتركة بين لوحة الأدمن (admin.js
   القائمة الحالية data-tab/.panel-section بلا أي تعديل) واستوديو
   العميل. قسم واحد ظاهر في المرة بدل صف تبويبات أفقي مزدحم أو
   سكرول رأسي بلا نهاية.
   ═══════════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  align-items: stretch;
  max-width: 1320px;
  margin-inline: auto;
}
.app-sidebar {
  width: 230px;
  flex-shrink: 0;
  padding: var(--s4) var(--s3);
  border-inline-start: 1px solid var(--border);
}
.app-sidebar .tab-btn,
.app-sidebar .sidebar-link {
  display: block;
  width: 100%;
  text-align: start;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--text-body);
  padding: var(--s3);
  margin-bottom: 2px;
  cursor: pointer;
}
.app-sidebar .tab-btn:hover:not(.active),
.app-sidebar .sidebar-link:hover:not(.active) { background: var(--surface-3); }
/* عنوان قسم فوق مجموعة روابط/تبويبات بالقائمة الجانبية (المرحلة 2، خطة توحيد الدخول) */
.app-sidebar .sidebar-section-label { padding: 0 var(--s3); margin-bottom: 4px; }

/* مجموعات تبويبات "لوحة التحكم" القابلة للطي (المرحلة 4، خطة توحيد الدخول) — تنظيم بصري بحت،
   <details>/<summary> أصليان بلا أي JS إضافي، صفر تأثير على منطق تبديل التبويبات. */
.app-sidebar .sidebar-group { margin-top: 4px; }
.app-sidebar .sidebar-group summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s2) var(--s3);
  font-size: var(--text-caption);
  color: var(--text-muted);
  font-weight: 700;
  user-select: none;
}
.app-sidebar .sidebar-group summary::-webkit-details-marker { display: none; }
.app-sidebar .sidebar-group summary::after { content: "▸"; font-size: 10px; }
.app-sidebar .sidebar-group[open] > summary::after { content: "▾"; }
/* .tab-btn/.sidebar-link فوق بيحدّد display:block بتخصيص أعلى من قاعدة المتصفح الافتراضية
   لإخفاء محتوى <details> المغلق — يعطّل الطي فعليًا. قاعدة صريحة هنا بتخصيص أعلى تصلحه. */
.app-sidebar .sidebar-group:not([open]) .tab-btn { display: none; }
.app-sidebar .tab-btn.active,
.app-sidebar .sidebar-link.active {
  color: var(--accent-hover);
  background: var(--surface-2);
  border-color: var(--border);
}
.app-main { flex: 1; min-width: 0; padding: var(--s5); }
.panel-section { display: none; }
.panel-section.active { display: block; }

.sidebar-toggle-btn {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--on-surface-1);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .sidebar-toggle-btn { display: inline-block; }
  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: -100%;
    width: 260px;
    overflow-y: auto;
    background: var(--surface-1);
    z-index: 50;
    transition: inset-inline-end .25s ease;
    box-shadow: var(--shadow-lg);
    border-inline-start: none;
    padding-top: var(--s7);
  }
  .app-sidebar.open { inset-inline-end: 0; }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .sidebar-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
  .app-main { padding: var(--s4); }
}

/* عناوين الأقسام جوّه .app-main مباشرة بلا .card تغلّفها (استوديو العميل —
   راجع .studio-shell تحت). تكرار مقصود لقواعد ".card h3" فوق فحتى لو
   القسم مش جوّه بطاقة يبقى نفس الشكل بالظبط. */
.app-main h3 { margin: 0 0 var(--s4); color: var(--accent-hover); font-size: var(--text-body-lg); }
.app-main h3 + * { margin-top: 0; }

/* لوحة ترحيب الاستوديو وباقي الصفحة تتمرّر عاديًا، لكن آخر الصفحة (padding-
   bottom الأصلي 80px مصمَّم لصفحة سكرول طويلة) بقى فايض بلا داعي بعد ما
   .app-main صار له سقف ارتفاع خاص به — يقلّل فرصة سكرول صفحة زيادة. */
.studio-wrap:has(.studio-shell) { padding-bottom: var(--s4); }

/* ═══ استوديو العميل فقط — بمعدّل .studio-shell (لوحة الأدمن بمعزل تام،
   بلا أي تغيير). بلا صندوق .card يغلّف .app-shell، والقائمة تثبت مكانها
   بدل ما تهرب مع سكرول الصفحة، و.app-main هو اللي يتمرّر لوحده جوّه
   صندوقه بارتفاع يملأ بالظبط الفراغ المتبقي بالشاشة — صفر سكرول صفحة
   بالحالة العادية. --studio-navbar-h و--studio-shell-top يُقاسان حيًا
   بجافاسكربت studio/index.html (trackShellMetrics)؛ القيم الاحتياطية
   هنا لأول رسم بس قبل ما يشتغل الجافاسكربت. */
.studio-shell { align-items: flex-start; }
@media (min-width: 901px) {
  .studio-shell .app-sidebar {
    position: sticky;
    top: calc(var(--studio-navbar-h, 64px) + var(--s4));
    align-self: flex-start;
    /* نفس مرجع ارتفاع .app-main تحت — يضمن ألا يتجاوز ارتفاع القائمة
       (لو أقسام مستقبلية زادت) الفراغ المتاح فيصير سكرول داخلي بدل ما
       يدفع الصفحة كلها للأسفل. */
    max-height: calc(100vh - var(--studio-shell-top, 160px) - var(--s4));
    overflow-y: auto;
  }
  .studio-shell .app-main {
    max-height: calc(100vh - var(--studio-shell-top, 160px) - var(--s4));
    overflow-y: auto;
  }
}