/* ── Charte UI commune (config/ui.php · composants x-badge, x-stat-card, x-page-header, x-avatar, x-row-actions) ── */

/* En-tête de page */
.ui-page-header h2 { font-size: 1.35rem; font-weight: 700; }
.ui-page-header .ui-page-sub { color: #6c757d; font-size: .85rem; }

/* Cartes-compteurs (vues rapides) */
.ui-stat-card { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .7rem 1rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; text-decoration: none; color: inherit;
    cursor: pointer; text-align: left; transition: box-shadow .12s, border-color .12s; }
.ui-stat-card:hover, .ui-stat-card:focus-visible { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(0,0,0,.06); outline: none; color: inherit; }
.ui-stat-card.is-active { border-color: #0d6efd; box-shadow: inset 0 0 0 1px #0d6efd; }
.ui-stat-label { font-size: .85rem; font-weight: 600; color: #374151; }
.ui-stat-count { font-size: 1.3rem; font-weight: 700; line-height: 1; }

/* Badges */
.badge[data-tone] { font-weight: 600; letter-spacing: .01em; font-size: .74rem; padding: .3em .65em; }
.badge.ui-badge-sm { font-size: .66rem; padding: .22em .5em; }

/* Barre de filtres */
.ui-filter-bar .form-label { font-size: .78rem; color: #6c757d; margin-bottom: .25rem; }
.ui-filter-bar .form-select, .ui-filter-bar .form-control { min-height: 38px; }

/* Tableaux de liste */
.ui-table { margin-bottom: 0; }
.ui-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
.ui-table { width: 100%; table-layout: auto; }
.ui-table td { vertical-align: middle; padding: .6rem .6rem; font-size: .88rem; }
.ui-table th { padding: .5rem .6rem; }
.ui-table tr[data-href] { cursor: pointer; }
.ui-table tbody tr:hover { background: #f8fafc; }
/* Bootstrap 5.3 peint chaque cellule (--bs-table-bg) : la teinte de ligne se pose sur les <td> */
.ui-table tr.ui-row-late > td, .ui-table tr.ui-row-critical > td { --bs-table-bg: #fff7f7; --bs-table-hover-bg: #ffefef; background-color: #fff7f7; }
.ui-table tr.ui-row-attention > td { --bs-table-bg: #fffbeb; --bs-table-hover-bg: #fff6d6; background-color: #fffbeb; }
.ui-table .ui-nowrap { white-space: nowrap; }
.ui-table .ui-muted { color: #6b7280; font-size: .8rem; }
.ui-table .ui-title { font-weight: 600; color: #111827; text-decoration: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-table .ui-title:hover { color: #0b5ed7; }
.ui-table .ui-sub { color: #6b7280; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: block; }
.ui-table .ui-cell-clip { max-width: 0; }               /* la colonne prend l'espace restant et tronque */
.ui-table .ui-empty { color: #9ca3af; }

/* Pastille utilisateur */
.ui-avatar-wrap { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.ui-avatar { width: 24px; height: 24px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ui-avatar-name { font-size: .88rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-table .ui-muted.ui-clip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menu d'actions de ligne */
.ui-row-actions .ui-kebab { opacity: .35; padding: .15rem .4rem; }
tr:hover .ui-row-actions .ui-kebab, .ui-row-actions .ui-kebab:focus, .ui-row-actions.show .ui-kebab { opacity: 1; }
.ui-row-actions .dropdown-item { font-size: .88rem; }
.ui-row-actions form { margin: 0; }

/* Pied de tableau : compteur à gauche, pagination compacte à droite */
.ui-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-top: 1px solid #e5e7eb; font-size: .8rem; color: #6b7280; flex-wrap: wrap; }
.ui-list-footer .pagination { margin: 0; --bs-pagination-padding-y: .25rem; --bs-pagination-padding-x: .55rem; --bs-pagination-font-size: .8rem; }
.ui-list-footer nav { display: inline-flex; }
.ui-list-footer .pagination .page-link svg { width: .65rem; height: .65rem; }

/* Pagination Laravel bootstrap-5 : masquer le "Showing x to y of z" (doublon du compteur) */
.ui-list-footer nav .d-sm-flex > div:first-child { display: none !important; }
.ui-list-footer nav .d-sm-none { display: none !important; }
.ui-list-footer nav .d-sm-flex { display: flex !important; }

/* ── Fiches et formulaires (charte 2) ─────────────────────────────────────── */
.ui-back { font-size: .85rem; color: #6b7280; text-decoration: none; }
.ui-back:hover { color: #0b5ed7; }
.ui-code { font-size: .85rem; font-weight: 600; color: #6b7280; }
.ui-title-h1 { font-size: 1.4rem; font-weight: 700; color: #111827; }
.ui-meta { font-size: .85rem; color: #6b7280; }
.ui-detail-actions .btn { white-space: nowrap; }

.ui-section { border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: none; }
.ui-section-h { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid #eef0f2; font-weight: 600; font-size: .95rem; color: #111827; }
.ui-section-b { padding: 1rem; }
.ui-section .ui-content { line-height: 1.65; font-size: .95rem; }
.ui-section .ui-content img { max-width: 100%; border-radius: 6px; margin: .5rem 0; }
.ui-section .ui-content p:last-child { margin-bottom: 0; }
.ui-prewrap { white-space: pre-wrap; }

.ui-kv { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid #f1f3f5; font-size: .88rem; }
.ui-kv:last-child { border-bottom: 0; }
.ui-kv-k { color: #6b7280; flex-shrink: 0; }
.ui-kv-v { display: flex; align-items: center; gap: .5rem; color: #111827; min-width: 0; text-align: right; flex-wrap: wrap; justify-content: flex-end; }
.ui-kv-critical { background: #fff7f7; }
.ui-kv-attention { background: #fffbeb; }
.ui-kv-muted .ui-kv-v { color: #9ca3af; }

.ui-pen { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; border: 1px solid transparent; background: transparent; font-size: .8rem; padding: 0; text-decoration: none; flex-shrink: 0; }
.ui-pen:hover, .ui-pen:focus-visible { border-color: #e5e7eb; color: #374151; background: #f9fafb; outline: none; }

.ui-contact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid #f1f3f5; font-size: .88rem; }
.ui-contact:last-child { border-bottom: 0; }
.ui-contact form { margin: 0; }

.ui-timeline { position: relative; padding-left: 22px; }
.ui-timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: #e5e7eb; }
.ui-tl-item { position: relative; padding: .3rem 0 .9rem; }
.ui-tl-item::before { content: ""; position: absolute; left: -19px; top: .6rem; width: 8px; height: 8px; border-radius: 999px; background: #0d6efd; box-shadow: 0 0 0 3px #fff; }
.ui-tl-item[data-tone="done"]::before { background: #198754; }
.ui-tl-item[data-tone="critical"]::before { background: #dc3545; }
.ui-tl-item[data-tone="muted"]::before { background: #adb5bd; }
.ui-tl-title { font-size: .88rem; }
.ui-tl-when { font-size: .78rem; color: #9ca3af; }
.ui-tl-details { font-size: .8rem; color: #6b7280; margin-top: .2rem; }

/* Formulaires */
.ui-form .form-label { font-size: .8rem; color: #6b7280; margin-bottom: .25rem; }
.ui-form .form-control, .ui-form .form-select { min-height: 38px; }
.ui-form .ui-hint { font-size: .78rem; color: #9ca3af; margin-top: .25rem; }
.ui-form .ui-req { color: #b02a37; }
.ui-form-footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.ui-seg .btn-check:checked + .btn { background: #0d6efd; color: #fff; border-color: #0d6efd; }

/* Bascule nouvelle interface */
.ui-switch-bar { display: flex; justify-content: flex-end; align-items: center; padding: .35rem 1.5rem 0; font-size: .82rem; color: #6b7280; }

/* Barre d'ancres collante (fiches longues) */
.ui-anchors { position: sticky; top: 0; z-index: 20; display: flex; gap: 2px; padding: 4px 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; font-size: .85rem; overflow-x: auto; }
.ui-anchors a { padding: 6px 12px; border-radius: 6px; color: #374151; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ui-anchors a:hover { background: #f3f4f6; }
.ui-anchors a.is-on { background: #eff6ff; color: #0b5ed7; }
.ui-anchor-n { color: #9ca3af; font-weight: 400; margin-left: 4px; }
html { scroll-padding-top: 60px; }

/* Suivi d'avancement (fiche projet v2) — liste sections / tâches */
.ui-avc .section-item { border-bottom: 1px solid #e5e7eb; }
.ui-avc .section-item:last-child { border-bottom: 0; }
.ui-avc-section { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 1rem; background: #f9fafb; font-size: .88rem; }
.ui-avc-task { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 1rem .5rem 1.5rem; border-top: 1px solid #f1f3f5; font-size: .88rem; }
.ui-avc-task:hover { background: #f8fafc; }
.ui-avc-actions .ui-pen { opacity: .45; }
.ui-avc-task:hover .ui-avc-actions .ui-pen { opacity: 1; }
.ui-avc-task[data-done="1"].is-hidden { display: none; }
.ui-avc .handle-section, .ui-avc .handle-task { display: none; }
.ui-avc .task-item.sortable-ghost { background: #eff6ff; }
.ui-blockers-empty > .card { display: none; }         /* section blocages masquée sans blocage actif (modales conservées) */
.ui-avc .ui-avc-task { padding-left: 1rem; }
.ui-avc .ui-avc-task .text-truncate { max-width: 100%; }

/* Édition sur place (crayon → champs dans la carte) */
.ui-edit-form { display: none; }
.is-editing .ui-edit-form { display: block; }
.is-editing .ui-edit-view { display: none; }


/* ── Tâches (fiche projet v2) : une ligne, centrée verticalement, sans débordement ── */
.ui-avc-task { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .75rem .45rem 1rem; }
.ui-avc-task > span:first-child { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.ui-avc-task > span:first-child > i, .ui-avc-task > span:first-child > .handle-task { flex-shrink: 0; }
.ui-avc-task > span:first-child > .min-w-0 { flex: 1 1 auto; min-width: 0; }
.ui-avc-task .ui-task-name { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.ui-avc-task .ui-muted.text-truncate { display: block; max-width: 100%; }
.ui-avc-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.ui-avc-actions .ui-muted { line-height: 1; }
.ui-avc-actions .btn-sm { display: inline-flex; align-items: center; line-height: 1.2; padding: .15rem .45rem; font-size: .75rem; }
.ui-avc-actions .ui-pen { width: 24px; height: 24px; }
.ui-avc-section > span:first-child { flex: 1 1 auto; min-width: 0; }

/* Bouton « attention » doux (charte) — ex. Rattacher */
.ui-btn-attention { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.ui-btn-attention:hover { background: #ffe69c; color: #664d03; }
.ui-kv-attention { background: #fffdf5; }