/* DESIGN.md §12 — utilities-first helpers (sortie des inline styles).
 * Convention :
 *   .mt-{0,1,2,3,4,5,6,8,10,12}  margin-top  ↑ tokens --space-*
 *   .mb-{...}                    margin-bottom
 *   .mx-{...}, .my-{...}, .p-{...}
 *   .gap-{...}
 *   .text-{xs,sm,md,lg,h4,h3,h2,h1}
 *   .text-{primary,secondary,danger,success,warning,peach,white}
 *   .font-{display,display-regular,body,mono}
 *   .flex, .flex-col, .grid-{2,3,4}, .items-center, .justify-{end,center,between}
 *   .w-full, .max-w-{narrow,content}
 *   .nav__badge (badge peach pour compteurs)
 *
 * À utiliser dans les templates au lieu de style="...". Exception toléré uniquement
 * pour valeurs vraiment one-shot (couleur dynamique selon donnée DB).
 */

/* === Spacing === */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }

.p-0 { padding: 0 !important; }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-10 { padding: var(--space-10); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Full-bleed dans .app-main : déborde sur les marges horizontales du conteneur */
.bleed-x { margin-left: calc(var(--space-6) * -1); margin-right: calc(var(--space-6) * -1); }

/* === Layout === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; }
.grid-auto-end { display: grid; grid-template-columns: 1fr auto; }

@media (max-width: 720px) {
    .grid-2, .grid-3, .grid-4, .grid-1-2, .grid-2-1 { grid-template-columns: 1fr; }
}

/* === Width === */
.w-full { width: 100%; }
.max-w-narrow { max-width: var(--max-narrow); }
.max-w-content { max-width: var(--max-content); }
.max-w-form { max-width: 720px; }
.max-w-modal { max-width: 480px; }

/* === Typography utilities === */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-h4 { font-size: var(--text-h4); }
.text-h3 { font-size: var(--text-h3); }
.text-h2 { font-size: var(--text-h2); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.text-tracking-wide { letter-spacing: var(--tracking-wide); }
.text-tracking-widest { letter-spacing: var(--tracking-widest); }

.font-display { font-family: var(--font-display); font-weight: 700; }
.font-display-regular { font-family: var(--font-display-regular); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }

.text-ink { color: var(--ink-900); }
.text-ink-700 { color: var(--ink-700); }
.text-secondary { color: var(--pc-secondary); }
.text-primary { color: var(--pc-primary); }
.text-peach { color: var(--pc-peach-dark); }
.text-white { color: var(--pc-white); }
.text-success { color: var(--success-700); }
.text-warning { color: var(--warning-700); }
.text-danger { color: var(--danger-700); }

/* === Backgrounds === */
.bg-white { background: var(--pc-white); }
.bg-paper { background: var(--pc-paper); }
.bg-paper-100 { background: var(--paper-100, var(--pc-paper)); }
.bg-primary { background: var(--pc-primary); color: var(--pc-white); }
.bg-primary-soft { background: var(--pc-primary-soft); }
.bg-peach-soft { background: var(--pc-peach-soft); }
.bg-danger-soft { background: var(--danger-100); }

/* === Borders & shadow === */
.border { border: 1px solid var(--pc-line); }
.border-l-primary { border-left: 3px solid var(--pc-primary); }
.border-l-peach { border-left: 3px solid var(--pc-peach); }
.border-l-danger { border-left: 3px solid var(--danger-700); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.shadow-low { box-shadow: var(--shadow-low); }

/* === Helpers cards/sections === */
.stack > * + * { margin-top: var(--space-4); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }

/* Inline pre-formatted block (preview message, exemple curl, etc.) */
.code-block {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--pc-paper);
    padding: var(--space-4);
    border-left: 3px solid var(--pc-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    white-space: pre-wrap;
    margin: var(--space-2) 0;
    color: var(--ink-900);
    overflow-x: auto;
}
.code-block--peach { border-left-color: var(--pc-peach); }

/* Liste compacte clé-valeur */
.kv {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 0;
}
.kv dt {
    color: var(--ink-700);
    font-size: var(--text-sm);
    font-family: var(--font-body);
}
.kv dd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.kv dd.is-danger { color: var(--danger-700); }

/* Wrapper d'actions à droite (pour boutons en bas de form) */
.actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
.actions--start { justify-content: flex-start; }
.actions--between { justify-content: space-between; }

/* Lien "retour" éditorial (← Précédent) */
.back-link {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--pc-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.back-link:hover { color: var(--pc-primary); text-decoration: underline; }

/* Page heading row : titre + actions à droite */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    gap: var(--space-3);
}

/* Empty state */
.empty {
    text-align: center;
    padding: var(--space-12) var(--space-5);
    max-width: 480px;
    margin: 0 auto;
}
.empty__title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    color: var(--pc-primary);
    margin: var(--space-2) 0;
}
.empty__lead {
    font-family: var(--font-body);
    color: var(--pc-secondary);
    font-size: var(--text-md);
    margin: 0 0 var(--space-5);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.pagination__current {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--pc-secondary);
}

/* Badge dans la nav latérale (compte de pending, etc.) */
.nav__badge {
    background: var(--pc-peach);
    color: var(--ink-900);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    display: inline-block;
}
.nav__item--with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* User-select (pour clé API affichée 1× : tout sélectionner d'un clic) */
.select-all { user-select: all; word-break: break-all; }

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Display utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
@media (max-width: 720px) {
    .d-none-sm { display: none; }
}