/* جداول الصفوف*/
#classesTable th, #classesTable td { vertical-align: middle; }

/* جوال: نخفي العناوين ونحوّل كل صف لكرت مع labels */
@media (max-width: 1023px) {
  #classesTable thead { display: none; }
  #classesTable tbody tr {
    display: block;
    border: 1px solid #e5e7eb; /* slate-200 */
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
  }
  #classesTable tbody td {
    display: flex;
    justify-content: space-between; /* RTL-friendly */
    align-items: center;
    padding: 8px 0;
    border: 0;
  }
  #classesTable tbody td::before {
    content: attr(data-label);
    color: #64748b;            /* slate-500 */
    font-size: .875rem;        /* text-sm */
    margin-left: 8px;          /* RTL: فراغ بسيط بين الليبل والقيمة */
  }
  #classesTable tbody td.actions {
    justify-content: flex-start;
    gap: .5rem;                /* تباعد الأزرار */
  }
}


/* جداول الطلاب*/
@media (max-width: 1023px) {
  #studentsTable thead { display: none; }
  #studentsTable tbody tr {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
  }
  #studentsTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: 0;
  }
  #studentsTable tbody td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: .875rem;
    margin-left: 8px;
  }
  #studentsTable tbody td.actions {
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
  }
}



/* بطاقات جوال لجدول سجل الحضور */
@media (max-width: 1023px) {
  #attendanceTable thead { display: none; }
  #attendanceTable tbody tr {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
  }
  #attendanceTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: 0;
  }
  #attendanceTable tbody td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: .875rem;
    margin-left: 8px;
  }
  #attendanceTable tbody td.actions {
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
  }
}

/* شارات الحضور/الغياب/التأخير داخل القائمة */
.badge {
  display: inline-block; padding: .35em .6em; border-radius: .5rem; font-weight: 700; font-size: .75rem;
}
.badge-present { background:#10b981; color:#fff; }  /* حضور */
.badge-absent  { background:#ef4444; color:#fff; }  /* غياب */
.badge-late    { background:#f59e0b; color:#fff; }  /* تأخير */



/* بطاقات المعلمين*/
@media (max-width: 1023px) {
  #teachersTable thead { display: none; }
  #teachersTable tbody tr {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
  }
  #teachersTable tbody td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border: 0;
  }
  #teachersTable tbody td::before {
    content: attr(data-label);
    color: #64748b; font-size: .875rem; margin-left: 8px;
  }
  #teachersTable tbody td.actions { justify-content: flex-start; gap: .5rem; flex-wrap: wrap; }
}


/* جدول سلوكيات كروت على الجوال (اختياري) */
@media (max-width: 1023px) {
  #behaviorsTable thead { display:none; }
  #behaviorsTable tbody tr {
    display:block; border:1px solid #e5e7eb; border-radius:12px;
    padding:12px 14px; margin-bottom:12px; background:#fff;
  }
  #behaviorsTable tbody td {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border:0;
  }
  #behaviorsTable tbody td::before {
    content:attr(data-label); color:#64748b; font-size:.875rem; margin-left:8px;
  }
  #behaviorsTable tbody td.actions { justify-content:flex-start; gap:.5rem; flex-wrap:wrap; }
}

/* المخالفات بطاقات) */
@media (max-width: 1023px) {
  #violationsTable thead { display:none; }
  #violationsTable tbody tr {
    display:block; border:1px solid #e5e7eb; border-radius:12px;
    padding:12px 14px; margin-bottom:12px; background:#fff;
  }
  #violationsTable tbody td {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border:0;
  }
  #violationsTable tbody td::before {
    content:attr(data-label); color:#64748b; font-size:.875rem; margin-left:8px;
  }
  #violationsTable tbody td.actions { justify-content:flex-start; gap:.5rem; flex-wrap:wrap; }
}

/*  المراقبة) */
@media (max-width: 1023px) {
  #monTable thead { display:none; }
  #monTable tbody tr {
    display:block; border:1px solid #e5e7eb; border-radius:12px;
    padding:12px 14px; margin-bottom:12px; background:#fff;
  }
  #monTable tbody td {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border:0;
  }
  #monTable tbody td::before {
    content:attr(data-label); color:#64748b; font-size:.875rem; margin-left:8px;
  }
  #monTable tbody td.actions { justify-content:flex-start; gap:.5rem; flex-wrap:wrap; }
}


@media (max-width: 640px){
  #notifMenu, #mailMenu{
    position: fixed; /* يغطي العرض */
    top: 64px;       /* تحت الهيدر (h-16) */
    right: 12px;
    left: auto;
  }
}
      :root {
        --primary: #1e3a8a;
        --secondary: #0ea5e9;
        --accent: #f59e0b;
      }
      body {
        font-family: "Tajawal", system-ui, sans-serif;
        background: #f5f7fa;
      }
      .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
      }
      .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
      }
      .badge {
        display: inline-block;
        padding: 0.35em 0.65em;
        font-size: 0.75rem;
        font-weight: 700;
        border-radius: 0.375rem;
        line-height: 1;
      }
      .badge-success {
        background: #10b981;
        color: #fff;
      }
      .badge-warning {
        background: #f59e0b;
        color: #fff;
      }
      .badge-danger {
        background: #ef4444;
        color: #fff;
      }
      .badge-info {
        background: #3b82f6;
        color: #fff;
      }
      .active-tab {
        background: #1e3a8a;
        color: #fff;
      }
      @media (prefers-reduced-motion: reduce) {
        .card {
          transition: none;
        }
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
      }
      .modal-content {
        background: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 12px;
        width: 90%;
        max-width: 600px;
      }
      .close {
        color: #6b7280;
        float: left;
        font-size: 28px;
        font-weight: bold;
      }
      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }
      .form-group {
        margin-bottom: 15px;
      }
      .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
      }
      .form-group input,
      .form-group select,
      .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-family: "Tajawal";
      }
      .btn {
        display: inline-block;
        padding: 10px 20px;
        background: #1e3a8a;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-family: "Tajawal";
      }
      .btn:hover {
        background: #1e40af;
      }
      .btn-danger {
        background: #ef4444;
      }
      .btn-danger:hover {
        background: #dc2626;
      }
      .btn-success {
        background: #10b981;
      }
      .btn-success:hover {
        background: #059669;
      }
      .btn-info {
        background: #0ea5e9;
      }
      .btn-info:hover {
        background: #0284c7;
      }
      .csv-upload-area {
        border: 2px dashed #cbd5e1;
        border-radius: 8px;
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
      }
      .csv-upload-area:hover {
        border-color: #3b82f6;
        background: #f0f9ff;
      }
      .csv-upload-area.dragover {
        border-color: #3b82f6;
        background: #dbeafe;
      }
      .hidden {
        display: none;
      }


 /* افتح الـ overlay */
.sidebar-open #overlay {
  opacity: 1;
  pointer-events: auto;
}

/* أهم تعديل: رجّع السايدبار لمكانه في v4 */
.sidebar-open #sidebar {
  translate: 0;              /* <-- هذا اللي يلغي translate-x-full في v4 */
  transform: translateX(0);  /* احتياط لتوافق المتصفحات الأقدم */
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  #overlay, #sidebar { transition: none !important; }
}



/* المودال */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    direction: rtl;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-header {
    background: #3498db;
    color: white;
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close:hover {
    color: #ecf0f1;
}

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #2c3e50;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

.readonly-field {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.form-group small {
    color: #7f8c8d;
    font-size: 0.8em;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-primary {
    background: #3498db;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    font-size: 1em;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-secondary {
    background: #95a5a6;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    font-size: 1em;
    transition: background 0.3s;
}

.btn-secondary:hover {
    background: #7f8c8d;
}