/* ==========================================================
   هوية الذهبية نت — ذهبي #f6dba0 على كحلي #152642
   ========================================================== */
:root {
  --dhb-navy: #152642;
  --dhb-navy-soft: #1e3557;
  --dhb-gold: #f6dba0;
  --dhb-gold-deep: #d9b56d;
  --dhb-bg: #f3f5f8;
  --dhb-line: #e2e7ee;
}

body {
  background-color: var(--dhb-bg);
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  color: #21324d;
}

main { min-height: 72vh; }

/* ---------- شريط التنقل ---------- */
.dhb-navbar {
  background: var(--dhb-navy);
  box-shadow: 0 2px 14px rgba(21, 38, 66, .18);
}
.dhb-navbar .navbar-brand {
  color: var(--dhb-gold);
  font-weight: 800;
  letter-spacing: .2px;
}
.dhb-navbar .nav-link { color: #dbe3ef; font-weight: 500; }
.dhb-navbar .nav-link:hover,
.dhb-navbar .nav-link:focus { color: var(--dhb-gold); }
.dhb-navbar .navbar-toggler {
  border-color: rgba(246, 219, 160, .4);
}
.dhb-username { color: var(--dhb-gold-deep) !important; }
.dhb-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dhb-gold);
  box-shadow: 0 0 0 3px rgba(246, 219, 160, .22);
}
.dhb-btn-outline {
  color: var(--dhb-gold);
  border: 1px solid rgba(246, 219, 160, .55);
}
.dhb-btn-outline:hover {
  background: var(--dhb-gold);
  color: var(--dhb-navy);
}

/* ---------- البطاقات ---------- */
.card {
  border: 1px solid var(--dhb-line);
  box-shadow: 0 3px 14px rgba(21, 38, 66, .06);
  border-radius: .85rem;
}
.card h4, .card h5, .card h6 { color: var(--dhb-navy); font-weight: 700; }

/* ---------- الأزرار ---------- */
.btn-primary {
  background: var(--dhb-navy);
  border-color: var(--dhb-navy);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--dhb-navy-soft);
  border-color: var(--dhb-navy-soft);
}
.btn-gold {
  background: var(--dhb-gold);
  border-color: var(--dhb-gold-deep);
  color: var(--dhb-navy);
  font-weight: 700;
}
.btn-gold:hover { background: var(--dhb-gold-deep); color: var(--dhb-navy); }
.btn-outline-primary { color: var(--dhb-navy); border-color: var(--dhb-navy); }
.btn-outline-primary:hover { background: var(--dhb-navy); }

/* ---------- النماذج ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--dhb-gold-deep);
  box-shadow: 0 0 0 .2rem rgba(246, 219, 160, .35);
}
.otp-input { letter-spacing: .6rem; font-weight: 700; }

/* ---------- شارات الحالة ---------- */
.badge-status-open     { background: #0d6efd; }
.badge-status-pending  { background: #fd7e14; }
.badge-status-answered { background: #17a673; }
.badge-status-closed   { background: #6c757d; }
.badge-flagged         { background: #dc3545; }

/* ---------- الرسائل ---------- */
.msg-customer { background: #fff; border-inline-start: 4px solid var(--dhb-line); }
.msg-agent    { background: #fbf6ea; border-inline-start: 4px solid var(--dhb-gold); }

/* ---------- نقاط الثقة ---------- */
.trust-track {
  height: 7px; border-radius: 4px;
  background: #e6eaf1; overflow: hidden;
}
.trust-fill { height: 100%; border-radius: 4px; }

/* ---------- الجداول ---------- */
.table > thead th {
  color: var(--dhb-navy);
  font-weight: 700;
  border-bottom: 2px solid var(--dhb-line);
}

/* ---------- إحصائيات اللوحة ---------- */
.stat-card { border-top: 3px solid var(--dhb-gold); }
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--dhb-navy); }

/* ---------- التذييل ---------- */
.dhb-footer { color: #7a879c; }
.dhb-credit { color: var(--dhb-gold-deep); font-weight: 500; }

/* ==========================================================
   التكيّف مع الهواتف والأجهزة اللوحية
   ========================================================== */

html {
  -webkit-text-size-adjust: 100%;   /* يمنع تكبير النص تلقائيًا عند تدوير iPhone */
  text-size-adjust: 100%;
}

body {
  /* احترام الحواف المنحنية والشق العلوي في الهواتف الحديثة */
  padding-inline: env(safe-area-inset-right) env(safe-area-inset-left);
}

/* منع أي تمدد أفقي يسبب تمريرًا جانبيًا مزعجًا */
body, main { overflow-x: hidden; }
img, table { max-width: 100%; }

/* الروابط والأزرار: مساحة لمس لا تقل عن 44 بكسل (توصية Apple/Google) */
@media (max-width: 991.98px) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .navbar .nav-link { padding-block: .6rem; }
}

/* حقول الإدخال بحجم 16px على الأقل، وإلا كبّرها iOS تلقائيًا عند التركيز */
@media (max-width: 991.98px) {
  .form-control, .form-select, textarea { font-size: 16px; }
  .form-control-sm, .form-select-sm { font-size: 16px; padding: .45rem .7rem; }
}

/* ---------- الجداول: تتحول إلى بطاقات على الشاشات الصغيرة ---------- */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }

  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }

  .table-stack tbody tr {
    background: #fff;
    border: 1px solid var(--dhb-line);
    border-inline-start: 4px solid var(--dhb-gold);
    border-radius: .7rem;
    padding: .6rem .8rem;
    margin-bottom: .7rem;
    box-shadow: 0 2px 8px rgba(21, 38, 66, .05);
  }

  .table-stack tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    border: 0 !important;
    padding: .35rem 0;
    text-align: start;
  }

  .table-stack tbody td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-weight: 700;
    color: var(--dhb-navy);
    font-size: .82rem;
  }

  /* خلايا الإجراءات: بلا عنوان، وبعرض كامل */
  .table-stack tbody td[data-label=""] { display: block; padding-top: .5rem; }
  .table-stack tbody td[data-label=""]::before { content: none; }
  .table-stack tbody td[data-label=""] .btn { width: 100%; }
  .table-stack tbody td[data-label=""] form { width: 100%; }

  /* أزرار إدارة المستخدم تتوزع على صفين مرتبين بدل الازدحام */
  .table-stack td form.d-flex .btn { flex: 1 1 46%; min-width: 0; }

  .table-responsive { overflow: visible; }
}

/* ---------- الشاشات الصغيرة جدًا ---------- */
@media (max-width: 575.98px) {
  main.container { padding-inline: .75rem; }
  .card { border-radius: .7rem; }
  .card.p-4 { padding: 1.1rem !important; }
  h4 { font-size: 1.15rem; }
  .stat-value { font-size: 1.5rem; }

  /* حقل رمز التحقق: يملأ العرض ولا يتجاوزه */
  .otp-input { letter-spacing: .35rem; font-size: 1.4rem; }

  /* مجموعات أزرار التصفية تلتف بدل أن تخرج عن الشاشة */
  .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { border-radius: .375rem !important; margin: 2px; }

  /* شريط بحث التذاكر يأخذ عرض الشاشة */
  form.d-flex .form-control { min-width: 0 !important; }
}

/* ---------- الأجهزة اللوحية ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  main.container { max-width: 100%; padding-inline: 1.25rem; }
  .table td, .table th { padding: .55rem .4rem; font-size: .93rem; }
}

/* ---------- الوضع الأفقي القصير (هاتف مقلوب) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  main { padding-block: 1rem !important; }
  main { min-height: auto; }
}

/* ---------- الطباعة ---------- */
@media print {
  .dhb-navbar, .dhb-footer, form, .btn { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}