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

@section('title', 'قائمة الفرق / Equipes')

@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 -->
    <div class="d-flex justify-content-between align-items-center mb-3 w-100" dir="ltr">
     <div class="d-flex gap-2">
        <button id="equipe-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('equipes.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:480px; width:40%; direction:rtl;">
        <div class="d-flex gap-2">
          <input id="equipe-search" type="text" class="form-control" placeholder="ابحث بالهيكل، اسم الفريق، المقر أو الهاتف..." aria-label="بحث الفرق">
          {{-- <button id="equipe-refresh" class="btn btn-outline-secondary">تحديث</button> --}}
        </div>
      </div>
    </div>

    <!-- Table -->
    <div class="table-responsive">
      <table class="table table-hover" id="equipes-table">
        <thead class="table-light">
          <tr>
            {{-- <th style="width:48px">#</th> --}}
            <th> الهياكل الأمنية   </th>
            <th>الفرقة المختصة بـــ  </th>
            <th> مقر الفرقة المختصة </th>
            <th>الهاتف</th>
            <th class="text-end" style="width:120px">إجراءات</th>
          </tr>
        </thead>
        <tbody>
          @forelse($equipes as $i => $e)
            <tr data-id="{{ $e->id }}">
              {{-- <td>{{ $i + 1 }}</td> --}}
              <td class="col-structure">{{ $e->structure?->nom ?? '' }}</td>
              <td class="col-nom">{{ $e->nom }}</td>
              <td class="col-siege">{{ $e->siege }}</td>
              <td class="col-tel">{{ $e->tel }}</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>

    <!-- pagination container (script renders into this) -->
    <div id="equipe-pagination-container" class="mt-3"></div>
  </div>
</div>

<!-- Create/Edit Modal -->
<div class="modal fade" id="equipeFormModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <form id="equipe-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="equipe-id" />
          <div class="mb-2">
            <label class="form-label">الهياكل الأمنية  </label>
            <select id="structure_id" name="structure_id" class="form-control" required>
              <option value="">-- اختر الهيكل --</option>
            </select>
          </div>
          <div class="mb-2">
            <label class="form-label">الفرقة المختصة بـــ </label>
            <input id="nom" name="nom" class="form-control" required />
          </div>
          <div class="mb-2">
            <label class="form-label"> مقر الفرقة المختصة  </label>
            <input id="siege" name="siege" class="form-control" />
          </div>
          <div class="mb-2">
            <label class="form-label">الهاتف</label>
            <input id="tel" name="tel" class="form-control" />
          </div>
          <div id="equipe-form-error" class="alert alert-danger d-none"></div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="equipe-save-btn" class="btn btn-primary">حفظ</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="equipeDeleteModal" 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="equipeDeleteText">هل أنت متأكد من حذف هذا السجل؟</p></div>
      <div class="modal-footer">
        <button type="button" id="equipeDeleteCancel" class="btn btn-outline-secondary" data-bs-dismiss="modal">إلغاء</button>
        <button type="button" id="equipeDeleteConfirm" class="btn btn-danger">حذف</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // elements
  const table = document.getElementById('equipes-table');
  if (!table) return;
  const tableBody = table.querySelector('tbody');
  const paginationContainer = document.getElementById('equipe-pagination-container');
  const searchInput = document.getElementById('equipe-search');

  const addBtn = document.getElementById('equipe-add-btn');
  const messages = document.getElementById('pageMessages');

  const formModalEl = document.getElementById('equipeFormModal');
  const formModal = new bootstrap.Modal(formModalEl);
  const form = document.getElementById('equipe-form');
  const saveBtn = document.getElementById('equipe-save-btn');
  const formError = document.getElementById('equipe-form-error');

  const deleteModalEl = document.getElementById('equipeDeleteModal');
  const deleteModal = new bootstrap.Modal(deleteModalEl);
  const deleteConfirmBtn = document.getElementById('equipeDeleteConfirm');
  const deleteText = document.getElementById('equipeDeleteText');

  const JSON_URL = "{{ route('equipes.json') }}";          // returns flat list of equipes
  const STRUCTURES_URL = "{{ route('structures.json') }}"; // returns list of structures for select
  const STORE_URL = "{{ route('equipes.store') }}";
  const CSRF = "{{ csrf_token() }}";

  let pendingDeleteRow = null;

  // PAGINATION CONFIG
  const perPage = 15;
  const windowSize = 2;

  // state arrays
  function readInitialRows() {
    const rows = Array.from(tableBody.querySelectorAll('tr')).filter(tr => tr.querySelectorAll('td').length > 0);
    return rows.map((tr, idx) => {
      const tds = tr.querySelectorAll('td');
      return {
        id: tr.dataset.id ?? null,
        structure_nom: (tds[0]?.textContent || '').trim(),
        nom: (tds[1]?.textContent || '').trim(),
        siege: (tds[2]?.textContent || '').trim(),
        tel: (tds[3]?.textContent || '').trim(),
        _rowIndex: idx
      };
    });
  }

  let allItems = readInitialRows();
  let filtered = allItems.slice();
  let currentPage = 1;
  let totalPages = Math.max(1, Math.ceil(filtered.length / perPage));

  // utilities
  function showMessage(type, text, timeout = 3500) {
    if (!messages) return alert(text);
    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;'); }

  // Fill structures select
  async function loadStructures() {
    try {
      const res = await fetch(STRUCTURES_URL, { credentials:'same-origin', headers:{ 'Accept':'application/json' }});
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const json = await res.json();
      if (!json || !json.success || !Array.isArray(json.data)) throw new Error('invalid json');
      const sel = document.getElementById('structure_id');
      sel.innerHTML = '<option value="">-- اختر الهيكل --</option>';
      json.data.forEach(s => {
        const opt = document.createElement('option');
        opt.value = s.id;
        opt.textContent = s.nom;
        sel.appendChild(opt);
      });
    } catch (err) {
      console.error('loadStructures error', err);
    }
  }

  // ========== Pagination renderers ==========
  function renderTablePage(itemsSlice = []) {
    if (!Array.isArray(itemsSlice) || itemsSlice.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
      attachRowHandlers();
      return;
    }

    tableBody.innerHTML = itemsSlice.map(it => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td class="col-structure">${escapeHtml(it.structure_nom || '')}</td>
        <td class="col-nom">${escapeHtml(it.nom || '')}</td>
        <td class="col-siege">${escapeHtml(it.siege || '')}</td>
        <td class="col-tel">${escapeHtml(it.tel || '')}</td>
        <td class="text-end">
          <button class="btn btn-icon btn-icon-outline btn-edit"><i class="bx bx-edit"></i></button>
          <button class="btn btn-icon btn-icon-danger btn-delete"><i class="bx bx-trash"></i></button>
        </td>
      </tr>
    `).join('');

    // reattach existing handlers
    try { if (typeof attachRowHandlers === 'function') attachRowHandlers(); } catch(e){ /* ignore */ }
    attachRowHandlers(); // ensure internal handlers are attached too
  }

  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>
    `;
    if (paginationContainer) paginationContainer.innerHTML = html;

    // hook page links
    if (paginationContainer) {
      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);
          table.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
      });
    }
  }

  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);
    updatePaginationUI();
  }

  // update whole dataset and re-run filtering + pagination
  function setAllItemsFromData(arr) {
    allItems = (Array.isArray(arr) ? arr : []).map((it, idx) => ({
      id: it.id ?? null,
      structure_nom: it.structure_nom ?? '',
      nom: it.nom ?? '',
      siege: it.siege ?? '',
      tel: it.tel ?? '',
      _rowIndex: idx
    }));
    applySearch(searchInput ? searchInput.value : '');
  }

  // ========== Data fetch / refresh ==========
  async function refreshData(){
    // show loading
    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:{ 'X-Requested-With':'XMLHttpRequest','Accept':'application/json' }});
      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');

      const items = json.data.map(it => ({
        id: it.id,
        structure_nom: it.structure_nom ?? (it.structure && it.structure.nom) ?? '',
        nom: it.nom ?? '',
        siege: it.siege ?? '',
        tel: it.tel ?? ''
      }));
      setAllItemsFromData(items);
      if (searchInput) searchInput.value = '';
    } catch (err) {
      console.error('refreshData error', err);
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">خطأ في التحميل</td></tr>';
      showMessage('danger', 'خطأ في التحميل');
    }
  }

  // on page load, if server rendered rows exist, collect them into allItems
  function collectInitialRows() {
    const rows = Array.from(tableBody.querySelectorAll('tr[data-id]'));
    if (!rows.length) return;
    const items = rows.map((tr, idx) => {
      const tds = tr.querySelectorAll('td');
      return {
        id: tr.dataset.id,
        structure_nom: (tds[0] && tds[0].textContent.trim()) || '',
        nom: (tds[1] && tds[1].textContent.trim()) || '',
        siege: (tds[2] && tds[2].textContent.trim()) || '',
        tel: (tds[3] && tds[3].textContent.trim()) || '',
      };
    });
    setAllItemsFromData(items);
  }

  // ========== Form create/update ==========
  function populateForm(d = {}) {
    document.getElementById('equipe-id').value = d.id || '';
    document.getElementById('structure_id').value = d.structure_id || '';
    document.getElementById('nom').value = d.nom || '';
    document.getElementById('siege').value = d.siege || '';
    document.getElementById('tel').value = d.tel || '';
    clearFormError();
  }
  function clearForm() { populateForm({}); clearFormError(); }
  function showFormError(m){ if(!formError) return alert(m); formError.classList.remove('d-none'); formError.textContent = m; }
  function clearFormError(){ if(!formError) return; formError.classList.add('d-none'); formError.textContent = ''; }

  addBtn && addBtn.addEventListener('click', (e) => {
    e.preventDefault();
    clearForm();
    loadStructures();
    formModal.show();
  });

  form.addEventListener('submit', async function(ev){
    ev.preventDefault();
    clearFormError();
    const id = (document.getElementById('equipe-id').value || '').trim();
    const payload = {
      structure_id: document.getElementById('structure_id').value || null,
      nom: document.getElementById('nom').value.trim(),
      siege: document.getElementById('siege').value.trim() || null,
      tel: document.getElementById('tel').value.trim() || null,
    };
    if (!payload.structure_id) { showFormError('الهيكل مطلوب'); return; }
    if (!payload.nom) { showFormError('اسم الفريق مطلوب'); return; }

    const url = id ? `{{ url('/equipes') }}/${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 : 'تعذّر حفظ السجل');

      formModal.hide();
      showMessage('success', id ? 'تم تحديث الفريق' : 'تمت الإضافة بنجاح');

      if (json.data && json.data.id) {
        const item = {
          id: json.data.id,
          structure_nom: json.data.structure_nom ?? '',
          nom: json.data.nom ?? '',
          siege: json.data.siege ?? '',
          tel: json.data.tel ?? ''
        };
        const idx = allItems.findIndex(x => String(x.id) === String(item.id));
        if (idx >= 0) {
          allItems[idx] = item;
        } else {
          allItems.push(item);
        }
        // reapply current filter and refresh page
        applySearch(searchInput ? searchInput.value : '');
      } else {
        refreshData();
      }
    } catch (err) {
      console.error('save error', err);
      showFormError(err.message || 'خطأ أثناء الحفظ');
    } finally {
      if (saveBtn) saveBtn.disabled = false;
    }
  });

  // ========== Row handlers (edit/delete) ==========
  function attachRowHandlers(){
    // replace nodes to clear old listeners
    tableBody.querySelectorAll('tr').forEach(tr => {
      const clone = tr.cloneNode(true);
      tr.parentNode.replaceChild(clone, tr);
    });

    // edit button
    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(`{{ url('/equipes') }}/${encodeURIComponent(id)}`, { credentials:'same-origin', headers:{ 'Accept':'application/json' }})
          .then(r => r.json().catch(()=>null))
          .then(json => {
            if (json && json.success && json.data) {
              loadStructures().then(()=> {
                const d = json.data;
                populateForm({ id: d.id, structure_id: d.structure_id, nom: d.nom, siege: d.siege, tel: d.tel });
                formModal.show();
              });
            } else {
              showMessage('danger', (json && json.message) ? json.message : 'تعذّر جلب بيانات السجل');
            }
          })
          .catch(err => { console.error('fetch show error', err); showMessage('danger', 'خطأ في الاتصال عند جلب السجل'); });
      });
    });

    // delete buttons
    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') && tr.querySelector('.col-nom').textContent) || '';
        deleteText.textContent = label ? `هل أنت متأكد من حذف فريق "${label.trim()}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
        deleteModal.show();
      });
    });
  }

  deleteConfirmBtn.addEventListener('click', function() {
    if (!pendingDeleteRow) { deleteModal.hide(); return; }
    const id = pendingDeleteRow.dataset.id;
    if (!id) { deleteModal.hide(); return; }
    deleteConfirmBtn.disabled = true;
    fetch(`{{ url('/equipes') }}/${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) {
        const idStr = String(id);
        allItems = allItems.filter(x => String(x.id) !== idStr);
        filtered = filtered.filter(x => String(x.id) !== idStr);
        // ensure current page still valid and re-render
        totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
        if (currentPage > totalPages) currentPage = totalPages;
        goToPage(currentPage);
        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 (debounced) ==========
  let to = null;
  function applySearch(q) {
    const term = (q || '').trim().toLowerCase();
    if (!term) {
      filtered = allItems.slice();
    } else {
      filtered = allItems.filter(it => {
        return (
          (it.structure_nom || '') + ' ' +
          (it.nom || '') + ' ' +
          (it.siege || '') + ' ' +
          (it.tel || '')
        ).toLowerCase().indexOf(term) !== -1;
      });
    }
    currentPage = 1;
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

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

  // initial: collect server rendered rows or fetch
  collectInitialRows();
  if (!allItems.length) {
    refreshData();
  } else {
    filtered = allItems.slice();
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

  // expose client API for debugging/updates
  window.__equipesClient = {
    goToPage, applySearch, setAllItemsFromData, getState: () => ({ total: allItems.length, filtered: filtered.length, currentPage, totalPages })
  };

  // optional refresh button wiring
  document.getElementById('equipe-refresh') && document.getElementById('equipe-refresh').addEventListener('click', (e) => { e.preventDefault(); refreshData(); });

});
</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) {
  .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;
  overflow: visible;
  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;
}
</style>
@endsection