/* الوضع الليلي */
html.dark .glass-card {
    background: rgba(29, 32, 36, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(66, 70, 86, 0.3);
}

html.dark .btn.btn-light {
    background-color: transparent !important;
    color: #e2e2e6 !important;
    border-color: #424656 !important;
}

    html.dark .btn.btn-light:hover {
        background-color: #36393e !important;
        color: #ffffff !important;
        border-color: #8d91a3 !important;
    }

    html.dark .btn.btn-light:active,
    html.dark .btn.btn-light:focus {
        background-color: #212428 !important;
        color: #e2e2e6 !important;
        border-color: #737687 !important;
        box-shadow: 0 0 0 0.2rem rgba(180, 197, 255, 0.25) !important;
    }
/* ========================================== */
/* تنسيق الكارد في الوضع الداكن فقط */
/* ========================================== */

/* الكارد الرئيسي */
html.dark .card {
    background: #1d2024 !important; /* surface-container */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    overflow: auto;
    max-width: 100vw;
    margin: 0 auto;
    border: 1px solid #424656 !important; /* outline-variant */
}

/* رأس الكارد */
html.dark .card-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #212428 !important; /* surface-container-high */
    border-bottom: 1px solid #424656 !important; /* outline-variant */
    cursor: pointer;
    transition: background-color 0.2s;
}

    html.dark .card-header:hover {
        background-color: #2d3134 !important; /* surface-container-highest */
    }

/* صورة الموظف */
html.dark .employee-photo::after {
    transition: opacity 0.2s;
}

html.dark .employee-photo:hover::after {
    opacity: 1;
}

/* معلومات الهيدر */
html.dark .header-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: #e2e2e6 !important; /* on-surface */
}

html.dark .header-info p {
    font-size: 14px;
    color: #c3c6d8 !important; /* on-surface-variant */
    margin-top: 4px;
}

/* جسم الكارد */
html.dark .card-body5 {
    padding: 0;
    height: 400px;
    overflow: auto;
    transition: height 0.4s ease, padding 0.4s ease;
    scrollbar-width: none;
}

    html.dark .card-body5::-webkit-scrollbar {
        display: none;
    }

    html.dark .card-body5.collapsed {
        height: 0;
        padding: 0 20px;
    }

html.dark .fawaz-tabs {
    --rz-tabs-tab-font-weight: bold;
    --rz-tabs-tab-font-size: medium;
    --rz-tabs-tab-color: #64777ad6;
    font-family: arabtype;
    overflow: auto;
}
html.dark {
    --rz-text-font-family: arabtype;
    --rz-text-title-color: #e2e2e6;
    --rz-text-color: #e2e2e6;
    --rz-text-secondary-color: #c3c6d8;
    --rz-text-disabled-color: #737687;
    --rz-body-background-color: #111418;
    --rz-grid-border: 1px solid #424656;
    --rz-grid-stripe-background-color: #1d2024;
    --rz-grid-cell-color: #e2e2e6;
    --rz-grid-hover-color: #c3c6d8;
    --rz-grid-selected-background-color: #003594;
    --rz-grid-hover-background-color: #1d2024;
    --rz-grid-column-resizer-helper-background-color: #b4c5ff;
    --rz-grid-header-background-color: #1d2024;
    --rz-grid-filter-focus-color: #b4c5ff;
    --rz-grid-apply-filter-button-background-color: #004ccd;
    --rz-grid-foot-background-color: #111418;
    --rz-grid-header-filter-icon-active-color: #00dcbf;
    --rz-primary: #b4c5ff;
    --rz-secondary: #c9c6c6;
    --rz-success: #00dcbf;
    --rz-info: #c3c6d8;
    --rz-warning: #FFB500;
    --rz-danger: #ffb4ab;
    --gradient-side: linear-gradient(90deg, #004ccd, #0f62fe);
    --gradient-red: linear-gradient(90deg, #ba1a1a, #93000a);
    --gradient-print: linear-gradient(90deg, #ffb4ab, #93000a);
    --gradient-save: linear-gradient(90deg, #004ccd, #0f62fe);
    --gradient-pri: linear-gradient(90deg, #004ccd, #b4c5ff);
    --header-bg: #1d2024;
    --row-even-bg: #191c20;
    --border-color: #424656;
    --text-color: #e2e2e6;
    --header-text: #e2e2e6;
    --primary: #b4c5ff;
    --primary-dark: #004ccd;
    --success: #00dcbf;
    --bg-light: #1d2024d6;
    --shadow-hover: rgba(180, 197, 255, 0.2);
    --shadow-normal: rgba(0, 220, 191, 0.2);
    --text: #e2e2e6;
    --text-light: #c3c6d8;
    --primary1: #b4c5ff;
    --secondary1: #b4c5ff;
    --accent: #00dcbf;
    --light1: #1d2024;
    --dark1: #e2e2e6;
    --danger1: #ffb4ab;
    --warning1: #FFB500;
    --success1: #00dcbf;
    --gray1: #8d91a3;
    --breadcrumb-primary: #b4c5ff;
    --breadcrumb-secondary: #8d91a3;
    --breadcrumb-font-family: inherit;
}




html.dark .fawaz .rz-datatable,
html.dark .fawaz .rz-grid-table {
    background-color: #ffffff !important;
    border-color: #e0e3e7 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 2. رأس الجدول (Header) + مساحة Pickable + أزرار الفرز */
html.dark .fawaz th,
html.dark .fawaz .rz-grid-header,
html.dark .fawaz .rz-column-header,
html.dark .fawaz thead th,
/* استهداف مساحة Pickable (Column Picker & Row Selection) */
html.dark .fawaz .rz-column-picker,
html.dark .fawaz .rz-column-picker-btn,
html.dark .fawaz .rz-grid-column-picker,
html.dark .fawaz .rz-datatable-header .rz-column-picker,
html.dark .fawaz .rz-grid-header-cell .rz-column-picker {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    font-weight: bold !important;
}

/* أيقونات الفرز والفلترة في الهيدر لتظهر باللون الأبيض */
html.dark .fawaz .rz-sort-icon,
html.dark .fawaz .rz-grid-filter-icon,
html.dark .fawaz .rz-column-picker-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 3. صفوف الجدول (Cells) */
html.dark .fawaz td,
html.dark .fawaz .rz-grid-cell,
html.dark .fawaz tbody tr td {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #e0e3e7 !important;
}

/* 4. الصف المختار (Selected Row) */
html.dark .fawaz .rz-state-highlight td,
html.dark .fawaz tr.rz-state-highlight td,
html.dark .fawaz .rz-state-highlight {
    background-color: #f1f4f8 !important; /* خلفية فاتحة */
    color: #00174c !important; /* خط غامق */
    font-weight: 600 !important;
}

/* 5. المرور فوق الصف (Hover) - نفس ألوان الصف المختار */
html.dark .fawaz tr:hover td,
html.dark .fawaz .rz-grid-row:hover td {
    background-color: #f1f4f8 !important; /* نفس خلفية المختار */
    color: #00174c !important; /* نفس خط المختار */
}

/* 6. خانات الفلترة (Filter Inputs) */
html.dark .fawaz .rz-grid-filter input,
html.dark .fawaz .rz-grid-filter select,
html.dark .fawaz .rz-grid-filter textarea,
html.dark .fawaz input[type="text"],
html.dark .fawaz input[type="search"],
html.dark .fawaz select,
html.dark .fawaz .rz-dropdown,
html.dark .fawaz .rz-textbox,
html.dark .fawaz .rz-calendar input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #c3c6d8 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

/* 7. أزرار الفلترة (Apply/Cancel) */
html.dark .fawaz .rz-grid-filter button,
html.dark .fawaz .rz-button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

    html.dark .fawaz .rz-grid-filter button:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

/* 8. حدود الخلايا */
html.dark .fawaz th,
html.dark .fawaz td {
    border-color: #e0e3e7 !important;
}
    /* ========================================== */
    /* حل طوارئ: استهداف مباشر لكلاسات Radzen الداخلية */
    /* ========================================== */

    /* رأس الجدول - استهداف مباشر */
    html.dark .fawaz .rz-datatable thead th,
    html.dark .fawaz .rz-grid-table thead th,
    html.dark .fawaz th.rz-column-header,
    html.dark .fawaz .rz-grid-header-cell,
    html.dark .fawaz .rz-column-picker,
    html.dark .fawaz .rz-column-picker-btn {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #333333 !important;
    }

        /* تأكد من أن كل النص داخل الرأس أبيض */
        html.dark .fawaz .rz-datatable thead th *,
        html.dark .fawaz .rz-grid-table thead th *,
        html.dark .fawaz th.rz-column-header *,
        html.dark .fawaz .rz-grid-header-cell *,
        html.dark .fawaz .rz-column-picker *,
        html.dark .fawaz .rz-column-picker-btn * {
            color: #ffffff !important;
        }

    /* أيقونات الفرز والفلترة */
    html.dark .fawaz .rz-sort-icon,
    html.dark .fawaz .rz-grid-filter-icon,
    html.dark .fawaz .rz-column-picker-icon,
    html.dark .fawaz .rz-datatable-header .rz-icon {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* خلايا البيانات - خلفية بيضاء وخط أسود */
    html.dark .fawaz .rz-datatable tbody td,
    html.dark .fawaz .rz-grid-table tbody td,
    html.dark .fawaz td.rz-grid-cell {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #e0e3e7 !important;
    }

    /* الصف المحدد */
    html.dark .fawaz .rz-state-highlight td,
    html.dark .fawaz tr.rz-state-highlight td {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
    }

    /* المرور على الصف */
    html.dark .fawaz .rz-datatable tbody tr:hover td,
    html.dark .fawaz .rz-grid-table tbody tr:hover td {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
    }
    /* ========================================== */
    /* تنسيق شامل للجدول في الوضع الداكن */
    /* ========================================== */

    /* 1. رأس الجدول + الجزء العلوي (Column Picker/Toolbar) */
    html.dark .fawaz .rz-datatable-header,
    html.dark .fawaz .rz-grid-toolbar,
    html.dark .fawaz .rz-column-picker,
    html.dark .fawaz .rz-column-picker-btn,
    html.dark .fawaz .rz-grid-column-picker,
    html.dark .fawaz .rz-datatable-header .rz-column-picker,
    html.dark .fawaz .rz-grid-header-cell .rz-column-picker,
    html.dark .fawaz th,
    html.dark .fawaz .rz-grid-header,
    html.dark .fawaz .rz-column-header,
    html.dark .fawaz thead th {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #333333 !important;
    }

        /* 2. أيقونات الفرز والفلترة في الرأس */
        html.dark .fawaz .rz-sort-icon,
        html.dark .fawaz .rz-grid-filter-icon,
        html.dark .fawaz .rz-column-picker-icon,
        html.dark .fawaz .rz-datatable-header .rz-icon {
            color: #ffffff !important;
            fill: #ffffff !important;
        }

    /* 3. صفوف الجدول - خلفية بيضاء وخط أسود */
    html.dark .fawaz .rz-datatable tbody td,
    html.dark .fawaz .rz-grid-table tbody td,
    html.dark .fawaz td.rz-grid-cell,
    html.dark .fawaz tbody tr td {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #e0e3e7 !important;
    }

    /* 4. خانات الفلترة - خلفية بيضاء وخط أسود */
    html.dark .fawaz .rz-grid-filter input,
    html.dark .fawaz .rz-grid-filter select,
    html.dark .fawaz .rz-grid-filter textarea,
    html.dark .fawaz input[type="text"],
    html.dark .fawaz input[type="search"],
    html.dark .fawaz input[type="number"],
    html.dark .fawaz input[type="date"],
    html.dark .fawaz input[type="datetime-local"],
    html.dark .fawaz select,
    html.dark .fawaz .rz-dropdown,
    html.dark .fawaz .rz-textbox,
    html.dark .fawaz .rz-calendar input,
    html.dark .fawaz .rz-form-field {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #c3c6d8 !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
    }

    /* 5. النوافذ المنبثقة للفلترة والتقويم */
    html.dark .fawaz .rz-popup,
    html.dark .fawaz .rz-calendar-popup,
    html.dark .fawaz .rz-dialog {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #333333 !important;
    }

        html.dark .fawaz .rz-popup table,
        html.dark .fawaz .rz-calendar-popup table {
            background-color: #000000 !important;
            color: #ffffff !important;
        }

        html.dark .fawaz .rz-popup th,
        html.dark .fawaz .rz-popup td,
        html.dark .fawaz .rz-calendar-popup th,
        html.dark .fawaz .rz-calendar-popup td {
            background-color: #000000 !important;
            color: #ffffff !important;
            border-color: #333333 !important;
        }

    /* 6. أزرار الفلترة (تطبيق/إلغاء) */
    html.dark .fawaz .rz-grid-filter button,
    html.dark .fawaz .rz-grid-filter .rz-button {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
    }

        html.dark .fawaz .rz-grid-filter button:hover,
        html.dark .fawaz .rz-grid-filter .rz-button:hover {
            background-color: #000000 !important;
            color: #ffffff !important;
        }

    /* 7. الصف المحدد */
    html.dark .fawaz .rz-state-highlight td,
    html.dark .fawaz tr.rz-state-highlight td,
    html.dark .fawaz .rz-state-highlight {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
        font-weight: 600 !important;
    }

    /* 8. المرور على الصف */
    html.dark .fawaz .rz-datatable tbody tr:hover td,
    html.dark .fawaz .rz-grid-table tbody tr:hover td,
    html.dark .fawaz tr:hover td {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
    }

    /* 9. إزالة أزرار الأسهم من الحقول الرقمية */
    html.dark .fawaz input[type="number"]::-webkit-inner-spin-button,
    html.dark .fawaz input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        display: none;
    }

    html.dark .fawaz input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    /* 10. إزالة أزرار التاريخ */
    html.dark .fawaz input[type="date"]::-webkit-calendar-picker-indicator,
    html.dark .fawaz input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        opacity: 0.7;
        cursor: pointer;
    }

    html.dark .fawaz input[type="date"]::-webkit-inner-spin-button,
    html.dark .fawaz input[type="date"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        display: none;
    }

    /* 11. حدود الخلايا */
    html.dark .fawaz th,
    html.dark .fawaz td {
        border-color: #e0e3e7 !important;
    }

    /* 12. خلفية الجدول العامة */
    html.dark .fawaz .rz-datatable,
    html.dark .fawaz .rz-grid-table {
        background-color: #ffffff !important;
        border-color: #e0e3e7 !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    /* 13. الصفوف الزوجية */
    html.dark .fawaz tr:nth-child(even) td,
    html.dark .fawaz .rz-grid-row-alt td {
        background-color: #f7fafe !important;
    }
    /* ========================================== */
    /* تنسيق مجموعة الصفوف (Group Header) وخلايا الفلترة */
    /* ========================================== */

    /* 1. رأس المجموعة (rz-group-header) - خلفية سوداء */
    html.dark .fawaz .rz-group-header,
    html.dark .fawaz .rz-group-row,
    html.dark .fawaz .rz-group-row td {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #333333 !important;
    }

        /* أيقونة المجموعة (سهم التوسيع/الطي) */
        html.dark .fawaz .rz-group-header .rz-group-icon,
        html.dark .fawaz .rz-group-row .rz-group-icon {
            color: #ffffff !important;
            fill: #ffffff !important;
        }

        /* أي نص أو عناصر داخل رأس المجموعة */
        html.dark .fawaz .rz-group-header *,
        html.dark .fawaz .rz-group-row * {
            color: #ffffff !important;
        }

    /* 2. خلية الفلترة (rz-cell-filter) - خلفية بيضاء وخط أسود */
    html.dark .fawaz .rz-cell-filter,
    html.dark .fawaz .rz-cell-filter td,
    html.dark .fawaz .rz-cell-filter th {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #e0e3e7 !important;
    }

        /* عناصر الإدخال داخل خلية الفلترة */
        html.dark .fawaz .rz-cell-filter input,
        html.dark .fawaz .rz-cell-filter select,
        html.dark .fawaz .rz-cell-filter textarea,
        html.dark .fawaz .rz-cell-filter .rz-textbox,
        html.dark .fawaz .rz-cell-filter .rz-dropdown {
            background-color: #ffffff !important;
            color: #000000 !important;
            border: 1px solid #c3c6d8 !important;
            border-radius: 4px !important;
        }

        /* أيقونات الفلترة داخل الخلية */
        html.dark .fawaz .rz-cell-filter .rz-grid-filter-icon,
        html.dark .fawaz .rz-cell-filter .rz-icon {
            color: #000000 !important;
            fill: #000000 !important;
        }
    /* ========================================== */
    /* تنسيق Dropdown وأزرار الأرقام في الوضع الداكن */
    /* ========================================== */

    /* 1. القائمة المنسدلة (rz-dropdown) - خلفية بيضاء وخط أسود */
    html.dark .fawaz .rz-dropdown,
    html.dark .fawaz .rz-dropdown.rz-input-md,
    html.dark .fawaz .rz-dropdown .rz-dropdown-label {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #c3c6d8 !important;
        border-radius: 4px !important;
    }

    /* 2. زر القائمة المنسدلة (rz-dropdown-trigger) - خلفية بيضاء */
    html.dark .fawaz .rz-dropdown-trigger,
    html.dark .fawaz .rz-dropdown-trigger.rz-corner-right {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #c3c6d8 !important;
        border-right: none !important; /* إزالة الحد الأيمن للدمج مع الخانة */
    }

        html.dark .fawaz .rz-dropdown-trigger:hover {
            background-color: #f1f4f8 !important;
        }

    /* 3. أيقونة السهم (rz-dropdown-trigger-icon) - لون أسود */
    html.dark .fawaz .rz-dropdown-trigger-icon,
    html.dark .fawaz .rz-dropdown-trigger-icon.rzi,
    html.dark .fawaz .rz-dropdown-trigger-icon.rzi-chevron-down,
    html.dark .fawaz .rz-dropdown-trigger-icon::before {
        color: #000000 !important;
        fill: #000000 !important;
    }

    /* 4. أزرار الأرقام (rz-numeric-button) - بدون حدود */
    html.dark .fawaz .rz-numeric-button,
    html.dark .fawaz .rz-numeric-button.rz-numeric-down,
    html.dark .fawaz .rz-numeric-button.rz-numeric-up,
    html.dark .fawaz .rz-numeric-button.rz-button {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

        html.dark .fawaz .rz-numeric-button:hover {
            background-color: #f1f4f8 !important;
        }

        html.dark .fawaz .rz-numeric-button:active {
            background-color: #e0e3e7 !important;
        }

        /* 5. أيقونات أزرار الأرقام - لون أسود */
        html.dark .fawaz .rz-numeric-button .rzi,
        html.dark .fawaz .rz-numeric-button .rzi-chevron-up,
        html.dark .fawaz .rz-numeric-button .rzi-chevron-down,
        html.dark .fawaz .rz-numeric-button .rzi::before {
            color: #000000 !important;
            fill: #000000 !important;
        }

    /* 6. حاوية الأزرار الرقمية - إزالة الحدود */
    html.dark .fawaz .rz-numeric-buttons {
        border: none !important;
        background-color: #ffffff !important;
    }
    /* ========================================== */
    /* تنسيق خلية البيانات (rz-cell-data) */
    /* ========================================== */

    /* 1. خلية البيانات - خط أسود */
    html.dark .fawaz .rz-cell-data,
    html.dark .fawaz td.rz-cell-data {
        color: #000000 !important;
        background-color: #ffffff !important;
    }

        /* 2. عند المرور (Hover) - نفس ألوان الاختيار */
        html.dark .fawaz tr:hover .rz-cell-data,
        html.dark .fawaz .rz-grid-row:hover .rz-cell-data,
        html.dark .fawaz .rz-cell-data:hover {
            background-color: #f1f4f8 !important;
            color: #00174c !important;
        }

        /* 3. عند الاختيار (Selected) - نفس ألوان الاختيار */
        html.dark .fawaz .rz-state-highlight .rz-cell-data,
        html.dark .fawaz tr.rz-state-highlight .rz-cell-data,
        html.dark .fawaz .rz-cell-data.rz-state-highlight {
            background-color: #f1f4f8 !important;
            color: #00174c !important;
            font-weight: 600 !important;
        }
    /* ========================================== */
    /* صورة الموظف في الوضع الداكن فقط */
    /* ========================================== */
    html.dark .employee-photo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #2d3134 !important; /* surface-container-highest (رمادي داكن) */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        overflow: hidden;
        border: 2px solid #424656 !important; /* outline-variant (حدود رمادية متناسقة) */
        cursor: pointer;
        position: relative;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

        /* تأثير عند المرور على صورة الموظف في الوضع الداكن */
        html.dark .employee-photo:hover {
            border-color: #b4c5ff !important; /* لون أزرق فاتح عند المرور للتمييز */
            background-color: #36393e !important;
        }

        /* ضمان ظهور الصورة داخل الإطار بشكل مثالي */
        html.dark .employee-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    /* ========================================== */
    /* عنصر Radzen الرقمي (خارج الجداول) */
    /* ========================================== */
    html.dark .rz-numeric.rz-numeric-input.rz-form-field,
    html.dark .rz-numeric .rz-form-field-content,
    html.dark .rz-numeric-input .rz-form-field-content {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #c3c6d8 !important;
        border-radius: 4px !important;
    }

        html.dark .rz-numeric.rz-numeric-input.rz-form-field input,
        html.dark .rz-numeric-input input {
            background-color: #ffffff !important;
            color: #000000 !important;
            border: none !important;
        }

            /* إزالة أسهم الأرقام */
            html.dark .rz-numeric-input input::-webkit-outer-spin-button,
            html.dark .rz-numeric-input input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
                display: none;
            }

    html.dark .rz-numeric-input input {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    /* أزرار الأرقام - بدون حدود */
    html.dark .rz-numeric .rz-numeric-button,
    html.dark .rz-numeric-button.rz-numeric-up,
    html.dark .rz-numeric-button.rz-numeric-down {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: none !important;
        box-shadow: none !important;
    }

        html.dark .rz-numeric .rz-numeric-button:hover {
            background-color: #f1f4f8 !important;
        }

        /* أيقونات الأزرار */
        html.dark .rz-numeric .rz-numeric-button .rzi {
            color: #000000 !important;
            fill: #000000 !important;
        }


    /* ========================================== */
    /* كلاس TEXT_EDIT في الوضع الداكن */
    /* ========================================== */
    html.dark .TEXT_EDIT {
        align-items: center;
        text-align: center;
        font-family: arabtype;
        font-size: medium;
        color: white !important; /* أزرق فاتح متناسق مع الداكن */
        font-weight: bold;
        width: 100%;
        border: 1px solid #424656 !important; /* حدود رمادية داكنة */
        background-color: #1d2024 !important; /* خلفية داكنة متناسقة */
        height: 40px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

        html.dark .TEXT_EDIT:focus {
            border-color: #b4c5ff !important; /* حدود زرقاء فاتحة عند التركيز */
            box-shadow: 0 0 0 0 transparent, 0 0 0 0.15rem rgba(180, 197, 255, 0.3) !important; /* توهج أزرق فاتح */
            outline: none;
        }

        html.dark .TEXT_EDIT:hover {
            border-color: #8d91a3 !important; /* حدود أفتح قليلاً عند المرور */
            box-shadow: 0 0 0 0 transparent, 0 0 10px rgba(180, 197, 255, 0.2) !important; /* توهج خفيف */
        }

        html.dark .TEXT_EDIT::placeholder {
            color: #737687 !important; /* لون النص التوضيحي */
        }
/* ========================================== */
/* تسمية الحقل - الوضع الفاتح (خلفية بيضاء) */
/* ========================================== */
.rz-form-field-label {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ========================================== */
/* تسمية الحقل - الوضع الداكن (نفس لون TEXT_EDIT) */
/* ========================================== */
html.dark .rz-form-field-label {
    background-color: #1d2024 !important; /* نفس لون خلفية TEXT_EDIT */
    color: #ffffff !important;
}
/* ========================================== */
/* مربع الاختيار (Checkbox) - الوضع الداكن */
/* ========================================== */
html.dark .rz-chkbox,
html.dark .rz-chkbox .rz-chkbox-box {
    background-color: #ffffff !important; /* خلفية بيضاء */
    border-color: #424656 !important; /* حدود رمادية داكنة */
}

    /* علامة الصح (✓) باللون الأسود */
    html.dark .rz-chkbox .rz-chkbox-icon,
    html.dark .rz-chkbox .rzi-check,
    html.dark .rz-chkbox .rzi-check::before {
        color: #000000 !important;
        fill: #000000 !important;
    }

/* عند تحديد المربع */
html.dark .rz-chkbox-box.rz-state-active {
    background-color: #ffffff !important;
    border-color: #b4c5ff !important; /* حدود زرقاء فاتحة عند التحديد */
}

    html.dark .rz-chkbox-box.rz-state-active .rz-chkbox-icon,
    html.dark .rz-chkbox-box.rz-state-active .rzi-check {
        color: #000000 !important;
        fill: #000000 !important;
    }

/* ========================================== */
/* التسمية (Label) - الوضع الداكن */
/* ========================================== */
html.dark .rz-label,
html.dark .rz-label span {
    color: #ffffff !important; /* خط أبيض */
}
/* ========================================== */
/* القائمة المنسدلة - بنفس ألوان TEXT_EDIT */
/* ========================================== */
html.dark .rz-dropdown.rz-input-md,
html.dark .rz-dropdown.rz-input-md .rz-dropdown-label,
html.dark .rz-dropdown.rz-input-md .rz-dropdown-trigger {
    background-color: #1d2024 !important; /* نفس لون TEXT_EDIT */
    color: #b4c5ff !important; /* نفس لون خط TEXT_EDIT (أزرق فاتح) */
    border: 1px solid #424656 !important; /* نفس لون حدود TEXT_EDIT */
}

    /* أيقونة السهم */
    html.dark .rz-dropdown.rz-input-md .rz-dropdown-trigger-icon,
    html.dark .rz-dropdown.rz-input-md .rzi-chevron-down {
        color: #b4c5ff !important;
        fill: #b4c5ff !important;
    }

    /* عند التركيز */
    html.dark .rz-dropdown.rz-input-md:focus-within,
    html.dark .rz-dropdown.rz-input-md.rz-state-focus {
        border-color: #b4c5ff !important;
        box-shadow: 0 0 0 0.15rem rgba(180, 197, 255, 0.3) !important;
    }

    /* ========================================== */
    /* زر المسح (rz-clear) - بنفس ألوان TEXT_EDIT */
    /* ========================================== */
    html.dark .rz-dropdown.rz-input-md .rz-clear,
    html.dark .rz-clear {
        background-color: #1d2024 !important; /* نفس لون TEXT_EDIT */
        color: #b4c5ff !important; /* نفس لون خط TEXT_EDIT */
        border: none !important;
    }

        /* أيقونة زر المسح */
        html.dark .rz-clear .rzi,
        html.dark .rz-clear .rzi-times,
        html.dark .rz-clear .rzi-times::before {
            color: #b4c5ff !important;
            fill: #b4c5ff !important;
        }

        /* عند المرور على زر المسح */
        html.dark .rz-clear:hover {
            color: #ffb4ab !important; /* أحمر فاتح (danger) عند المرور */
            background-color: #1d2024 !important;
        }

            html.dark .rz-clear:hover .rzi,
            html.dark .rz-clear:hover .rzi-times {
                color: #ffb4ab !important;
                fill: #ffb4ab !important;
            }
    /* ========================================== */
    /* إزالة الإطار الداخلي للقائمة المنسدلة */
    /* ========================================== */
    html.dark .rz-dropdown.rz-input-md .rz-dropdown-label,
    html.dark .rz-dropdown.rz-input-md .rz-inputtext,
    html.dark .rz-dropdown .rz-form-field-content,
    html.dark .rz-dropdown .rz-dropdown-label-wrapper {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background-color: transparent !important;
    }

    /* إزالة الحدود من حقل الإدخال الداخلي */
    html.dark .rz-dropdown.rz-input-md input,
    html.dark .rz-dropdown input[type="text"] {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background-color: transparent !important;
    }

/* إزالة الحدود من زر الإغلاق (X) */
html.dark .rz-dropdown .rz-clear {
    border: none !important;
    box-shadow: none !important;
}

/* إزالة الحدود من زر السهم */
html.dark .rz-dropdown .rz-dropdown-trigger {
    border-left: 1px solid #424656 !important; /* فقط حد فاصل بين السهم والحقل */
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
}
/* ========================================== */
/* القائمة المنبثقة للـ ComboBox - الوضع الداكن */
/* ========================================== */

/* 1. الحاوية الرئيسية للقائمة المنبثقة */
html.dark .rz-dropdown-panel,
html.dark .rz-popup,
html.dark .rz-dropdown-items-wrapper {
    background-color: #1d2024 !important; /* نفس لون TEXT_EDIT */
    border: 1px solid #424656 !important; /* نفس حدود TEXT_EDIT */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 2. عناصر القائمة */
html.dark .rz-dropdown-item,
html.dark .rz-dropdown-items .rz-dropdown-item {
    background-color: #1d2024 !important;
    color: #ffffff !important; /* خط أبيض */
    border-color: #424656 !important;
}

    /* 3. عند المرور على عنصر */
    html.dark .rz-dropdown-item:hover,
    html.dark .rz-dropdown-items .rz-dropdown-item:hover {
        background-color: #2d3134 !important; /* أغمق قليلاً للتمييز */
        color: #ffffff !important;
    }

    /* 4. العنصر المحدد حالياً */
    html.dark .rz-dropdown-item.rz-state-highlight,
    html.dark .rz-dropdown-items .rz-dropdown-item.rz-state-highlight,
    html.dark .rz-dropdown-item:focus,
    html.dark .rz-dropdown-items .rz-dropdown-item:focus {
        background-color: #003594 !important; /* أزرق داكن للتمييز */
        color: #ffffff !important;
    }

/* 5. خانة البحث في القائمة */
html.dark .rz-dropdown-filter,
html.dark .rz-dropdown-filter-container {
    background-color: #1d2024 !important;
    border-bottom: 1px solid #424656 !important;
}

    html.dark .rz-dropdown-filter input,
    html.dark .rz-dropdown-filter-container input {
        background-color: #1d2024 !important;
        color: #ffffff !important;
        border: 1px solid #424656 !important;
    }

        html.dark .rz-dropdown-filter input::placeholder {
            color: #737687 !important; /* لون رمادي للنص التوضيحي */
        }

    /* 6. أيقونة البحث */
    html.dark .rz-dropdown-filter .rzi-search,
    html.dark .rz-dropdown-filter .rzi {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

/* 7. شريط التمرير داخل القائمة */
html.dark .rz-dropdown-items::-webkit-scrollbar {
    width: 8px;
}

html.dark .rz-dropdown-items::-webkit-scrollbar-track {
    background: #1d2024;
}

html.dark .rz-dropdown-items::-webkit-scrollbar-thumb {
    background: #424656;
    border-radius: 4px;
}

    html.dark .rz-dropdown-items::-webkit-scrollbar-thumb:hover {
        background: #737687;
    }
/* ========================================== */
/* الجزء العلوي لـ DatePicker - الوضع الداكن */
/* ========================================== */

/* 1. الحاوية الرئيسية للـ Popup */
html.dark .rz-calendar-popup,
html.dark .rz-calendar .rz-popup,
html.dark .rz-datepicker-popup {
    background-color: #1d2024 !important; /* نفس لون TEXT_EDIT */
    border: 1px solid #424656 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 2. الشريط العلوي (Header) الذي يحتوي على التاريخ والوقت */
html.dark .rz-calendar-header,
html.dark .rz-datepicker-header,
html.dark .rz-calendar .rz-popup-header {
    background-color: #1d2024 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #424656 !important;
}

    /* 3. عرض التاريخ والوقت في الأعلى */
    html.dark .rz-calendar-header .rz-calendar-title,
    html.dark .rz-datepicker-header .rz-datepicker-title,
    html.dark .rz-calendar-title {
        background-color: #1d2024 !important;
        color: #ffffff !important;
    }

/* 4. أزرار التنقل (السهمين) */
html.dark .rz-calendar-prev,
html.dark .rz-calendar-next,
html.dark .rz-datepicker-prev,
html.dark .rz-datepicker-next {
    background-color: #1d2024 !important;
    color: #ffffff !important;
    border: none !important;
}

    html.dark .rz-calendar-prev:hover,
    html.dark .rz-calendar-next:hover {
        background-color: #2d3134 !important;
    }

    /* 5. أيقونات الأسهم */
    html.dark .rz-calendar-prev .rzi,
    html.dark .rz-calendar-next .rzi,
    html.dark .rz-datepicker-prev .rzi,
    html.dark .rz-datepicker-next .rzi {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

/* 6. أيام الأسبوع (SUN, MON, etc) */
html.dark .rz-calendar th,
html.dark .rz-datepicker th {
    background-color: #1d2024 !important;
    color: #ffffff !important;
    font-weight: bold;
    border-bottom: 1px solid #424656 !important;
}

/* 7. أيام الشهر */
html.dark .rz-calendar td,
html.dark .rz-datepicker td {
    background-color: #1d2024 !important;
    color: #ffffff !important;
}

    html.dark .rz-calendar td:hover,
    html.dark .rz-datepicker td:hover {
        background-color: #2d3134 !important;
    }

    /* 8. اليوم المحدد (الدائرة الوردية في الصورة) */
    html.dark .rz-calendar td.rz-state-active,
    html.dark .rz-datepicker td.rz-state-active,
    html.dark .rz-calendar .rz-state-active span,
    html.dark .rz-datepicker .rz-state-active span {
        background-color: #ba1a1a !important; /* أحمر داكن */
        color: #ffffff !important;
        border-radius: 50% !important;
    }

    /* 9. الأيام من الشهر السابق/التالي (الأيام الباهتة) */
    html.dark .rz-calendar td.rz-other-month,
    html.dark .rz-datepicker td.rz-other-month {
        color: #737687 !important; /* رمادي باهت */
    }
/* ========================================== */
/* جدول fawaz1 - الوضع الداكن فقط */
/* ========================================== */

/* 1. رأس الجدول - خلفية سوداء وخط أبيض */
html.dark .fawaz1 thead th,
html.dark .fawaz1 th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    font-weight: bold;
}

html.dark .fawaz1 thead tr {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* 2. خلايا الجدول - خلفية بيضاء وخط أسود */
html.dark .fawaz1 th,
html.dark .fawaz1 td {
    padding: 12px 20px;
    color: #000000 !important;
    font-family: arabtype;
    white-space: nowrap;
    border-color: #e0e3e7 !important;
}

/* 3. صفوف الجدول */
html.dark .fawaz1 tbody tr {
    border-bottom: 1px solid #e0e3e7 !important;
    font-size: medium;
    color: #000000 !important;
    background-color: #ffffff !important;
}

    /* 4. الصفوف الزوجية */
    html.dark .fawaz1 tbody tr:nth-of-type(even) {
        background-color: #f7fafe !important; /* أزرق فاتح جداً */
        color: #000000 !important;
    }

    /* 5. آخر صف */
    html.dark .fawaz1 tbody tr:last-of-type {
        border-bottom: 1px solid #e0e3e7 !important;
    }

    /* 6. المرور على الصف - نفس ألوان الاختيار */
    html.dark .fawaz1 tbody tr:hover {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
    }

        html.dark .fawaz1 tbody tr:hover td {
            color: #00174c !important;
        }

    /* 7. الصف المحدد */
    html.dark .fawaz1 tbody tr.rz-state-highlight,
    html.dark .fawaz1 tbody tr.selected {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
        font-weight: 600;
    }

        html.dark .fawaz1 tbody tr.rz-state-highlight td,
        html.dark .fawaz1 tbody tr.selected td {
            color: #00174c !important;
        }

/* 8. خلفية الجدول العامة */
html.dark .fawaz1 {
    background-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}
/* ========================================== */
/* نافذة الفلترة المنبثقة - الوضع الداكن */
/* (بدون الاعتماد على .fawaz كحاوية) */
/* ========================================== */

/* 1. النافذة المنبثقة الرئيسية */
html.dark .rz-popup,
html.dark .rz-popup .rz-popup-content,
html.dark .rz-grid-filter-popup {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

/* 2. قائمة الخيارات (Equals, Not equals, etc.) */
html.dark .rz-listbox,
html.dark .rz-listbox .rz-listbox-list,
html.dark .rz-dropdown-items {
    background-color: #000000 !important;
}

html.dark .rz-listbox-item,
html.dark .rz-dropdown-item,
html.dark .rz-option {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    html.dark .rz-listbox-item:hover,
    html.dark .rz-dropdown-item:hover {
        background-color: #1d2024 !important;
    }

    html.dark .rz-listbox-item.rz-state-highlight,
    html.dark .rz-dropdown-item.rz-state-highlight {
        background-color: #003594 !important;
        color: #ffffff !important;
    }

/* 3. أزرار APPLY و CLEAR */
html.dark .rz-grid-filter .rz-button,
html.dark .rz-popup .rz-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #424656 !important;
}

    html.dark .rz-grid-filter .rz-button:hover,
    html.dark .rz-popup .rz-button:hover {
        background-color: #1d2024 !important;
    }

/* زر APPLY الأزرق */
html.dark .rz-button-primary,
html.dark .rz-button.rz-primary {
    background-color: #b4c5ff !important;
    color: #00174c !important;
    font-weight: bold !important;
}

    html.dark .rz-button-primary:hover {
        background-color: #dbe1ff !important;
    }

/* 4. خانة الإدخال داخل الفلتر */
html.dark .rz-grid-filter input,
html.dark .rz-grid-filter .rz-textbox,
html.dark .rz-grid-filter .rz-dropdown,
html.dark .rz-popup input,
html.dark .rz-popup .rz-textbox {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #424656 !important;
}

    html.dark .rz-grid-filter input::placeholder,
    html.dark .rz-popup input::placeholder {
        color: #737687 !important;
    }

/* 5. أيقونة الفلتر في رأس الجدول */
html.dark .rz-grid-filter-icon,
html.dark .rz-column-header .rz-grid-filter-icon,
html.dark .rz-grid-header-cell .rz-grid-filter-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

    html.dark .rz-grid-filter-icon:hover,
    html.dark .rz-grid-filter-icon.rz-state-active {
        color: #b4c5ff !important;
        fill: #b4c5ff !important;
    }

/* 6. أيقونة السهم في القوائم المنسدلة */
html.dark .rz-dropdown-trigger-icon,
html.dark .rzi-chevron-down {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 7. حاوية أزرار APPLY/CLEAR */
html.dark .rz-grid-filter-buttons {
    background-color: #000000 !important;
    border-top: 1px solid #333333 !important;
}

/* 8. التقويم داخل الفلتر */
html.dark .rz-calendar-popup,
html.dark .rz-datepicker-popup {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.dark .rz-calendar td,
html.dark .rz-datepicker td {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.dark .rz-calendar th,
html.dark .rz-datepicker th {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.dark .rz-calendar td.rz-state-active,
html.dark .rz-datepicker td.rz-state-active {
    background-color: #ba1a1a !important;
    color: #ffffff !important;
}
/* ========================================== */
/* الحاوية الخارجية للـ Popup - الوضع الداكن */
/* ========================================== */

/* 1. الحاوية الرئيسية للـ Popup (الخلفية البيضاء الكبيرة) */
html.dark .rz-popup,
html.dark .rz-popup-wrapper,
html.dark .rz-popup-content,
html.dark .rz-overlay,
html.dark .rz-dialog,
html.dark .rz-dialog-wrapper,
html.dark .rz-dialog-content {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

    /* 2. إزالة أي خلفية بيضاء من الحاويات الأب */
    html.dark .rz-popup *,
    html.dark .rz-dialog * {
        background-color: transparent;
    }

    /* إعادة تعيين الخلفية للعناصر الداخلية فقط */
    html.dark .rz-popup .rz-listbox,
    html.dark .rz-popup .rz-dropdown-items,
    html.dark .rz-popup .rz-calendar,
    html.dark .rz-popup .rz-datepicker {
        background-color: #000000 !important;
    }

    /* 3. زر CLEAR - خلفية سوداء وخط أبيض */
    html.dark .rz-popup .rz-button,
    html.dark .rz-dialog .rz-button,
    html.dark button[title="Clear"],
    html.dark .rz-button-flat {
        background-color: #000000 !important;
        color: #ffffff !important;
        border: 1px solid #424656 !important;
    }

        html.dark .rz-popup .rz-button:hover,
        html.dark .rz-dialog .rz-button:hover {
            background-color: #1d2024 !important;
        }

    /* 4. زر APPLY - أزرق فاتح */
    html.dark .rz-popup .rz-button-primary,
    html.dark .rz-dialog .rz-button-primary,
    html.dark button[title="Apply"],
    html.dark .rz-button.rz-primary {
        background-color: #b4c5ff !important;
        color: #00174c !important;
        border: none !important;
        font-weight: bold !important;
    }

        html.dark .rz-popup .rz-button-primary:hover,
        html.dark .rz-dialog .rz-button-primary:hover {
            background-color: #dbe1ff !important;
        }

/* 5. حاوية الأزرار (CLEAR و APPLY) */
html.dark .rz-grid-filter-buttons,
html.dark .rz-popup-footer,
html.dark .rz-dialog-footer {
    background-color: #000000 !important;
    border-top: 1px solid #333333 !important;
    padding: 12px !important;
}

/* 6. القائمة الجانبية (Equals, Not equals, etc.) */
html.dark .rz-listbox,
html.dark .rz-listbox .rz-listbox-list {
    background-color: #000000 !important;
}

html.dark .rz-listbox-item {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #333333 !important;
}

    html.dark .rz-listbox-item:hover {
        background-color: #1d2024 !important;
    }

    html.dark .rz-listbox-item.rz-state-highlight {
        background-color: #003594 !important;
        color: #ffffff !important;
    }

/* 7. التقويم */
html.dark .rz-calendar,
html.dark .rz-datepicker {
    background-color: #000000 !important;
}

    html.dark .rz-calendar td,
    html.dark .rz-datepicker td {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    html.dark .rz-calendar th,
    html.dark .rz-datepicker th {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    html.dark .rz-calendar td.rz-other-month,
    html.dark .rz-datepicker td.rz-other-month {
        background-color: #1d2024 !important;
        color: #737687 !important;
    }

/* 8. أزرار التنقل في التقويم (< >) */
html.dark .rz-calendar-prev,
html.dark .rz-calendar-next,
html.dark .rz-datepicker-prev,
html.dark .rz-datepicker-next {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    html.dark .rz-calendar-prev:hover,
    html.dark .rz-calendar-next:hover {
        background-color: #1d2024 !important;
    }

/* 9. Dropdown الشهر والسنة في التقويم */
html.dark .rz-calendar .rz-dropdown,
html.dark .rz-datepicker .rz-dropdown {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #424656 !important;
}

html.dark .rz-calendar .rz-dropdown-trigger-icon,
html.dark .rz-datepicker .rz-dropdown-trigger-icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 10. شريط التمرير */
html.dark .rz-popup::-webkit-scrollbar,
html.dark .rz-dialog::-webkit-scrollbar {
    width: 8px;
}

html.dark .rz-popup::-webkit-scrollbar-track,
html.dark .rz-dialog::-webkit-scrollbar-track {
    background: #000000;
}

html.dark .rz-popup::-webkit-scrollbar-thumb,
html.dark .rz-dialog::-webkit-scrollbar-thumb {
    background: #424656;
    border-radius: 4px;
}
/* ========================================== */
/* أيقونات الأزرار داخل جدول fawaz - الوضع الداكن */
/* ========================================== */
html.dark .fawaz .rz-button .rzi,
html.dark .fawaz .rz-button .rzi::before,
html.dark .fawaz .rz-button .material-symbols-outlined,
html.dark .fawaz .rz-button svg,
html.dark .fawaz .rz-button img {
    color: #000000 !important;
    fill: #000000 !important;
}
/* ========================================== */
/* تبويبات fawaz-tabs - الوضع الداكن */
/* ========================================== */

/* 1. الحاوية الرئيسية للتبويبات */
html.dark .fawaz-tabs {
    --rz-tabs-tab-font-weight: bold;
    --rz-tabs-tab-font-size: medium;
    --rz-tabs-tab-color: #c3c6d8; /* لون رمادي فاتح للنص غير النشط */
    font-family: arabtype;
    overflow: auto;
    background-color: #111418 !important; /* خلفية داكنة للحاوية */
}

    /* 2. التبويب العادي (غير النشط) */
    html.dark .fawaz-tabs .rz-tabview-tab,
    html.dark .fawaz-tabs .rz-tabview-nav-link {
        background-color: #1d2024 !important; /* نفس لون TEXT_EDIT */
        color: #c3c6d8 !important; /* رمادي فاتح */
        border: 1px solid #424656 !important;
        border-bottom: none !important;
        transition: all 0.2s ease;
    }

        /* 3. عند المرور على التبويب */
        html.dark .fawaz-tabs .rz-tabview-tab:hover,
        html.dark .fawaz-tabs .rz-tabview-nav-link:hover {
            background-color: #2d3134 !important; /* أغمق قليلاً */
            color: #ffffff !important; /* أبيض */
            border-color: #737687 !important;
        }

        /* 4. التبويب المحدد (النشط) */
        html.dark .fawaz-tabs .rz-tabview-tab-selected,
        html.dark .fawaz-tabs .rz-tabview-tab.rz-state-active,
        html.dark .fawaz-tabs .rz-tabview-tab.rz-state-focused {
            background-color: #000000 !important; /* أسود للتمييز */
            color: #b4c5ff !important; /* أزرق فاتح */
            border-color: #b4c5ff !important;
            border-bottom: 2px solid #000000 !important; /* دمج مع المحتوى */
            font-weight: bold !important;
            z-index: 2;
        }

        /* 5. أيقونة التبويب */
        html.dark .fawaz-tabs .rz-tabview-tab .rzi,
        html.dark .fawaz-tabs .rz-tabview-nav-link .rzi,
        html.dark .fawaz-tabs .rz-tabview-tab .material-symbols-outlined {
            color: #c3c6d8 !important;
            fill: #c3c6d8 !important;
        }

        html.dark .fawaz-tabs .rz-tabview-tab:hover .rzi,
        html.dark .fawaz-tabs .rz-tabview-tab:hover .material-symbols-outlined {
            color: #ffffff !important;
            fill: #ffffff !important;
        }

        html.dark .fawaz-tabs .rz-tabview-tab-selected .rzi,
        html.dark .fawaz-tabs .rz-tabview-tab.rz-state-active .rzi,
        html.dark .fawaz-tabs .rz-tabview-tab.rz-state-focused .material-symbols-outlined {
            color: #b4c5ff !important;
            fill: #b4c5ff !important;
        }

    /* 6. محتوى التبويب (الجزء السفلي) */
    html.dark .fawaz-tabs .rz-tabview-panels,
    html.dark .fawaz-tabs .rz-tabview-panel {
        background-color: #000000 !important; /* أسود */
        color: #ffffff !important;
        border: 1px solid #424656 !important;
        border-top: none !important;
    }

    /* 7. شريط التمرير داخل التبويبات */
    html.dark .fawaz-tabs::-webkit-scrollbar {
        height: 6px;
    }

    html.dark .fawaz-tabs::-webkit-scrollbar-track {
        background: #111418;
    }

    html.dark .fawaz-tabs::-webkit-scrollbar-thumb {
        background: #424656;
        border-radius: 3px;
    }

        html.dark .fawaz-tabs::-webkit-scrollbar-thumb:hover {
            background: #737687;
        }
/* ========================================== */
/* شريط التنقل للتبويبات (rz-tabview-nav) - الوضع الداكن */
/* ========================================== */

/* 1. الحاوية الرئيسية لشريط التبويبات */
html.dark .rz-tabview-nav {
    background-color: #111418 !important; /* نفس لون خلفية الحاوية */
    border: 1px solid #424656 !important;
    border-bottom: none !important; /* إزالة الحد السفلي للدمج مع المحتوى */
    border-radius: 8px 8px 0 0 !important; /* تدوير الحواف العلوية فقط */
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

    /* 2. عناصر التبويب داخل الشريط */
    html.dark .rz-tabview-nav .rz-tabview-nav-link,
    html.dark .rz-tabview-nav .rz-tabview-tab {
        background-color: #1d2024 !important;
        color: #c3c6d8 !important;
        border: 1px solid #424656 !important;
        border-bottom: none !important;
        border-radius: 6px 6px 0 0 !important;
        padding: 10px 16px !important;
        margin: 0 2px !important;
        transition: all 0.2s ease;
        cursor: pointer;
    }

        /* 3. عند المرور على التبويب */
        html.dark .rz-tabview-nav .rz-tabview-nav-link:hover,
        html.dark .rz-tabview-nav .rz-tabview-tab:hover {
            background-color: #2d3134 !important;
            color: #ffffff !important;
            border-color: #737687 !important;
        }

        /* 4. التبويب المحدد (النشط) */
        html.dark .rz-tabview-nav .rz-tabview-nav-link.rz-state-active,
        html.dark .rz-tabview-nav .rz-tabview-nav-link.rz-state-focused,
        html.dark .rz-tabview-nav .rz-tabview-tab.rz-state-active,
        html.dark .rz-tabview-nav .rz-tabview-tab.rz-state-focused {
            background-color: #000000 !important;
            color: #b4c5ff !important;
            border-color: #b4c5ff !important;
            border-bottom: 2px solid #000000 !important; /* دمج مع المحتوى */
            font-weight: bold !important;
            z-index: 2;
            margin-bottom: -1px !important; /* تداخل مع المحتوى */
        }

    /* 5. أيقونات التبويب */
    html.dark .rz-tabview-nav .rzi,
    html.dark .rz-tabview-nav .material-symbols-outlined {
        color: #c3c6d8 !important;
        fill: #c3c6d8 !important;
        margin-left: 6px;
    }

    html.dark .rz-tabview-nav .rz-tabview-nav-link:hover .rzi,
    html.dark .rz-tabview-nav .rz-tabview-tab:hover .material-symbols-outlined {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    html.dark .rz-tabview-nav .rz-state-active .rzi,
    html.dark .rz-tabview-nav .rz-state-focused .rzi,
    html.dark .rz-tabview-nav .rz-state-active .material-symbols-outlined,
    html.dark .rz-tabview-nav .rz-state-focused .material-symbols-outlined {
        color: #b4c5ff !important;
        fill: #b4c5ff !important;
    }

    /* 6. شريط التمرير الأفقي (إذا كانت التبويبات كثيرة) */
    html.dark .rz-tabview-nav::-webkit-scrollbar {
        height: 6px;
    }

    html.dark .rz-tabview-nav::-webkit-scrollbar-track {
        background: #111418;
        border-radius: 3px;
    }

    html.dark .rz-tabview-nav::-webkit-scrollbar-thumb {
        background: #424656;
        border-radius: 3px;
    }

        html.dark .rz-tabview-nav::-webkit-scrollbar-thumb:hover {
            background: #737687;
        }
/* ========================================== */
/* حقل الاختيار المخصص (Select) - الوضع الداكن */
/* ========================================== */

/* 1. التسمية (Label) */
html.dark .space-y-1 label {
    color: #c3c6d8 !important; /* on-surface-variant dark */
}

/* 2. حقل الاختيار */
html.dark select {
    background-color: #1d2024 !important; /* surface-container */
    color: #e2e2e6 !important; /* on-surface */
    border: 1px solid #424656 !important; /* outline-variant dark */
    border-radius: 0.75rem !important; /* rounded-xl */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease;
}

    /* 3. عند التركيز */
    html.dark select:focus {
        border-color: #b4c5ff !important; /* primary dark */
        box-shadow: 0 0 0 2px rgba(180, 197, 255, 0.2) !important;
        outline: none;
    }

    /* 4. خيارات القائمة المنسدلة */
    html.dark select option {
        background-color: #1d2024 !important;
        color: #e2e2e6 !important;
        padding: 8px;
    }

        html.dark select option:hover {
            background-color: #2d3134 !important;
        }

/* 5. الأيقونات (account_circle و expand_more) */
html.dark .space-y-1 .material-symbols-outlined {
    color: #c3c6d8 !important; /* on-surface-variant dark */
}

/* 6. عند المرور على الحقل */
html.dark select:hover {
    border-color: #737687 !important;
}
/* ========================================== */
/* حقول تسجيل الدخول - الوضع الداكن */
/* ========================================== */

/* 1. التسميات (Labels) */
html.dark .space-y-1 label {
    color: #c3c6d8 !important; /* on-surface-variant dark */
}

/* 2. حقول الإدخال (نص + كلمة مرور) */
html.dark .space-y-1 input[type="text"],
html.dark .space-y-1 input[type="password"],
html.dark .space-y-1 input {
    background-color: #1d2024 !important; /* surface-container */
    color: #e2e2e6 !important; /* on-surface */
    border: 1px solid #424656 !important; /* outline-variant dark */
    border-radius: 0.75rem !important; /* rounded-xl */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease;
}

    /* 3. النص التوضيحي (Placeholder) */
    html.dark .space-y-1 input::placeholder {
        color: #737687 !important; /* رمادي باهت */
        opacity: 1;
    }

    /* 4. عند التركيز (Focus) */
    html.dark .space-y-1 input:focus {
        border-color: #b4c5ff !important; /* primary dark */
        box-shadow: 0 0 0 2px rgba(180, 197, 255, 0.2) !important;
        outline: none;
        background-color: #212428 !important; /* أفتح قليلاً عند التركيز */
    }

    /* 5. عند المرور (Hover) */
    html.dark .space-y-1 input:hover {
        border-color: #737687 !important;
    }

/* 6. الأيقونات (person, lock, visibility) */
html.dark .space-y-1 .material-symbols-outlined {
    color: #c3c6d8 !important; /* on-surface-variant dark */
    transition: color 0.2s ease;
}

/* 7. زر إظهار/إخفاء كلمة المرور */
html.dark .space-y-1 button[type="button"],
html.dark .space-y-1 button {
    color: #c3c6d8 !important;
    background-color: transparent !important;
    border: none !important;
}

    html.dark .space-y-1 button:hover {
        color: #b4c5ff !important; /* أزرق فاتح عند المرور */
    }

        html.dark .space-y-1 button:hover .material-symbols-outlined {
            color: #b4c5ff !important;
        }

/* 8. الحاوية النسبية (relative group) - لا تحتاج تعديل لكن للتأكيد */
html.dark .space-y-1 .relative.group {
    background-color: transparent !important;
}
/* ========================================== */
/* نافذة الـ Popup - الوضع الداكن */
/* ========================================== */
html.dark .popup-content {
    background: #1d2024 !important; /* نفس لون TEXT_EDIT */
    color: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; /* ظل أغمق للداكن */
    border: 1px solid #424656 !important; /* حدود رمادية داكنة */
    width: 80%;
    max-width: 800px;
    animation: popup-open 0.3s ease-out;
}

/* عنوان الـ Popup إن وجد */
html.dark .popup-header {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #424656 !important;
}

/* محتوى الـ Popup */
html.dark .popup-body {
    color: #e2e2e6 !important;
}

/* أزرار الإغلاق داخل الـ Popup */
html.dark .popup-content button,
html.dark .popup-header button {
    color: #ffffff !important;
}

    html.dark .popup-content button:hover {
        color: #b4c5ff !important;
    }
/* ========================================== */
/* عنوان الرأس (TEXT_HEAD) - الوضع الداكن */
/* ========================================== */
html.dark .TEXT_HEAD {
    align-items: center;
    text-align: center;
    font-family: arabtype;
    font-size: x-large;
    color: #ffffff !important; /* أبيض ناصع */
    font-weight: bolder;
    width: 100%;
    height: 40px;
    text-shadow: 0 2px 6px rgba(180, 197, 255, 0.3) !important; /* توهج أزرق فاتح خفيف */
}
/* ========================================== */
/* جدول fawaz3 - الوضع الداكن (مع الحفاظ على الألوان المخصصة) */
/* ========================================== */

/* 1. الحاوية الرئيسية */
/*html.dark .fawaz3 {
    border-collapse: separate !important;
    border-spacing: 0;
    min-width: 100%;
    font-family: arabtype;
    text-align: center;
    border-radius: 14px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
    font-size: medium;
    width: 100%;
    margin: auto;
    background-color: #ffffff !important;
    overflow: hidden;
}*/

    /* 2. رأس الجدول - خلفية سوداء وخط أبيض */
    /*html.dark .fawaz3 thead th,
    html.dark .fawaz3 thead tr {
        position: sticky;
        top: 0;
        background-color: #000000 !important;
        z-index: 10;
        color: #ffffff !important;
        font-weight: bold;
        padding: 12px 20px;
        border-bottom: 2px solid #333333 !important;
        border-color: #333333 !important;
        white-space: nowrap;
    }*/

    /* 3. خلايا الجدول - بدون !important على background-color للحفاظ على الألوان المخصصة */
    /*html.dark .fawaz3 th:not([style]),
    html.dark .fawaz3 td:not([style]) {
        padding: 12px 20px;
        color: #000000 !important;
        font-family: arabtype;
        white-space: nowrap;
        border: 1px solid #e0e3e7 !important;
        background-color: #ffffff !important;
    }*/

    /* 4. الصفوف - بدون !important على background-color */
    /*html.dark .fawaz3 tbody tr:not([style]) {
        border-bottom: 1px solid #e0e3e7 !important;
        font-size: medium;
        color: #000000 !important;
        background-color: #ffffff !important;
    }*/

    /* 5. الصفوف الزوجية - فقط للصفوف بدون لون مخصص */
    /*html.dark .fawaz3 tbody tr:nth-of-type(even):not([style]) {
        background-color: #f7fafe !important;
        color: #000000 !important;
    }*/

    /* 6. آخر صف */
    /*html.dark .fawaz3 tbody tr:last-of-type:not([style]) {
        border-bottom: 1px solid #e0e3e7 !important;
    }*/

    /* 7. المرور على الصف - فقط للصفوف بدون لون مخصص */
    /*html.dark .fawaz3 tbody tr:not([style]):hover {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
    }

        html.dark .fawaz3 tbody tr:not([style]):hover td {
            color: #00174c !important;
        }*/

    /* 8. الصف المحدد - فقط للصفوف بدون لون مخصص */
    /*html.dark .fawaz3 tbody tr.rz-state-highlight:not([style]),
    html.dark .fawaz3 tbody tr.selected:not([style]) {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
        font-weight: 600;
    }

        html.dark .fawaz3 tbody tr.rz-state-highlight:not([style]) td,
        html.dark .fawaz3 tbody tr.selected:not([style]) td {
            color: #00174c !important;
        }*/

    /* 9. الزوايا الدائرية */
    /*html.dark .fawaz3 thead th:first-child {
        border-top-right-radius: 14px !important;
    }

    html.dark .fawaz3 thead th:last-child {
        border-top-left-radius: 14px !important;
    }

    html.dark .fawaz3 tbody tr:last-child td:first-child {
        border-bottom-right-radius: 14px !important;
    }

    html.dark .fawaz3 tbody tr:last-child td:last-child {
        border-bottom-left-radius: 14px !important;
    }*/

    /* ========================================== */
    /* الحفاظ على الألوان المخصصة في الوضع الداكن */
    /* ========================================== */

    /* الصف الأخضر (عطلة رسمية/أسبوعية) */
    /*html.dark .fawaz3 tbody tr[style*="background-color: green"],
    html.dark .fawaz3 tbody tr[style*="background-color:green"] {
        background-color: #22c55e !important;  أخضر متناسق مع الداكن 
    }

        html.dark .fawaz3 tbody tr[style*="background-color: green"] td,
        html.dark .fawaz3 tbody tr[style*="background-color:green"] td {
            color: #ffffff !important;  خط أبيض للتباين 
            border-color: #16a34a !important;
        }

     الصف الأخضر البحري (إجازة موظف) 
    html.dark .fawaz3 tbody tr[style*="background-color: lightseagreen"],
    html.dark .fawaz3 tbody tr[style*="background-color:lightseagreen"] {
        background-color: #14b8a6 !important;  أخضر بحري متناسق 
    }

        html.dark .fawaz3 tbody tr[style*="background-color: lightseagreen"] td,
        html.dark .fawaz3 tbody tr[style*="background-color:lightseagreen"] td {
            color: #ffffff !important;
            border-color: #0d9488 !important;
        }

     الخلية الصفراء (تأخير) 
    html.dark .fawaz3 td[style*="background-color: yellow"],
    html.dark .fawaz3 td[style*="background-color:yellow"] {
        background-color: #fbbf24 !important;  أصفر داكن متناسق 
        color: #000000 !important;  خط أسود للتباين 
        font-weight: bold !important;
        border-color: #f59e0b !important;
    }*/
    /* ========================================== */
    /* الحفاظ على الألوان المخصصة في الوضع الداكن */
    /* (مع التعامل مع المسافات في style) */
    /* ========================================== */

    /* الصف الأخضر (عطلة رسمية/أسبوعية) */
    /*html.dark .fawaz3 tbody tr[style*="green"],
    html.dark .fawaz3 tbody tr[style*="green "] {
        background-color: #22c55e !important;
    }

        html.dark .fawaz3 tbody tr[style*="green"] td,
        html.dark .fawaz3 tbody tr[style*="green "] td {
            color: #ffffff !important;
            border-color: #16a34a !important;
        }*/

    /* الصف الأخضر البحري (إجازة موظف) */
    /*html.dark .fawaz3 tbody tr[style*="lightseagreen"],
    html.dark .fawaz3 tbody tr[style*="lightseagreen "] {
        background-color: #14b8a6 !important;
    }

        html.dark .fawaz3 tbody tr[style*="lightseagreen"] td,
        html.dark .fawaz3 tbody tr[style*="lightseagreen "] td {
            color: #ffffff !important;
            border-color: #0d9488 !important;
        }*/

    /* الخلية الصفراء (تأخير) */
    /*html.dark .fawaz3 td[style*="yellow"],
    html.dark .fawaz3 td[style*="yellow "] {
        background-color: #fbbf24 !important;
        color: #000000 !important;
        font-weight: bold !important;
        border-color: #f59e0b !important;
    }*/
/* ========================================== */
/* جدول fawaz3 - الوضع الداكن الكامل (مصحح) */
/* ========================================== */

/* 1. الحاوية الرئيسية للجدول */
html.dark .fawaz3 {
    border-collapse: separate !important;
    border-spacing: 0;
    min-width: 100%;
    font-family: arabtype;
    text-align: center;
    border-radius: 14px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
    font-size: medium;
    width: 100%;
    margin: auto;
    background-color: #ffffff !important;
    overflow: hidden;
}

    /* 2. رأس الجدول - خلفية سوداء وخط أبيض */
    html.dark .fawaz3 thead th {
        position: sticky;
        top: 0;
        background-color: #000000 !important;
        z-index: 10;
        color: #ffffff !important;
        font-weight: bold;
        padding: 12px 20px;
        border-bottom: 2px solid #333333 !important;
        border-color: #333333 !important;
        white-space: nowrap;
    }

    html.dark .fawaz3 thead tr {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    /* 3. صفوف الجسم الافتراضية - للصفوف بدون ألوان مخصصة */
    html.dark .fawaz3 tbody tr:not([style]) {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-bottom: 1px solid #e0e3e7 !important;
    }

    /* 4. الصفوف الزوجية - فقط للصفوف بدون ألوان مخصصة */
    html.dark .fawaz3 tbody tr:nth-of-type(even):not([style]) {
        background-color: #f7fafe !important;
    }

    /* 5. خلايا الجدول - بدون تحديد خلفية بيضاء (للسماح بلون الصف بالظهور) */
    html.dark .fawaz3 th,
    html.dark .fawaz3 td {
        padding: 12px 20px;
        color: #000000 !important;
        font-family: arabtype;
        white-space: nowrap;
        border: 1px solid #e0e3e7 !important;
        background-color: transparent !important; /* شفاف ليرث لون الصف */
    }

    /* 6. رؤوس الجدول - خلفية سوداء */
    html.dark .fawaz3 thead th {
        background-color: #000000 !important;
    }

    /* 7. آخر صف */
    html.dark .fawaz3 tbody tr:last-of-type:not([style]) {
        border-bottom: 1px solid #e0e3e7 !important;
    }

    /* 8. المرور على الصف (Hover) - للصفوف بدون ألوان مخصصة */
    html.dark .fawaz3 tbody tr:not([style]):hover {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
    }

        html.dark .fawaz3 tbody tr:not([style]):hover td {
            color: #00174c !important;
        }

    /* 9. الصف المحدد (Selected) */
    html.dark .fawaz3 tbody tr.rz-state-highlight:not([style]),
    html.dark .fawaz3 tbody tr.selected:not([style]) {
        background-color: #f1f4f8 !important;
        color: #00174c !important;
        font-weight: 600;
    }

        html.dark .fawaz3 tbody tr.rz-state-highlight:not([style]) td,
        html.dark .fawaz3 tbody tr.selected:not([style]) td {
            color: #00174c !important;
        }

    /* 10. الزوايا الدائرية */
    html.dark .fawaz3 thead th:first-child {
        border-top-right-radius: 14px !important;
    }

    html.dark .fawaz3 thead th:last-child {
        border-top-left-radius: 14px !important;
    }

    html.dark .fawaz3 tbody tr:last-child td:first-child {
        border-bottom-right-radius: 14px !important;
    }

    html.dark .fawaz3 tbody tr:last-child td:last-child {
        border-bottom-left-radius: 14px !important;
    }

    /* ========================================== */
    /* الحفاظ على الألوان المخصصة في الوضع الداكن */
    /* ========================================== */

    /* 11. الصف الأخضر البحري (إجازة موظف) - يجب أن يأتي أولاً */
    html.dark .fawaz3 tbody tr[style*="lightseagreen"],
    html.dark .fawaz3 tbody tr[style*="lightseagreen"] td {
        background-color: #14b8a6 !important;
        color: #ffffff !important;
        border-color: #0d9488 !important;
    }

    /* 12. الصف الأخضر الفاتح (عطلة رسمية/أسبوعية) - باستثناء lightseagreen */
    html.dark .fawaz3 tbody tr[style*="green"]:not([style*="lightseagreen"]),
    html.dark .fawaz3 tbody tr[style*="green"]:not([style*="lightseagreen"]) td {
        background-color: #22c55e !important;
        color: #ffffff !important;
        border-color: #16a34a !important;
    }

    /* 13. الخلية الصفراء (تأخير) */
    html.dark .fawaz3 td[style*="yellow"] {
        background-color: #fbbf24 !important;
        color: #000000 !important;
        font-weight: bold !important;
        border-color: #f59e0b !important;
    }