/* =============================================================
   TVTC Quiz — Dark Mode — الحل الجذري
   =============================================================
   يعمل بـ overriding كامل لمتغيرات theme.css الجذرية
   بدلاً من إصلاح كل عنصر على حدة.
   ============================================================= */

/* ============================================================
   1) CORE: نسف كل متغيرات theme.css وإعادة تعريفها داكنة
   ============================================================ */
html[data-theme="dark"]{
  /* متغيرات theme.css الأصلية — نعيد تعريفها كلها */
  --sb-bg: #111114;
  --sb-bg2: #0A0A0C;
  --sb-accent: #A78BFA;
  --sb-accent-h: #8B5CF6;
  --sb-text: #E4E4E7;
  --sb-muted: #71717A;
  --sb-border: rgba(255,255,255,0.08);

  --page-bg: #0A0A0C;
  --card-bg: #18181B;
  --card-border: #3F3F46;
  --card-sh: 0 1px 10px rgba(0,0,0,0.4);

  --accent: #A78BFA;
  --accent-h: #8B5CF6;
  --accent-s: rgba(167,139,250,0.15);

  --text: #F4F4F5;
  --text-2: #D4D4D8;
  --muted: #A1A1AA;        /* ⭐ المهم: كان #677fa0 فاتح؛ الآن A1A1AA واضح على داكن */
  --border: #3F3F46;

  /* Bootstrap 5 overrides */
  --bs-body-bg: #0A0A0C;
  --bs-body-color: #F4F4F5;
  --bs-secondary-color: #A1A1AA;
  --bs-tertiary-color: #D4D4D8;
  --bs-border-color: #3F3F46;
  --bs-heading-color: #F4F4F5;
  --bs-link-color: #A78BFA;
  --bs-link-hover-color: #8B5CF6;

  color-scheme: dark;
}

html[data-theme="dark"] body{
  background: var(--page-bg) !important;
  color: var(--text) !important;
}

/* ============================================================
   2) جميع النصوص الثانوية — المشكلة الأساسية
   ============================================================ */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small,
html[data-theme="dark"] .small,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .sq-hint,
html[data-theme="dark"] .sq-help,
html[data-theme="dark"] p.small,
html[data-theme="dark"] .sq-auto-diff-help{
  color: #A1A1AA !important;   /* واضح على خلفية داكنة */
}

/* نص ثانوي باهت جداً (مثل hints ملاحظات) */
html[data-theme="dark"] .text-soft,
html[data-theme="dark"] .sq-text-soft{
  color: #8B8B93 !important;
}

/* ============================================================
   3) Inline styles — صلّح أي `color:#XXX` مكتوب inline
   ============================================================ */
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#777"],
html[data-theme="dark"] [style*="color: #777"],
html[data-theme="dark"] [style*="color:#888"],
html[data-theme="dark"] [style*="color: #888"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#aaa"],
html[data-theme="dark"] [style*="color: #aaa"]{
  color: #A1A1AA !important;
}

html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:black"],
html[data-theme="dark"] [style*="color: black"]{
  color: #F4F4F5 !important;
}

/* ============================================================
   4) خلفيات بيضاء inline
   ============================================================ */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #FFF"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#f"],
html[data-theme="dark"] [style*="background: #f"]{
  background-color: #202024 !important;
}

/* ============================================================
   5) Native <select> و <option>
   ============================================================ */
html[data-theme="dark"] select,
html[data-theme="dark"] select.sq-input,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] .sq-auto-diff-select{
  background-color: #202024 !important;
  color: #F4F4F5 !important;
  border-color: #3F3F46 !important;
  color-scheme: dark;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup{
  background-color: #202024 !important;
  color: #F4F4F5 !important;
}

html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option[selected]{
  background: #2E1B5E linear-gradient(0deg, #2E1B5E, #2E1B5E) !important;
  color: #F4F4F5 !important;
}

html[data-theme="dark"] select option:disabled{
  color: #71717A !important;
}

/* ============================================================
   6) Inputs + Textarea
   ============================================================ */
html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] .sq-input,
html[data-theme="dark"] .form-control{
  background-color: #202024 !important;
  color: #F4F4F5 !important;
  border-color: #3F3F46 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: #71717A !important;
  opacity: 1;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{
  border-color: #A78BFA !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.2) !important;
  outline: none;
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus{
  -webkit-text-fill-color: #F4F4F5 !important;
  -webkit-box-shadow: 0 0 0 1000px #202024 inset !important;
  caret-color: #F4F4F5 !important;
}

/* ============================================================
   7) البطاقات والحاويات
   ============================================================ */
html[data-theme="dark"] .sq-card,
html[data-theme="dark"] .card{
  background-color: #18181B !important;
  border-color: #3F3F46 !important;
  color: #F4F4F5 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

html[data-theme="dark"] .sq-card-header,
html[data-theme="dark"] .card-header{
  background-color: #1F1F23 !important;
  border-bottom-color: #3F3F46 !important;
  color: #F4F4F5 !important;
}

html[data-theme="dark"] .sq-card-body,
html[data-theme="dark"] .card-body{
  color: #F4F4F5 !important;
}

html[data-theme="dark"] .sq-card-footer,
html[data-theme="dark"] .card-footer{
  background-color: #1F1F23 !important;
  border-top-color: #3F3F46 !important;
}

/* ============================================================
   8) Labels
   ============================================================ */
html[data-theme="dark"] label,
html[data-theme="dark"] .sq-label,
html[data-theme="dark"] .form-label{
  color: #E4E4E7 !important;
}

/* ============================================================
   9) Headings
   ============================================================ */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .sq-page-title{
  color: #F4F4F5 !important;
}

/* ============================================================
   10) Tables
   ============================================================ */
html[data-theme="dark"] table,
html[data-theme="dark"] .table{
  color: #E4E4E7 !important;
  border-color: #3F3F46 !important;
  --bs-table-bg: transparent;
  --bs-table-color: #E4E4E7;
  --bs-table-border-color: #3F3F46;
  --bs-table-striped-bg: #1F1F23;
  --bs-table-striped-color: #F4F4F5;
  --bs-table-hover-bg: #2A2A2F;
  --bs-table-hover-color: #F4F4F5;
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > :not(caption) > * > *{
  border-color: #3F3F46 !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table thead th{
  background-color: #1F1F23 !important;
  color: #F4F4F5 !important;
  border-bottom-color: #3F3F46 !important;
}

html[data-theme="dark"] .table tbody td{
  color: #E4E4E7 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: #1F1F23 !important;
  color: #F4F4F5 !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *{
  background-color: #2A2A2F !important;
  color: #F4F4F5 !important;
}

/* ============================================================
   11) Select2
   ============================================================ */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple{
  background-color: #202024 !important;
  border-color: #3F3F46 !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered{
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #71717A !important;
}
html[data-theme="dark"] .select2-dropdown{
  background-color: #202024 !important;
  border-color: #3F3F46 !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field{
  background-color: #1F1F23 !important;
  color: #F4F4F5 !important;
  border-color: #3F3F46 !important;
}
html[data-theme="dark"] .select2-results__option{
  color: #F4F4F5 !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color: #A78BFA !important;
  color: #fff !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"]{
  background-color: #2E1B5E !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .select2-selection__choice{
  background-color: #2E1B5E !important;
  color: #F4F4F5 !important;
  border-color: #3F3F46 !important;
}

/* ============================================================
   12) Flatpickr
   ============================================================ */
html[data-theme="dark"] .flatpickr-calendar{
  background: #202024 !important;
  border: 1px solid #3F3F46 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .flatpickr-calendar.arrowTop:before{ border-bottom-color: #3F3F46 !important; }
html[data-theme="dark"] .flatpickr-calendar.arrowTop:after{ border-bottom-color: #202024 !important; }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:before{ border-top-color: #3F3F46 !important; }
html[data-theme="dark"] .flatpickr-calendar.arrowBottom:after{ border-top-color: #202024 !important; }
html[data-theme="dark"] .flatpickr-months,
html[data-theme="dark"] .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month,
html[data-theme="dark"] .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-monthDropdown-month{
  background: #202024 !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] .flatpickr-weekday{
  background: #202024 !important;
  color: #A1A1AA !important;
}
html[data-theme="dark"] .flatpickr-day{
  color: #F4F4F5 !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .flatpickr-day:hover{
  background: #2A2A2F !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .flatpickr-day.today{ border-color: #A78BFA !important; }
html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange{
  background: #A78BFA !important;
  border-color: #A78BFA !important;
  color: #fff !important;
}
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay{ color: #71717A !important; }
html[data-theme="dark"] .flatpickr-day.disabled{ color: #71717A !important; opacity: .3; }
html[data-theme="dark"] .flatpickr-time{
  background: #1F1F23 !important;
  border-top-color: #3F3F46 !important;
}
html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm{
  background: transparent !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .flatpickr-next-month,
html[data-theme="dark"] .flatpickr-prev-month{
  color: #F4F4F5 !important;
  fill: #F4F4F5 !important;
}
html[data-theme="dark"] .flatpickr-next-month:hover,
html[data-theme="dark"] .flatpickr-prev-month:hover{
  color: #A78BFA !important;
  fill: #A78BFA !important;
}

/* ============================================================
   13) Bootstrap/jQuery dropdowns
   ============================================================ */
html[data-theme="dark"] .dropdown-menu{
  background-color: #202024 !important;
  border-color: #3F3F46 !important;
  color: #F4F4F5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .dropdown-item{ color: #F4F4F5 !important; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus{
  background-color: #2A2A2F !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active{
  background-color: #A78BFA !important;
  color: #fff !important;
}
html[data-theme="dark"] .dropdown-divider{ border-top-color: #3F3F46 !important; }

/* ============================================================
   14) Modals
   ============================================================ */
html[data-theme="dark"] .modal-content{
  background-color: #202024 !important;
  color: #F4F4F5 !important;
  border-color: #3F3F46 !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{
  border-color: #3F3F46 !important;
}
html[data-theme="dark"] .modal-title{ color: #F4F4F5 !important; }
html[data-theme="dark"] .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   15) Alerts
   ============================================================ */
html[data-theme="dark"] .alert-warning{
  background-color: rgba(245,158,11,.15) !important;
  color: #FCD34D !important;
  border-color: rgba(245,158,11,.3) !important;
}
html[data-theme="dark"] .alert-danger{
  background-color: rgba(239,68,68,.15) !important;
  color: #FCA5A5 !important;
  border-color: rgba(239,68,68,.3) !important;
}
html[data-theme="dark"] .alert-success{
  background-color: rgba(16,185,129,.15) !important;
  color: #6EE7B7 !important;
  border-color: rgba(16,185,129,.3) !important;
}
html[data-theme="dark"] .alert-info{
  background-color: rgba(59,130,246,.15) !important;
  color: #93C5FD !important;
  border-color: rgba(59,130,246,.3) !important;
}

/* ============================================================
   16) TinyMCE
   ============================================================ */
html[data-theme="dark"] .tox-tinymce{ border-color: #3F3F46 !important; }
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__primary,
html[data-theme="dark"] .tox .tox-toolbar-overlord,
html[data-theme="dark"] .tox .tox-menubar,
html[data-theme="dark"] .tox .tox-statusbar{
  background-color: #1F1F23 !important;
  color: #F4F4F5 !important;
  border-color: #3F3F46 !important;
}
html[data-theme="dark"] .tox .tox-tbtn{ color: #F4F4F5 !important; }
html[data-theme="dark"] .tox .tox-tbtn:hover{ background-color: #2A2A2F !important; }
html[data-theme="dark"] .tox-edit-area iframe{
  background: #18181B !important;
}

/* ============================================================
   17) Sidebar & Topbar dropdowns
   ============================================================ */
html[data-theme="dark"] .sq-dropdown{
  background-color: #202024 !important;
  border-color: #3F3F46 !important;
  color: #F4F4F5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .sq-dropdown-item,
html[data-theme="dark"] .sq-notif-item{ color: #F4F4F5 !important; }
html[data-theme="dark"] .sq-dropdown-item:hover,
html[data-theme="dark"] .sq-notif-item:hover{
  background-color: #2A2A2F !important;
  color: #F4F4F5 !important;
}
html[data-theme="dark"] .sq-dropdown-header{
  background-color: #1F1F23 !important;
  color: #A1A1AA !important;
  border-color: #3F3F46 !important;
}
html[data-theme="dark"] .sq-dropdown-divider{ border-top-color: #3F3F46 !important; }
html[data-theme="dark"] .sq-notif-text{ color: #F4F4F5 !important; }
html[data-theme="dark"] .sq-notif-date{ color: #A1A1AA !important; }

/* ============================================================
   18) Scrollbar ناعم في dark mode
   ============================================================ */
html[data-theme="dark"] ::-webkit-scrollbar{ width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track{ background: #18181B; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: #3F3F46;
  border-radius: 5px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: #52525B; }