{{-- resources/views/sommaires/cheffes.blade.php --}}
@extends('layouts.app')

@section('title', 'قائمة رئيسات خدمات المرأة و الأسرة بالجهات')

@section('content')
<link rel="stylesheet" href="{{ asset('css/pages/users_index.css') }}">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

<div class="mb-4">
  <div id="pageMessages" class="m-3"></div>
  <div class="card banner-card page-title-card-sommaires shadow-sm border-0 overflow-hidden" dir="rtl">
    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
      <div class="me-0 me-md-4 text-md-end">
        <h3 class="mb-1 fw-bold banner-title">قائمة رئيسات خدمات المرأة و الأسرة بالجهات</h3>
    
      </div>
      <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">

    <!-- Controls: ADD (left) - SEARCH (right) -->
    <div class="d-flex justify-content-between align-items-center mb-3 w-100" dir="ltr">
      <div class="d-flex gap-2">
        <button id="cheffe-add-btn"  class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">
           إضافة
       <i class="bx bx-plus align-middle me-1"></i> </button>
                 <a href="{{ route('sommaires.cheffes.export') }}"   class="btn-download-signalement btn btn-sm d-flex align-items-center" title="تصدير Excel">
    <i class="bx bx-download me-1"></i> 
  </a>
      </div>

      <div style="min-width:200px; max-width:520px; width:40%; direction:rtl;">
        <input id="cheffe-search" type="text" class="form-control" placeholder="ابحث بالرقم، الاسم، الهيكل، الهاتف أو البريد..." aria-label="بحث">
      </div>
    </div>
    <!-- end controls -->

    <div class="table-responsive">
      <table class="table table-hover" id="cheffes-table">
        <thead class="table-light">
          <tr>
            {{-- <th style="width:48px">#</th> --}}
            {{-- <th>الرقم</th> --}}
            <th>الاسم و اللقب</th>
            <th>الهيكل</th>
            <th>الهاتف</th>
            <th>البريد الإلكتروني</th>
            <th class="text-end" style="width:120px">إجراءات</th>
          </tr>
        </thead>
        <tbody>
          {{-- rendu serveur initial --}}
          @forelse($cheffes as $i => $c)
            <tr data-id="{{ $c->id }}">
              {{-- <td>{{ $i + 1 }}</td> --}}
              {{-- <td class="col-numero">{{ $c->numero }}</td> --}}
              <td class="col-nom">{{ $c->prenom_nom }}</td>
              <td class="col-structure">{{ $c->structure }}</td>
              <td class="col-telephone">{{ $c->telephone }}</td>
              <td class="col-email">{{ $c->email }}</td>
              <td class="text-end">
                <button class="btn btn-icon btn-icon-outline btn-edit" aria-label="تعديل"><i class="bx bx-edit"></i></button>
                <button class="btn btn-icon btn-icon-danger btn-delete" aria-label="حذف"><i class="bx bx-trash"></i></button>
              </td>
            </tr>
          @empty
           <tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>

          @endforelse
        </tbody>
      </table>
    </div>
  </div>
    <div id="cheffes-pagination-container" class="card-footer border-0" dir="rtl" style="display:block;">
    <!-- JS injectera ici la pagination et le texte "عرض 1-20 من X" -->
  </div>
</div>

<!-- Form Modal : create / edit -->
<div class="modal fade" id="cheffeFormModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <form id="cheffe-form" novalidate>
        <div class="modal-header">
          <h5 class="modal-title">إضافة / تعديل رئيسة خدمة</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="cheffe-id" />
          {{-- <div class="mb-2">
            <label class="form-label">الرقم</label>
            <input id="numero" name="numero" class="form-control" type="number" />
          </div> --}}
          <div class="mb-2">
            <label class="form-label">الاسم و اللقب </label>
            <input id="prenom_nom" name="prenom_nom" class="form-control" required />
          </div>
          <div class="mb-2">
            <label class="form-label">الهيكل</label>
            <input id="structure" name="structure" class="form-control" />
          </div>
          <div class="mb-2">
            <label class="form-label">الهاتف</label>
            <input id="telephone" name="telephone" class="form-control" />
          </div>
          <div class="mb-2">
            <label class="form-label">البريد الإلكتروني</label>
            <input id="email" name="email" class="form-control" type="email" />
          </div>

          <div id="cheffe-form-error" class="alert alert-danger d-none"></div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="cheffe-save-btn"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">حفظ</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">إلغاء</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete confirm -->
<div class="modal fade" id="cheffeDeleteModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">تأكيد الحذف</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body"><p id="cheffeDeleteText">هل أنت متأكد من حذف هذا السجل؟</p></div>
      <div class="modal-footer">
        <button type="button" id="cheffeDeleteCancel" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">إلغاء</button>
        <button type="button" id="cheffeDeleteConfirm" class="btn btn-danger">حذف</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // CONFIG pagination
  const perPage = 15;
  const windowSize = 2;

  // DOM
  const tableBody = document.querySelector('#cheffes-table tbody');
  const searchInput = document.getElementById('cheffe-search');
  const addBtn = document.getElementById('cheffe-add-btn');
  const messages = document.getElementById('pageMessages');
  const paginationContainer = document.getElementById('cheffes-pagination-container');

  // modals & forms
  const formModalEl = document.getElementById('cheffeFormModal');
  const formModal = new bootstrap.Modal(formModalEl);
  const form = document.getElementById('cheffe-form');
  const saveBtn = document.getElementById('cheffe-save-btn');
  const formError = document.getElementById('cheffe-form-error');

  const deleteModalEl = document.getElementById('cheffeDeleteModal');
  const deleteModal = new bootstrap.Modal(deleteModalEl);
  const deleteConfirmBtn = document.getElementById('cheffeDeleteConfirm');
  const deleteText = document.getElementById('cheffeDeleteText');

  // endpoints & token (blade)
  const JSON_URL = "{{ route('cheffes.json') }}";
  const STORE_URL = "{{ route('sommaires.cheffes.store') }}";
  const BASE_URL = "{{ url('/sommaires/cheffes') }}";
  const DESTROY_BASE = "{{ url('/sommaires/destroy') }}";
  const CSRF = "{{ csrf_token() }}";

  // state for pagination
  let allItems = [];     // full list of objects {id?, prenom_nom, structure, telephone, email}
  let filtered = [];     // filtered by search
  let currentPage = 1;
  let totalPages = 1;

  let pendingDeleteRow = null;

  // helpers
  function showMessage(type, text, timeout = 3500) {
    if (!messages) { console[type === 'danger' ? 'error' : 'log'](text); return; }
    const div = document.createElement('div');
    div.className = `alert alert-${type} alert-dismissible fade show`;
    div.role = 'alert';
    div.innerHTML = `${text}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
    messages.appendChild(div);
    if (timeout > 0) setTimeout(()=> { try { bootstrap.Alert.getOrCreateInstance(div).close(); } catch(e){ div.remove(); } }, timeout);
  }
  function escapeHtml(s){ if (s == null) return ''; return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  // read server-rendered rows if any (fallback)
  function readInitialRows() {
    const rows = Array.from(tableBody.querySelectorAll('tr')).filter(tr => !!tr.querySelector('.col-nom'));
    return rows.map(tr => ({
      id: tr.dataset.id ?? null,
      prenom_nom: (tr.querySelector('.col-nom')?.textContent || '').trim(),
      structure: (tr.querySelector('.col-structure')?.textContent || '').trim(),
      telephone: (tr.querySelector('.col-telephone')?.textContent || '').trim(),
      email: (tr.querySelector('.col-email')?.textContent || '').trim(),
    }));
  }

  // render a page slice into tbody (replaces rows)
  function renderTablePage(itemsSlice, startIdx = 0) {
    if (!Array.isArray(itemsSlice) || itemsSlice.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
      return;
    }
    tableBody.innerHTML = itemsSlice.map(it => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td class="col-nom">${escapeHtml(it.prenom_nom)}</td>
        <td class="col-structure">${escapeHtml(it.structure)}</td>
        <td class="col-telephone">${escapeHtml(it.telephone)}</td>
        <td class="col-email">${escapeHtml(it.email)}</td>
        <td class="text-end">
          <button class="btn btn-icon btn-icon-outline btn-edit" aria-label="تعديل"><i class="bx bx-edit"></i></button>
          <button class="btn btn-icon btn-icon-danger btn-delete" aria-label="حذف"><i class="bx bx-trash"></i></button>
        </td>
      </tr>
    `).join('');
    attachRowHandlers();
  }

  // pagination UI builder
  function updatePaginationUI() {
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    if (currentPage > totalPages) currentPage = totalPages;
    const firstItem = filtered.length === 0 ? 0 : ((currentPage - 1) * perPage + 1);
    const lastItem = Math.min(filtered.length, currentPage * perPage);

    const start = Math.max(1, currentPage - windowSize);
    const end = Math.min(totalPages, currentPage + windowSize);
    let html = `
      <div class="d-flex justify-content-between align-items-center flex-row-reverse">
        <div>
          <small class="text-muted">عرض ${firstItem} - ${lastItem} من ${filtered.length}</small>
        </div>
        <nav aria-label="Pagination" class="mx-auto">
          <ul class="pagination mb-0 align-items-center pagination-centered" role="navigation" style="direction: ltr;">
            <li class="page-item ${currentPage <= 1 ? 'disabled' : ''}">
              <a class="page-link page-nav" data-page="${currentPage - 1}" href="#" aria-label="السابق" title="السابق">
                <i class="bx bx-chevron-left"></i>
              </a>
            </li>
    `;

    if (start > 1) {
      html += `<li class="page-item"><a class="page-link page-nav" data-page="1" href="#">1</a></li>`;
      if (start > 2) html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
    }

    for (let p = start; p <= end; p++) {
      html += `<li class="page-item ${p === currentPage ? 'active' : ''}">` +
              `<a class="page-link page-nav" data-page="${p}" href="#">${p}</a></li>`;
    }

    if (end < totalPages) {
      if (end < totalPages - 1) html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
      html += `<li class="page-item"><a class="page-link page-nav" data-page="${totalPages}" href="#">${totalPages}</a></li>`;
    }

    html += `
            <li class="page-item ${currentPage >= totalPages ? 'disabled' : ''}">
              <a class="page-link page-nav" data-page="${currentPage + 1}" href="#" aria-label="التالي" title="التالي">
                <i class="bx bx-chevron-right"></i>
              </a>
            </li>
          </ul>
        </nav>
        <div style="min-width:140px; text-align:left;">
          <small class="text-muted">صفحة ${currentPage} / ${totalPages}</small>
        </div>
      </div>
    `;
    paginationContainer.innerHTML = html;

    // hook links
    paginationContainer.querySelectorAll('.page-link.page-nav').forEach(a => {
      a.addEventListener('click', function(ev) {
        ev.preventDefault();
        const p = parseInt(this.dataset.page, 10) || 1;
        if (p < 1 || p > totalPages || p === currentPage) return;
        goToPage(p);
        window.scrollTo({ top: tableBody.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' });
      });
    });

    manageNoResultsRow();
  }

  function manageNoResultsRow() {
    const existing = tableBody.querySelector('.no-results-row');
    if (filtered.length === 0) {
      if (!existing) tableBody.insertAdjacentHTML('beforeend','<tr class="no-results-row"><td colspan="5" class="text-center text-muted">لا توجد نتائج مطابقة</td></tr>');
    } else if (existing) existing.remove();
  }

  // navigation
  function goToPage(page) {
    currentPage = Math.max(1, Math.min(page, totalPages));
    const startIdx = (currentPage - 1) * perPage;
    const slice = filtered.slice(startIdx, startIdx + perPage);
    renderTablePage(slice, startIdx);
    updatePaginationUI();
  }

  // search filter logic (applies to allItems)
  function applySearch(q) {
    const term = (q || '').trim().toLowerCase();
    if (!term) filtered = allItems.slice();
    else filtered = allItems.filter(it => (
      ((it.prenom_nom || '') + ' ' + (it.structure || '') + ' ' + (it.telephone || '') + ' ' + (it.email || '')).toLowerCase()
    ).indexOf(term) !== -1);
    currentPage = 1;
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

  // fetch JSON and populate allItems
  async function refreshData() {
    tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">جارٍ التحميل ...</td></tr>';
    try {
      const res = await fetch(JSON_URL, { credentials:'same-origin', headers:{ 'Accept':'application/json', 'X-Requested-With':'XMLHttpRequest' }});
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const json = await res.json();
      if (!json || json.success !== true || !Array.isArray(json.data)) throw new Error('invalid json');
      allItems = json.data.map(it => ({
        id: it.id ?? null,
        prenom_nom: it.prenom_nom ?? '',
        structure: it.structure ?? '',
        telephone: it.telephone ?? '',
        email: it.email ?? ''
      }));
    } catch (err) {
      console.error('refreshData error', err);
      showMessage('danger', 'خطأ في التحميل');
    }
    applySearch(searchInput ? searchInput.value : '');
  }

  // attach handlers for edit/delete on visible rows
  function attachRowHandlers(){
    // clone rows to remove previous event listeners
    tableBody.querySelectorAll('tr').forEach(tr => {
      const clone = tr.cloneNode(true);
      tr.parentNode.replaceChild(clone, tr);
    });

    // edit
    tableBody.querySelectorAll('.btn-edit').forEach(btn => {
      btn.addEventListener('click', function(){
        const tr = this.closest('tr');
        const id = tr ? tr.dataset.id : null;
        if (!id) return;
        fetch(`${BASE_URL}/${encodeURIComponent(id)}`, { credentials:'same-origin', headers:{ 'Accept':'application/json' }})
          .then(r => r.json().catch(()=>null))
          .then(json => {
            if (json && json.success && json.data) {
              populateForm(json.data);
              formModal.show();
            } else {
              showMessage('danger', (json && json.message) ? json.message : 'تعذّر جلب بيانات السجل');
            }
          })
          .catch(err => { console.error('fetch show error', err); showMessage('danger', 'خطأ في الاتصال عند جلب السجل'); });
      });
    });

    // delete
    tableBody.querySelectorAll('.btn-delete').forEach(btn => {
      btn.addEventListener('click', function(){
        const tr = this.closest('tr');
        const id = tr ? tr.dataset.id : null;
        if (!id) return;
        pendingDeleteRow = tr;
        const label = (tr.querySelector('.col-nom')?.textContent || '').trim();
        deleteText.textContent = label ? `هل أنت متأكد من حذف "${label}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
        deleteModal.show();
      });
    });
  }

  // form utilities
  function setIfExists(id, value) {
    const el = document.getElementById(id);
    if (!el) return;
    try { el.value = (value === null || value === undefined) ? '' : value; } catch(e){}
  }
  function populateForm(d = {}) {
    setIfExists('cheffe-id', d.id ?? '');
    setIfExists('numero', d.numero ?? '');
    setIfExists('prenom_nom', d.prenom_nom ?? '');
    setIfExists('structure', d.structure ?? '');
    setIfExists('telephone', d.telephone ?? '');
    setIfExists('email', d.email ?? '');
    if (formError) formError.classList.add('d-none');
  }
  function clearForm() { populateForm({}); if (formError) { formError.classList.add('d-none'); formError.textContent = ''; } }
  function showFormError(m){ if(!formError) return alert(m); formError.classList.remove('d-none'); formError.textContent = m; }

  // submit create/update
  if (form) {
    form.addEventListener('submit', async function(e){
      e.preventDefault();
      if (formError) formError.classList.add('d-none');
      const id = (document.getElementById('cheffe-id')?.value || '').toString().trim();
      const payload = {
        numero: (document.getElementById('numero')?.value || null),
        prenom_nom: (document.getElementById('prenom_nom')?.value || '').trim(),
        structure: (document.getElementById('structure')?.value || '').trim() || null,
        telephone: (document.getElementById('telephone')?.value || '').trim() || null,
        email: (document.getElementById('email')?.value || '').trim() || null
      };
      if (!payload.prenom_nom) { showFormError('الاسم واللقب مطلوب'); return; }
      const url = id ? `${BASE_URL}/${encodeURIComponent(id)}` : STORE_URL;
      const method = id ? 'PUT' : 'POST';
      if (saveBtn) saveBtn.disabled = true;
      try {
        const res = await fetch(url, {
          method, credentials:'same-origin',
          headers:{ 'Content-Type':'application/json', 'Accept':'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With':'XMLHttpRequest' },
          body: JSON.stringify(payload)
        });
        const json = await res.json().catch(()=>null);
        if (!res.ok) throw new Error((json && (json.message || JSON.stringify(json))) || `HTTP ${res.status}`);
        if (!json || json.success !== true) throw new Error((json && json.message) ? json.message : 'تعذّر حفظ السجل');

        // upsert returned item into allItems (if API returns the saved item)
        const item = json.data;
        if (item) {
          const normalized = {
            id: item.id ?? null,
            prenom_nom: item.prenom_nom ?? payload.prenom_nom,
            structure: item.structure ?? payload.structure,
            telephone: item.telephone ?? payload.telephone,
            email: item.email ?? payload.email
          };
          if (normalized.id) {
            const idx = allItems.findIndex(it => String(it.id) === String(normalized.id));
            if (idx === -1) allItems.push(normalized); else allItems[idx] = normalized;
          } else {
            // match by telephone/email fallback
            const idx = normalized.telephone ? allItems.findIndex(it => it.telephone === normalized.telephone) : -1;
            if (idx !== -1) allItems[idx] = normalized; else allItems.push(normalized);
          }
        } else {
          // fallback: reload from server
          await refreshData();
        }

        formModal.hide();
        showMessage('success', id ? 'تم تحديث السجل' : 'تمت الإضافة بنجاح');
        applySearch(searchInput ? searchInput.value : '');
      } catch (err) {
        console.error('save error', err);
        showFormError((err && err.message) ? err.message : 'خطأ أثناء الحفظ');
      } finally {
        if (saveBtn) saveBtn.disabled = false;
      }
    });
  }

  // delete confirm
  deleteConfirmBtn.addEventListener('click', function(){
    if (!pendingDeleteRow) { deleteModal.hide(); return; }
    const id = pendingDeleteRow.dataset.id;
    if (!id) { deleteModal.hide(); return; }
    deleteConfirmBtn.disabled = true;
    fetch(`${DESTROY_BASE}/${encodeURIComponent(id)}`, {
      method:'DELETE', credentials:'same-origin',
      headers:{ 'Accept':'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With':'XMLHttpRequest' }
    })
    .then(async res => {
      const json = await res.json().catch(()=>null);
      if (!res.ok) throw (json && json.message) ? new Error(json.message) : new Error('HTTP ' + res.status);
      return json;
    })
    .then(json => {
      if (json && json.success) {
        allItems = allItems.filter(it => String(it.id) !== String(id));
        applySearch(searchInput ? searchInput.value : '');
        showMessage('success', 'تم حذف السجل');
      } else {
        showMessage('danger', (json && json.message) ? json.message : 'تعذّر الحذف');
      }
    })
    .catch(err => {
      console.error('delete error', err);
      showMessage('danger', err.message || 'خطأ أثناء الحذف');
    })
    .finally(() => {
      deleteConfirmBtn.disabled = false;
      deleteModal.hide();
      pendingDeleteRow = null;
    });
  });

  // search input -> applySearch (debounced)
  if (searchInput) {
    let to = null;
    searchInput.addEventListener('input', function() {
      if (to) clearTimeout(to);
      to = setTimeout(() => { applySearch(this.value); to = null; }, 180);
    });
  }

  // add button opens modal (new)
  addBtn && addBtn.addEventListener('click', function(e) { e.preventDefault(); clearForm(); formModal.show(); });

  // initial boot: read server rows if exist else fetch
  (function init() {
    const initial = readInitialRows();
    if (initial.length > 0) {
      allItems = initial;
      filtered = allItems.slice();
      totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
      goToPage(1);
    } else {
      refreshData();
    }
    // attach handlers for any server-rendered rows
    attachRowHandlers();
    // expose for debug
    window.__cheffesClient = { refreshData, applySearch, goToPage, getState: () => ({ total: allItems.length, filtered: filtered.length, currentPage, totalPages }) };
  })();

});
</script>
@endpush



<style>
  

/* ---------- Banner: center title/subtitle + tighter top spacing ---------- */
/* Scope to .page-title-card so other banner variants won't be affected */
.page-title-card .card-body,
.page-title-card-sommaires .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* put items to the right edge */
  text-align: right !important;       /* ensure inline text is right-aligned */
  justify-content: flex-start !important; /* keep vertical stacking at top */
  gap: 0.35rem;
  padding-top: 0.8rem;
  padding-bottom: 0.2rem;
}
/* ensure right-aligned helper classes (text-md-end) do not reassert on this card */
.page-title-card .text-md-end,
.page-title-card-sommaires .text-md-end {
  text-align: right !important;
}

/* tighten title/subtitle spacing */
.page-title-card .banner-title,
.page-title-card-sommaires .banner-title {
  margin-bottom: 0.12rem;  /* less vertical space under the title */
  line-height: 1.08;
}

/* smaller subtitle and less margin */
.page-title-card .banner-subtitle,
.page-title-card-sommaires .banner-subtitle,
.page-title-card small.text-muted,
.page-title-card-sommaires small.text-muted {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  color: rgba(16,32,46,0.6);
}

/* badges centered under title (keeps previous style but centers) */
.page-title-card .banner-stats,
.page-title-card-sommaires .banner-stats {
  display: flex;
  gap: .5rem;
  justify-content: right;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* keep the decorative graphic hidden on narrow screens and positioned on wide screens */
@media (min-width: 768px) {
  /* If you still want the graphic on desktop, show and keep it aligned to the right visually */
  .page-title-card .banner-graphic,
  .page-title-card-sommaires .banner-graphic {
    display: block !important;
    margin-top: 2px;
  }
}

/* reduce the top margin that surrounds the whole card (if present elsewhere) */
.page-title-card,
.page-title-card-sommaires {
  margin-top: 0.4rem;  /* reduce overall top spacing relative to surrounding content */
  margin-bottom: 0.2rem;
}

/* small screens: ensure card body not cramped but centered */
@media (max-width:767.98px) {
  .page-title-card .card-body,
  .page-title-card-sommaires .card-body {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
/* add spacing above the page title (h3) */
.page-title-card-sommaires .card-body h3 {
  margin-top: 0.6rem; /* adjust value (e.g. 0.4rem - 1rem) to taste */
}
.page-title-card-sommaires{
  position: relative;       /* nécessaire pour le pseudo-élément */
  overflow: visible;        /* laisse la ligne dépasser si besoin */
  z-index: 0;
  border-radius: 16px;
  box-shadow: 0 6px 6px rgba(82, 155, 250, 0.08), 0 2px 8px rgba(28, 101, 238, 0.06) !important;

  max-height: 80px !important;
}
/* Make links inside the table look like normal table text (not blue) */
.card .table a,
.table a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Keep hover subtle (optional: underline on hover) */
.card .table a:hover,
.table a:hover {
  color: inherit !important;
  text-decoration: underline !important;
}

/* Extra specific guards for your columns (if they contain anchors) */
.table td.col-telephone a,
.table td.col-email a,
.table td.col-telephone,
.table td.col-email {
  color: rgba(0,0,0,0.58) !important; /* same tone as other table cells */
  font-weight: 520;
  text-decoration: none !important;
}

/* If you want them to still look clickable, keep pointer on hover */
.table td.col-telephone a:hover,
.table td.col-email a:hover {
  cursor: pointer;
}

</style>
@endsection