@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root {
    --bg: #f5f5f5; /* خلفية فاتحة رمادي */
    --card: #e5e7eb; /* صندوق فاتح رمادي */
    --ink: #1f2937; /* النص رمادي غامق */
    --muted: #6b7280; /* نص باهت */
    --primary: #4b5563; /* زر أساسي رمادي غامق */
    --primary-2: #374151; /* زر hover */
    --border: #d1d5db; /* حدود فاتحة */
}

html, body {
    background: var(--bg);
    font-family: 'Cairo', sans-serif;
    color: var(--ink);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .5px;
}

.card {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.form-control,
.form-select {
    background: #f9fafb;
    color: #111827;
    border: 1px solid var(--border);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: none;
    }


.form-date,
.form-select {
    background: #f9fafb;
    color: #111827;
    border: 1px solid var(--border);
}

    .form-date:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: none;
    }

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

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

.btn-success {
    background: #10b981; /* أخضر ناعم */
    border-color: #059669;
}

.table {
    color: var(--ink);
}

    .table thead th {
        background: #f3f4f6;
        border-color: var(--border);
    }

    .table td, .table th {
        border-color: var(--border);
    }

a {
    color: #374151;
}

/* تكبير حجم الـ checkbox */
.form-check-input {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-top: 4px; /* لضبط المحاذاة مع النص */
}

/* تعديل النص بجوار الـ checkbox */
.form-check-label {
    font-size: 16px;
    margin-left: 6px;
    cursor: pointer;
}


/* غلاف لتمرير الجدول على الشاشات الصغيرة */
.grid-wrap{
  width:100%;
  overflow-x:auto;              /* يسمح بسحب أفقي */
  -webkit-overflow-scrolling:touch; /* Scroll ناعم على iOS */
}

/* تأكد الجدول ياخد عرض الحاوية */
.grid-wrap table{ width:100%; }

/* صور داخل الجدول */
.grid-wrap img{ max-width:100%; height:auto; display:block; }

/* لو عندك أعمدة عايز تخبيها في الموبايل، 
   اعطها CssClass="hide-sm" في الـ GridView */
@media (max-width: 576px){       /* موبايل */
  /* الجدول: اضبطه ثابت العرض ويكسر الكلمات الطويلة */
  .mGrid2, .table{
    table-layout:fixed;          /* يوزّع الأعمدة بالتساوي */
    width:100% !important;
  }
  .mGrid2 th, .mGrid2 td,
  .table th, .table td{
    padding:6px 8px;             /* تصغير المسافات */
    font-size:13px;              /* تصغير الخط */
    word-wrap:break-word;
    word-break:break-word;
    white-space:normal;          /* يسمح بلفّ النص */
  }

  /* أعمدة اختيارية تخفيها على الشاشات الصغيرة */
  .hide-sm{ display:none !important; }

  /* حقول الإدخال */
  .form-control, .form-select, .form-date{
    font-size:14px;
    padding:.45rem .6rem;
  }

  /* تصغير حجم الـ checkbox على الموبايل */
  .form-check-input{
    width:24px; height:24px; margin-top:2px;
  }
}

/* لو عايز تمنع لفّ نص عمود معيّن (مثلاً أكواد قصيرة)،
   إدي الخلية CssClass="nowrap" */
.nowrap{ white-space:nowrap; }