/* ====== Theme CSS - Dark/Light Theme Variables ====== */

/* ==== Dark mode (help palette) ==== */
html[data-theme="dark"]{
  --bg-page:#0f172a;       /* slate-900 */
  --bg-pane:#111827;       /* مثل خلفية الـ Help */
  --bg-soft:#0b1220;       /* بطاقات داكنة */
  --bg-soft-2:#0f172a;
  --border:#374151;
  --text:#f9fafb;

  --img-btn:#0891b2; --img-btn-h:#0e7490; /* cyan */
  --ocr-btn:#6366f1; --ocr-btn-h:#4f46e5; /* indigo */
  --st-gray-bg:#1f2937; --st-gray-bd:#374151; --st-gray-tx:#e5e7eb;
  --st-wait-bg:#4a3210; --st-wait-bd:#b45309; --st-wait-tx:#fde68a;
  --st-open-bg:#064e3b; --st-open-bd:#065f46; --st-open-tx:#bbf7d0;
  --st-retry-bg:#7f1d1d; --st-retry-bd:#991b1b; --st-retry-tx:#fecaca;

  --btn-bg:#0b1220;
  --btn-bg-h:#111827;
  --icon:#e5e7eb;

  /* CTA في الدارك مود واضح ومميز */
  --cta-bg:#4f46e5;   /* indigo-600 */
  --cta-bg-h:#4338ca;
  --cta-tx:#ffffff;
}

/* Theme toggle button */
html[data-theme="dark"] header.toolbar{
  background:rgba(17,24,39,.92);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* زر تبديل الثيم + الأيقونات */
.btn-theme{ display:inline-flex; align-items:center; gap:6px; }
.btn-theme svg{ width:16px; height:16px; }
#icoSun{ display:none; }
html[data-theme="dark"] #icoMoon{ display:none; }
html[data-theme="dark"] #icoSun { display:inline; }

/* Scrollbars dark mode */
html[data-theme="dark"] *::-webkit-scrollbar-thumb{ background:#475569; }
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{ background:#334155; }
html[data-theme="dark"] *::-webkit-scrollbar-track{ background: transparent; }

/* Select dark mode */
html[data-theme="dark"] select#statusFilter{
  background:#0b1220 !important; color:#e5e7eb !important; border-color:#374151 !important;
  box-shadow:none !important;
}
/* لون عناصر القائمة داخل الدارك */
html[data-theme="dark"] select#statusFilter option{
  background:#111827; color:#f9fafb;
}