/* =========================================================
   نظام إدارة الموارد البشرية — نظام تصميم احترافي (Corporate Dark Sidebar)
   ========================================================= */

:root {
    --sidebar-bg: #0f1b2d;
    --sidebar-bg-alt: #16283f;
    --sidebar-text: #b7c3d6;
    --sidebar-text-active: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-light: #eaf1ff;

    --success: #0d9488;
    --success-light: #e6f7f5;
    --warning: #f59e0b;
    --warning-light: #fef6e7;
    --danger: #e11d48;
    --danger-light: #fdecef;
    --info: #0891b2;
    --info-light: #e6f7fb;

    --bg-page: #f3f5f9;
    --bg-card: #ffffff;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e9f0;

    --radius: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 8px rgba(16, 24, 40, 0.06);
    --shadow-pop: 0 10px 30px rgba(16, 24, 40, 0.12);

    --sidebar-width: 270px;
    --topbar-height: 72px;
    --ticker-height: 52px;
    --ticker-height-sm: 74px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Cairo', 'Tahoma', 'Segoe UI', sans-serif;
    background: var(--bg-page);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* =========================================================
   هيكل الصفحة: شريط جانبي ثابت + منطقة محتوى
   ========================================================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* --- الشريط الجانبي --- */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-alt) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1030;
    overflow: hidden;
    transition: margin-right .25s ease, width .25s ease, opacity .2s ease;
}

/* طي الشريط الجانبي بالشاشات الكبيرة عبر زر الخطوط الثلاثة بالأعلى - الحالة تُحفظ محلياً فتبقى بعد تصفح صفحة جديدة */
@media (min-width: 992px) {
    body.sidebar-desktop-collapsed .sidebar {
        width: 0;
        min-width: 0;
        opacity: 0;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-close-btn {
    display: none;
    margin-inline-start: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .06);
    color: var(--sidebar-text);
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sidebar-close-btn:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.sidebar-brand .icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.sidebar-brand .title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    line-height: 1.3;
}

.sidebar-brand .subtitle {
    font-size: .72rem;
    color: var(--sidebar-text);
    opacity: .7;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem .75rem;
}

.sidebar-section-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sidebar-text);
    opacity: .55;
    padding: .75rem .75rem .35rem;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .68rem .9rem;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: .92rem;
    font-weight: 500;
    margin-bottom: .2rem;
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav .nav-link i {
    width: 20px;
    text-align: center;
    font-size: .95rem;
    opacity: .9;
}

.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* Platform UX/Navigation Refactor - أيقونة صغيرة تُشير أن هذا الرابط يفتح تبويباً جديداً (تطبيق مستقل) */
.sidebar-nav .nav-link-external {
    margin-inline-start: auto;
    width: auto !important;
    font-size: .68rem !important;
    opacity: .45;
}

.sidebar-foot {
    padding: 1rem 1.25rem calc(1.25rem + var(--ticker-height));
    border-top: 1px solid var(--sidebar-border);
    font-size: .78rem;
    color: var(--sidebar-text);
    opacity: .6;
}

/* --- منطقة المحتوى --- */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar .page-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.topbar .page-title i {
    color: var(--accent);
}

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

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.btn-back-home:hover {
    background: var(--accent);
    color: #fff;
}

.sidebar-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-main);
    cursor: pointer;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem .4rem .9rem;
    border-radius: 999px;
    background: var(--bg-page);
    cursor: pointer;
    border: none;
}

.user-menu .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.user-menu .avatar.avatar-photo { overflow: hidden; background: var(--bg-page); }
.user-menu .avatar.avatar-photo img { width: 100%; height: 100%; object-fit: cover; }

.user-menu .name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-main);
}

.topbar-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    color: var(--text-main);
    font-size: 1.05rem;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.topbar-icon-btn:hover {
    background: var(--accent-light);
    color: var(--accent);
}

.topbar-icon-btn-danger:hover {
    background: var(--danger-light);
    color: var(--danger);
}

.topbar-icon-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--bg-card);
}

.apps-launcher-menu {
    min-width: 220px;
    padding: .5rem;
}

.apps-launcher-menu .dropdown-item {
    border-radius: var(--radius-sm);
    padding: .55rem .75rem;
    font-size: .86rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.apps-launcher-menu .dropdown-item:hover {
    background: var(--accent-light);
}

.nav-link-logout {
    color: #fca5a5 !important;
}

.nav-link-logout:hover {
    background: rgba(225, 29, 72, .18) !important;
    color: #fff !important;
}

.nav-link-back {
    color: var(--sidebar-text) !important;
    opacity: .8;
    margin-bottom: .75rem;
    padding-bottom: .85rem !important;
    border-bottom: 1px solid var(--sidebar-border);
    border-radius: 0 !important;
}

.nav-link-back:hover {
    opacity: 1;
    background: transparent !important;
}

.page-content {
    padding: 1.75rem;
    padding-bottom: calc(1.75rem + var(--ticker-height));
    flex: 1;
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 1.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: .8rem;
    color: var(--text-muted);
}

.app-footer-message {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.app-footer-message i { color: var(--danger); }

.app-footer-updated {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-footer-refresh {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-page);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.app-footer-refresh:hover {
    background: var(--accent-light);
    color: var(--accent);
}

@media (max-width: 767.98px) {
    .app-footer { justify-content: center; text-align: center; padding: .9rem 1.1rem; }
}

/* =========================================================
   البطاقات
   ========================================================= */

.card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    background: var(--bg-card);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    padding: 1.1rem 1.4rem;
    border-top-right-radius: var(--radius) !important;
    border-top-left-radius: var(--radius) !important;
}

.card-body {
    padding: 1.4rem;
}

/* بطاقات إحصائية ملونة بأسلوب أهدأ (بدل الألوان الصريحة الكاملة) */
.stat-card {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: .35rem;
}

.stat-card .stat-label {
    font-size: .85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.stat-card.stat-accent .stat-icon { background: var(--accent-light); color: var(--accent); }
.stat-card.stat-success .stat-icon { background: var(--success-light); color: var(--success); }
.stat-card.stat-warning .stat-icon { background: var(--warning-light); color: var(--warning); }
.stat-card.stat-info .stat-icon { background: var(--info-light); color: var(--info); }
.stat-card.stat-danger .stat-icon { background: var(--danger-light); color: var(--danger); }
.stat-card.stat-purple .stat-icon { background: #f2ecfd; color: #7c3aed; }

/* =========================================================
   الشريط الحيوي السفلي الثابت (الساعة/التاريخ يمين الشاشة، الطقس يسارها، وشريط أخبار متحرك بالمنتصف)
   ========================================================= */

.live-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--ticker-height);
    z-index: 1040;
    background: linear-gradient(90deg, var(--sidebar-bg) 0%, var(--sidebar-bg-alt) 100%);
    color: #fff;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .25);
}

.ticker-datetime, .ticker-weather {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.35rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.ticker-datetime {
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.ticker-weather {
    border-right: 1px solid rgba(255, 255, 255, .12);
    order: 3;
}

.ticker-datetime > i, .ticker-weather > i {
    font-size: 1.25rem;
    color: #93c5fd;
    flex-shrink: 0;
}

.ticker-datetime-text, .ticker-weather-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ticker-clock, .ticker-weather-temp {
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
}

.ticker-date, .ticker-weather-place {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .62);
}

.analog-clock {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.analog-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 2px solid #93c5fd;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.analog-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    border-radius: 2px;
}

.analog-hand.hour-hand {
    width: 3px;
    height: 8px;
    margin-left: -1.5px;
    background: #fff;
}

.analog-hand.minute-hand {
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background: #93c5fd;
}

.analog-hand.second-hand {
    width: 1px;
    height: 13px;
    margin-left: -.5px;
    background: #f59e0b;
}

.analog-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.ticker-news {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    order: 2;
}

.ticker-news-label {
    flex-shrink: 0;
    background: var(--accent);
    padding: 0 1.1rem;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.ticker-news-track-wrap {
    overflow: hidden;
    flex: 1;
    position: relative;
    height: 100%;
}

.ticker-news-track {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3.5rem;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
}

.ticker-news-track:hover {
    animation-play-state: paused;
}

.ticker-news-item {
    font-size: .9rem;
    opacity: .95;
}

/* النسب هنا محسوبة بالنسبة لعرض الحاوية (ticker-news-track-wrap) وليس عرض الشريط نفسه
   حتى يقطع الخبر الشاشة كاملة دائماً بغض النظر عن طول النص - يمنع ظهور نفس الخبر مكرراً بنفس اللحظة */
@keyframes tickerScroll {
    from { right: 100%; }
    to { right: -100%; }
}

/* =========================================================
   الحقول والنماذج — أحجام أكبر وأكثر راحة
   ========================================================= */

label.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--text-main);
    margin-bottom: .4rem;
}

.form-control,
.form-select {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: .68rem 1rem;
    font-size: .95rem;
    min-height: 48px;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control {
    min-height: 100px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.form-select {
    background-position: left 1rem center;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: .15em;
}

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

.input-group .form-control {
    min-height: 48px;
}

/* =========================================================
   الأزرار
   ========================================================= */

.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    padding: .62rem 1.3rem;
    font-size: .92rem;
    white-space: nowrap;
}

.btn-add {
    white-space: nowrap;
}

.btn-lg {
    padding: .8rem 1.6rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn-success { background: var(--success); border-color: var(--success); }
.btn-success:hover { background: #0b7c72; border-color: #0b7c72; }

.btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background: #06748c; border-color: #06748c; color: #fff; }

.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover { color: #fff; opacity: .92; }

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

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-secondary {
    border-radius: 999px;
    font-weight: 600;
    padding: .55rem 1.25rem;
}

/* =========================================================
   أزرار الإجراءات الدائرية: معاينة / تعديل / حذف / إضافة
   ========================================================= */

.icon-actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    font-size: .9rem;
    background: transparent;
    cursor: pointer;
    transition: all .15s ease;
}

.icon-btn-view {
    color: var(--info);
    background: var(--info-light);
}
.icon-btn-view:hover { background: var(--info); color: #fff; }

.icon-btn-edit {
    color: var(--warning);
    background: var(--warning-light);
}
.icon-btn-edit:hover { background: var(--warning); color: #fff; }

.icon-btn-delete {
    color: var(--danger);
    background: var(--danger-light);
}
.icon-btn-delete:hover { background: var(--danger); color: #fff; }

.icon-btn-download {
    color: var(--success);
    background: var(--success-light);
}
.icon-btn-download:hover { background: var(--success); color: #fff; }

.icon-btn-key {
    color: var(--accent);
    background: var(--accent-light);
}
.icon-btn-key:hover { background: var(--accent); color: #fff; }

/* شارات حالة دائرية (pill) - مُوحَّدة هنا بدل تكرار تعريفها بكل صفحة على حدة */
.pill-badge {
    display: inline-flex;
    align-items: center;
    font-size: .74rem;
    font-weight: 700;
    padding: .35em .85em;
    border-radius: 999px;
    white-space: nowrap;
}
.pill-badge-accent { background: var(--accent-light); color: var(--accent); }
.pill-badge-success { background: var(--success-light); color: var(--success); }
.pill-badge-warning { background: var(--warning-light); color: var(--warning); }
.pill-badge-danger { background: var(--danger-light); color: var(--danger); }
.pill-badge-info { background: var(--info-light); color: var(--info); }
.pill-badge-purple { background: #f2ecfd; color: #7c3aed; }
.pill-badge-secondary { background: #eef1f5; color: #475569; }

/* خلية "موظف بصورة" (صورة دائرية أو الأحرف الأولى كبديل) - مُوحَّدة لإعادة استخدامها بأي جدول موظفين */
.emp-name-cell { display: flex; align-items: center; gap: .6rem; }
.emp-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); color: #fff; font-weight: 700; font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.emp-avatar.avatar-photo { overflow: hidden; background: var(--bg-page); }
.emp-avatar.avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.emp-avatar-lg { width: 54px; height: 54px; font-size: 1.3rem; }

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: .6rem 1.35rem;
    font-weight: 700;
    font-size: .9rem;
    border: none;
}
.btn-add:hover { background: var(--accent-dark); color: #fff; }

/* =========================================================
   الجداول
   ========================================================= */

.table {
    --bs-table-bg: transparent;
}

.table thead th {
    background: var(--bg-page);
    color: var(--text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border-bottom: none;
    padding: .85rem 1rem;
}

.table tbody td {
    padding: .85rem 1rem;
    vertical-align: middle;
    font-size: .9rem;
    border-bottom: 1px solid var(--border-color);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(37, 99, 235, 0.02);
}

/* ---- Shared table layout (all modules) ----
   Root cause of overlapping headers/rows: several list pages gave `thead th` `position: sticky; top: var(--topbar-height)`,
   but those tables always sit inside `.table-responsive` (overflow-x: auto), which becomes the sticky scroll container.
   The header cells were therefore pushed down by the topbar height and painted over the first data rows. A sticky header
   cannot work inside a horizontally scrolling wrapper, so it is neutralised here for every table instead of per page. */
.table-responsive,
.dataTables_wrapper .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
.table-responsive thead th,
.dataTables_wrapper thead th,
table.dataTable thead th {
    position: static !important;
    top: auto !important;
}
.table thead th {
    white-space: nowrap;
    vertical-align: middle;
}
.table > :not(caption) > * > * {
    vertical-align: middle;
}
/* action columns: buttons stay on one line inside their own cell */
.table td:has(> .icon-actions),
.table td:has(> .btn-group),
.table td.actions-cell {
    white-space: nowrap;
    width: 1%;
}
.icon-actions { flex-wrap: nowrap; }
/* wide data tables get a contained horizontal scroll instead of squeezing/overlapping columns */
.table-responsive > .table,
.dataTables_wrapper > .table-responsive > .table { min-width: 100%; }
/* DataTables toolbar (length / search / info / paging) */
.dataTables_wrapper .row { row-gap: .5rem; align-items: center; margin-left: 0; margin-right: 0; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: .5rem; }
.dataTables_wrapper .dataTables_filter input { margin-inline-start: .5rem; max-width: 100%; }
.dataTables_wrapper .dataTables_paginate { margin-top: .5rem; }
.dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; gap: .25rem; }
/* long values wrap inside their own cell instead of pushing neighbours */
.table td { overflow-wrap: break-word; }
/* never let forms/cards/toolbars force page-level horizontal scroll */
.card, .card-body { min-width: 0; }
.form-control, .form-select { max-width: 100%; }
.invalid-feedback, .form-text { display: block; margin-top: .25rem; }
.modal-body { overflow-wrap: break-word; }
@media (max-width: 767.98px) {
    .table thead th { white-space: nowrap; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { text-align: start; width: 100%; }
    .dataTables_wrapper .dataTables_filter input { width: calc(100% - 4rem); }
}

/* =========================================================
   القوائم المنسدلة (Dropdown menus)
   ========================================================= */

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
    padding: .5rem;
    min-width: 220px;
}

.dropdown-item {
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.dropdown-divider {
    margin: .4rem 0;
}

/* شارات الحالة */
.badge {
    font-weight: 600;
    padding: .45em .8em;
    border-radius: 999px;
    font-size: .74rem;
}

/* تنبيهات */
.alert {
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* =========================================================
   استجابة للشاشات الصغيرة
   ========================================================= */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        margin-right: calc(-1 * var(--sidebar-width));
        box-shadow: var(--shadow-pop);
        max-width: 82vw;
    }
    .sidebar.sidebar-open {
        margin-right: 0;
    }
    .sidebar-close-btn {
        display: inline-flex;
    }
    .page-content {
        padding: 1.1rem;
        padding-bottom: calc(1.1rem + var(--ticker-height));
    }
    .topbar {
        padding: 0 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .topbar {
        padding: 0 .85rem;
        height: 64px;
    }
    /* إصلاح تجاوز أفقي حقيقي (منصّة-واسع، ليس خاصاً بتطبيق واحد - راجع تدقيق استجابة تطبيق الأقساط 2026-08-19):
       مجموعتا الأيقونات (يمين/يسار الشريط العلوي) يتجاوز عرضهما الطبيعي مجتمعَين عرض الشاشة عند 375px تقريباً،
       فتُدفَع أيقونات المجموعة الثانية جزئياً خارج حافة العرض. زر ملء الشاشة أقل فائدة أصلاً على متصفح جوال
       (كثير منها لا يدعم Fullscreen API بشكل موثوق) - إخفاؤه هنا وتضييق الفراغات يُغلق الفجوة دون حذف أي وظيفة حقيقية.
       متابعة 2026-08-19 (تدقيق المرحلة 2ب): القياس الدقيق (getBoundingClientRect على شجرة .topbar كاملة) كشف
       أن التضييق أعلاه أغلق أغلب الفجوة لكن ترك تجاوزاً متبقياً ~10.5px (مجموعة الأيقونات اليمنى - الجرس وقائمة
       المستخدم - أعرض فعلياً من المساحة المتبقية بعد عنوان الصفحة بمقدار ~24px) - التضييق الإضافي هنا (حشوة
       user-menu، قطر أزرار topbar-icon-btn، وmax-width العنوان مجدداً) يُغلقه بهامش أمان لا بالحد الأدنى بالضبط */
    #fullscreenToggle {
        display: none;
    }
    .topbar > div {
        gap: .5rem !important;
    }
    .topbar .page-title span {
        max-width: 18vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar .topbar-icon-btn {
        width: 36px;
        height: 36px;
    }
    .topbar .user-menu {
        padding: .35rem .4rem .35rem .6rem;
        gap: .4rem;
    }
    /* عطل منفصل حقيقي عُثر عليه أثناء التحقق من إغلاق فجوة .topbar أعلاه (لا علاقة له بها) - منصّة-واسع أيضاً
       (راجع installments_collections.php وCRM وCatering وExpenses، كلها تستخدم .btn-group لتبديل فلتر/عرض
       بزرَّين): .btn-group من Bootstrap لا يلتفّ داخلياً افتراضياً - بزرَّين بنص عربي متوسط الطول يتجاوز عرضهما
       375px بمفردهما حتى لو التفّ الحاوي الأب (flex-wrap) حوله ككتلة واحدة. الحل: تكديس رأسي بعرض كامل بدل صفّ
       أفقي متصل عند هذا العرض الضيّق تحديداً - يفقد الشكل "الحبّة المتصلة" لكن يبقى مستخدَماً وواضحاً بالكامل */
    .btn-group {
        flex-wrap: wrap;
        width: 100%;
    }
    .btn-group > .btn {
        flex: 1 1 100%;
        border-radius: .5rem !important;
        margin: 0 !important;
    }
    .btn-group > .btn:not(:last-child) {
        margin-bottom: .35rem !important;
    }
    .page-content {
        padding: .85rem;
        padding-bottom: calc(.85rem + var(--ticker-height-sm));
    }
    .card-header {
        padding: .9rem 1.1rem;
        font-size: .95rem;
    }
    .card-body {
        padding: 1.1rem;
    }
    .stat-card {
        padding: 1rem 1.1rem;
    }
    .stat-card .stat-value {
        font-size: 1.5rem;
    }
    .stat-card .stat-icon {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
    }
    /* على الجوال: صفين بدل صف واحد - صف علوي للساعة والطقس، وصف كامل العرض مخصص للأخبار حتى ما تنخنق */
    .live-ticker {
        height: auto;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .ticker-datetime, .ticker-weather {
        order: 1;
        flex: 1 1 50%;
        height: 36px;
        padding: 0 .8rem;
        font-size: .78rem;
        gap: .5rem;
        justify-content: center;
    }
    .ticker-weather {
        order: 2;
    }
    .ticker-date {
        display: none;
    }
    .ticker-news {
        order: 3;
        flex: 1 1 100%;
        height: 36px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .ticker-news-label {
        padding: 0 .7rem;
        font-size: .78rem;
    }
    .ticker-news-item {
        font-size: .78rem;
    }
    .sidebar-foot {
        padding-bottom: calc(1.25rem + var(--ticker-height-sm));
    }
    .btn {
        padding: .58rem 1.05rem;
        font-size: .88rem;
    }
    .user-menu .name {
        display: none;
    }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 27, 45, .45);
    z-index: 1025;
}
.sidebar-backdrop.show { display: block; }

/* =========================================================
   صفوف أزرار التنقل بين الإجراءات (تلتف على الشاشات الصغيرة بدل التمدد أفقياً)
   ========================================================= */

.nav-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* منع تمدد الجداول خارج حدود الشاشة على الجوال */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .table thead th,
    .table tbody td {
        padding: .6rem .7rem;
        font-size: .82rem;
    }
}

/* Commercial Readiness Sprint (2026-08-08) - Global Double-Submit Protection: مؤشر تحميل موحّد لكل أزرار
   الإرسال بالمنصّة، يُضاف تلقائياً بواسطة assets/js/form_guard.js بلا أي CSS إضافي بأي صفحة */
.form-guard-spinner {
    display: inline-block;
    width: .85em;
    height: .85em;
    border: .15em solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: form-guard-spin .7s linear infinite;
    vertical-align: -.15em;
}
@keyframes form-guard-spin { to { transform: rotate(360deg); } }
button.is-submitting, input[type="submit"].is-submitting {
    opacity: .75;
    cursor: wait;
}

/* Commercial Readiness Sprint (2026-08-08) - Empty State component: بديل موحَّد للنص الرمادي الفردي المُتناثر
   بكل صفحات قوائم التطبيقات - أيقونة + عنوان + وصف + زر إجراء أول + مساعدة اختيارية، يُطبَع عبر render_empty_state() */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon {
    width: 64px; height: 64px; border-radius: 50%; background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1.1rem;
}
.empty-state-title { font-weight: 800; font-size: 1.05rem; margin-bottom: .4rem; }
.empty-state-desc { color: var(--text-muted); font-size: .88rem; max-width: 40ch; margin: 0 auto 1.1rem; }
.empty-state-help { color: var(--text-muted); font-size: .78rem; margin-top: .9rem; }

/* =========================================================
   اللغات من اليسار لليمين (الإنجليزية): عكس القواعد الفيزيائية أعلاه
   ========================================================= */
html[dir="ltr"] .sidebar {
    transition: margin-left .25s ease, width .25s ease, opacity .2s ease;
}
html[dir="ltr"] .topbar-icon-badge {
    left: auto;
    right: -2px;
}
html[dir="ltr"] .ticker-datetime {
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, .12);
}
html[dir="ltr"] .ticker-weather {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 991.98px) {
    html[dir="ltr"] .sidebar {
        right: auto;
        left: 0;
        margin-right: 0;
        margin-left: calc(-1 * var(--sidebar-width));
    }
    html[dir="ltr"] .sidebar.sidebar-open {
        margin-left: 0;
    }
}