/* ==========================================
   DARK MODE - Cirta.TV
   ========================================== */

/* متغيرات الألوان الخاصة بالوضع المظلم */
html.dark-mode {
    --dark-bg-primary: #0f0f1a;
    --dark-bg-secondary: #1a1a2e;
    --dark-bg-tertiary: #16213e;
    --dark-bg-card: #1e1e36;
    --dark-bg-sidebar: #0a0a1a;
    --dark-bg-input: #252542;
    --dark-bg-hover: #2a2a4a;
    --dark-border-color: #2d2d50;
    --dark-text-primary: #e0e0f0;
    --dark-text-secondary: #a0a0c0;
    --dark-text-muted: #7070a0;
    --dark-accent-primary: #7c3aed;
    --dark-accent-secondary: #a855f7;
    --dark-accent-glow: rgba(124, 58, 237, 0.3);
    --dark-table-stripe: #1a1a30;
    --dark-table-hover: #252545;
    --dark-header-bg: #12122a;
}

/* خلفية الصفحة الرئيسية */
html.dark-mode,
html.dark-mode body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

html.dark-mode .sa-app {
    background-color: var(--dark-bg-primary) !important;
}

/* ---- البطاقات (Cards) ---- */
html.dark-mode .card,
html.dark-mode .card-header,
html.dark-mode .card-footer,
html.dark-mode .card-body,
html.dark-mode .sa-details {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

html.dark-mode .card-header {
    border-bottom-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

html.dark-mode .sa-details__legend {
    color: var(--dark-accent-secondary) !important;
}

/* ---- القائمة الجانبية (Sidebar) ---- */
html.dark-mode .sa-sidebar {
    background-color: var(--dark-bg-sidebar) !important;
    background-image: none !important;
}

html.dark-mode .sa-sidebar::before {
    display: none !important;
}

html.dark-mode .sa-sidebar .sa-nav__link,
html.dark-mode .sa-sidebar .sa-nav__title,
html.dark-mode .sa-sidebar .sa-nav__icon i,
html.dark-mode .sa-sidebar .sa-nav__section-title {
    color: var(--dark-text-primary) !important;
    stroke: var(--dark-text-primary) !important;
    text-shadow: none !important;
}

html.dark-mode .sa-nav__link:hover {
    background: var(--dark-bg-hover) !important;
}

html.dark-mode .sa-nav__menu-item--active .sa-nav__link {
    background: rgba(124, 58, 237, 0.2) !important;
    border-left-color: var(--dark-accent-primary) !important;
}

/* ---- شريط الأدوات (Toolbar) ---- */
html.dark-mode .sa-toolbar,
html.dark-mode .sa-app__toolbar {
    background-color: var(--dark-header-bg) !important;
    border-bottom-color: var(--dark-border-color) !important;
}

html.dark-mode .sa-toolbar__button {
    color: var(--dark-text-primary) !important;
}

/* ---- الحقول (Inputs) ---- */
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

html.dark-mode .input-group-text {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-secondary) !important;
}

/* ---- الجداول (Tables) ---- */
html.dark-mode .table {
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-color) !important;
}

html.dark-mode .table thead th {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border-color) !important;
    color: var(--dark-accent-secondary) !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--dark-table-stripe) !important;
}

html.dark-mode .table td,
html.dark-mode .table th {
    border-color: var(--dark-border-color) !important;
}

/* ---- الأزرار ---- */
html.dark-mode .btn-light {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

/* ---- القوائم المنسدلة (Dropdown) ---- */
html.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

html.dark-mode .dropdown-item {
    color: var(--dark-text-primary) !important;
}

html.dark-mode .dropdown-item:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* ---- النوافذ المنبثقة (Modal) ---- */
html.dark-mode .modal-content {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

html.dark-mode .modal-header {
    border-bottom-color: var(--dark-border-color) !important;
}

html.dark-mode .modal-footer {
    border-top-color: var(--dark-border-color) !important;
}

/* ---- علامات التبويب (Tabs) ---- */
html.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-accent-secondary) !important;
}

/* ---- التنبيهات (Alerts) ---- */
html.dark-mode .alert {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

/* ===== الحل الجذري: إعادة تعريف متغيرات Bootstrap للـ alert-info في الوضع المظلم ===== */
html.dark-mode .alert-info {
    --bs-alert-color: #e0e0f0 !important;
    --bs-alert-bg: #1a1a3a !important;
    --bs-alert-border-color: #4a4a8a !important;
    color: #e0e0f0 !important;
    background-color: #1a1a3a !important;
    border-color: #4a4a8a !important;
}

html.dark-mode .alert-info strong {
    color: #a78bfa !important;
}

html.dark-mode .alert-info .sa-close {
    color: #a0a0cc !important;
}

html.dark-mode .alert-info .sa-close:hover {
    color: #ffffff !important;
}

/* ---- ترقيم الصفحات (Pagination) ---- */
html.dark-mode .page-link {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

html.dark-mode .page-item.active .page-link {
    background-color: var(--dark-accent-primary) !important;
    border-color: var(--dark-accent-primary) !important;
}

/* ---- زر التبديل (Toggle Button) ---- */
.sa-dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sa-dark-mode-toggle:hover {
    background: rgba(128, 128, 128, 0.15);
}

.sa-dark-mode-toggle .sun-icon {
    display: none;
}

.sa-dark-mode-toggle .moon-icon {
    display: inline-block;
}

html.dark-mode .sa-dark-mode-toggle .sun-icon {
    display: inline-block;
    color: #fbbf24;
}

html.dark-mode .sa-dark-mode-toggle .moon-icon {
    display: none;
}

/* ---- حركة انتقال سلسة ---- */
html.dark-mode,
html.dark-mode body,
html.dark-mode .card,
html.dark-mode .sa-sidebar,
html.dark-mode .sa-toolbar,
html.dark-mode .form-control,
html.dark-mode .table,
html.dark-mode .dropdown-menu,
html.dark-mode .modal-content {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* ---- النصوص العامة ---- */
html.dark-mode .text-muted {
    color: var(--dark-text-muted) !important;
}

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: var(--dark-text-primary) !important;
}

/* ---- تحسين مظهر الشعار في السايدبار ---- */
html.dark-mode .sa-sidebar-logo__caption {
    background: var(--dark-accent-primary) !important;
    color: #fff !important;
}

/* ---- Latest News ---- */
html.dark-mode .sa-details.news {
    background-color: #16162e !important;
    border: 1px solid #3d3d6b !important;
    border-radius: 12px;
    padding: 20px;
}

html.dark-mode .sa-details.news .sa-details__legend {
    color: #c084fc !important;
    font-weight: 700;
    font-size: 18px;
    border-bottom: 2px solid #3d3d6b !important;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

/* ---- أخبار Latest News (المحتوى الديناميكي) ---- */
html.dark-mode .sa-details.news .sa-details__body {
    color: #e0e0f0 !important;
}

html.dark-mode .sa-details.news .alert {
    background-color: #1a1a3a !important;
    border: 1px solid #4a4a8a !important;
    color: #e0e0f0 !important;
    border-radius: 8px;
}

html.dark-mode .sa-details.news .alert strong {
    color: #a78bfa !important;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

html.dark-mode .sa-details.news .alert-info {
    --bs-alert-color: #e0e0f0 !important;
    --bs-alert-bg: #1a1a3a !important;
    --bs-alert-border-color: #4a4a8a !important;
    background-color: #1a1a3a !important;
    border-color: #4a4a8a !important;
    color: #e0e0f0 !important;
}

html.dark-mode .sa-details.news .alert .sa-close,
html.dark-mode .sa-details.news .alert .btn-close {
    color: #a0a0cc !important;
    opacity: 1;
}

html.dark-mode .sa-details.news .alert .sa-close:hover,
html.dark-mode .sa-details.news .alert .btn-close:hover {
    color: #ffffff !important;
}

/* ===== طوق النجاة: فرض اللون الفاتح على كل العناصر داخل الأخبار ===== */
html.dark-mode .sa-details.news .alert,
html.dark-mode .sa-details.news .alert * {
    color: #e0e0f0 !important;
}

html.dark-mode .sa-details.news .alert strong {
    color: #a78bfa !important;
}

html.dark-mode .sa-details.news .alert .sa-close {
    color: #a0a0cc !important;
}

html.dark-mode .sa-details.news .alert .sa-close:hover {
    color: #ffffff !important;
}

/* ---- Dashboard Cards ---- */
html.dark-mode .dashboard-card {
    border-radius: 12px !important;
    padding: 20px !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .dashboard-card .card-content h5 {
    color: #fff !important;
}

html.dark-mode .dashboard-card .card-content p {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .dashboard-card .icon-container i {
    stroke: #fff !important;
    color: #fff !important;
}

/* ---- Divider ---- */
html.dark-mode .sa-divider {
    border-top-color: var(--dark-border-color) !important;
}

/* ---- تذييل الصفحة (Footer) ---- */
html.dark-mode .sa-app__footer {
    background-color: var(--dark-header-bg) !important;
    border-top-color: var(--dark-border-color) !important;
    color: var(--dark-text-secondary) !important;
}

/* ---- قائمة المجموعات (List Group) ---- */
html.dark-mode .list-group-item {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

/* ---- شريط التقدم (Progress) ---- */
html.dark-mode .progress {
    background-color: var(--dark-bg-input) !important;
}

/* ---- أكورديون ---- */
html.dark-mode .accordion-button {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
}

html.dark-mode .accordion-item {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

/* ---- البحث ---- */
html.dark-mode .sa-search__body {
    background-color: var(--dark-bg-input) !important;
}

html.dark-mode .sa-search__input {
    color: var(--dark-text-primary) !important;
}

html.dark-mode .sa-search__dropdown {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

/* ---- Admin Clients Page ---- */
html.dark-mode .sa-entity-layout__sidebar .card,
html.dark-mode .sa-entity-layout__main .card,
html.dark-mode .client-inline-notes {
    background: linear-gradient(180deg, rgba(30, 30, 54, 0.98), rgba(20, 20, 38, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

html.dark-mode .sa-entity-layout__sidebar dt,
html.dark-mode .sa-entity-layout__main .form-label,
html.dark-mode .client-inline-notes .form-label {
    color: #e5e7eb !important;
}

html.dark-mode .sa-entity-layout__sidebar dd,
html.dark-mode .sa-entity-layout__sidebar small,
html.dark-mode .sa-entity-layout__main small,
html.dark-mode .client-inline-notes small {
    color: #a7b0c4 !important;
}

html.dark-mode .form-check-label {
    color: #dbe2f2 !important;
}

html.dark-mode .sa-datatables-init,
html.dark-mode table.dataTable,
html.dark-mode table.dataTable tbody tr,
html.dark-mode table.dataTable tbody td {
    background-color: transparent !important;
    color: #e5e7eb !important;
}

html.dark-mode table.dataTable tbody tr:hover {
    background-color: rgba(124, 58, 237, 0.10) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #a7b0c4 !important;
}