/* custom_style.css */

:root {
  --brand-gold: #eeba2b;
  --brand-green: #55a2aa;
  --brand-black: #000000;
  --brand-white: #ffffff;

  --brand-primary: var(--brand-green); /* اللون الأساسي */
  --brand-secondary: var(--brand-gold); /* اللون الثانوي */

  --text-color: var(--brand-black);
  --light-bg: #f8f9fa; /* لون خلفية فاتح للـ body إذا رغبت */
  --section-bg: #f9f9f9; /* لون خلفية الأقسام في صفحة عرض التدقيق */

  /* RGB versions for box-shadows with alpha */
  --brand-green-rgb: 85, 162, 170;
  --brand-gold-rgb: 238, 186, 43;
  --brand-black-rgb: 0, 0, 0;
}



/* Global Styles */
body {
  background-color: var(--light-bg);
  color: var(--text-color);
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-black);
  font-weight: 600;
  line-height: 1.3;
}

a {
  color: var(--brand-primary);
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: #4a9199;
  text-decoration: none;
}

/* Bootstrap Overrides & Customizations */
.text-primary {
  color: var(--brand-primary) !important;
}

.btn {
  border-radius: 0.3rem;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  letter-spacing: 0.5px;
  display: inline-flex; /* لضمان توسيط المحتوى بشكل أفضل مع line-height و padding */
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #4a9199;
  border-color: #4a9199;
  color: var(--brand-white);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-green-rgb), 0.3);
}

.btn-secondary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: var(--brand-black);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #d4a425;
  border-color: #d4a425;
  color: var(--brand-black);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-gold-rgb), 0.3);
}

.btn-success {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-white);
}
.btn-success:hover, .btn-success:focus {
  background-color: #4a9199;
  border-color: #4a9199;
  color: var(--brand-white);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-green-rgb), 0.3);
}

/* Form Styling */
.form-control,
.custom-select {
  border-radius: 0.3rem;
  border: 1px solid #ced4da;
  padding: 0.75rem 1rem;
  line-height: 1.5;
  height: calc(1.5em + 1.5rem + 2px); /* (font-size * line-height) + (padding-top + padding-bottom) + (border-top-width + border-bottom-width) */
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  width: 100%; /* للتأكيد على أن الحقول تأخذ عرض الحاوية */
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-green-rgb), 0.25);
  outline: 0;
}
.form-group label {
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: #495057;
}
.form-text.text-muted {
  font-size: 0.875em;
}

/* Custom Form Container/Card for Audit Sections */
.form-wrapper {
  max-width: 800px;
  margin: 3rem auto;
}
.form-card-custom {
  background-color: var(--brand-white);
  padding: 2.5rem 3rem;
  border-radius: 10px;
  box-shadow: 0 10px 35px rgba(var(--brand-black-rgb), 0.08);
  border-top: 4px solid var(--brand-primary);
}

/* Headings within form sections */
.form-card-custom h2.text-primary,
.container > h2.text-primary {
  color: var(--brand-green);
  text-align: center;
  margin-bottom: 2.5rem !important;
  font-size: 2.25rem;
  font-weight: 700;
}

/* Navigation buttons at the bottom of forms */
.form-card-custom .d-flex.justify-content-between.mt-4 {
    border-top: 1px solid #e9ecef;
    padding-top: 1.5rem;
    margin-top: 2.5rem !important;
}

/* Audit View Page Styling (view_audit.php) */
.audit-header {
  background-color: var(--brand-black);
  color: var(--brand-white);
  padding: 50px 20px;
  text-align: center;
  margin-bottom: 50px;
  border-bottom: 6px solid var(--brand-gold);
}
.audit-header h1 {
  color: var(--brand-white);
  font-size: 2.8rem;
  font-weight: 700;
}
.audit-header .lead {
    font-size: 1.25rem;
    color: #f0f0f0;
}

.audit-section {
  border-left: 7px solid var(--brand-green);
  background-color: var(--brand-white);
  padding: 30px 40px;
  margin-bottom: 40px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(var(--brand-black-rgb), 0.07);
}
.audit-section h3 {
  color: var(--brand-gold);
  margin-bottom: 30px;
  font-size: 1.9rem;
  font-weight: 700;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 0.75rem;
}
.audit-label {
  font-weight: 600;
  color: var(--brand-black);
  margin-right: 8px;
}
.audit-section p {
  line-height: 1.8;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  color: #343a40;
}

/* Presentation Page Styling (section0_presentation.php) */
.presentation-card {
  background-color: var(--brand-white);
  padding: 2.5rem 3rem;
  border-radius: 10px;
  box-shadow: 0 10px 35px rgba(var(--brand-black-rgb), 0.08);
  border-top: 4px solid var(--brand-gold);
}
.presentation-card h1.text-primary {
    color: var(--brand-green) !important;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
}
.presentation-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.presentation-card ol {
    list-style-position: inside;
    padding-left: 0;
}
.presentation-card ol li {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}
.presentation-card .btn-success.btn-lg {
    padding: 0.8rem 2rem;
    font-size: 1.25rem;
}

/* Remerciements Page Styling (remerciements.php) */
.remerciements-card {
  background-color: var(--brand-white);
  padding: 3rem 3.5rem;
  border-radius: 10px;
  box-shadow: 0 10px 35px rgba(var(--brand-black-rgb), 0.08);
  text-align: center;
}
.remerciements-card h1.text-success {
    color: var(--brand-green) !important;
    font-size: 2.5rem;
    font-weight: 700;
}
.remerciements-card .lead {
    font-size: 1.2rem;
    color: #495057;
}
.remerciements-card form {
    max-width: 550px !important;
    margin-top: 2rem !important;
    text-align: left;
}
.remerciements-card .form-check-label {
    font-size: 1.05rem;
}
.remerciements-card .alert {
    margin-top: 1.5rem;
    text-align: left;
}
.remerciements-card .alert-info a {
    font-weight: 600;
}
.remerciements-card hr {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Alert styling */
.alert {
    border-radius: 0.3rem;
    padding: 1rem 1.25rem;
}
.alert-success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
}
.alert-info {
  background-color: #e1f5fe;
  color: #01579b;
  border-color: #81d4fa;
}
.alert-danger, .invalid-feedback {
  background-color: #fdecea;
  color: #c92121;
  border-color: #f5c6cb;
  padding: .5rem .75rem;
  margin-top: .25rem;
  font-size: .875em;
}
.form-control.is-invalid,
.custom-select.is-invalid {
    border-color: #dc3545 !important; /* استخدام !important للتأكيد */
}
.form-control.is-invalid:focus,
.custom-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Custom Select Styling */
.custom-select {
  /* الارتفاع والحشوة والحدود موروثة من .form-control العام */
  padding-right: 1.75rem; /* مساحة أكبر للسهم */
  color: var(--text-color);
  background-color: var(--brand-white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2355a2aa' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 8px 10px;
  appearance: none;
}
.custom-select.is-invalid {
  padding-right: calc(0.75em + 2.325rem);
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5zM6 8.2h.1v.1H6z'/%3e%3c/svg%3e"),
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2355a2aa' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-position: right 1.75rem center, right 0.75rem center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem), 8px 10px;
}

/* Input Group Adjustments for Service Removal Buttons */
.input-group {
  align-items: stretch; /* يجعل العناصر داخل المجموعة تمتد لملء ارتفاع المجموعة */
  margin-bottom: 10px; /* نفس الهامش السفلي الموجود في ملف PHP */
}

/* التأكيد على أن .form-control داخل .input-group يرث ارتفاعه الصحيح */
.input-group > .form-control,
.input-group > .custom-select { /* تطبيق نفس القاعدة على .custom-select داخل مجموعة */
  /* الارتفاع يجب أن يكون متناسقًا مع .form-control و .custom-select العام */
  /* لا حاجة لتكرار خاصية height إذا كانت مطبقة بشكل صحيح في الأعلى */
  /* ولكن نتأكد من أن الحشوة لا تتسبب في مشكلة */
  padding: 0.75rem 1rem; /* الحشوة القياسية لـ .form-control */
  /* إذا كان .custom-select داخل مجموعة، قد نحتاج لضبط padding-right بشكل خاص */
}
.input-group > .custom-select {
    padding-right: 1.75rem; /* الحشوة الأصلية لـ custom-select للسهم */
}


/* زر الحذف داخل input-group */
.input-group .input-group-append .btn {
  /* الارتفاع يجب أن يطابق .form-control من خلال align-items: stretch على .input-group */
  /* ولأننا وحدنا ارتفاع .form-control و .btn العام في الأعلى */
  padding-left: 1rem; /* حشوة أفقية للزر */
  padding-right: 1rem;
  /* الحشوة الرأسية يتم التحكم بها من خلال .btn العام، ويجب أن تتطابق مع .form-control */
  border-radius: 0 0.3rem 0.3rem 0; /* ضبط حواف الزر ليتناسب مع المجموعة */
}

/* زر "+ Ajouter un service" */
#add-service.btn.btn-outline-secondary {
    /* الارتفاع يجب أن يطابق .form-control من خلال .btn العام */
    /* لا حاجة لتحديد ارتفاع صريح هنا إذا كانت أنماط .btn و .form-control العامة متناسقة */
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .form-card-custom, .presentation-card, .remerciements-card {
    padding: 1.5rem;
  }
  .form-card-custom h2.text-primary,
  .container > h2.text-primary,
  .presentation-card h1.text-primary,
  .remerciements-card h1.text-success {
    font-size: 1.8rem;
  }
  .audit-header {
    padding: 30px 15px;
    margin-bottom: 30px;
  }
  .audit-header h1 {
    font-size: 2rem;
  }
  .audit-section {
    padding: 20px;
    margin-bottom: 25px;
  }
  .audit-section h3 {
    font-size: 1.5rem;
  }
  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  .presentation-card .btn-success.btn-lg {
    padding: 0.7rem 1.5rem;
    font-size: 1.1rem;
  }

  /* تعديل ارتفاع وحشوة العناصر في الشاشات الصغيرة */
  .form-control,
  .custom-select {
    height: calc(1.5em + 1.2rem + 2px); /* تصغير الارتفاع قليلاً */
    padding: 0.6rem 0.8rem; /* تصغير الحشوة قليلاً */
  }
  .custom-select {
      padding-right: 1.5rem; /* تعديل حشوة .custom-select للسهم */
  }
  /* custom_style.css */

/* ... (جميع الأنماط العامة والمتغيرات التي لا تتغير) ... */
:root {
  --brand-gold: #eeba2b;
  --brand-green: #55a2aa;
  --brand-black: #000000;
  --brand-white: #ffffff;

  --brand-primary: var(--brand-green);
  --brand-secondary: var(--brand-gold);

  --text-color: var(--brand-black);
  --light-bg: #f8f9fa;
  --section-bg: #f9f9f9;

  --brand-green-rgb: 85, 162, 170;
  --brand-gold-rgb: 238, 186, 43;
  --brand-black-rgb: 0, 0, 0;
}

body {
  background-color: var(--light-bg);
  color: var(--text-color);
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  line-height: 1.6;
  font-size: 16px;
}

/* ... (باقي الأنماط العامة للعناوين، الروابط، text-primary، إلخ، كما هي) ... */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-black);
  font-weight: 600;
  line-height: 1.3;
}

a {
  color: var(--brand-primary);
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: #4a9199;
  text-decoration: none;
}

.text-primary {
  color: var(--brand-primary) !important;
}


/* Form Control and Custom Select unified height */
.form-control,
.custom-select {
  border-radius: 0.3rem;
  border: 1px solid #ced4da;
  padding: 0.75rem 1rem; /* الحشوة القياسية */
  line-height: 1.5;
  /* حساب الارتفاع القياسي، يجب أن يطبق على جميع حقول الإدخال والأزرار للمقارنة */
  height: calc(1.5em * 1.5 + 0.75rem * 2 + 2px); /* (font-size * line-height) + (padding-y*2) + (border-y*2) */
                                                 /* نفترض أن 1em هو حجم الخط الأساسي، و line-height هو 1.5 */
                                                 /* إذا كان حجم الخط 16px، line-height 1.5 -> 24px (1.5em) */
                                                 /* padding 0.75rem (12px) * 2 -> 24px (1.5rem) */
                                                 /* border 1px * 2 -> 2px */
                                                 /* المجموع التقريبي: 24 + 24 + 2 = 50px لـ font-size: 1rem, line-height: 1.5 */
                                                 /* Bootstrap's $input-height: ($font-size-base * $input-line-height) + ($input-padding-y * 2) + ($input-border-width * 2); */
                                                 /* وهو ما يعادل تقريبًا: (1rem * 1.5) + (0.375rem * 2) + (1px * 2) للـ padding الافتراضي الأصغر لـ Bootstrap */
                                                 /* بما أننا استخدمنا padding: 0.75rem 1rem; فيجب أن يكون الحساب: (1rem * 1.5) + (0.75rem * 2) + (1px * 2) */
  height: calc(1rem * 1.5 + 0.75rem * 2 + 2px); /* لـ font-size: 1rem (16px) */
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  width: 100%;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-green-rgb), 0.25);
  outline: 0;
}

/* ... (باقي أنماط .btn, .form-group label, form-wrapper, form-card-custom, audit pages, etc. كما هي) ... */
.btn {
  border-radius: 0.3rem;
  padding: 0.75rem 1.25rem; /* الحشوة الافتراضية للأزرار */
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* الارتفاع يجب أن يتطابق مع .form-control. يمكن حسابه أو تحديده بشكل صريح */
  /* إذا كان padding-top/bottom للزر هو 0.75rem، فيجب أن يتطابق الارتفاع */
  /* مع .form-control إذا كان line-height وحجم الخط متماثلين */
  line-height: 1.5; /* نفس line-height لـ .form-control */
  height: calc(1rem * 1.5 + 0.75rem * 2 + 2px); /* نفس ارتفاع .form-control */
}


/* ----- تعديلات مركزة جداً على مجموعة إدخال الخدمات ----- */

/* حاوية مجموعة الإدخال نفسها (من ملف PHP: <div class="input-group mb-2">) */
.input-group.mb-2 { /* استهداف أكثر تحديدًا إذا لزم الأمر */
  display: flex;       /* استخدام flexbox لترتيب العناصر الداخلية */
  align-items: stretch; /* هذا هو المفتاح لجعل العناصر تمتد لملء الارتفاع */
  width: 100%;         /* تأكد أن المجموعة تأخذ العرض الكامل المتاح لها */
}

/* حقل الإدخال داخل هذه المجموعة المحددة */
.input-group.mb-2 > .form-control {
  flex-grow: 1;        /* اسمح لحقل الإدخال بأن يكبر ليملأ المساحة المتاحة */
  /* الارتفاع، الحشوة، الحدود، line-height يجب أن تكون مطابقة لـ .form-control العام */
  /* لا حاجة لتكرارها هنا إذا كانت مطبقة بشكل صحيح في .form-control العام */
  /* ولكن للتأكيد: */
  height: calc(1rem * 1.5 + 0.75rem * 2 + 2px);
  padding: 0.75rem 1rem;
  line-height: 1.5;
  border-right: 0; /* إزالة الحد الأيمن لحقل الإدخال ليتم دمجه بصريًا مع الزر */
  border-top-right-radius: 0;    /* إزالة استدارة الحافة العلوية اليمنى */
  border-bottom-right-radius: 0; /* إزالة استدارة الحافة السفلية اليمنى */
}

/* حاوية الزر الملحق (.input-group-append) */
.input-group.mb-2 > .input-group-append {
  display: flex; /* لمواءمة الزر داخلها إذا كان هناك أكثر من عنصر */
}

/* الزر الأحمر "X" داخل هذه المجموعة المحددة */
.input-group.mb-2 > .input-group-append > .btn.btn-danger.remove-service { /* استهداف دقيق جداً */
  /* الارتفاع يجب أن يتطابق تمامًا مع حقل الإدخال */
  height: calc(1rem * 1.5 + 0.75rem * 2 + 2px); /* نفس الارتفاع المحسوب */
  
  /* الحشوة الأفقية للزر */
  padding-left: 1rem;
  padding-right: 1rem;
  
  /* إزالة الحشوة الرأسية لأننا نعتمد على height و flex لتوسيط المحتوى */
  padding-top: 0;
  padding-bottom: 0;
  
  line-height: normal; /* أو 1، لتجنب تداخل line-height مع حسابات الارتفاع */
  
  display: flex;       /* استخدام flex لتوسيط "X" داخل الزر */
  align-items: center;
  justify-content: center;
  
  border-top-left-radius: 0;    /* إزالة استدارة الحافة العلوية اليسرى للزر */
  border-bottom-left-radius: 0; /* إزالة استدارة الحافة السفلية اليسرى للزر */
  /* الحدود الأخرى (العلوية، السفلية، اليمنى) يجب أن تكون متناسقة مع .form-control */
  border: 1px solid var(--bs-danger-border-subtle, #dc3545); /* استخدام لون حدود Bootstrap للزر الأحمر أو تخصيصه */
  /* إذا كنت تريد أن يكون الحد بنفس لون خلفية الزر الأحمر: */
  /* border-color: var(--bs-danger, #dc3545); */
  /* أو إذا كان الزر الأحمر يستخدم متغيرات Bootstrap 5: */
  /* background-color: var(--bs-danger); */
  /* color: var(--bs-white); */
}

/* زر "+ Ajouter un service" */
/* تأكد من أن هذا الزر له نفس الارتفاع أيضًا */
#add-service.btn { /* نفترض أن له ID="add-service" وكلاس .btn */
  /* الارتفاع يجب أن يتطابق مع .form-control */
  height: calc(1rem * 1.5 + 0.75rem * 2 + 2px);
  /* الحشوة الرأسية تأتي من .btn العام، ولكن بما أننا حددنا height، 
     و .btn يستخدم display:inline-flex و align-items:center، يجب أن يكون النص متوسطًا */
}


/* ----- نهاية التعديلات المركزة ----- */


/* ... (باقي الأنماط لصفحات view_audit, presentation, remerciements, alerts, custom-select, responsive adjustments كما هي) ... */
/* مثال على جزء من تعديلات الاستجابة للتأكيد على الارتفاع */
@media (max-width: 768px) {
  /* ... (الأنماط الأخرى للاستجابة) ... */

  .form-control,
  .custom-select,
  .input-group.mb-2 > .form-control, /* تطبيق على حقل الإدخال داخل المجموعة */
  .input-group.mb-2 > .input-group-append > .btn.btn-danger.remove-service, /* تطبيق على الزر داخل المجموعة */
  #add-service.btn {
    height: calc(1rem * 1.5 + 0.6rem * 2 + 2px); /* تعديل الارتفاع للشاشات الأصغر إذا كان النص أصغر أو الحشوة أصغر */
                                                  /* هنا استخدمت 0.6rem كحشوة رأسية للشاشات الصغيرة كمثال */
    /* إذا كانت الحشوة في .form-control للشاشات الصغيرة هي 0.6rem 0.8rem */
  }

  .input-group.mb-2 > .form-control {
    padding: 0.6rem 0.8rem;
  }
  .input-group.mb-2 > .input-group-append > .btn.btn-danger.remove-service {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  /* ... */
}

  /* ضمان أن الأزرار داخل input-group تستجيب أيضًا */
  .input-group .input-group-append .btn {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  #add-service.btn.btn-outline-secondary {
      /* الارتفاع يجب أن يتغير بناءً على .btn العام في الشاشات الصغيرة */
  }
}