/* ══════════════════════════════════════════════════════
   النظام الشامل - التصميم المؤسسي
   The Comprehensive — Enterprise Design System
   ══════════════════════════════════════════════════════ */

/* === المتغيرات === */
:root {
    --brand-900: #0a1628;
    --brand-800: #0f2140;
    --brand-700: #142d57;
    --brand-600: #1a3a6e;
    --brand-500: #1e4d8c;
    --brand-400: #2a6cb5;
    --brand-300: #4a90d9;
    --brand-200: #8bb8ea;
    --brand-100: #d0e2f7;
    --brand-50: #eef4fb;

    --accent-gold: #c9a227;
    --accent-gold-light: #e6c955;
    --accent-teal: #0d9488;
    --accent-teal-light: #14b8a6;

    --success: #059669;
    --success-light: #d1fae5;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --info: #0284c7;
    --info-light: #e0f2fe;

    --surface: #ffffff;
    --surface-secondary: #f8fafc;
    --surface-tertiary: #f1f5f9;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --sidebar-width: 700px;
    --header-height: 64px;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.125rem;
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 6px rgba(15,23,42,0.05), 0 2px 4px rgba(15,23,42,0.03);
    --shadow-lg: 0 10px 15px rgba(15,23,42,0.06), 0 4px 6px rgba(15,23,42,0.03);
    --shadow-xl: 0 20px 25px rgba(15,23,42,0.08), 0 8px 10px rgba(15,23,42,0.04);
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* === القاعدة الأساسية === */
html {
    font-size: 14px;
    min-height: 100%;
    scroll-behavior: smooth;
}
@media (min-width: 768px) {
    html { font-size: 15px; }
}

body {
    font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--surface-tertiary);
    color: var(--text-primary);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* LTR font override */
html[dir="ltr"] body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* === الشريط الجانبي === */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-800) 50%, var(--brand-700) 100%);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: width var(--transition), padding var(--transition);
    overflow: hidden;
    border-left: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
}
.sidebar.collapsed {
    width: 0;
    padding: 0 !important;
    border: none;
}

.sidebar-header {
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.sidebar-header .sidebar-logo {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-light));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.90rem;
    color: var(--brand-900);
    flex-shrink: 0;
    font-weight: 700;
}
.sidebar-header h5 {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.sidebar .nav {
    padding: 0.75rem 0.75rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar .nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar .nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar .nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}
.sidebar .nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}
.sidebar .nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.35);
    padding: 1.25rem 0.75rem 0.4rem;
    margin: 0;
}
.sidebar .nav-link {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-md);
    margin-bottom: 2px;
    transition: all var(--transition);
    color: rgba(255,255,255,0.7);
    font-size: 0.88rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
}
.sidebar .nav-link i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    opacity: 0.85;
}
.sidebar .nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.sidebar .nav-link:hover i {
    opacity: 1;
}
.sidebar .nav-link.active {
    background: rgba(201,162,39,0.15);
    color: var(--accent-gold-light);
    font-weight: 600;
}
.sidebar .nav-link.active i {
    color: var(--accent-gold-light);
    opacity: 1;
}
.sidebar .nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0.5rem 0.75rem;
}

/* === الشريط العلوي === */
.top-header {
    height: var(--header-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 90;
    box-shadow: var(--shadow-xs);
}
.top-header .header-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
}
.top-header .header-toggle:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}
.top-header .header-search {
    flex: 1;
    max-width: 480px;
    margin: 0 1.5rem;
}
.top-header .header-search .form-control {
    border-radius: var(--radius-lg);
    background: var(--surface-tertiary);
    border: 1px solid var(--border-light);
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    font-size: 0.88rem;
    transition: all var(--transition);
}
.top-header .header-search .form-control:focus {
    background: var(--surface);
    border-color: var(--brand-300);
    box-shadow: 0 0 0 3px rgba(42,108,181,0.1);
}
.top-header .header-search .search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.top-header .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
}
.top-header .header-actions .notification-btn {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: all var(--transition);
}
.top-header .header-actions .notification-btn:hover {
    background: var(--surface-tertiary);
    color: var(--brand-500);
}
.top-header .user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--border);
    margin-right: 0.5rem;
}
.top-header .user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}
.top-header .user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* === عنوان الصفحة === */
.page-header {
    margin-bottom: 1.75rem;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-header h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-header h2 i {
    color: var(--brand-500);
}
.page-header-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* === البطاقات الإحصائية (Dashboard) === */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.stat-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: transparent;
    color: inherit;
    text-decoration: none;
}
.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stat-card .stat-content { flex: 1; }
.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
}
.stat-card .stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* ألوان البطاقات */
.stat-card.stat-primary::before { background: var(--brand-500); }
.stat-card.stat-primary .stat-icon { background: var(--brand-50); color: var(--brand-500); }

.stat-card.stat-info::before { background: var(--info); }
.stat-card.stat-info .stat-icon { background: var(--info-light); color: var(--info); }

.stat-card.stat-success::before { background: var(--success); }
.stat-card.stat-success .stat-icon { background: var(--success-light); color: var(--success); }

.stat-card.stat-warning::before { background: var(--warning); }
.stat-card.stat-warning .stat-icon { background: var(--warning-light); color: var(--warning); }

.stat-card.stat-danger::before { background: var(--danger); }
.stat-card.stat-danger .stat-icon { background: var(--danger-light); color: var(--danger); }

.stat-card.stat-teal::before { background: var(--accent-teal); }
.stat-card.stat-teal .stat-icon { background: #ccfbf1; color: var(--accent-teal); }

.stat-card.stat-gold::before { background: var(--accent-gold); }
.stat-card.stat-gold .stat-icon { background: #fef9e7; color: var(--accent-gold); }

.stat-card.stat-dark::before { background: var(--brand-800); }
.stat-card.stat-dark .stat-icon { background: var(--surface-tertiary); color: var(--brand-800); }

/* === البطاقات العامة === */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.panel-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.panel-header h5 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.panel-header h5 i {
    color: var(--brand-400);
    font-size: 1.1rem;
}
.panel-body {
    padding: 1.5rem;
}

/* الحاويات القديمة (backward compatible) */
.table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.form-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: 1.75rem;
}

/* === الجداول === */
.table {
    margin: 0;
    font-size: 0.88rem;
}
.table thead th {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    border-bottom: 2px solid var(--border);
    padding: 0.85rem 1.15rem;
    white-space: nowrap;
}
.table tbody td {
    padding: 0.8rem 1.15rem;
    vertical-align: middle;
    border-color: var(--border-light);
    color: var(--text-primary);
}
.table tbody tr {
    transition: background var(--transition);
}
.table-hover tbody tr:hover {
    background: var(--brand-50);
}
.table tbody tr:last-child td {
    border-bottom: none;
}

/* === النماذج === */
.form-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

.form-control, .form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: all var(--transition);
    background-color: var(--surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(42,108,181,0.12);
    background-color: var(--surface);
}
.form-control::placeholder {
    color: var(--text-muted);
}

.form-section-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--brand-700);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    margin-top: 1.75rem;
    border-bottom: 2px solid var(--brand-100);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-section-title i {
    color: var(--brand-400);
}

/* === الأزرار === */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.5rem 1.15rem;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-primary {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.btn-primary:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
    box-shadow: var(--shadow-md);
}
.btn-secondary {
    background: var(--surface-tertiary);
    border-color: var(--border);
    color: var(--text-secondary);
}
.btn-secondary:hover {
    background: var(--border);
    border-color: var(--border);
    color: var(--text-primary);
}
.btn-outline-primary {
    border-color: var(--brand-200);
    color: var(--brand-500);
}
.btn-outline-primary:hover {
    background: var(--brand-50);
    border-color: var(--brand-400);
    color: var(--brand-600);
}
.btn-outline-warning {
    border-color: #fde68a;
    color: var(--warning);
}
.btn-outline-warning:hover {
    background: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning);
}
.btn-outline-danger {
    border-color: #fecaca;
    color: var(--danger);
}
.btn-outline-danger:hover {
    background: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger);
}

.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 3px rgba(42,108,181,0.15);
}

/* أزرار الإجراءات في الجداول */
.action-btns {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.action-btns .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
}

/* === الشارات === */
.badge-status {
    padding: 0.3em 0.7em;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
}
.badge-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-dot.dot-success::before { background: var(--success); }
.badge-dot.dot-danger::before { background: var(--danger); }
.badge-dot.dot-warning::before { background: var(--warning); }
.badge-dot.dot-secondary::before { background: var(--text-muted); }

/* === التنبيهات === */
.alert {
    border-radius: var(--radius-lg);
    border: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.85rem 1.15rem;
}
.alert-success {
    background: var(--success-light);
    color: #065f46;
    border-right: 4px solid var(--success);
}
.alert-danger {
    background: var(--danger-light);
    color: #991b1b;
    border-right: 4px solid var(--danger);
}
.alert-warning {
    background: var(--warning-light);
    color: #92400e;
    border-right: 4px solid var(--warning);
}

/* === صفحة تسجيل الدخول === */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
    position: relative;
}
.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.login-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}
.login-card h2 {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.35rem;
}
.login-card .login-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-400));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: #fff;
}

/* === صفحة عدم الصلاحية === */
.access-denied-container {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === نتائج البحث === */
.search-result-item {
    border-right: 3px solid var(--brand-400);
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    background: var(--surface);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    transition: all var(--transition);
    border: 1px solid var(--border);
    border-right: 3px solid var(--brand-400);
}
.search-result-item:hover {
    background: var(--brand-50);
    box-shadow: var(--shadow-sm);
}

/* === حالة فارغة === */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}
.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.empty-state h4 {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 1.1rem;
}
.empty-state p {
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* === بطاقات التفاصيل (DL) === */
.detail-list dt {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.6rem 0;
}
.detail-list dd {
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}
.detail-list .row:last-child dd {
    border-bottom: none;
}

/* === مرشحات === */
.filter-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* === المحتوى الرئيسي === */
.main-content {
    padding: 1.75rem 2rem;
    min-height: calc(100vh - var(--header-height));
}
@media (max-width: 991.98px) {
    .main-content {
        padding: 1.25rem;
    }
}

/* === حقل البحث بحقول التحقق === */
.validation-summary-valid {
    display: none;
}
.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.field-validation-error {
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

/* مؤشر الحقول المطلوبة — نجمة حمراء بجانب العنوان */
.form-label:has(+ .form-control[data-val-required])::after,
.form-label:has(+ .form-select[data-val-required])::after {
    content: " *";
    color: var(--danger);
    font-weight: 700;
}

/* تمييز الحقل غير الصالح */
.form-control.input-validation-error,
.form-select.input-validation-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);
}

/* === الرسوم البيانية === */
.chart-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}
.chart-panel .chart-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}
.chart-panel .chart-header h5 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
}
.chart-panel .chart-body {
    padding: 1.5rem;
}

/* === الإشعارات === */
.notification-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.65rem;
    transition: all var(--transition);
    background: var(--surface);
}
.notification-item.unread {
    background: var(--brand-50);
    border-right: 3px solid var(--brand-400);
}
.notification-item:hover {
    box-shadow: var(--shadow-sm);
}

/* === المتجاوب — الأجهزة اللوحية (768px-991px) === */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1050;
        height: 100vh;
        height: 100dvh;
        box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    }
    .sidebar.collapsed {
        width: 0;
        box-shadow: none;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.45);
        z-index: 1040;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.show {
        display: block;
    }

    .top-header {
        padding: 0 1rem;
    }
    .top-header .header-search {
        margin: 0 0.75rem;
    }
}

/* === المتجاوب — الهواتف (أقل من 768px) === */
@media (max-width: 767.98px) {
    :root {
        --header-height: 56px;
    }

    /* الشريط الجانبي */
    .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1050;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    }
    .sidebar.collapsed {
        width: 0;
        box-shadow: none;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.45);
        z-index: 1040;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.show {
        display: block;
    }

    /* الشريط العلوي */
    .top-header {
        padding: 0 0.75rem;
        gap: 0.35rem;
    }
    .top-header .header-search {
        display: none;
        position: absolute;
        top: var(--header-height);
        right: 0;
        left: 0;
        margin: 0;
        max-width: none;
        padding: 0.65rem 0.75rem;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        z-index: 80;
    }
    .top-header .header-search.mobile-show {
        display: block;
    }
    .mobile-search-toggle {
        display: flex !important;
    }
    .top-header .user-info {
        padding-right: 0.5rem;
        margin-right: 0.35rem;
    }
    .top-header .user-name {
        display: none !important;
    }

    /* المحتوى */
    .main-content {
        padding: 1rem 0.75rem;
    }

    /* عناوين الصفحة */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    .page-header h2 {
        font-size: 1.2rem;
    }
    .page-header .btn {
        width: 100%;
        justify-content: center;
    }

    /* بطاقات الإحصائيات */
    .stat-card {
        padding: 1.15rem;
    }
    .stat-card .stat-value {
        font-size: 1.35rem;
    }
    .stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* الجداول — تمرير أفقي */
    .table-container {
        border-radius: var(--radius-lg);
    }
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive-wrapper::-webkit-scrollbar {
        height: 4px;
    }
    .table-responsive-wrapper::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 2px;
    }
    .table {
        min-width: 700px;
    }

    /* النماذج */
    .form-container {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }
    .filter-bar {
        padding: 1rem;
        border-radius: var(--radius-lg);
    }
    .form-section-title {
        font-size: 0.88rem;
        margin-top: 1.25rem;
    }

    /* البانلات */
    .panel {
        border-radius: var(--radius-lg);
    }
    .panel-header {
        padding: 1rem 1.15rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .panel-body {
        padding: 1.15rem;
    }

    /* التفاصيل */
    .detail-list dt {
        padding: 0.45rem 0 0.1rem;
    }
    .detail-list dd {
        padding: 0.1rem 0 0.45rem;
    }

    /* أزرار الإجراءات — أكبر للمس */
    .action-btns .btn {
        width: 36px;
        height: 36px;
        font-size: 0.88rem;
    }

    /* الرسوم البيانية */
    .chart-panel .chart-body {
        padding: 1rem;
    }

    /* تسجيل الدخول */
    .login-card {
        margin: 1rem;
        padding: 1.75rem;
        border-radius: var(--radius-lg);
    }

    /* الحالة الفارغة */
    .empty-state {
        padding: 2rem 0.75rem;
    }
    .empty-state-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }
}

/* === الهواتف الصغيرة (أقل من 576px) === */
@media (max-width: 575.98px) {
    html {
        font-size: 13px;
    }
    .main-content {
        padding: 0.75rem 0.5rem;
    }
    .stat-card {
        padding: 1rem;
    }
    .stat-card .stat-value {
        font-size: 1.2rem;
    }
    .stat-card .stat-label {
        font-size: 0.75rem;
    }
    .form-container {
        padding: 1rem;
    }
    .page-header h2 {
        font-size: 1.1rem;
    }

    /* تخطيط البطاقات الإحصائية: عمودين */
    .stat-card .stat-content {
        min-width: 0;
    }
}

/* === زر البحث على الهاتف (مخفي على الشاشات الكبيرة) === */
.mobile-search-toggle {
    display: none !important;
}

/* === الشريط الخلفي مخفي بشكل افتراضي على الشاشات الكبيرة === */
@media (min-width: 992px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

/* === طباعة === */
@media print {
    .sidebar, .top-header, .btn { display: none !important; }
    .main-content { padding: 0; }
    body { background: #fff; }
}

/* ══════════════════════════════════════════════════════
   بوابة الخدمة الذاتية للموظف (ESS)
   Employee Self-Service Portal Styles
   ══════════════════════════════════════════════════════ */

/* === شريط الترحيب === */
.ess-welcome {
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 60%, var(--brand-400) 100%);
    border-radius: var(--radius-xl);
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.ess-welcome::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -10%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.ess-welcome::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -5%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}
.ess-welcome-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.ess-greeting {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
    margin: 0 0 0.15rem;
}
.ess-name {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.ess-role {
    font-size: 0.9rem;
    margin: 0.35rem 0 0;
    opacity: 0.75;
}
.ess-welcome-badge {
    position: relative;
    z-index: 1;
}
.ess-welcome-badge .badge-dot {
    padding: 0.45em 1em;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 2rem;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* شريط التنبيه السريع */
.ess-alert-strip {
    margin-top: 1.25rem;
    padding: 0.7rem 1rem;
    background: rgba(220,38,38,0.15);
    border: 1px solid rgba(220,38,38,0.25);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
.ess-alert-strip i {
    color: #fca5a5;
    font-size: 1rem;
}

/* === البطاقات الإحصائية المصغرة === */
.ess-mini-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    transition: all var(--transition);
}
.ess-mini-stat:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.ess-mini-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.ess-mini-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ess-mini-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.ess-mini-value small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}
.ess-mini-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.1rem;
}

/* === لوحة التنبيهات === */
.ess-alerts-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.ess-alerts-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}
.ess-alerts-header h6 {
    margin: 0;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ess-alerts-header h6 i {
    color: var(--danger);
    font-size: 1rem;
}
.ess-alerts-body {
    padding: 0.5rem 1rem;
}
.ess-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    margin: 0.35rem 0;
    font-size: 0.85rem;
}
.ess-alert-item > i {
    font-size: 1.05rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}
.ess-alert-item div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.ess-alert-item strong {
    font-weight: 700;
    font-size: 0.85rem;
}
.ess-alert-item span {
    font-size: 0.8rem;
    opacity: 0.85;
}
.ess-alert-danger {
    background: var(--danger-light);
    border-right: 3px solid var(--danger);
}
.ess-alert-danger > i { color: var(--danger); }
.ess-alert-warning {
    background: var(--warning-light);
    border-right: 3px solid var(--warning);
}
.ess-alert-warning > i { color: var(--warning); }

/* === بطاقات الخدمات === */
.ess-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all var(--transition);
}
.ess-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--brand-200);
}
.ess-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.ess-card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.ess-card-header h5 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
}
.ess-card-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.1rem;
}
.ess-card-body {
    padding: 1.25rem 1.5rem;
    flex: 1;
}

/* صفوف المعلومات */
.ess-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-light);
    gap: 0.75rem;
}
.ess-info-row:last-of-type {
    border-bottom: none;
}
.ess-info-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.ess-info-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
}

/* شريط التقدم */
.ess-progress {
    width: 100%;
    height: 6px;
    background: var(--surface-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.ess-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

/* === بطاقة المكافأة === */
.ess-gratuity-hero {
    text-align: center;
    padding: 1.5rem 0.5rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef9e7 100%);
    border-radius: var(--radius-lg);
    border: 1px solid #fde68a;
}
.ess-gratuity-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.ess-gratuity-amount {
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--accent-gold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.ess-gratuity-currency {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.ess-gratuity-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--surface-tertiary);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.ess-gratuity-note i {
    color: var(--info);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* === حالة الميزة الفارغة (قريباً) === */
.ess-empty-feature {
    text-align: center;
    padding: 1.5rem 0.5rem;
}
.ess-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-tertiary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.ess-empty-feature h6 {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}
.ess-empty-feature p {
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 280px;
    margin: 0 auto 0.75rem;
    line-height: 1.6;
}

/* معاينة WPS */
.ess-wps-preview {
    text-align: right;
    margin-top: 1rem;
}
.ess-wps-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--surface-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.ess-wps-row strong {
    color: var(--text-primary);
}

/* === متجاوب ESS — الأجهزة اللوحية === */
@media (max-width: 991.98px) {
    .ess-welcome {
        padding: 1.5rem 1.5rem;
    }
    .ess-name {
        font-size: 1.35rem;
    }
    .ess-gratuity-amount {
        font-size: 1.85rem;
    }
}

/* === متجاوب ESS — الهواتف === */
@media (max-width: 767.98px) {
    .ess-welcome {
        padding: 1.25rem 1rem;
        border-radius: var(--radius-lg);
    }
    .ess-welcome-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .ess-name {
        font-size: 1.2rem;
    }
    .ess-role {
        font-size: 0.82rem;
    }
    .ess-welcome-badge {
        align-self: flex-start;
    }
    .ess-alert-strip {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
    }

    .ess-mini-stat {
        padding: 0.85rem;
    }
    .ess-mini-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .ess-mini-value {
        font-size: 0.92rem;
    }

    .ess-alert-item {
        padding: 0.7rem 0.75rem;
    }

    .ess-card-header {
        padding: 1rem 1.15rem;
    }
    .ess-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    .ess-card-body {
        padding: 1rem 1.15rem;
    }

    .ess-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .ess-info-value {
        text-align: right;
    }

    .ess-gratuity-hero {
        padding: 1.15rem 0.5rem;
    }
    .ess-gratuity-amount {
        font-size: 1.65rem;
    }

    .ess-empty-feature {
        padding: 1rem 0.25rem;
    }
    .ess-empty-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .ess-mini-stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.85rem 0.5rem;
    }
    .ess-mini-label {
        font-size: 0.65rem;
    }
    .ess-name {
        font-size: 1.1rem;
    }
}

/* === الرسوم المتحركة === */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-in {
    animation: fadeInUp 0.35s ease-out both;
}
.animate-in:nth-child(1) { animation-delay: 0ms; }
.animate-in:nth-child(2) { animation-delay: 50ms; }
.animate-in:nth-child(3) { animation-delay: 100ms; }
.animate-in:nth-child(4) { animation-delay: 150ms; }
.animate-in:nth-child(5) { animation-delay: 200ms; }
.animate-in:nth-child(6) { animation-delay: 250ms; }
.animate-in:nth-child(7) { animation-delay: 300ms; }
.animate-in:nth-child(8) { animation-delay: 350ms; }

/* ══════════════════════════════════════════════════════
   لوحة قيادة مدير الموارد البشرية (HR Manager)
   HR Manager Operational Dashboard Styles
   ══════════════════════════════════════════════════════ */

/* === شريط الترحيب === */
.hr-welcome {
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 50%, var(--accent-teal) 100%);
    border-radius: var(--radius-xl);
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.hr-welcome::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -15%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.hr-welcome-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.hr-welcome-text {
    flex: 1;
    min-width: 200px;
}
.hr-greeting {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin: 0 0 0.25rem;
}
.hr-name {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.hr-company {
    font-size: 0.88rem;
    margin: 0.3rem 0 0;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.hr-welcome-actions {
    display: flex;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}
.hr-action-btn {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-weight: 600;
}
.hr-action-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}
.hr-action-btn-outline {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    font-weight: 600;
}
.hr-action-btn-outline:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* شريط التنبيه */
.hr-alert-strip {
    margin-top: 1.25rem;
    padding: 0.7rem 1rem;
    background: rgba(220,38,38,0.15);
    border: 1px solid rgba(220,38,38,0.25);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
.hr-alert-strip i {
    color: #fca5a5;
    font-size: 1.1rem;
}

/* === بطاقات الامتثال === */
.hr-compliance-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
}
.hr-compliance-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.hr-compliance-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
}
.hr-compliance-danger { border-color: rgba(220,38,38,0.2); }
.hr-compliance-danger::after { background: var(--danger); }
.hr-compliance-ok::after { background: var(--success); }
.hr-compliance-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
}
.hr-compliance-danger .hr-compliance-icon {
    background: var(--danger-light);
    color: var(--danger);
}
.hr-compliance-ok .hr-compliance-icon {
    background: var(--success-light);
    color: var(--success);
}
.hr-compliance-value {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
}
.hr-compliance-danger .hr-compliance-value {
    color: var(--danger);
}
.hr-compliance-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.1rem;
}
.hr-compliance-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--danger);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: all var(--transition);
}
.hr-compliance-action:hover {
    color: var(--brand-500);
}

/* === توزيع القوى العاملة === */
.hr-workforce-item {
    margin-bottom: 0.85rem;
}
.hr-workforce-item:last-of-type {
    margin-bottom: 0;
}
.hr-workforce-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}
.hr-workforce-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.hr-workforce-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}
.hr-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}
.hr-status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.hr-status-item strong {
    color: var(--text-primary);
}

/* === قائمة التدقيق === */
.hr-audit-list {
    padding: 0.5rem 0;
}
.hr-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 1.25rem;
    transition: background var(--transition);
}
.hr-audit-item:hover {
    background: var(--surface-secondary);
}
.hr-audit-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.hr-audit-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.hr-audit-desc {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-audit-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* === الإجراءات السريعة === */
.hr-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.hr-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    transition: all var(--transition);
}
.hr-quick-btn:hover {
    background: var(--surface-tertiary);
    color: var(--brand-500);
    border-color: var(--brand-200);
    box-shadow: var(--shadow-sm);
}
.hr-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* === شريط الحدود التشغيلية === */
.hr-boundaries {
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.hr-boundaries-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--surface-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.hr-boundaries-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.hr-boundaries-text strong {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.hr-boundaries-text span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* === متجاوب HR Manager — الأجهزة اللوحية === */
@media (max-width: 991.98px) {
    .hr-welcome {
        padding: 1.5rem 1.5rem;
    }
    .hr-name {
        font-size: 1.3rem;
    }
    .hr-welcome-actions {
        flex-wrap: wrap;
    }
}

/* === متجاوب HR Manager — الهواتف === */
@media (max-width: 767.98px) {
    .hr-welcome {
        padding: 1.15rem 1rem;
        border-radius: var(--radius-lg);
    }
    .hr-welcome-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .hr-name {
        font-size: 1.15rem;
    }
    .hr-company {
        font-size: 0.82rem;
    }
    .hr-welcome-actions {
        align-self: stretch;
    }
    .hr-welcome-actions .btn {
        flex: 1;
        justify-content: center;
    }
    .hr-alert-strip {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
    }
    .hr-compliance-card {
        padding: 1rem;
    }
    .hr-compliance-value {
        font-size: 1.35rem;
    }
    .hr-compliance-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .hr-quick-actions {
        gap: 0.5rem;
    }
    .hr-quick-btn {
        padding: 0.75rem 0.35rem;
        font-size: 0.72rem;
    }
    .hr-quick-icon {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .hr-boundaries {
        padding: 0.85rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .hr-name {
        font-size: 1.05rem;
    }
    .hr-compliance-value {
        font-size: 1.15rem;
    }
}

/* ══════════════════════════════════════════════════════
   تتبع الإجراءات الإدارية (Procedure Tracking)
   Procedure Tracking Module Styles
   ══════════════════════════════════════════════════════ */

/* === رأس الإجراء === */
.proc-header-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-xs);
}
.proc-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem;
}
.proc-header-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.proc-header-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.proc-header-item strong {
    font-size: 0.92rem;
    color: var(--text-primary);
}

/* === مخطط مراحل سير العمل (Stepper) === */
.proc-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow-x: auto;
}
.proc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    flex: 1;
    min-width: 90px;
    max-width: 160px;
}
.proc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.proc-step-done:not(:last-child)::after {
    background: var(--success);
}
.proc-step-active:not(:last-child)::after {
    background: linear-gradient(to left, var(--border) 50%, var(--brand-400) 50%);
}
.proc-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    position: relative;
    z-index: 1;
    transition: all var(--transition);
}
.proc-step-pending .proc-step-circle {
    background: var(--surface-tertiary);
    border: 2px solid var(--border);
    color: var(--text-muted);
}
.proc-step-active .proc-step-circle {
    background: var(--brand-500);
    border: 2px solid var(--brand-400);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(30,77,140,0.15);
}
.proc-step-done .proc-step-circle {
    background: var(--success);
    border: 2px solid var(--success);
    color: #fff;
}
.proc-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}
.proc-step-active .proc-step-label {
    color: var(--brand-500);
    font-weight: 700;
}
.proc-step-done .proc-step-label {
    color: var(--success);
}

/* === أزرار الإجراءات === */
.proc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

/* === التبويبات === */
.proc-tabs {
    border-bottom: 2px solid var(--border);
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.proc-tabs .nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    border: none;
    padding: 0.75rem 1.15rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all var(--transition);
}
.proc-tabs .nav-link:hover {
    color: var(--brand-500);
    border-bottom-color: var(--brand-200);
}
.proc-tabs .nav-link.active {
    color: var(--brand-600);
    border-bottom-color: var(--brand-500);
    background: transparent;
}
.proc-tab-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    margin-bottom: 1.5rem;
}

/* === الجدول الزمني للمراحل === */
.proc-timeline {
    position: relative;
    padding-right: 2rem;
}
.proc-timeline::before {
    content: '';
    position: absolute;
    right: 0.55rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.proc-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
}
.proc-timeline-item:last-child {
    padding-bottom: 0;
}
.proc-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-400);
    border: 2px solid var(--surface);
    position: absolute;
    right: -2rem;
    top: 0.35rem;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--brand-100);
}
.proc-timeline-content {
    background: var(--surface-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}
.proc-timeline-action {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.proc-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.proc-timeline-meta i {
    margin-left: 0.2rem;
}
.proc-timeline-notes {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text-secondary);
    border-right: 3px solid var(--brand-200);
}

/* === SLA Stats === */
.proc-sla-stat {
    background: var(--surface-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.proc-sla-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.proc-sla-stat strong {
    font-size: 1.15rem;
    color: var(--text-primary);
}

/* === ملاحظة النموذج === */
.proc-info-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: var(--info-light);
    border: 1px solid #bae6fd;
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: #0c4a6e;
}
.proc-info-note > i {
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* === متجاوب Procedure — الهواتف === */
@media (max-width: 767.98px) {
    .proc-header-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
    }
    .proc-stepper {
        padding: 1rem 0.5rem;
        gap: 0;
    }
    .proc-step {
        min-width: 70px;
    }
    .proc-step-circle {
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
    }
    .proc-step:not(:last-child)::after {
        top: 14px;
    }
    .proc-step-label {
        font-size: 0.62rem;
    }
    .proc-actions {
        padding: 0.85rem 1rem;
    }
    .proc-tabs .nav-link {
        font-size: 0.78rem;
        padding: 0.6rem 0.85rem;
    }
    .proc-timeline {
        padding-right: 1.5rem;
    }
    .proc-timeline-dot {
        right: -1.5rem;
    }
    .proc-sla-stat {
        padding: 0.75rem;
    }
    .proc-sla-stat strong {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .proc-header-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }
    .proc-header-item strong {
        font-size: 0.82rem;
    }
}

/* ══════════════════════════════════════════════════════
   Language Switcher
   ══════════════════════════════════════════════════════ */
.lang-switch-btn {
    border-radius: var(--radius-md);
    padding: 0.25rem 0.65rem;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition);
}
.lang-switch-btn:hover {
    background-color: var(--brand-50);
    border-color: var(--brand-400);
    color: var(--brand-600);
}

/* ══════════════════════════════════════════════════════
   LTR Layout Overrides
   ══════════════════════════════════════════════════════ */
html[dir="ltr"] .sidebar {
    border-right: 1px solid rgba(255,255,255,0.08);
    border-left: none;
}
html[dir="ltr"] .alert .bi.ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* === Footer === */
.site-footer {
    padding: 1.25rem 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* === Scroll to Top === */
.scroll-top-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1040;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}
.scroll-top-btn:hover {
    background: var(--brand-600);
    transform: translateY(-2px);
}
.scroll-top-btn.visible {
    display: flex;
}
html[dir="ltr"] .scroll-top-btn {
    left: auto;
    right: 1.5rem;
}