/* =============================================================================
   protable.css — Composant « tableau professionnel » réutilisable
   -----------------------------------------------------------------------------
   Deux responsabilités séparées :
   • .pro-table         → l'APPARENCE (entêtes verts, zébrures, hover, bordures).
                          Utilisable seul, sans JavaScript.
   • [data-protable]    → le COMPORTEMENT (recherche, tri, pagination, saut de
                          page) ajouté par pattern/js/protable.js.
   Compatible avec .rtable (bascule carte sur mobile, cf. responsive.css).
   ============================================================================= */

/* ── Apparence du tableau ─────────────────────────────────────────────────── */
.pro-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--white,#fff)}
.pro-table thead th{
    background:var(--green-dark,#1f5136);color:#fff;
    padding:.6rem .75rem;text-align:left;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    white-space:nowrap;border-right:1px solid rgba(255,255,255,.12);
    position:sticky;top:0;z-index:2;
}
.pro-table thead th:last-child{border-right:none}
.pro-table tbody td{
    padding:.5rem .75rem;vertical-align:top;
    border-bottom:.5px solid var(--border-soft,#eee);
    border-right:.5px solid var(--border-soft,#eee);
}
.pro-table tbody td:last-child{border-right:none}
.pro-table tbody tr:nth-child(even){background:var(--surface,#fafafa)}
.pro-table tbody tr:hover{background:var(--green-light,#eef7f1)}
.pro-table .num{text-align:right;font-variant-numeric:tabular-nums}
.pro-table .mono{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px}
.pro-table .muted{color:var(--muted,#888)}

/* Entêtes triables */
.pro-table thead th.pt-sortable{cursor:pointer;user-select:none;padding-right:1.15rem;position:sticky}
.pro-table thead th.pt-sortable:hover{background:var(--green-mid,#2e7d52)}
.pro-table thead th.pt-sortable::after{
    content:"⇅";opacity:.45;font-size:9px;position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}
.pro-table thead th.pt-asc::after{content:"▲";opacity:1}
.pro-table thead th.pt-desc::after{content:"▼";opacity:1}
.pro-table thead th.pt-sortable:focus-visible{outline:2px solid #fff;outline-offset:-3px}

/* ── Chrome (barre d'outils, scroll, pager) ───────────────────────────────── */
.pt-wrap{display:block}
.pt-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:0 0 .8rem}
.pt-search{display:flex;align-items:center;gap:.5rem;flex:1 1 300px;max-width:460px;
    background:var(--bg,#f6f6f6);border:1px solid var(--border,#e2e2e2);
    border-radius:var(--radius-md,8px);padding:0 .7rem;min-height:40px}
.pt-search:focus-within{border-color:var(--green-mid,#2e7d52);box-shadow:0 0 0 3px rgba(46,125,82,.12)}
.pt-search svg{color:var(--muted,#888);flex-shrink:0}
.pt-search input{flex:1;border:none;background:none;outline:none;font-size:14px;color:var(--text,#222);min-height:38px}
.pt-per,.pt-filter{min-height:40px;border:1px solid var(--border,#e2e2e2);border-radius:var(--radius-md,8px);
    background:var(--white,#fff);padding:0 .6rem;font-size:13px;color:var(--text,#222);cursor:pointer}
.pt-filter{color:var(--text,#222)}
.pt-count{font-size:12.5px;color:var(--muted,#888);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border,#e2e2e2);
    border-radius:var(--radius-md,8px)}
.pt-empty{text-align:center;padding:2.6rem 1rem;color:var(--muted,#888);font-size:13px}

.pt-pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:.9rem 0 .2rem}
.pt-pg{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
    padding:0 9px;border:1px solid var(--border,#e2e2e2);background:var(--white,#fff);
    border-radius:var(--radius-sm,6px);font-size:13px;color:var(--text,#222);cursor:pointer;
    text-decoration:none;font-variant-numeric:tabular-nums}
.pt-pg:hover:not(.active):not(.disabled){border-color:var(--green-mid,#2e7d52);color:var(--green-mid,#2e7d52)}
.pt-pg.active{background:var(--green-mid,#2e7d52);border-color:var(--green-mid,#2e7d52);color:#fff;font-weight:700}
.pt-pg.disabled{opacity:.4;cursor:default}
.pt-pg:focus-visible{outline:2px solid var(--green-mid,#2e7d52);outline-offset:1px}
.pt-dots{padding:0 3px;color:var(--hint,#aaa)}
.pt-jump{display:inline-flex;align-items:center;gap:.35rem;margin-left:.6rem;font-size:12.5px;color:var(--muted,#888)}
.pt-jump input{width:56px;height:34px;text-align:center;border:1px solid var(--border,#e2e2e2);
    border-radius:var(--radius-sm,6px);font-size:13px;color:var(--text,#222)}
.pt-jump input:focus-visible{outline:2px solid var(--green-mid,#2e7d52);outline-offset:1px}

/* Cluster de boutons d'action en fin de ligne : s'aligne à droite et passe à la
   ligne au lieu de déborder de la cellule (au lieu d'élargir/déborder le tableau). */
.row-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-end}
.row-actions>.btn{white-space:nowrap}

@media (max-width:760px){
    .pt-count{margin-left:0}
    .pt-jump{margin-left:0}
    /* En mode carte (.rtable), le conteneur scroll ne doit pas encadrer */
    .rtable.pro-table + .pt-empty{}
    /* Boutons d'action centrés et bien espacés en mode carte */
    .rtable td .row-actions{justify-content:center;gap:.5rem}
}