/* ============================================================
   الإعدادات — قائمةٌ جانبية، وأقسامٌ مشروحة
   ============================================================
   كان شريطاً أفقياً من ستّ كلماتٍ مجرّدة: التاجر يقرؤها كلّها ليعرف
   أين يذهب، ولا تقول له واحدةٌ منها ماذا يقع إن غيّر ما تحتها. وضيق
   الشريط هو السبب — لا يتّسع لسطرٍ يشرح.

   والقائمة الجانبية تتّسع: كل بندٍ باسمه وسطرِ شرحه، والقسمُ يفتتح بما
   يفعله. وما كان إجراءً — كالربط بمنصّة — يفتتح بخطواته مرقّمة.

   كل لونٍ ومقاسٍ من رموز التصميم: الثيمان يبدّلانها، وقيمةٌ مكتوبة
   تبقى كما هي فتُقرأ في أحدهما ولا تُقرأ في الآخر.
   ============================================================ */

.set-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

/* ── قسمٌ واحد يُعرَض ──
   بلا هذا تظهر الأقسام الستة معاً في عمود واحد. كان في تنسيق الشريط
   القديم، فذهب معه حين حُذف. */
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }

/* ── القائمة ── */
.set-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* تتبع القراءة في الأقسام الطويلة بدل أن تغيب فوقها */
  position: sticky;
  top: var(--sp-4);
}

.set-nav-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  text-align: start;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s ease, color .14s ease;
}
.set-nav-item:hover { background: var(--surface-3); color: var(--text-primary); }
.set-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.set-nav-item > i , .set-nav-item > svg{
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: 2px;
  color: var(--text-muted);
}
.set-nav-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.set-nav-item b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: inherit;
}
.set-nav-item em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.set-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.set-nav-item.active > i, .set-nav-item.active > svg,
.set-nav-item.active em { color: inherit; }
.set-nav-item.active em { opacity: .82; }

/* ── ترويسة القسم ── */
.set-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-hairline);
}
/* مربّعُ الأيقونة المصبوغ مقاسٌ واحد في المنصّة: كان ثمانيةً وثلاثين
   هنا، وأربعةً وثلاثين في شريط الطلبات، واثنين وثلاثين في بطاقة KPI. */
.set-head-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.set-head-icon i , .set-head-icon svg{ width: var(--icon-md); height: var(--icon-md); }
.set-head h3 {
  margin: 0 0 2px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.set-head p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* ── خطوات مرقّمة: للأقسام التي هي إجراءٌ لا حقول ── */
.set-steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.set-steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 34px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.set-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  /* الرقم لاتينيّ في سياق عربيّ، فيُثبَّت اتجاهه */
  direction: ltr;
}
.set-steps code {
  direction: ltr;
  display: inline-block;
  background: var(--surface-inset);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  font-size: var(--fs-xs);
}
.set-steps b { color: var(--text-primary); font-weight: var(--fw-semibold); }

.set-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* ── الجوّال: القائمة تصير شريطاً يمرّر ──
   العتبةُ عرضُ المحتوى لا عرضُ النافذة، وهي الموحّدةُ في orders.css:
   نافذةٌ بتسعمئةٍ تترك للمحتوى 566 بكسلاً، فيبقى عمودُ القائمة 268
   ويُترَك للقسم 280 — حقلان في صفٍّ داخل ذلك يصيران 132 لكلٍّ. */
@media (max-width: 1024px) {
  .set-layout { grid-template-columns: 1fr; gap: var(--sp-3); }
  .set-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--sp-2);
    /* الشريط يمرّر ولا يلفّ: بندٌ ملفوف يُخفي ما بعده */
    scrollbar-width: none;
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav-item {
    width: auto;
    flex: none;
    align-items: center;
  }
  /* الشرح يُطوى على الجوّال: الاسم وحده يكفي في شريطٍ ضيّق */
  .set-nav-item em { display: none; }
}

/* ── حالة أمان القاعدة ──
   لوحٌ واحد يقول أين أنت من ثلاث حالات، بلونٍ يُقرأ قبل الكلام. وكلّ
   لونٍ من الرموز لا من قيمةٍ مكتوبة، فالنهاران يمسكان معاً. */
.db-state {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--radius);
  border: 1px solid var(--border-subtle); background: var(--surface-2);
  margin-bottom: var(--sp-4);
}
.db-state i , .db-state svg{ width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; margin-top: 2px; }
.db-state b { display: block; font-size: var(--fs-base); margin-bottom: 3px; }
.db-state span { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-muted); }

/* السطحُ والحدُّ من لون الحالة، والعنوانُ والأيقونةُ من درجةِ نصّها:
   الدرجةُ السادسةُ على سطحها الناعم تقيس 3.19:1 في الثيم الفاتح —
   والسطرُ هنا يقول إنّ قاعدةَ البيانات مكشوفةٌ أو محميّة. */
.db-state.ok     { border-color: color-mix(in srgb, var(--success) 35%, transparent);
                   background: color-mix(in srgb, var(--success) 8%, var(--surface-2)); }
.db-state.ok i, .db-state.ok svg, .db-state.ok b         { color: var(--success-text); }
.db-state.warn   { border-color: color-mix(in srgb, var(--warning) 35%, transparent);
                   background: color-mix(in srgb, var(--warning) 8%, var(--surface-2)); }
.db-state.warn i, .db-state.warn svg, .db-state.warn b     { color: var(--warning-text); }
.db-state.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent);
                   background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.db-state.danger i, .db-state.danger svg, .db-state.danger b { color: var(--danger-text); }

/* ── بطاقة دخول لوحة متجر ──
   كلٌّ في بطاقتها: منصّتان في بطاقةٍ واحدة يجعل حقلَي بريدٍ متجاورين
   ولا يُعرَف أيّهما لأيّها.

   والقاعدةُ محصورةٌ في حاويتها: `.login-card` اسمٌ تحمله أيضاً بطاقةُ
   شاشة الدخول في api.js، وتخصيصُهما واحد — فالغالبُ ترتيبُ التحميل
   وحدَه. وشاشةُ الدخول تنجو اليوم بالمصادفة: أنماطُها تُحقَن في
   `<body>` بعد هذا الملفّ. فلو نُقلت إلى الترويسة يوماً لانطبقت
   عليها حشوةُ بطاقةِ الإعدادات، وهي أوّلُ شاشةٍ يراها كلُّ داخل. */
#storeLoginList .login-card { padding: var(--sp-4) 0; }
#storeLoginList .login-card + .login-card { border-top: 1px solid var(--border-subtle); margin-top: var(--sp-2); }