/* =========================================
   الإعدادات العامة
   ========================================= */
body { 
    background-color: #f1f5f9; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden;
}

/* فئات مساعدة (Utilities) للنصوص والمسافات */
.max-w-120 { max-width: 120px; }
.max-w-150 { max-width: 150px; }
.max-w-300 { max-width: 300px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.lh-12 { line-height: 1.2; }

/* =========================================
   شاشة التحميل البريميوم (Premium Loader)
   ========================================= */
#loadingScreen {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: #0f172a;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    z-index: 99999; 
    color: white; 
    transition: opacity 0.6s ease, visibility 0.6s;
    overflow: hidden;
}

.premium-loader-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 40px 60px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.02);
    animation: loaderFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes loaderFadeIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.loading-logo {
    width: 100px;
    height: auto;
    animation: logoPulse 2s infinite ease-in-out;
}

@keyframes logoPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.8)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2)); }
}

.loading-title {
    font-size: 22px;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, #93c5fd, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.loading-bar-container {
    width: 220px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.loading-bar-progress {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, transparent);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: loadingBar 1.5s infinite ease-in-out;
}

@keyframes loadingBar {
    0% { transform: translateX(250%); }
    100% { transform: translateX(-150%); }
}

.loading-text-modern {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: 0.5px;
    animation: textPulse 1.5s infinite alternate;
}

@keyframes textPulse {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* =========================================
   تنسيقات صفحة تسجيل الدخول البريميوم
   ========================================= */
#loginScreen {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    position: relative;
    overflow: hidden;
}

.bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    animation: float 20s infinite alternate;
}
.shape-1 { width: 300px; height: 300px; background: rgba(59, 130, 246, 0.3); top: -50px; left: -50px; }
.shape-2 { width: 400px; height: 400px; background: rgba(139, 92, 246, 0.2); bottom: -100px; right: -50px; animation-delay: -5s; }
.shape-3 { width: 250px; height: 250px; background: rgba(16, 185, 129, 0.15); top: 40%; right: 20%; animation-delay: -10s; }

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(100px, 50px) rotate(90deg); }
}

.login-card-premium {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 40px;
    z-index: 10;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    color: white;
}

.logo-icon {
    font-size: 0;
    display: block;
    margin-bottom: 10px;
}

.login-logo-img {
    width: 120px;
    height: auto;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

.fw-black { font-weight: 900; letter-spacing: -0.5px; }
.tiny { font-size: 11px; opacity: 0.6; }

.input-group-premium {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: 0.3s all;
}

.input-group-premium:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.input-icon {
    padding: 0 15px;
    font-size: 18px;
    opacity: 0.7;
}

.input-group-premium input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 15px 5px;
    color: white;
    font-weight: 600;
    outline: none;
}

.input-group-premium input::placeholder { color: rgba(255,255,255,0.4); }

.btn-login-premium {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
}

.btn-login-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.5);
    filter: brightness(1.1);
}

.btn-login-premium:active { transform: scale(0.98); }

.arrow-icon {
    font-style: normal;
    transition: 0.3s transform;
}
.btn-login-premium:hover .arrow-icon { transform: translateX(-5px); }

/* =========================================
   الواجهة والكروت الأساسية
   ========================================= */
#mainApp { display: none; }
.page-section { display: none; } 
.page-section.active { display: block; animation: fadeIn 0.4s; } 
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   🌟 التأثير الزجاجي الداكن (Dark Glass) للهيدر والناف بار 🌟
   ========================================= */
.header-pro { 
    border-radius: 20px !important; 
    background-color: transparent !important; 
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4) !important;
    overflow: visible !important;
    margin-bottom: 20px;
}

.header-main { 
    background: rgba(15, 23, 42, 0.9) !important; 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px 20px 0 0 !important;
}

.header-logo {
    height: 35px;
    width: auto;
    margin-left: 10px;
    vertical-align: middle;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.title-text { 
    color: #ffffff !important; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    letter-spacing: 0.5px;
}

.sync-status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; transition: 0.3s; }
.sync-status-badge.success { background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; color: #34d399 !important; }
.sync-status-badge.error { background: rgba(225, 29, 72, 0.15) !important; border: 1px solid rgba(225, 29, 72, 0.3) !important; color: #fb7185 !important; }

.header-nav { 
    background: rgba(30, 41, 59, 0.9) !important; 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 20px 20px !important;
    padding: 12px !important;
}

.nav-pills .nav-link { 
    color: #94a3b8 !important; 
    font-weight: 800; 
    cursor: pointer; 
    border-radius: 50px !important; 
    margin: 0 4px; 
    padding: 8px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent !important;
    border: 1px solid transparent !important;
}

.nav-pills .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.nav-pills .nav-link.active { 
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; 
    color: white !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #60a5fa !important;
    transform: translateY(-2px);
}

.nav-pills .nav-item.ms-md-auto .nav-link {
    background: rgba(225, 29, 72, 0.15) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(225, 29, 72, 0.3) !important;
}
.nav-pills .nav-item.ms-md-auto .nav-link:hover {
    background: #e11d48 !important;
    color: white !important;
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.4) !important;
}

@media (max-width: 768px) {
    .header-main { flex-direction: column; text-align: center; padding: 20px 15px !important;}
    .header-info { margin-bottom: 15px !important; width: 100%;}
    .header-actions { width: 100%; justify-content: center; }
    .nav-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; scrollbar-width: none;}
    .nav-pills::-webkit-scrollbar { display: none; }
    .nav-pills .nav-link { white-space: nowrap; font-size: 14px; }
    .nav-item.ms-md-auto { margin-top: 0 !important; }
}

/* =========================================
   تثبيت هيدر وفوتر جدول التقفيل (Sticky Table)
   ========================================= */
#dashboard .table-responsive {
    max-height: 80vh; 
    overflow-y: auto;
    overflow-x: auto;
}

#dashboardTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

#dashboardTable tfoot td {
    position: sticky !important;
    bottom: -1px !important; 
    z-index: 1020 !important;
    box-shadow: 0 -3px 6px rgba(0,0,0,0.08); 
}

#dashboardTable tfoot td:first-child {
    background-color: #ffffff !important;
    border-top: 2px solid #e2e8f0 !important;
}

/* =========================================
   الجداول
   ========================================= */
.table-responsive { border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); overflow-x: auto; -webkit-overflow-scrolling: touch; background: white; }
.table-custom { border-collapse: separate; border-spacing: 0; margin-bottom: 0; border: none; width: 100%;}
.main-table { min-width: 800px; } 
.sub-table { min-width: 600px; } 

.table-custom thead th { vertical-align: middle; padding: 12px 6px; font-size: 14px; white-space: nowrap; border: none; color: white; font-weight: 700; text-align: center; }
.th-main { background: linear-gradient(135deg, #1e293b, #334155); } 
.th-basic { background: linear-gradient(135deg, #475569, #64748b); } 
.th-airtime { background: linear-gradient(135deg, #0284c7, #0ea5e9); } 
.th-auto { background: linear-gradient(135deg, #d97706, #f59e0b); } 
.th-req { background: linear-gradient(135deg, #2563eb, #3b82f6); font-size: 15px;} 
.th-cash { background: linear-gradient(135deg, #059669, #10b981); } 
.th-wallet { background: linear-gradient(135deg, #0891b2, #06b6d4); } 
.th-cashout { background: linear-gradient(135deg, #8b5cf6, #a855f7); } 
.th-short { background: linear-gradient(135deg, #dc2626, #ef4444); }

.table-custom tbody td { vertical-align: middle; padding: 10px 4px; font-size: 14px; font-weight: 700; border-bottom: 1px solid #e2e8f0; border-left: 1px solid #f1f5f9; white-space: nowrap; text-align: center;}
.table-custom tbody tr { transition: all 0.2s ease-in-out; background-color: #ffffff; }
.table-custom tbody tr:hover { transform: scale(1.01); box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10; position: relative; background-color: #f8fafc !important;}

.col-req-bg { background-color: #f0f7ff !important; color: #1e3a8a !important; font-weight: 900 !important; font-size: 15px !important;}

.main-table th:nth-child(2), .main-table td:nth-child(2) { width: 75px; font-size: 12px; } 
.main-table th:nth-child(4), .main-table td:nth-child(4),
.main-table th:nth-child(5), .main-table td:nth-child(5),
.main-table th:nth-child(6), .main-table td:nth-child(6) { width: 60px; font-size: 13px; } 
.main-table th:nth-child(7), .main-table td:nth-child(7) { width: 75px; font-size: 14px; } 

/* =========================================
   المدخلات وأزرار السداد
   ========================================= */
.collection-input { width: 75px; font-weight: bold; text-align: center; margin: 0 auto; border: 2px solid #e2e8f0; border-radius: 8px; padding: 6px 4px; transition: 0.3s; background: #f8fafc; display: block; font-size: 13px;}
.collection-input:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); background: white;}

.border-purple { border: 2px solid #ddd6fe !important; }
.border-purple:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important; }

.quick-pay-badge { cursor: pointer; transition: 0.2s; font-size: 10px; padding: 4px 6px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: block; width: 75px; margin: 5px auto 0 auto; text-align: center; font-weight: bold;}
.quick-pay-badge:hover { transform: translateY(-2px); filter: brightness(1.1); }
.quick-pay-cash { background-color: #10b981; color: white; border: 1px solid #059669; }
.quick-pay-wallet { background-color: #06b6d4; color: white; border: 1px solid #0891b2; }
.quick-pay-cashout { background-color: #8b5cf6; color: white; border: 1px solid #7c3aed; }

/* ألوان الحالات */
.bg-settled td { background-color: #d1e7dd !important; border-bottom: 1px solid #badbcc !important; color: #0f5132 !important; } 
.bg-settled .col-req-bg { background-color: #c3ebd5 !important; color: #0f5132 !important; } 
/* لون الفائض (أصفر فسفوري) */
.bg-surplus td { background-color: #eaff00 !important; border-bottom: 1px solid #d4e600 !important; color: #000000 !important; } 
.bg-surplus .col-req-bg { background-color: #dcf200 !important; color: #000000 !important; }
.bg-shortage td { background-color: #f8d7da !important; border-bottom: 1px solid #f5c2c7 !important; color: #842029 !important; } 
.bg-shortage .col-req-bg { background-color: #f1c7cb !important; color: #842029 !important; }

.settled-hidden .settled-row { display: none !important; }
.unregistered-hidden .unregistered-row { display: none !important; }

/* =========================================
   بادج خط السير الذكي 
   ========================================= */
.td-relative { position: relative; }
.route-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e2e8f0;
    color: #334155;
    font-size: 9px;
    padding: 2px 8px;
    border-bottom-left-radius: 8px;
    font-weight: 800;
    pointer-events: none; 
    border: 1px solid #cbd5e1;
    border-top: none;
    border-right: none;
}

@media (max-width: 768px) {
    .filter-container { flex-direction: column; }
    .table-custom tbody tr:hover { transform: none; } 
}

/* =========================================
   التصميم الحديث للأزرار والواجهة العلوية (Modern UI)
   ========================================= */
.action-toolbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.action-toolbar::-webkit-scrollbar { display: none; }
.btn-custom { white-space: nowrap; border-radius: 10px; font-weight: 700; font-size: 13px; padding: 8px 14px; border: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: 0.2s; cursor: pointer; }
.btn-custom:active { transform: scale(0.95); }
.btn-c-green  { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.btn-c-red    { background: #fef2f2; color: #e11d48; border: 1px solid #fecdd3; }
.btn-c-blue   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.btn-c-dark   { background: #f8fafc; color: #334155; border: 1px solid #cbd5e1; }
.btn-c-yellow { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

.filter-group { display: flex; background: #f1f5f9; padding: 4px; border-radius: 12px; border: 1px solid #e2e8f0; width: 100%; }
.filter-group .btn { flex: 1; border: none; border-radius: 8px; font-weight: 700; font-size: 13px; color: #64748b; background: transparent; padding: 8px 0; transition: 0.3s; }
.filter-group .btn.active { background: white; color: #2563eb; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.custom-search { border-radius: 12px; border: 1px solid #cbd5e1; padding: 10px; font-size: 14px; background: #ffffff; }
.custom-search:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

/* =========================================
   تصميم التنبيه المنبثق (Toast)
   ========================================= */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
}
.custom-toast {
    background: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    border-right: 5px solid #3b82f6;
    animation: slideIn 0.5s ease-out;
}
.toast-error { border-right-color: #ef4444; }
.toast-success { border-right-color: #10b981; }
.toast-warning { border-right-color: #f59e0b; }

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* =========================================
   تنسيقات نافذة الصلاحيات (Permissions Modal)
   ========================================= */
#permissionsModal .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

#permissionsModal .form-switch {
    padding-left: 0;
}

#permissionsModal .form-check-input.perm-checkbox {
    width: 3.5rem;
    height: 1.75rem;
    cursor: pointer;
    background-color: #cbd5e1;
    border-color: #cbd5e1;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#permissionsModal .form-check-input.perm-checkbox:checked {
    background-color: #10b981; 
    border-color: #10b981;
}

#permissionsModal .form-check-label {
    cursor: pointer;
    font-size: 15px;
    color: #334155;
}

#permissionsCheckboxes .form-check {
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0 !important;
}

#permissionsCheckboxes .form-check:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    border-color: #3b82f6 !important;
}

/* =========================================
   تنسيقات النوافذ المنبثقة (SweetAlert2 Glass)
   ========================================= */
.glass-swal {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    border-radius: 28px !important;
}

.swal2-input {
    border-radius: 12px !important;
    font-size: 16px !important;
}

.swal2-html-container {
    line-height: 1.6;
}

/* =========================================
   تنسيقات جدول التجار الاحترافي (Seamless UX)
   ========================================= */
.seamless-input {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
    padding: 8px 4px;
    box-shadow: none !important;
    outline: none !important;
}

.seamless-input:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

.seamless-input:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.drag-handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 20px;
    font-weight: bold;
    padding: 0 8px;
    transition: color 0.2s;
}

.drag-handle:hover {
    color: #3b82f6;
}

.drag-handle:active {
    cursor: grabbing;
}

tr.dragging {
    opacity: 0.5;
    background-color: #e0f2fe !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* منطقة السحب والإفلات */
.upload-drop-zone {
    max-width: 600px;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 30px 20px;
    background-color: #f8fafc;
    cursor: pointer;
    transition: all 0.3s ease;
}
.upload-drop-zone:hover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}
.upload-drop-zone .upload-icon {
    font-size: 40px;
}

/* بادج الملفات المختارة */
.file-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: #334155;
}
.file-badge .remove-file {
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    font-weight: 900;
}
.file-badge .remove-file:hover {
    color: #b91c1c;
}

/* رفع قائمة فلتر المسارات فوق رأس الجدول الثابت */
#routeFilterList {
    z-index: 1050 !important;
}

/* =========================================
   إعدادات الطباعة النهائية
   ========================================= */
@media print {
    .hide-print { display: none !important; }
    body, html { background-color: white !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; overflow: visible !important; }
    #loadingScreen, #loginScreen, .nav-pills, #upload, #merchants, #debtsPage, #adminPanel, .card-header button, .btn, .quick-pay-badge, .filter-container, #archiveSearchContainer, .col-md-3, #customRouteFilterContainer { display: none !important; }
    .page-section:not(.active) { display: none !important; }
    #mainApp, .container-fluid, .page-section.active, .card, .card-body, .table-responsive { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; overflow: visible !important; position: static !important; }
    .col-md-9 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; }
    .card-header { background-color: transparent !important; color: black !important; text-align: center !important; border-bottom: 2px solid #000 !important; margin-bottom: 15px !important; padding: 10px 0 !important; display: block !important; }
    .card-header h5 { font-size: 22px !important; font-weight: bold !important; width: 100% !important; text-align: center !important; margin: 0 !important; }
    table, .table-custom, .main-table, .sub-table { width: 100% !important; min-width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; margin: 0 !important; page-break-inside: auto !important; }
    .table-custom thead th { border: 2px solid #000 !important; color: black !important; background: #e2e8f0 !important; padding: 14px 4px !important; font-size: 14px !important; text-align: center !important; font-weight: bold !important; white-space: normal !important; word-wrap: break-word !important; }
    .table-custom tbody td { border: 1px solid #000 !important; color: black !important; padding: 16px 4px !important; font-size: 14px !important; text-align: center !important; font-weight: bold !important; white-space: normal !important; word-wrap: break-word !important; }
    tr { page-break-inside: avoid !important; page-break-after: auto !important; }
    tfoot { display: table-row-group !important; }
    .table-custom tfoot td { border: 2px solid #000 !important; color: black !important; background: #cbd5e1 !important; padding: 16px 4px !important; font-size: 15px !important; text-align: center !important; font-weight: bold !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    @page { size: A4 portrait; margin: 5mm; }

    /* حل مشكلة الدمج واختفاء الخطوط في الطباعة */
    .td-relative { position: static !important; }
    .route-badge {
        position: static !important;
        display: inline-block !important;
        margin: 0 auto 5px auto !important;
        border: 1px solid #94a3b8 !important;
        border-radius: 4px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
        background-color: #f8fafc !important;
        color: #000 !important;
        width: fit-content;
    }
    .text-truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}

/* =========================================
   📱 نظام الكروت الذكي - الثيم الداكن (Dark Mode)
   ========================================= */
#smartCollectionModal .modal-content {
    background: #0f172a !important; /* خلفية داكنة عميقة للمودال */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#smartCollectionModal .modal-header {
    background: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#smartCollectionModal .modal-footer {
    background: #1e293b !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.smart-collection-card {
    border-radius: 20px !important;
    background: #1e293b !important; /* اللون الافتراضي للكارت داكن */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* 💛 حالة الفائض -> أصفر فسفوري داكن نيون */
.smart-collection-card.card-surplus-style {
    background-color: #2e2a00 !important; 
    border: 2px solid #eaff00 !important;
    box-shadow: 0 0 15px rgba(234, 255, 0, 0.25) !important;
}
.card-surplus-style h5, .card-surplus-style h6, .card-surplus-style span, .card-surplus-style label {
    color: #eaff00 !important;
}

/* 💚 حالة المظبوط -> أخضر داكن نيون */
.smart-collection-card.card-settled-style {
    background-color: #062817 !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.25) !important;
}
.card-settled-style h5, .card-settled-style h6, .card-settled-style span, .card-settled-style label {
    color: #34d399 !important;
}

/* ❤️ حالة العجز -> أحمر داكن نيون */
.smart-collection-card.card-shortage-style {
    background-color: #311517 !important;
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25) !important;
}
.card-shortage-style h5, .card-shortage-style h6, .card-shortage-style span, .card-shortage-style label {
    color: #fca5a5 !important;
}

/* تخصيص حقول الإدخال لتلائم الثيم الداكن بالكامل */
.smart-collection-card .form-control-lg {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-width: 2px !important;
    font-size: 18px !important;
    height: 48px !important;
}
.smart-collection-card .form-control-lg:focus {
    background-color: #050b14 !important;
    color: #ffffff !important;
}

/* تخصيص الأزرار داخل الكروت لتكون واضحة وقوية */
.smart-collection-card .quick-pay-badge {
    width: 100% !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}