/* ============================================================
   نظام التصميم — لوحة إدارة الحجوزات
   مستوحى من قالب «Fox Admin»: شريط علوي أزرق يمتد بعرض الشاشة،
   قائمة جانبية كحلية داكنة، ومحتوى فاتح ببطاقات بيضاء مستديرة.
   ملاحظة: أسماء الأصناف (classes) هي نفسها القديمة بالكامل حتى لا
   تتأثر أي وظيفة أو علامة موجودة في الصفحات — التغيير مظهري فقط.
   ============================================================ */
:root {
    --transition-speed: 0.25s;
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Outfit', sans-serif;
    --sidebar-width: 268px;
    --header-height: 76px;
}

/* ---------- المظهر الفاتح (الافتراضي) ---------- */
[data-theme="light"] {
    --bg-primary: #eef2f8;      /* خلفية منطقة المحتوى */
    --bg-secondary: #ffffff;    /* البطاقات */
    --bg-tertiary: #f5f8fc;     /* رؤوس الجداول والمناطق الخافتة */
    --text-primary: #16233f;
    --text-secondary: #6b7a99;
    --border-color: #e6ecf5;

    /* الأزرق الأساسي: مُعمَّق ليبلغ 4.6:1 مع الكتابة البيضاء (WCAG AA)
       بينما يبقى --accent-bright للاستعمال الزخرفي (تدرّجات وأيقونات). */
    --accent-color: #0b7ac0;
    --accent-hover: #095f96;
    --accent-light: #33b5ff;
    --accent-bright: #009efb;
    --accent-soft: #e8f4fd;

    /* الشريط العلوي والقائمة الجانبية */
    --header-from: #0b7ac0;
    --header-to: #23a6ea;
    --sidebar-bg: #16233f;
    --sidebar-bg-2: #1b2b4d;
    --sidebar-text: #aebbd4;
    --sidebar-label: #6f80a4;

    --success-color: #12b886;
    --success-soft: #e6f8f1;
    --success-text: #0d7a5c;
    --danger-color: #e0524a;
    --danger-soft: #fdeeed;
    --danger-text: #b3352c;
    --warning-color: #d98216;
    --warning-soft: #fdf3e4;
    --warning-text: #96590a;

    --card-shadow: 0 1px 2px rgba(22, 35, 63, 0.04), 0 10px 28px rgba(22, 35, 63, 0.06);
    --card-shadow-hover: 0 2px 6px rgba(22, 35, 63, 0.06), 0 18px 40px rgba(22, 35, 63, 0.10);
    --glass-bg: #ffffff;
    --glass-border: #e6ecf5;
    --radius-card: 16px;
    --radius-pill: 999px;
}

/* ---------- المظهر الداكن ---------- */
[data-theme="dark"] {
    --bg-primary: #0b0f19;
    --bg-secondary: #131a2a;
    --bg-tertiary: #1b2438;
    --text-primary: #eef2f8;
    --text-secondary: #93a1bd;
    --border-color: rgba(255, 255, 255, 0.08);

    --accent-color: #1a90e0;
    --accent-hover: #0b7ac0;
    --accent-light: #4cc2ff;
    --accent-bright: #33b5ff;
    --accent-soft: rgba(51, 181, 255, 0.14);

    --header-from: #0a2a48;
    --header-to: #0f4a78;
    --sidebar-bg: #0d1424;
    --sidebar-bg-2: #111a2e;
    --sidebar-text: #98a7c4;
    --sidebar-label: #5f6f92;

    --success-color: #2ad19b;
    --success-soft: rgba(42, 209, 155, 0.14);
    --success-text: #4fe0b3;
    --danger-color: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.14);
    --danger-text: #ff8a80;
    --warning-color: #f0a02c;
    --warning-soft: rgba(240, 160, 44, 0.14);
    --warning-text: #ffc46b;

    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 16px 38px -6px rgba(0, 0, 0, 0.45);
    --glass-bg: #131a2a;
    --glass-border: rgba(255, 255, 255, 0.06);
    --radius-card: 16px;
    --radius-pill: 999px;
}

/* ============================================================
   الأساسيات
   ============================================================ */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

html[dir="rtl"] { font-family: var(--font-ar); }
html[dir="ltr"] { font-family: var(--font-en); }

a { text-decoration: none; color: inherit; }

/* ============================================================
   هيكل الصفحة: شريط علوي بعرض الشاشة، ثم (قائمة جانبية + محتوى)
   ============================================================ */
.app-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   الشريط العلوي الأزرق
   ============================================================ */
.top-header {
    height: var(--header-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0;
    color: #fff;
    z-index: 200;
    box-shadow: 0 4px 18px rgba(11, 122, 192, 0.25);
}

/* التدرّج يبدأ من الجهة التي يجلس عليها النص (الأغمق) ليبقى مقروءاً */
html[dir="rtl"] .top-header { background: linear-gradient(to left, var(--header-from), var(--header-to)); }
html[dir="ltr"] .top-header { background: linear-gradient(to right, var(--header-from), var(--header-to)); }

/* كتلة الشعار — بعرض القائمة الجانبية تماماً كما في التصميم */
.header-brand {
    width: var(--sidebar-width);
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    background: rgba(0, 0, 0, 0.16);
}

.header-brand .logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.header-brand .logo-text h4 {
    font-weight: 800;
    font-size: 1.02rem;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.header-brand .logo-text span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-inline-start: 26px;
    min-width: 0;
}

/* تحية المستخدم واسم القسم داخل الشريط الأزرق */
.header-greeting { line-height: 1.25; min-width: 0; }

.header-greeting small {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.header-greeting strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box {
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 320px;
    transition: background-color 0.2s, border-color 0.2s;
}

.search-box:focus-within {
    background-color: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}

.search-box i { color: rgba(255, 255, 255, 0.85); }

.search-box input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    width: 100%;
    font-size: 0.85rem;
}

.search-box input::placeholder { color: rgba(255, 255, 255, 0.75); }

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
    padding-inline-end: 26px;
}

.header-action-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.header-action-btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--header-from);
}

.notification-indicator {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ff5a52;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.divider {
    width: 1px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.28);
}

/* بطاقة المستخدم في الشريط العلوي */
.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    padding: 5px 14px 5px 6px;
    font-size: 0.85rem;
    color: #fff;
}

html[dir="rtl"] .user-menu { padding: 5px 6px 5px 14px; }

.user-menu .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--header-from) !important;
}

.sidebar-toggle-btn {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
}

/* ============================================================
   القائمة الجانبية الكحلية
   ============================================================ */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    height: 100%;
    background: linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg));
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-speed) ease;
}

/* رأس القائمة يظهر على الشاشات الصغيرة فقط (الشعار موجود بالشريط العلوي) */
.sidebar-header {
    display: none;
    height: 64px;
    padding: 0 18px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-header .logo-container { display: flex; align-items: center; gap: 10px; }

.sidebar-header .logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.sidebar-header .logo-text h4 { font-size: 0.95rem; font-weight: 800; color: #fff; margin: 0; }
.sidebar-header .logo-text span { font-size: 0.7rem; color: var(--sidebar-text); }

.sidebar-close-btn {
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 1.25rem;
    cursor: pointer;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }

.nav-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sidebar-label);
    padding: 18px 14px 7px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-weight: 600;
    font-size: 0.87rem;
    gap: 12px;
    position: relative;
    transition: all 0.18s ease;
}

.nav-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: var(--sidebar-label);
    transition: color 0.18s ease;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav-item:hover i { color: var(--accent-light); }

.nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-bright));
    box-shadow: 0 8px 18px rgba(11, 122, 192, 0.45);
}

.nav-item.active i { color: #fff; }

/* المؤشر الصغير على حافة العنصر النشط */
.nav-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: var(--accent-light);
}

html[dir="rtl"] .nav-item.active::before { border-radius: 4px 0 0 4px; }

/* الشارات داخل القائمة */
.sidebar-nav .badge { font-size: 0.68rem; font-weight: 700; }

.sidebar-footer {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent-color)) !important;
    color: #fff;
    border: none;
    flex-shrink: 0;
}

.user-info h6 {
    font-size: 0.84rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.user-info span {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-light);
    background-color: rgba(51, 181, 255, 0.14);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    margin-top: 3px;
}

.logout-btn {
    width: 100%;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff9a93;
    background-color: rgba(224, 82, 74, 0.16);
    border: 1px solid rgba(224, 82, 74, 0.25);
    transition: all 0.2s ease;
    cursor: pointer;
}

.logout-btn:hover {
    color: #fff;
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.sidebar-footer form { width: 100%; }

/* ============================================================
   منطقة المحتوى
   ============================================================ */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.content-body {
    flex: 1;
    padding: 26px 30px 40px;
    overflow-y: auto;
    background-color: var(--bg-primary);
    transition: background-color var(--transition-speed);
}

/* عنوان الصفحة داخل كل تبويب — شريط أزرق رفيع على الحافة */
.tab-content-panel > .d-flex:first-child > div:first-child {
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--accent-bright);
}

.content-body h3 { font-size: 1.35rem; }

/* ============================================================
   بطاقات المؤشرات (KPI) — بطاقات ملوّنة بتدرّج كما في التصميم
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 20px;
    margin-bottom: 26px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-card);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0b7ac0, #23a6ea);
    box-shadow: 0 10px 26px rgba(11, 122, 192, 0.28);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* دائرة زخرفية باهتة في زاوية البطاقة */
.stat-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -32px;
    top: -38px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(22, 35, 63, 0.22);
}

.stats-grid .stat-card:nth-child(4n+2) {
    background: linear-gradient(135deg, #0f9b78, #23c69c);
    box-shadow: 0 10px 26px rgba(15, 155, 120, 0.28);
}

.stats-grid .stat-card:nth-child(4n+3) {
    background: linear-gradient(135deg, #d2761a, #f5a623);
    box-shadow: 0 10px 26px rgba(210, 118, 26, 0.28);
}

.stats-grid .stat-card:nth-child(4n+4) {
    background: linear-gradient(135deg, #c2413c, #ef6b63);
    box-shadow: 0 10px 26px rgba(194, 65, 60, 0.28);
}

.stat-info { position: relative; z-index: 1; min-width: 0; }

.stat-info h5 {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 6px;
}

.stat-info h2 {
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0;
    color: #fff !important;
}

/* الأسطر الصغيرة داخل البطاقة تستخدم فئات bootstrap الملوّنة — نُبيّضها */
.stat-card .text-success,
.stat-card .text-warning,
.stat-card .text-danger,
.stat-card .text-secondary,
.stat-card small {
    color: rgba(255, 255, 255, 0.88) !important;
}

.stat-icon {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff !important;
}

/* ============================================================
   البطاقات البيضاء
   ============================================================ */
.glass-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    box-shadow: var(--card-shadow);
    margin-bottom: 22px;
    transition: box-shadow 0.2s;
}

.glass-card:hover { box-shadow: var(--card-shadow-hover); }

.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.card-title-m {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 9px;
}

/* نقطة زرقاء صغيرة قبل عنوان البطاقة */
.card-title-m::before {
    content: "";
    width: 8px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent-color));
    flex-shrink: 0;
}

/* ============================================================
   الجداول
   ============================================================ */
.custom-table-container {
    overflow-x: auto;
    border-radius: 12px;
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: start;
}

.custom-table th {
    padding: 13px 16px;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.custom-table th:first-child { border-start-start-radius: 10px; }
.custom-table th:last-child { border-start-end-radius: 10px; }

.custom-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.88rem;
    color: var(--text-primary);
    vertical-align: middle;
}

.custom-table tbody tr { transition: background-color 0.15s; }
.custom-table tbody tr:hover { background-color: var(--accent-soft); }
.custom-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   الشارات
   ============================================================ */
.badge-custom {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.73rem;
    font-weight: 700;
    display: inline-block;
    line-height: 1.5;
}

.badge-custom.success { background-color: var(--success-soft); color: var(--success-text); }
.badge-custom.warning { background-color: var(--warning-soft); color: var(--warning-text); }
.badge-custom.danger  { background-color: var(--danger-soft);  color: var(--danger-text); }
.badge-custom.info    { background-color: var(--accent-soft);  color: var(--accent-hover); }

/* ============================================================
   الأزرار
   ============================================================ */
.btn-action-sm {
    width: 33px;
    height: 33px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
}

.btn-action-sm:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: #fff;
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-bright));
    border: none;
    color: #fff !important;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.86rem;
    box-shadow: 0 8px 18px rgba(11, 122, 192, 0.3);
    transition: all 0.2s;
    cursor: pointer;
}

.btn-primary-custom:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(11, 122, 192, 0.38);
}

.btn-outline-custom {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.86rem;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-outline-custom:hover {
    border-color: var(--accent-color);
    color: #fff;
    background-color: var(--accent-color);
}

/* ============================================================
   التبويبات
   ============================================================ */
.tab-content-panel { display: none; }

.tab-content-panel.active {
    display: block;
    animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   الاستجابة للشاشات الصغيرة
   ============================================================ */
@media (max-width: 991.98px) {
    :root { --header-height: 64px; }

    .header-brand { width: auto; background: none; padding: 0 16px; }
    .header-brand .logo-text { display: none; }
    .header-left { padding-inline-start: 10px; gap: 10px; }
    .header-greeting { display: none; }
    .header-right { padding-inline-end: 14px; gap: 8px; }

    .sidebar-header { display: flex; }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        transition: left var(--transition-speed);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }

    html[dir="rtl"] .sidebar {
        left: auto;
        right: -100%;
        transition: right var(--transition-speed);
    }

    .sidebar.open { left: 0; }
    html[dir="rtl"] .sidebar.open { right: 0; }

    .content-body { padding: 18px 16px 32px; }
}

/* ============================================================
   النماذج
   ============================================================ */
.form-group-custom { margin-bottom: 18px; }

.form-group-custom label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
    display: block;
}

.form-control-custom {
    width: 100%;
    padding: 11px 15px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    color: var(--text-primary);
    outline: none;
    font-size: 0.88rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

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

.form-control-custom:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(11, 122, 192, 0.14);
}

/* ============================================================
   مواءمة عناصر Bootstrap مع هوية اللوحة
   ============================================================ */
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6 {
    color: var(--text-primary);
    font-weight: 800;
}

.content-body .text-secondary { color: var(--text-secondary) !important; }
.content-body .text-success { color: var(--success-text) !important; }
.content-body .text-warning { color: var(--warning-text) !important; }
.content-body .text-danger { color: var(--danger-text) !important; }

/* حقول وشارات كُتبت أصلاً لمظهر داكن داخل صفحة المحتوى */
.content-body .form-control.bg-secondary,
.content-body .form-control.text-white,
.content-body .form-select.bg-secondary {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.content-body .badge.bg-secondary.text-white {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

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

.btn-success {
    --bs-btn-bg: var(--success-color);
    --bs-btn-border-color: var(--success-color);
    --bs-btn-hover-bg: var(--success-text);
    --bs-btn-hover-border-color: var(--success-text);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-pill);
}

.btn-primary {
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    border-radius: var(--radius-pill);
}

.btn-danger {
    --bs-btn-bg: var(--danger-color);
    --bs-btn-border-color: var(--danger-color);
    --bs-btn-hover-bg: var(--danger-text);
    --bs-btn-hover-border-color: var(--danger-text);
}

.btn-danger, .btn-outline-danger, .btn-outline-secondary, .btn-sm, .btn {
    border-radius: var(--radius-pill);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-primary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-bg: var(--accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--accent-color);
}

.badge.bg-secondary { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; }
.badge.bg-success   { background-color: var(--success-soft) !important; color: var(--success-text) !important; }
.badge.bg-info      { background-color: var(--accent-soft) !important; color: var(--accent-hover) !important; }
.badge.bg-warning   { background-color: var(--warning-soft) !important; color: var(--warning-text) !important; }
.badge.bg-primary   { background-color: var(--accent-soft) !important; color: var(--accent-hover) !important; }

/* شارات القائمة الجانبية تبقى صريحة اللون فوق الخلفية الكحلية */
.sidebar-nav .badge.bg-warning { background-color: #f5a623 !important; color: #16233f !important; }
.sidebar-nav .badge.bg-danger  { background-color: #ef4444 !important; color: #fff !important; }

.content-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--accent-soft);
    --bs-table-hover-color: var(--text-primary);
}

.content-body .alert-secondary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.content-body .list-group-item {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.content-body .list-group-item.active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color);
    color: #fff !important;
    border-radius: 10px;
}

.content-body .form-control,
.content-body .form-select {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    color: var(--text-primary);
    padding: 10px 15px;
}

.content-body .form-control:focus,
.content-body .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(11, 122, 192, 0.14);
}

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

.form-check-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(11, 122, 192, 0.14);
}

.content-body .nav-tabs {
    border-bottom-color: var(--border-color);
}

.content-body .nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 700;
    border-radius: 0;
}

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

.content-body .progress { background-color: var(--bg-tertiary); border-radius: var(--radius-pill); }
.content-body .progress-bar { background-color: var(--accent-color); }

/* ============================================================
   النوافذ المنبثقة (Modals)
   ============================================================ */

/* ----- تصحيح RTL لزر الإغلاق -----
   نستخدم ملف Bootstrap الأصلي (LTR) مع صفحة dir="rtl". قاعدة Bootstrap هي
   `margin: ... auto` أي margin-left:auto — وهو هامش *فيزيائي* لا ينعكس مع
   اتجاه الصفحة، فكان الزر يُدفع لليمين ويلتصق بالعنوان. نعكسه يدوياً. */
.modal-header .btn-close {
    margin-left: -0.5rem;
    margin-right: auto;
}

/* ----- إصلاح التمرير العمودي -----
   بنية نوافذنا: .modal-content > .modal-header + <form> > .modal-body
   أي أن عنصر <form> هو ابن الـ flex وليس .modal-body. قواعد Bootstrap
   لـ modal-dialog-scrollable تقيّد .modal-body وحده، فيبقى الـ form بارتفاعه
   الطبيعي ويُقصّ بـ overflow:hidden — فيختفي باقي الحقول بلا شريط تمرير. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.38); }

/* ----- مظهر النوافذ -----
   العلامات مكتوبة بفئات Bootstrap الداكنة (bg-dark / text-white / table-dark)
   وهي فئات تحمل !important، لذا نتجاوزها هنا بمتغيرات اللوحة نفسها. */
.modal-content,
.modal-content.bg-dark {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.modal-content .text-white { color: var(--text-primary) !important; }

.modal-content .modal-header,
.modal-content .modal-footer,
.modal-content .border-secondary,
.modal-content hr {
    border-color: var(--border-color) !important;
}

.modal-content hr { opacity: 1; }

/* رأس النافذة بلون الهوية كما في التصميم */
.modal-content .modal-header {
    background: linear-gradient(135deg, var(--header-from), var(--header-to));
    border-bottom: none !important;
}

.modal-content .modal-header .modal-title,
.modal-content .modal-header .text-white,
.modal-content .modal-header i { color: #fff !important; }

.modal-content .modal-title,
.modal-content label,
.modal-content h5,
.modal-content h6 {
    color: var(--text-primary);
    font-weight: 700;
}

.modal-content .text-secondary { color: var(--text-secondary) !important; }

.modal-content .form-control-custom,
.modal-content .form-control-custom.bg-secondary,
.modal-content .form-control,
.modal-content .form-control.bg-secondary,
.modal-content select.form-control-custom option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-content .form-control-custom:focus,
.modal-content .form-control:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(11, 122, 192, 0.14);
}

.modal-content .form-control-custom::placeholder,
.modal-content .form-control::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

.modal-content .table,
.modal-content .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-tertiary);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--accent-soft);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
}

/* زر الإغلاق فوق الرأس الأزرق يجب أن يكون أبيض */
.modal-content .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}
.modal-content .modal-header .btn-close:hover { opacity: 1; }

.modal-content .btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
}
.modal-content .btn-outline-secondary:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.modal-content .btn-action-sm { color: var(--text-secondary); }
.modal-content .btn-action-sm:hover { color: #fff; }
.modal-content .btn-action-sm.text-danger { color: var(--danger-color) !important; }
.modal-content .btn-action-sm.text-danger:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff !important;
}

.modal-content .alert-secondary {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-content .media-slot {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.modal-content .media-slot:hover { border-color: var(--accent-color); }

.empty-lookup-hint {
    font-size: 0.78rem;
    color: var(--warning-text);
    margin-top: 6px;
    display: block;
}

/* ============================================================
   شاشة تسجيل الدخول
   ============================================================ */
.auth-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--header-from), var(--header-to));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-card {
    width: 450px;
    max-width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 24px 60px rgba(11, 40, 80, 0.35);
    text-align: center;
}

/* ============================================================
   أشرطة التمرير
   ============================================================ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #c9d5e6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--accent-color); }

/* ============================================================
   محادثات الدعم
   ============================================================ */
.chat-container {
    height: 380px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    background-color: var(--bg-tertiary);
    margin-bottom: 15px;
}

.chat-bubble {
    max-width: 75%;
    padding: 11px 15px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.chat-bubble.sent {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-bright));
    color: #fff;
    margin-inline-start: auto;
    border-bottom-right-radius: 3px;
}

.chat-bubble.received {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    margin-inline-end: auto;
    border-bottom-left-radius: 3px;
}

/* ============================================================
   تقويم الحجوزات
   ============================================================ */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 15px;
}

.calendar-day-header {
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 8px 0;
}

.calendar-day-cell {
    aspect-ratio: 1.2;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.calendar-day-cell:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(11, 122, 192, 0.15);
}

.calendar-day-num { font-weight: 700; font-size: 0.84rem; }

.calendar-event {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 5px;
    margin-top: 4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event.morning { background-color: #d2761a; }
.calendar-event.evening { background-color: var(--accent-color); }
.calendar-event.fullday { background-color: #0f9b78; }
.calendar-event.blocked { background-color: var(--danger-color); }

/* ============================================================
   المفاتيح (Switches)
   ============================================================ */
.switch-custom {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch-custom input { opacity: 0; width: 0; height: 0; }

.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: .3s;
    border-radius: 24px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: .3s;
    border-radius: 50%;
}

html[dir="rtl"] .switch-slider:before { left: auto; right: 3px; }

input:checked + .switch-slider {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

input:checked + .switch-slider:before {
    transform: translateX(20px);
    background-color: #fff;
}

html[dir="rtl"] input:checked + .switch-slider:before { transform: translateX(-20px); }

/* ============================================================
   مصفوفة الصلاحيات
   ============================================================ */
.rbac-matrix-table td { text-align: center; }

.rbac-matrix-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
    cursor: pointer;
}

/* ============================================================
   تقويم توفّر الاستراحة
   ============================================================ */
.availability-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.availability-cell {
    width: 38px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #fff;
    cursor: default;
}

.availability-cell b { font-size: .82rem; }
.availability-cell i { font-size: .6rem; opacity: .75; font-style: normal; }

.availability-cell.is-free { background: #0f9b78; }
.availability-cell.is-partial { background: #d2761a; }
.availability-cell.is-full { background: #c2413c; }

/* ============================================================
   ترقيم الجداول (Pagination)
   ============================================================
   شريط موحَّد لكل جداول اللوحة: أرقام صفحات وسهما تنقّل ونصّ يبيّن المعروض
   من الإجمالي. يُبنى في JS (راجع applyTablePagination في site.js) فلا يحتاج
   أي جدول إلى ترميز إضافي غير السمة data-paginate. */
.table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.table-pager:empty { display: none; }

.table-pager-info {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.table-pager-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    /* الأرقام تُقرأ من اليسار لليمين حتى في الواجهة العربية، كعادة الترقيم. */
    direction: ltr;
    margin-inline-start: auto;
}

.table-pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.table-pager-btn:hover:not(:disabled):not(.active) {
    background: var(--accent-soft);
    border-color: var(--accent-color);
}

.table-pager-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.table-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-pager-dots {
    color: var(--text-secondary);
    padding: 0 2px;
}

/* الصف المستبعَد بالبحث: الترقيم يتجاهله، ولا يظهر بأي حال. */
tr.row-filtered-out { display: none !important; }