/* ============================================================================
   UI — طبقة تطبيق الـ tokens على Bootstrap والعناصر الأساسية
   ----------------------------------------------------------------------------
   • تُحمَّل بعد bootstrap و tokens.css وقبل style.css.
   • تعيد تعيين متغيّرات Bootstrap (--bs-*) من الـ tokens → التغيير يسري على
     كل مكوّنات Bootstrap في الـ 117 قالباً دفعة واحدة بلا تعديل HTML.
   • بلا !important إلا للضرورة القصوى.
   ============================================================================ */

/* ── 1. إعادة تعيين متغيّرات Bootstrap من الـ tokens ─────────────────────── */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-base);
    --bs-body-line-height: var(--lh-base);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);

    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-3);
    --bs-tertiary-color: var(--text-subtle);
    --bs-tertiary-bg: var(--surface-2);

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);

    --bs-heading-color: var(--text);

    /* الأساسي = برتقالي الشعار (يغني عن كل overrides الـ !important القديمة) */
    --bs-primary: var(--accent);
    --bs-primary-rgb: 197, 90, 17;
    --bs-primary-text-emphasis: var(--accent-text);
    --bs-primary-bg-subtle: var(--accent-soft);
    --bs-primary-border-subtle: var(--accent-soft-brd);

    --bs-link-color: var(--accent-text);
    --bs-link-color-rgb: 138, 61, 12;
    --bs-link-hover-color: var(--accent-active);
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;

    --bs-success: var(--ok);
    --bs-success-text-emphasis: var(--ok-text);
    --bs-success-bg-subtle: var(--ok-soft);
    --bs-danger: var(--danger);
    --bs-danger-text-emphasis: var(--danger-text);
    --bs-danger-bg-subtle: var(--danger-soft);
    --bs-warning: var(--warn);
    --bs-warning-text-emphasis: var(--warn-text);
    --bs-warning-bg-subtle: var(--warn-soft);
    --bs-info: var(--info);
    --bs-info-text-emphasis: var(--info-text);
    --bs-info-bg-subtle: var(--info-soft);
    --bs-dark: var(--c-gray-800);
    --bs-light: var(--surface-2);

    --bs-box-shadow-sm: var(--sh-xs);
    --bs-box-shadow: var(--sh-sm);
    --bs-box-shadow-lg: var(--sh-lg);
}

/* ── 2. الأساسيات ────────────────────────────────────────────────────────── */

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--text);
    letter-spacing: -.01em;
}

h1, .h1 { font-size: var(--fs-2xl); }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-lg); }
h4, .h4 { font-size: var(--fs-md); }
h5, .h5, h6, .h6 { font-size: var(--fs-base); }

/* أرقام تُقرأ ككتلة واحدة: عرض ثابت لكل رقم فلا ترقص في الجداول */
table, .table, .kpi-value, .stats-card, input[type="number"],
.badge, td, th, time, .num {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: var(--num);
}

/* حلقة تركيز واحدة واضحة عبر النظام (وصولية) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

*:focus:not(:focus-visible) { outline: none; }

hr { border-color: var(--border); opacity: 1; }

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* ── 3. أشرطة التمرير ────────────────────────────────────────────────────── */

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-pill);
    border: 2px solid var(--bg);
}

*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ── 4. البطاقات ─────────────────────────────────────────────────────────── */

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-cap-bg: var(--surface);
    --bs-card-color: var(--text);
    --bs-card-spacer-x: var(--sp-5);
    --bs-card-spacer-y: var(--sp-5);
    border: 1px solid var(--border);
    box-shadow: var(--sh-xs);
    transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5);
    font-weight: 600;
    color: var(--text);
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; }

.card-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-5);
}

/* رؤوس البطاقات الملوّنة القائمة: تُخفَّف بدل الإلغاء (توافق رجعي) */
.card-header.bg-primary, .card-header.bg-dark,
.card-header.bg-success, .card-header.bg-danger,
.card-header.bg-warning, .card-header.bg-info { border-bottom-color: transparent; }

/* ── 5. الأزرار ──────────────────────────────────────────────────────────── */

.btn {
    --bs-btn-font-size: var(--fs-base);
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: .4375rem;
    --bs-btn-padding-x: .875rem;
    --bs-btn-border-radius: var(--r-sm);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--accent-ring);
    line-height: 1.45;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}

.btn-sm { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: var(--fs-sm); }
.btn-lg { --bs-btn-padding-y: .5625rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: var(--fs-md); --bs-btn-border-radius: var(--r-md); }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-on);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-hover-color: var(--accent-on);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-text);
    --bs-btn-border-color: var(--accent-soft-brd);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-on);
    --bs-btn-active-bg: var(--accent-active);
    --bs-btn-active-border-color: var(--accent-active);
}

/* الثانوي = زر محايد بحدود (النمط الأكثر استخداماً في واجهات الأعمال) */
.btn-secondary {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-color: var(--text-2);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text);
}

.btn-light {
    --bs-btn-bg: var(--surface-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-color: var(--text-2);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
}

.btn:disabled, .btn.disabled { opacity: .5; }

.btn-group > .btn:focus-visible { z-index: 2; }

/* ── 6. النماذج ──────────────────────────────────────────────────────────── */

.form-control, .form-select {
    --bs-border-radius: var(--r-sm);
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    font-size: var(--fs-base);
    padding: .4375rem .75rem;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.form-control::placeholder { color: var(--text-subtle); }

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    color: var(--text);
}

.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
    background-color: var(--surface-3);
    color: var(--text-muted);
}

.form-control-sm, .form-select-sm { padding: .25rem .5rem; font-size: var(--fs-sm); }

.form-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: var(--sp-1);
}

.form-text { color: var(--text-muted); font-size: var(--fs-xs); }

.input-group-text {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.form-check-input {
    border-color: var(--border-strong);
    background-color: var(--surface);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.form-check-label { color: var(--text-2); }

/* ── 7. الجداول ──────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: var(--accent-soft);
    --bs-table-hover-color: var(--text);
    font-size: var(--fs-base);
    margin-bottom: 0;
    vertical-align: middle;
}

.table > thead > tr > th {
    background: var(--surface-3);
    color: var(--text-2);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .01em;
    white-space: nowrap;
    padding: var(--sp-3) var(--sp-3);
    border-bottom: 1px solid var(--border-strong);
}

.table > tbody > tr > td {
    padding: var(--sp-3);
    border-bottom-color: var(--border-subtle);
    color: var(--text-2);
}

.table > tbody > tr:last-child > td { border-bottom-color: transparent; }

.table-hover > tbody > tr { transition: background-color var(--t-fast) var(--ease); }

/* ── رأس الجدول الداكن (.table-dark) ──────────────────────────────────────
   33 موضعاً في 18 قالباً يستخدم <thead class="table-dark">. Bootstrap يضبط
   عبره --bs-table-color:#fff بينما قاعدة الرأس أعلاه تجعل الخلفية فاتحة
   → نص أبيض على خلفية فاتحة (العطب الذي ظهر في التنبيهات الموحّدة).
   الحل مركزياً: رأس داكن حقيقي بلون الشعار الكحلي، ومقروء في الوضعين.     */

.table > thead.table-dark > tr > th,
.table.table-dark > thead > tr > th {
    background: var(--c-gray-800);
    color: #fff;
    border-bottom-color: var(--c-gray-700);
}

/* في الوضع الداكن يصبح الكحلي أقرب للسطح فيضيع التمييز — يُرفع بدرجة */
:root[data-theme="dark"] .table > thead.table-dark > tr > th,
:root[data-theme="dark"] .table.table-dark > thead > tr > th {
    background: var(--surface-3);
    color: var(--text);
    border-bottom-color: var(--border-strong);
}

/* جدول داكن بالكامل (سجلّات التدقيق) — يتبع الأسطح بدل ألوان Bootstrap */
.table.table-dark {
    --bs-table-bg: var(--c-gray-900);
    --bs-table-color: #fff;
    --bs-table-border-color: var(--c-gray-700);
    --bs-table-striped-bg: var(--c-gray-800);
    --bs-table-striped-color: #fff;
    --bs-table-hover-bg: var(--c-gray-700);
    --bs-table-hover-color: #fff;
}

.table.table-dark > tbody > tr > td {
    color: rgba(255, 255, 255, .88);
    border-bottom-color: var(--c-gray-700);
}

/* صفوف الجداول الملوّنة (.table-danger / .table-warning …): تبقى خلفيتها
   من Bootstrap، لكن يُفرض نص داكن مقروء فوقها في الوضعين. */
.table > tbody > tr.table-danger > td,
.table > tbody > tr.table-warning > td,
.table > tbody > tr.table-success > td,
.table > tbody > tr.table-info > td {
    color: #1e222c;
}

/* رأس ثابت عند التمرير — أضف .table-sticky على الجدول داخل حاوية بارتفاع محدود */
.table-sticky > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: inset 0 -1px 0 var(--border-strong);
}

/* الجدول داخل بطاقة: بلا حواف مزدوجة */
.card > .table-responsive > .table,
.card > .table { border-radius: 0; }

.table-responsive { border-radius: var(--r-md); }

/* ── 8. الشارات ──────────────────────────────────────────────────────────── */

.badge {
    font-weight: 500;
    font-size: var(--fs-xs);
    padding: .3em .6em;
    border-radius: var(--r-xs);
    letter-spacing: 0;
}

/* شارات ناعمة — أهدأ من الألوان الصريحة وأسهل قراءة في الجداول */
.badge.bg-success { background: var(--ok-soft) !important; color: var(--ok-text) !important; box-shadow: inset 0 0 0 1px var(--ok-soft); }
.badge.bg-danger  { background: var(--danger-soft) !important; color: var(--danger-text) !important; }
.badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn-text) !important; }
.badge.bg-info    { background: var(--info-soft) !important; color: var(--info-text) !important; }
.badge.bg-primary { background: var(--accent-soft) !important; color: var(--accent-text) !important; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-muted) !important; }

/* ── 9. التنبيهات ────────────────────────────────────────────────────────── */

.alert {
    border-radius: var(--r-md);
    border-width: 1px;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-base);
}

.alert-success { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-text); }
.alert-danger  { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
.alert-warning { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-text); }
.alert-info    { background: var(--info-soft); border-color: var(--info); color: var(--info-text); }

/* ── 10. النوافذ المنبثقة ────────────────────────────────────────────────── */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-pop);
    color: var(--text);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5);
}

.modal-title { font-size: var(--fs-lg); font-weight: 600; }

.modal-body { padding: var(--sp-5); }

.modal-footer {
    border-top: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-2);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.modal-backdrop.show { opacity: .5; }

.btn-close:focus-visible { box-shadow: none; outline: 2px solid var(--accent); }

/* ── 11. القوائم المنسدلة ────────────────────────────────────────────────── */

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--r-md);
    --bs-dropdown-link-color: var(--text-2);
    --bs-dropdown-link-hover-bg: var(--surface-3);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--accent-soft);
    --bs-dropdown-link-active-color: var(--accent-text);
    --bs-dropdown-font-size: var(--fs-base);
    box-shadow: var(--sh-lg);
    padding: var(--sp-1);
}

.dropdown-item { border-radius: var(--r-xs); padding: .4rem .625rem; }

.dropdown-divider { border-color: var(--border); }

/* ── 12. التبويبات ───────────────────────────────────────────────────────── */

.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-link-font-size: var(--fs-base);
    border-bottom: 1px solid var(--border);
    gap: var(--sp-1);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: -1px;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border-strong); }

.nav-tabs .nav-link.active {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
    background: transparent;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--r-sm);
    --bs-nav-pills-link-active-bg: var(--accent);
    --bs-nav-pills-link-active-color: var(--accent-on);
}

/* ── 13. الترقيم ─────────────────────────────────────────────────────────── */

.pagination {
    --bs-pagination-color: var(--text-2);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--surface-3);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-hover-border-color: var(--border-strong);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-active-color: var(--accent-on);
    --bs-pagination-disabled-bg: var(--surface-2);
    --bs-pagination-disabled-color: var(--text-subtle);
    --bs-pagination-border-radius: var(--r-sm);
    --bs-pagination-font-size: var(--fs-sm);
}

/* ── 14. متفرقات ─────────────────────────────────────────────────────────── */

.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-color: var(--text-2);
    --bs-list-group-action-hover-bg: var(--surface-2);
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-border-color: var(--accent);
    --bs-list-group-border-radius: var(--r-md);
}

.progress {
    --bs-progress-bg: var(--surface-3);
    --bs-progress-border-radius: var(--r-pill);
    --bs-progress-bar-bg: var(--accent);
    height: 8px;
}

.tooltip-inner {
    background: var(--c-gray-900);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    padding: .375rem .625rem;
}

.text-muted { color: var(--text-muted) !important; }

.border { border-color: var(--border) !important; }

.spinner-border { border-width: .18em; }

.accordion {
    --bs-accordion-bg: var(--surface);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-active-bg: var(--accent-soft);
    --bs-accordion-active-color: var(--accent-text);
    --bs-accordion-border-radius: var(--r-md);
}

/* ── 15. الطباعة — إلغاء كل ما هو زخرفي ──────────────────────────────────── */

@media print {
    .card, .modal-content { box-shadow: none !important; border-color: #999 !important; }
    .table > thead > tr > th { background: #f2f2f2 !important; color: #000 !important; }
    .badge { border: 1px solid #999 !important; color: #000 !important; background: transparent !important; }
}