/* Attestations — charte commune, tableau dans le style du tableau Silaé de la Box. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--kb-font); color: var(--kb-text); background: var(--kb-bg); font-size: 13px; }
button, input, select { font-family: inherit; font-size: 13px; }
.hidden { display: none !important; }
.muted { color: var(--kb-muted); }
.mono { font-family: var(--kb-mono); }

.at-top { display: flex; align-items: center; gap: 12px; background: var(--kb-primary); color: #fff; padding: 0 16px; height: 56px; }
.at-brand { display: flex; align-items: center; gap: 10px; }
.at-brand .logo-img { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.at-brand .logo-text { font-weight: 700; font-size: 14px; line-height: 1.1; }
.at-brand .logo-text small { display: block; font-weight: 500; font-size: 10px; opacity: .8; }
.at-top-right { margin-left: auto; display: flex; gap: 14px; font-size: 12px; align-items: center; }
.at-top-right a { color: #fff; text-decoration: none; }

.at-main { padding: 14px 16px 40px; }
.at-empty { padding: 40px; text-align: center; color: var(--kb-muted); }
.at-card { background: var(--kb-surface); border: 1px solid var(--kb-border); border-radius: var(--kb-radius); box-shadow: var(--shadow-sm); }
.at-barre { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; font-size: 12px; }
.at-barre input[type=search], .at-barre select { padding: 6px 10px; border: 1px solid var(--kb-border); border-radius: 6px; background: #fff; }
.at-barre input[type=search] { width: 220px; }
.at-sp { flex: 1; }
.at-btn { background: var(--kb-surface); border: 1px solid var(--kb-border); color: var(--kb-text); padding: 6px 12px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
.at-btn:hover { border-color: var(--kb-primary); }
.at-btn.primary { background: var(--kb-primary); border-color: var(--kb-primary); color: #fff; }
.at-btn.warn { background: var(--kb-st-warn-bg); border-color: #f0c27a; color: var(--kb-st-warn); font-weight: 600; }
.at-compte { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.at-compte:hover { background: rgba(0,0,0,.05); }
.at-compte.on { border-color: currentColor; background: rgba(0,0,0,.07); font-weight: 600; }
.at-compte.expiree i { background: #e03131; }
.at-compte.manquante i { background: #fff; box-shadow: inset 0 0 0 2px #e03131; }
.at-compte i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.at-info { padding: 0 14px 10px; font-size: 12px; color: var(--kb-muted-strong); }

.at-wrap { overflow: auto; max-height: calc(100vh - 230px); border-top: 1px solid var(--kb-border); }
table.at-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.at-t th { position: sticky; top: 0; background: #ececee; font-weight: 600; text-align: left; padding: 8px; z-index: 1; white-space: nowrap; }
.at-t th.org { width: 104px; text-align: center; }
.at-t td { padding: 5px 8px; border-bottom: 1px solid var(--kb-border-light); white-space: nowrap; }
.at-t tbody tr:hover td.txt { background: var(--kb-hover-row); }
.at-t td.c { border: 2px solid #fff; text-align: center; color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; padding: 0 4px; height: 26px; }
.at-t td.c.vert, .at-compte.vert i { background: #1a9d54; }
.at-t td.c.orange, .at-compte.orange i { background: #f08c00; }
.at-t td.c.rouge, .at-compte.rouge i { background: #e03131; }
.at-t td.c.gris { background: #ececee; color: transparent; cursor: default; }
.at-t td.nom { cursor: pointer; }
.at-t td.nom:hover { color: var(--kb-primary); text-decoration: underline; }
.pill { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; background: var(--kb-st-neutral-bg); color: var(--kb-st-neutral); margin-left: 4px; }
.pill.info { background: var(--kb-st-info-bg); color: var(--kb-st-info); }

.at-menu { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--kb-border); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 4px 0; min-width: 240px; }
.at-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 14px; cursor: pointer; }
.at-menu button:hover { background: var(--kb-hover-row); }

.at-overlay { position: fixed; inset: 0; background: rgba(20,24,32,.35); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow: auto; }
.at-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 900px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.at-modal h2 { margin: 0; font-size: 16px; padding: 14px 18px; border-bottom: 1px solid var(--kb-border); }
.at-modal .body { padding: 14px 18px; }
.at-modal .foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--kb-border); }
.at-modal table { width: 100%; border-collapse: collapse; }
.at-modal td, .at-modal th { padding: 6px 6px; border-bottom: 1px solid var(--kb-border-light); text-align: left; font-size: 12px; }
.at-modal input, .at-modal select { padding: 4px 6px; border: 1px solid var(--kb-border); border-radius: 5px; }

.at-drop { position: fixed; inset: 12px; border: 3px dashed var(--kb-primary); border-radius: 16px; background: rgba(10,132,255,.08); z-index: 70; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--kb-primary); pointer-events: none; }
.at-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1d1d1f; color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 80; max-width: 80vw; }
.at-toast.err { background: var(--kb-danger); }
.at-t td.dette { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kb-ok); cursor: help; }
.at-t td.dette.due { color: var(--kb-danger); }
.at-modal.large { max-width: 1080px; }   /* « À vérifier » : +20 % de largeur */
.at-t td.c.nr, .at-compte.nr i { background: repeating-linear-gradient(45deg, #dcdce0 0 6px, #ececee 6px 12px); color: #6a6a6e; }
/* Dette dans la case de l'attestation (option B, 27/10/2026) */
.at-t th.org { width: 150px; }
.at-t td.c .dt { font-weight: 700; }
.at-t td.c .dt.due { background: #fff; color: var(--kb-danger); border-radius: 4px; padding: 0 4px; }
/* Tri et filtres par colonne (28/10/2026) */
.at-t th.tri { cursor: pointer; user-select: none; }
.at-t th.tri:hover { background: #e0e0e4; }
.at-t th.tri .fl { color: #a0a0a6; font-size: 10px; }
.at-t th.tri.on .fl { color: var(--kb-primary); }
.at-t tr.at-filtres th { top: 33px; background: #f5f5f7; padding: 4px 6px; border-bottom: 1px solid var(--kb-border); }
.at-t tr.at-filtres input, .at-t tr.at-filtres select { width: 100%; padding: 3px 6px; border: 1px solid var(--kb-border); border-radius: 5px; font-size: 11px; background: #fff; font-weight: 400; }
.at-t tr.at-filtres select.actif { border-color: var(--kb-primary); background: var(--kb-st-info-bg); }
/* Attestation envoyée au client (28/10/2026) */
.at-t td.c .envoye { display: inline-block; background: #fff; color: #1a9d54; border-radius: 50%; width: 14px; height: 14px; line-height: 14px; font-size: 10px; font-weight: 800; }
.at-t td.c.orange .envoye { color: #f08c00; }
.at-t td.c.rouge .envoye { color: #e03131; }
.pill.ok { background: var(--kb-st-ok-bg, #e3f6ea); color: var(--kb-ok, #1a9d54); }
/* Attestation refusée par l'organisme : compte non à jour (28/10/2026) */
.at-t td.c.refus, .at-compte.refus i { background: repeating-linear-gradient(45deg, #9b1c1c 0 6px, #b42323 6px 12px); }
.at-t td.c.refus { color: #fff; }