/* ملف CSS للخلفية والتصميم العام */
/* تم إنشاؤه بتاريخ: 2025-09-03 */

/* -----------------------------------------
   [INFO-PANEL-PATCH v1] white panels
------------------------------------------ */
:root{
  --info-radius: 16px;
  --info-shadow: 0 8px 24px rgba(0,0,0,.12);
  --info-border: 1px solid rgba(0,0,0,.06);
  --info-pad: 14px 18px;
  --info-gap: 16px;
  --info-text: #111;
}
.info-panel{
  background: #fff;
  color: var(--info-text);
  border-radius: var(--info-radius);
  border: var(--info-border);
  box-shadow: var(--info-shadow);
  padding: var(--info-pad);
  position: relative;
  z-index: 2; /* يضمن الظهور فوق صورة الخلفية فقط */
}
.info-tight{ padding: 8px 10px; display: inline-block; }
.info-stack > *{ margin-bottom: var(--info-gap); }
.info-legend{ margin-top: 12px; }
.chart-box{ min-height: 300px; } /* يمنع الضغط/التشويه */
.kpi-card{ display: inline-block; min-width: 180px; }

@media (max-width: 992px){
  .kpi-card{ min-width: 46%; }
  .chart-box{ min-height: 260px; }
}

/* خلفية الموقع الأساسية مع طبقة شفافة */
body {
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('/static/backgrounds/background.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
    position: relative;
    background-attachment: fixed !important;
    --bs-body-bg: transparent !important;
}

/* خلفية احتياطية في حالة عدم تحميل الصورة */
body.bg-fallback {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* إجبار الطبقة الشفافة على الظهور */
html, body {
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('/static/backgrounds/background.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* إزالة أي خلفيات أخرى */
.layout-wrapper {
    background: transparent !important;
}

.content-wrapper {
    background: transparent !important;
}

/* تحسين عرض الخلفية على جميع الأجهزة */
@media screen and (max-width: 768px) {
    body {
        background-attachment: scroll; /* تحسين الأداء على الموبايل */
    }
}

/* تأكيد أن الخلفية مرئية */
.layout-page {
    position: relative;
    z-index: 1;
}

/* تحسين مظهر النماذج والكروت */
.bg-white {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* تحسين مظهر الشريط الجانبي */
.layout-menu {
    background: transparent !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* تحسين مظهر الشريط العلوي */
.layout-navbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* إزالة قواعد الألوان الإجبارية */

/* تحسين الأزرار */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    transform: translateY(-1px);
}

/* تحسين الكروت */
.card {
    background: transparent !important;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
}

/* تحسين الجداول */
.table {
    background: transparent !important;
    backdrop-filter: none;
}

/* تأثير على الروابط */
a:hover {
    color: #667eea !important;
    transition: all 0.3s ease;
}

/* تحسين مظهر النماذج */
.form-control {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none;
}

.form-control:focus {
    background: transparent !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* تحسين الرسوم البيانية */
.apexcharts-canvas {
    background: transparent !important;
    border-radius: 10px;
}

/* تأثيرات إضافية للجمال */
.btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* ضمان أن جميع العناصر تستخدم خلفيات بيضاء شفافة */
.modal-content {
    background: transparent !important;
}

.dropdown-menu {
    background: transparent !important;
}

.nav-link {
}

.nav-link:hover {
    color: #667eea !important;
}

/* تحسين النصوص في الجداول */
.table td, .table th {
    background: transparent !important;
}

/* تحسين النصوص في القوائم */
.list-group-item {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* تحسين النصوص في التنبيهات */
.alert {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* تحسينات إضافية للعناصر المحددة */

/* حقول الإدخال */
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="tel"], input[type="url"],
textarea, select, .form-control {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* البطاقات */
.card, .card-body, .card-header, .card-footer, .card-title, .card-text {
    background: transparent !important;
}

/* الجداول */
.table, .table-striped, .table-hover {
    background: transparent !important;
}

.table td, .table th, .table tbody tr, .table thead tr {
    background: transparent !important;
}

/* القوائم */
.navbar, .navbar-nav, .nav-item, .nav-link {
    background: transparent !important;
}

/* الشريط الجانبي */
.layout-menu, .menu-inner, .menu-item, .menu-link {
    background: transparent !important;
}

/* النوافذ المنبثقة */
.modal-content, .modal-header, .modal-body, .modal-footer {
    background: transparent !important;
}

/* القوائم المنسدلة */
.dropdown-menu, .dropdown-item {
    background: transparent !important;
}

/* الأزرار */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info {
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* التسميات */
label, .form-label, .input-label {
    background: transparent !important;
}

/* النصوص */
span, p, div, h1, h2, h3, h4, h5, h6, a, li, td, th, .text-muted {
}

/* الروابط */
a {
}

a:hover, a:focus {
    color: #667eea !important;
}

/* العناصر المختلطة */
.mixed-content, .data-section, .content-section {
    background: transparent !important;
}

/* القوائم */
.list-group, .list-group-item {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* التنبيهات */
.alert, .alert-info, .alert-success, .alert-warning, .alert-danger {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* الأقسام */
.section, .panel, .widget {
    background: transparent !important;
}

/* الحاويات */
.container, .container-fluid, .row, .col {
    background: transparent !important;
}

/* العناصر المحددة */
.data-management, .admin-section, .management-panel {
    background: transparent !important;
}

/* قواعد خاصة بصفحة إدارة البيانات */
.content-wrapper, .layout-content, .main-content {
    background: transparent !important;
}

/* جميع العناصر داخل المحتوى */
.content-wrapper *, .layout-content *, .main-content * {
    background: transparent !important;
}

/* استثناءات للخلفية الرئيسية */
.content-wrapper, .layout-content, .main-content {
    background: 
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('/static/backgrounds/background.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* العناصر المحددة في إدارة البيانات */
.card, .card-body, .card-header, .card-footer,
.table, .table td, .table th,
.form-control, input, textarea, select,
.btn, .btn-primary, .btn-secondary,
.alert, .alert-info, .alert-success,
.navbar, .navbar-nav, .nav-item, .nav-link,
.dropdown-menu, .dropdown-item,
.modal-content, .modal-header, .modal-body, .modal-footer,
.list-group, .list-group-item {
    background: transparent !important;
}

/* النصوص في إدارة البيانات */
.content-wrapper h1, .content-wrapper h2, .content-wrapper h3,
.content-wrapper h4, .content-wrapper h5, .content-wrapper h6,
.content-wrapper p, .content-wrapper span, .content-wrapper div,
.content-wrapper a, .content-wrapper li, .content-wrapper td, .content-wrapper th {
}

.btn-secondary:hover {
    background: transparent !important;
    color: #495057 !important;
}

/* تحسين مظهر التنبيهات */
.alert {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* تحسين مظهر القوائم المنسدلة */
.dropdown-menu {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.dropdown-item:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

/* تحسين مظهر النوافذ المنبثقة */
.modal-content {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* تأثيرات انتقال سلسة */
* {
    transition: all 0.3s ease;
}

/* تحسين الشفافية في الوضع المظلم إذا كان مطلوباً */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                    url('/static/backgrounds/background.jpg') no-repeat center center fixed;
    }

    .bg-white {
        background: rgba(0, 0, 0, 0.8) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .text-gray-700 {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .text-gray-600 {
        color: rgba(255, 255, 255, 0.7) !important;
    }
}