:root{
  --primary:#0b6efd;
  --muted:#6c757d;
  --bg:#f4f7fb;
  --card:#ffffff;
  --success:#28a745;
  --danger:#dc3545;
  --border:#e6eefc;
  --sidebar-width: 250px; /* عرض الشريط الجانبي */
  --sidebar-bg: #2b3e50; /* لون خلفية الشريط الجانبي الداكن */
  --sidebar-color: #f1f1f1;
  --sidebar-active-bg: #1c2e3f;
  /* ألوان جديدة مشابهة لـ add-student */
  --form-bg: #f8f9fa; /* لون خلفية أخف للأقسام */
}
*{box-sizing:border-box}
body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:#222;
  direction:rtl;
  margin:0;
  padding:0;
  display:flex;
}

/* ------------------------------------ */
/* الشريط الجانبي (Sidebar) */
/* ------------------------------------ */

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-color);
    min-height: 100vh;
    padding: 15px 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
}
.sidebar .logo {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 10px 0 20px;
    color: #fff;
}
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: var(--sidebar-color);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}
.sidebar li a:hover:not(.active), .sidebar li a.active:hover {
    background-color: var(--sidebar-active-bg);
}
.sidebar li.active a { /* تم تعديل هذا ليطابق النمط الأصلي */
    background-color: var(--primary);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #fff; /* شريط جانبي أبيض نشط */
}
.sidebar li a i {
    width: 20px;
    text-align: center;
}

/* ------------------------------------ */
/* المحتوى الرئيسي (Main Content) - مُحدَّث */
/* ------------------------------------ */

.main-content {
    flex-grow: 1;
    padding: 12px;
}

.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:var(--card);
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  margin-bottom:14px;
}
.page-header h1{font-size:1.4rem;color:var(--primary);margin:0}
.user-info{display:flex;gap:10px;align-items:center}
.btn{border:0;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(0,0,0,0.04)}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:var(--muted);color:#fff}

.content-wrapper{
    display:flex; /* استخدام Flexbox للتكديس العمودي */
    flex-direction: column; 
    gap: 14px;
}

/* ------------------------------------ */
/* النماذج والجداول - مُحدَّث */
/* ------------------------------------ */

.form-card, .table-card{
    background:var(--card);
    padding:14px;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(15,15,15,0.03);
    /* تم إضافة نمط لتوسيع النموذج/الجدول لملء العرض */
    width: 100%; 
}
.form-card h2{margin:0 0 10px;color:var(--primary)}

/* تم تعديل نمط h3 ليتناسب مع الأقسام الجديدة */
.form-card h3 {
    color: var(--sidebar-bg); /* لون أغمق لعنوان القسم */
    font-size: 1.2rem; 
    margin: 20px 0 10px; 
    padding-bottom: 8px; 
    border-bottom: 2px solid var(--primary); /* شريط أزرق تحت العنوان */
    display: flex;
    align-items: center;
    gap: 10px;
}
/* نمط لعنوان قسم فرعي */
.form-card h4 {
    color: var(--muted); 
    font-size: 1rem; 
    margin: 15px 0 8px; 
    border-bottom: 1px dashed var(--border);
    padding-bottom: 5px;
}

/* أنماط النموذج الجديد (شبيهة بـ add-student) */
.form-section {
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--form-bg); /* استخدام لون خلفية أخف */
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    align-items: flex-start;
}
.form-group {
    flex: 1 1 calc(25% - 10px); /* 4 حقول في الصف افتراضياً */
    display: flex;
    flex-direction: column;
    min-width: 180px;
}
.form-group.half-width {
     flex: 1 1 calc(50% - 6px); /* حقلان في الصف */
}
.form-group.full-width-half-flex {
    flex: 1 1 calc(50% - 6px); /* لاستيعاب ملاحظات طبية */
}

/* تم حذف أنماط .row و .two-cols و .col القديمة */

label{font-weight:700;margin-bottom:6px}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{
    padding:9px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    width: 100%;
}
textarea{min-height:90px;resize:vertical}
.file-preview.small{
    margin-top:8px;
    border:1px dashed var(--border);
    padding:8px;
    border-radius:8px;
    min-height:60px; /* لضمان عرض الصورة */
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.9rem;
    color:var(--muted);
}
.file-preview.small img { max-height: 40px; border-radius: 4px; }

.form-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:8px}
.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.search-box{display:flex;gap:8px;align-items:center;flex:1}
.search-box input{padding:8px;border-radius:8px;border:1px solid var(--border);min-width:260px}
.table-container{overflow:auto;border-radius:8px}
.data-table{width:100%;border-collapse:collapse;font-size:0.95rem;min-width:900px}
.data-table th,.data-table td{padding:12px;border-bottom:1px solid #f1f1f1;text-align:center}
.data-table thead th{background:#fbfdff;color:#333;position:sticky;top:0}
.action-btn{padding:6px 8px;border-radius:6px;border:0;cursor:pointer;font-weight:700}
.action-btn.view{background:#17a2b8;color:#fff}
.action-btn.edit{background:#ffc107;color:#222}
.action-btn.delete{background:#dc3545;color:#fff}
.required{color:var(--danger)}
.page-footer{text-align:center;margin-top:16px;color:#888;font-size:0.9rem}

/* ------------------------------------ */
/* استجابة التصميم (Media Queries) - مُحدَّث */
/* ------------------------------------ */
@media (min-width:1200px){
    /* تم حذف grid-template-columns هنا، حيث أن content-wrapper الآن هو flex-direction: column */
}

@media (max-width:992px){
    body {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        min-height: auto;
        position: relative;
    }
    .sidebar li a {
        padding: 8px 15px;
        justify-content: center;
    }
    .content-wrapper {
        flex-direction: column;
    }
    /* تعديل الأقسام لتصبح عمودية على الشاشات الصغيرة */
    .form-row {
        flex-direction: column;
    }
    .form-group, .form-group.half-width, .form-group.full-width-half-flex {
        flex: 1 1 100%;
        min-width: 100%;
    }
}
/* إضافة إلى teachers_HR.css */

/* أنماط النموذج الجديد (لضمان 5 حقول في السطر) */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
    align-items: flex-start;
}

/* 4 حقول في الصف (الافتراضي إذا لم يتم تحديد .form-row-5) */
.form-group {
    flex: 1 1 calc(25% - 10px); 
    display: flex;
    flex-direction: column;
    min-width: 180px; 
}

/* 5 حقول في الصف (لتحقيق المطلوب) */
.form-row.form-row-5 .form-group {
    flex: 1 1 calc(20% - 10px); /* 100% / 5 = 20% لكل حقل */
    min-width: 150px; /* لضمان عدم التداخل */
}

/* الأنماط الإضافية التي تم استخدامها في HTML */
.form-group.half-width {
     flex: 1 1 calc(50% - 6px);
}
.form-group.full-width-half-flex {
    flex: 1 1 calc(50% - 6px); 
}

/* يجب التأكد من تعديل الـ Media Queries في CSS الخارجي لضمان بقاء 5 حقول على الشاشات الكبيرة */
@media (max-width: 1300px) { /* قد تحتاج لتصغير هذه القيمة */
    .form-row.form-row-5 .form-group {
        flex: 1 1 calc(33.333% - 8px); /* 3 حقول على الشاشات المتوسطة */
    }
}
@media (max-width: 768px){
    .form-group, .form-group.half-width, .form-group.full-width-half-flex, .form-row.form-row-5 .form-group {
        flex: 1 1 100%; /* حقل واحد على الشاشات الصغيرة */
    }
}
/* تحسينات إضافية للصور في PDF */
.image-container img {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* ضمان ظهور الصور كاملة */
img[src^="data:image"] {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* منع تقسيم الصور بين الصفحات */
.image-section {
    page-break-inside: avoid;
    break-inside: avoid;
}
.attachment-image {
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.attachment-item {
    page-break-inside: avoid;
    break-inside: avoid;
}
.teacher-popup .popup-content {
    animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-btn {
    margin: 2px;
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.action-btn.view {
    background: #198754;
    color: white;
}

.action-btn.edit {
    background: #ffc107;
    color: #212529;
}

.action-btn.print {
    background: #0b6efd;
    color: white;
}

.action-btn.delete {
    background: #dc3545;
    color: white;
}

.action-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}