/***** Dalil Tools Suite Pro — SAFE SCOPED CSS (Orange Light Theme) *****/
/* لا يوجد أي استهداف لـ body / header / :root — التغييرات داخل الإضافة فقط */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');

/* ================== لوحة ألوان (قابلة للتعديل) ================== */
#dts-pro-root,
.dts-toggle {
  font-family: 'Tajawal', system-ui, sans-serif !important;

  /* درجات برتقالي/خوخي فاتحة */
  --or-25: #fffaf4;
  --or-50: #fff4ea;
  --or-100: #ffecdc;
  --or-200: #ffe2c7;
  --or-300: #ffd4ad;
  --or-400: #ffbf85;
  --or-500: #ffa956;
  --or-600: #ff9233;
  --or-700: #e67821;
  --or-800: #bf5f16;

  /* خلفيات اللوح الفاتحة */
  --panel-bg: var(--or-25);
  /* خلفية اللوح العامّة (فاتحة جدًا) */
  --panel-elev: #fff1e6;
  /* بطاقات/بلاطات */
  --panel-elev-2: #ffe9d9;

  /* ألوان النص */
  --ink-strong: #111213;
  --ink-soft: #1f2022;
  --ink-muted: #5a5e64;

  /* حدود/ظلال */
  --bd-lite: rgba(0, 0, 0, .08);
  --bd-strong: rgba(0, 0, 0, .14);
  --shadow-1: 0 6px 18px rgba(17, 18, 19, .08);
  --shadow-2: 0 10px 22px rgba(17, 18, 19, .12);

  /* تدرّجات جاهزة */
  --grad-or: linear-gradient(135deg, var(--or-100) 0%, var(--or-300) 48%, var(--or-600) 100%);
  --grad-or-bold: linear-gradient(135deg, var(--or-500), var(--or-800));
}

#dts-pro-root[dir="ltr"] {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ================== زر الإضافة (لا يغيّر الهيدر) ================== */
.dts-toggle {
  appearance: none;
  border: 1px solid var(--bd-strong);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  background: var(--grad-or-bold);
  color: #fff;
  cursor: pointer;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  /* Ensure z-index is high enough */
  z-index: 99999;
}

.dts-toggle .dts-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  opacity: .95;
}

.dts-toggle[data-size="sm"] {
  padding: 5px 10px;
  font-size: 13px
}

.dts-toggle[data-size="md"] {
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 12px
}

.dts-toggle[data-size="lg"] {
  padding: 9px 16px;
  font-size: 15px;
  border-radius: 14px
}

/* Mobile Optimization for Toggle (Force sm size) */
@media (max-width: 480px) {
  .dts-toggle {
    padding: 4px 8px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
}

/* ================== اللوح/الأوفرلاي — بلا تأثير على الموقع ================== */
#dts-pro-root {
  position: fixed;
  inset: 0;
  z-index: 99999
}

.dts-open,
.dts-open body {
  overscroll-behavior: none
}

.dts-open {
  overflow: hidden !important
}

/* خلفية فوق الصفحة */
#dts-pro-root .dts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .35);
  /* شفافية أخف لتناسب الفاتح */
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  animation: dts-fadeIn .12s ease;
  touch-action: none;
  justify-content: center;
  /* Center sheet on desktop too if needed */
}

@keyframes dts-fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ورقة اللوح (فاتحة بدل البني) */
#dts-pro-root .dts-sheet {
  width: 100%;
  max-height: 92vh;
  /* Max width for desktop comfort */
  max-width: 600px;
  background: var(--panel-bg);
  color: var(--ink-soft);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -16px 36px rgba(0, 0, 0, .14);
  padding: 10px 0 16px;
  border: 1px solid var(--bd-lite);
  transform: translateY(30px);
  animation: dts-rise .18s ease forwards;
  display: flex;
  flex-direction: column;
}

@keyframes dts-rise {
  to {
    transform: translateY(0)
  }
}

#dts-pro-root .dts-handle {
  width: 70px;
  height: 6px;
  background: #d9cfc6;
  border-radius: 999px;
  margin: 8px auto;
  opacity: .9;
}

#dts-pro-root .dts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
}

#dts-pro-root .dts-head h3 {
  margin: 0;
  font-size: 18px;
  color: var(--ink-strong);
  font-weight: 900;
  letter-spacing: .2px
}

#dts-pro-root .dts-close {
  background: #fff;
  border: 1px solid var(--bd-strong);
  color: var(--ink-strong);
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
}

/* Gate Actions */
.dts-gate-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.dts-btn-login {
  background: transparent;
  color: var(--or-700);
  border: 1px solid var(--or-700);
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s;
}

.dts-btn-login:hover {
  background: var(--or-50);
}

.dts-or {
  color: var(--ink-muted);
  font-size: 14px;
}

/* ================== المحتوى الداخلي ================== */
#dts-pro-root .dts-body {
  padding: 0 12px 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* الشبكة العامة */
#dts-pro-root .dts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#dts-pro-root .dts-grid.detail-only {
  grid-template-columns: 1fr;
}

/* Previously was 360px 1fr, but user CSS had a media query for max-width 980px to be 1fr. 
   Since this is a modal sheet provided in the snippet, 1fr stack is safer for mobile/sheet view.
   But let's stick to the snippet's logic if it had one. Snippet said:
   #dts-pro-root .dts-grid{ display:grid; grid-template-columns:360px 1fr; gap:14px; }
   But since we constrained the sheet to max-width 600px (standard mobile sheet on desktop), 
   1 column is better. I will adjust slightly for robustness.
*/

/* ================== قائمة البلاطات (Orange Light Tiles) ================== */
#dts-pro-root .dts-list .dts-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  /* max-height removed to let body scroll */
  padding-right: 0;
}

#dts-pro-root .dts-tile {
  background: var(--grad-or);
  color: var(--ink-strong);
  border: 1px solid var(--bd-strong);
  border-radius: 18px;
  text-align: start;
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  display: flex;
  flex-direction: column;
}

#dts-pro-root .dts-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  filter: saturate(1.06)
}

#dts-pro-root .dts-tile .dts-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

#dts-pro-root .dts-tile .dts-type {
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
  color: var(--ink-strong);
  margin-bottom: 4px;
  display: inline-block;
}

#dts-pro-root .dts-tile .dts-title {
  font-weight: 900;
  margin-top: 0;
  color: var(--ink-strong);
  font-size: 1.1rem;
}

#dts-pro-root .dts-tile .dts-intro {
  color: #2b2622;
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.4;
  display: -webkit-box;
  /* standard property */
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================== شاشة التفاصيل (بطاقة فاتحة) ================== */
#dts-pro-root .dts-detail {
  background: var(--panel-elev);
  border: 1px solid var(--bd-lite);
  border-radius: 16px;
  padding: 14px;
  min-height: 240px;
  box-shadow: var(--shadow-1);
  color: var(--ink-soft);
  animation: dtsFadeIn 0.3s ease;
}

#dts-pro-root .dts-bc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

#dts-pro-root .dts-back {
  border: 1px solid var(--bd-strong);
  background: var(--grad-or-bold);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

/* ================== الحقول (موحّدة) ================== */
#dts-pro-root .dts-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

#dts-pro-root .dts-field {
  display: block
}

#dts-pro-root .dts-field>span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-strong);
}

/* إدخال/قائمة */
#dts-pro-root .dts-field input:not([type="checkbox"]),
#dts-pro-root .dts-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--bd-strong);
  background: var(--panel-elev-2);
  color: var(--ink-soft);
  font-size: 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  box-sizing: border-box;
}

/* Checkbox specific */
#dts-pro-root .dts-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--panel-elev-2);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--bd-strong);
}

#dts-pro-root .dts-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--or-600);
  margin: 0;
}

#dts-pro-root .dts-check span {
  margin: 0 !important;
  font-size: 14px;
  font-weight: 500;
}

/* Language Toggle (Segmented Control) */
#dts-pro-root .dts-lang-toggle {
  background: var(--panel-elev-2);
  padding: 4px;
  border-radius: 99px;
  border: 1px solid var(--bd-strong);
  display: flex;
  gap: 2px;
  cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: all 0.2s;
}

#dts-pro-root .dts-lang-toggle span {
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
}

#dts-pro-root .dts-lang-toggle .active {
  background: white;
  color: var(--or-700);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#dts-pro-root .dts-lang-toggle .sep {
  display: none;
}

#dts-pro-root .dts-lang-toggle:hover {
  border-color: var(--or-400);
}

/* تركيز واضح برتقالي */
#dts-pro-root .dts-field input:focus,
#dts-pro-root .dts-field select:focus {
  border-color: var(--or-600);
  box-shadow: 0 0 0 3px rgba(255, 146, 51, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ملاحظة الحقل */
#dts-pro-root .dts-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #4b5563;
}

/* Sources */
#dts-pro-root .dts-sources {
  margin-top: 20px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px dashed var(--bd-strong);
}

#dts-pro-root .dts-sources .src-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

#dts-pro-root .dts-sources .src-body {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.5;
}

#dts-pro-root .dts-sources .src-body a {
  color: var(--or-600);
  text-decoration: underline;
}

/* ================== النتيجة/التقدّم/الشارات ================== */
#dts-pro-root .dts-result {
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  transition: background 0.3s, border-color 0.3s;
  border: 1px solid transparent;
  color: var(--ink-strong);
}

#dts-pro-root .dts-result[data-status="success"] {
  background: #e6f4ea;
  border-color: #ceead6;
  color: #0d652d;
}

#dts-pro-root .dts-result[data-status="warning"] {
  background: #fef7e0;
  border-color: #fce8b2;
  color: #b06000;
}

#dts-pro-root .dts-result[data-status="danger"] {
  background: #fce8e6;
  border-color: #fad2cf;
  color: #c5221f;
}

#dts-pro-root .dts-val {
  font-size: 30px;
  font-weight: 900;
  color: inherit;
  margin-top: 6px
}

#dts-pro-root .dts-desc {
  font-size: 13px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: inherit;
  opacity: 0.9;
  line-height: 1.6;
  white-space: pre-line;
  text-align: right;
}

#dts-pro-root[dir="ltr"] .dts-desc {
  text-align: left;
}

#dts-pro-root .dts-result .dts-progress {
  height: 10px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
  width: 100%;
}

#dts-pro-root .dts-result .dts-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--or-300), var(--or-700));
  transition: width .25s ease;
}

#dts-pro-root[dir="rtl"] .dts-result .dts-progress-bar {
  background: linear-gradient(270deg, var(--or-300), var(--or-700));
}

/* شارات */
#dts-pro-root .dts-bars {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  justify-content: center;
}

#dts-pro-root .badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--bd-strong);
  background: #fff;
  color: var(--ink-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 3px 10px rgba(0, 0, 0, .06);
  font-size: 0.8rem;
}

#dts-pro-root .badge.emph {
  border-color: #2da46f;
  background: #eaf7f1;
  color: #115b3f;
  box-shadow: 0 0 0 3px rgba(45, 164, 111, .18);
  font-weight: 800;
}

/* ================== أزرار الإجراءات داخل اللوح ================== */
#dts-pro-root .dts-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  justify-content: center;
}

#dts-pro-root .dts-actions button {
  border: 1px solid var(--bd-strong);
  background: var(--grad-or-bold);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  font-weight: 800;
}

#dts-pro-root .dts-actions button:hover {
  filter: saturate(1.06)
}

/* أمان: لا تغييرات خارج اللوح */
#dts-pro-root .dts-grid,
#dts-pro-root .dts-detail,
#dts-pro-root .dts-list {
  min-height: 0
}

/* Guide boxes */
#dts-pro-root .dts-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

#dts-pro-root .dts-guide-box {
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--bd-lite);
  display: flex;
  gap: 8px;
  font-size: 13px;
}

/* ================== Guide Icons LTR Support ================== */
#dts-pro-root[dir="ltr"] .dts-guide-box .guide-icon {
  /* No flip needed usually, but ensure padding */
}

/* ================== Detail View State ================== */
/* Hide Language Toggle in Detail View */
#dts-pro-root .dts-sheet.dts-view-detail .dts-lang-toggle {
  display: none !important;
}

/* ================== LTR Overrides ================== */
#dts-pro-root[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

#dts-pro-root[dir="ltr"] .dts-close {
  /* If needed, swap position */
}

#dts-pro-root[dir="ltr"] .dts-tile {
  text-align: left;
}

#dts-pro-root[dir="ltr"] .dts-bc {
  flex-direction: row;
  /* Ensure row flow */
}

#dts-pro-root[dir="ltr"] .dts-back .bc-arrow {
  display: inline-block;
  /* In LTR, back arrow points Left (standard).
       In RTL, our arrow "←" points Left. 
       Usually in RTL back points Right (->).
       Let's flip it for proper RTL/LTR directional logic if needed.
    */
  transform: rotate(0deg);
}

/* If we want the arrow to flip in RTL (make it point right), 
   we should have started with a Right arrow or flipped this one. 
   Currently "←" points Left. 
   In RTL context, "Back" usually means "Go Forward to previous" -> Arrow Right.
   So let's flip it for RTL by default if not already handled? 
   Actually, the arrow is hardcoded ←.
   Let's just ensure consistent spacing.
*/

#dts-pro-root[dir="ltr"] .dts-check {
  text-align: left;
}

#dts-pro-root[dir="ltr"] .dts-field span {
  text-align: left;
}

/* Fix spacing in inputs for LTR if padding was asymmetric */
/* (Currently padding: 12px 14px is symmetric) */

/* Checkbox gap */
#dts-pro-root[dir="ltr"] .dts-check {
  flex-direction: row;
}

@media(max-width: 500px) {
  #dts-pro-root .dts-guide {
    grid-template-columns: 1fr;
  }
}