/* =============================================================================
   Support & Contact — تنسيقات خاصة بنظام الدعم
   تبني على متغيّرات app.css وتضيف عناصر المحادثة والتذاكر ولوحة المؤشّرات.
   متوافقة مع RTL، ومهيّأة للوضع الداكن عبر prefers-color-scheme.
   ============================================================================= */

/* ---- صفحة تواصلوا معنا العامة ---- */
.support-contact { max-width: 760px; margin: 0 auto; }
.support-contact__head { text-align: center; margin-bottom: 1.5rem; }
.support-contact__head h1 { margin: 0.4rem 0; }
.support-contact__head p { color: var(--color-text-muted); }

.support-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }

.support-prefill {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.support-prefill__list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.support-prefill__list li { color: var(--color-text-muted); font-size: var(--text-sm); }
.support-prefill__list strong { color: var(--color-text); }

/* ---- محادثة التذكرة ---- */
.ticket-thread { display: flex; flex-direction: column; gap: 1rem; }

.ticket-msg {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  background: var(--color-surface);
}
.ticket-msg--member { border-right: 4px solid var(--color-primary); }
.ticket-msg--staff  { border-right: 4px solid #2563eb; background: var(--color-surface-2); }
.ticket-msg--note   { border-right: 4px solid #d97706; background: #fffbeb; }
.ticket-msg--system { background: transparent; border-style: dashed; color: var(--color-text-muted); }

.ticket-msg__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
.ticket-msg__author { font-weight: 700; }
.ticket-msg__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.ticket-msg__body { line-height: 1.9; word-break: break-word; }
.ticket-msg__note-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  background: #d97706; color: #fff; padding: 0.1rem 0.5rem; border-radius: var(--radius-full);
}

/* مرفقات */
.ticket-attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.ticket-attachment {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--text-xs); background: var(--color-primary-soft); color: var(--color-primary);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-full); text-decoration: none;
}
.ticket-attachment:hover { text-decoration: underline; }

/* شبكة تفاصيل التذكرة */
.ticket-layout { display: grid; grid-template-columns: 1fr 430px; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .ticket-layout { grid-template-columns: 1fr; } }

.ticket-meta-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.75rem; }
.ticket-meta-card dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.ticket-meta-card dd { margin: 0; font-weight: 600; font-size: var(--text-sm); }

/* أدوات النص الغني */
.rte-toolbar { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.rte-toolbar button {
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; cursor: pointer; font-weight: 700;
  color: var(--color-text);
}
.rte-toolbar button:hover { background: var(--color-surface-2); }
.rte-editor {
  min-height: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem; background: var(--color-surface); line-height: 1.8;
}
.rte-editor:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ---- لوحة مؤشّرات الأداء ---- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem;
}
.kpi-tile {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm);
}
.kpi-tile__label { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 0.3rem; }
.kpi-tile__value { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); line-height: 1.1; }
.kpi-tile__sub { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 0.25rem; }

/* أشرطة أفقية بسيطة للتوزيعات */
.kpi-bars { display: grid; gap: 0.6rem; }
.kpi-bar__row { display: grid; grid-template-columns: 140px 1fr auto; gap: 0.6rem; align-items: center; }
.kpi-bar__track { background: var(--color-surface-2); border-radius: var(--radius-full); height: 10px; overflow: hidden; }
.kpi-bar__fill { background: var(--color-primary); height: 100%; border-radius: var(--radius-full); }
.kpi-bar__label { font-size: var(--text-sm); color: var(--color-text); }
.kpi-bar__val { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 560px) { .kpi-bar__row { grid-template-columns: 100px 1fr auto; } }

/* رابط الدعم في الشريط الجانبي (شارة عدّاد) */
.nav-badge {
  display: inline-block; min-width: 20px; text-align: center; font-size: var(--text-xs);
  font-weight: 700; background: var(--color-error); color: #fff; border-radius: var(--radius-full);
  padding: 0 0.4rem; margin-inline-start: 0.35rem;
}

/* عناوين البطاقات + نماذج مكدّسة + سجل النشاط (اتساقًا مع بقية اللوحة) */
.panel-card__title { font-size: var(--text-lg); font-weight: 700; margin: 0 0 0.75rem; }
.stacked-form { display: grid; gap: 0.5rem; }
.stacked-form .form-label { margin: 0; }
.activity-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.activity-log li {
  font-size: var(--text-sm); color: var(--color-text);
  border-right: 2px solid var(--color-border); padding-inline-start: 0.6rem;
}
.ticket-action-panel { margin-top: 0.5rem; }

/* ---- الوضع الداكن (تحسين تدريجي؛ نظام الألوان الأساسي فاتح) ---- */
@media (prefers-color-scheme: dark) {
  .support-card, .ticket-msg, .kpi-tile, .ticket-meta-card, .rte-editor, .rte-toolbar button {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
  }
  .ticket-msg--staff { background: #17233b; }
  .ticket-msg--note { background: #3a2f14; border-right-color: #d97706; }
  .support-prefill { background: #17233b; border-color: #334155; }
  .kpi-bar__track { background: #334155; }
}