/* Generated by OrchestKit Claude Plugin - 2026-08-29 */

/*
 * Composants de tableau réutilisables (refonte visuelle, 2026-08-29).
 *
 * Chargé GLOBALEMENT (importé par assets/app.js, comme app.css/forms.css) —
 * classes `.skh-table*`/`.skh-pagination` disponibles sur toute page
 * authentifiée. Même principe que forms.css : une seule source de vérité,
 * pas de style de tableau redéfini localement par écran.
 *
 * Jetons de couleur (--skh-*) : définis une seule fois dans app.css.
 */

.skh-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.9rem;
    color: var(--skh-ink);
}

.skh-table th {
    /* Revue 2026-08-29 : 0.6875rem/0.1em (≈11px) jugé fatigant sur un
       écran de tableau consulté toute la journée — monté à 0.75rem/0.08em.
       Non vérifié en conditions réelles (éclairage d'entrepôt, écran bas
       de gamme) depuis cet environnement — signalé, pas supposé. */
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--skh-steel);
    text-align: left;
    background: var(--skh-surface);
    padding: 0.65rem 0.85rem;
    border-bottom: 1.5px solid var(--skh-line);
}

.skh-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--skh-line);
    vertical-align: middle;
}

.skh-table tbody tr:hover {
    background: var(--skh-surface);
}

.skh-table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Badge de statut --- */
/* Remplace les badges Bootstrap bruts (bg-warning/bg-info/bg-success) par
   un pastille sobre dans le vocabulaire --skh-* : contour fin + pastille
   colorée, pas un aplat de couleur plein comme Bootstrap. */
.skh-badge {
    /* CORRECTIF (04/09/2026, demande du porteur de projet) : le texte
       porte maintenant la MÊME couleur sémantique que la pastille (plus
       lisible d'un coup d'œil) — avant, le texte restait toujours en
       `--skh-ink`, seule la pastille était colorée. */
    --skh-badge-couleur: var(--skh-steel);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--skh-badge-couleur);
    border: 1.5px solid var(--skh-line);
    border-radius: 999px;
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
}

.skh-badge::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--skh-badge-couleur);
}

.skh-badge--attente {
    --skh-badge-couleur: var(--skh-warning);
}

.skh-badge--partielle {
    --skh-badge-couleur: var(--skh-steel);
}

.skh-badge--complete {
    --skh-badge-couleur: var(--skh-success);
}

/* Ligne de checkbox d'en-tête ou de ligne — même accent que les cases du
   système de formulaire, pas la couleur par défaut du navigateur. */
.skh-table input[type='checkbox'] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--skh-ink);
}

/* Cellule Action : regroupe boutons/liens/formulaires de ligne sans jamais
   dépendre d'un `style="display:inline"` posé au cas par cas dans le
   template. */
.skh-table-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.skh-table-actions form {
    margin: 0;
    display: contents;
}

/* --- Pagination --- */
.skh-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--skh-steel);
}

.skh-pagination a {
    color: var(--skh-ink);
    font-weight: 600;
    text-decoration: none;
}

.skh-pagination a:hover {
    text-decoration: underline;
}

.skh-pagination__courante {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* --- Pagination numérotée (Première/Précédente/1 2 3 …/Suivante/Dernière) --- */
.skh-pagination--numerotee {
    flex-wrap: wrap;
    gap: 0.35rem;
}

.skh-pagination__lien,
.skh-pagination__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
}

.skh-pagination__lien {
    font-weight: 600;
    white-space: nowrap;
}

.skh-pagination__lien--desactive {
    pointer-events: none;
    color: var(--skh-line);
}

.skh-pagination__numero {
    color: var(--skh-ink);
    border: 1.5px solid transparent;
}

.skh-pagination__numero:hover {
    border-color: var(--skh-line);
    text-decoration: none;
}

.skh-pagination__numero--courant {
    border-color: var(--skh-ink);
    background: var(--skh-signal);
    font-weight: 700;
}

.skh-pagination__ellipse {
    color: var(--skh-line);
    padding: 0 0.15rem;
}

/* --- Barre d'outils au-dessus d'un tableau (sélection, impression...) --- */
.skh-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

/* --- En-tête de page avec action alignée à droite du titre --- */
/* Demande explicite du porteur de projet (04/09/2026) : le bouton d'action
   principal reste sur la MÊME ligne que le <h1>, plutôt que dans un
   toolbar séparé en dessous — pour cet écran précis. */
.skh-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.skh-page-header h1 {
    margin-bottom: 0;
}

/* --- Filtre de dates compact, en une ligne --- */
/* Remplace le patron skh-form/skh-row (pensé pour des formulaires de
   saisie) sur les écrans où le filtre n'est qu'un accessoire léger
   au-dessus d'un tableau — trop d'espace/de mise en page pour deux champs
   date + deux boutons (retour porteur de projet, 04/09/2026). */
.skh-filtre-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.skh-filtre-compact label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--skh-ink);
}

.skh-filtre-compact .skh-input {
    width: auto;
}

/* --- Résumé libellé/valeur (ex. écran de confirmation, fiche document) --- */
/* Remplace un `<table><tr><th>Label</th><td>Valeur</td></tr>` pour une
   fiche à UN SEUL enregistrement — sémantiquement une liste de
   description, pas un tableau, et visuellement plus lisible qu'un
   empilement `<strong>Label :</strong> valeur<br>`. */
.skh-summary {
    border: 1.5px solid var(--skh-line);
    border-radius: 9px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--skh-card);
}

.skh-summary__row {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--skh-line);
}

.skh-summary__row:last-child {
    border-bottom: none;
}

.skh-summary__label {
    flex: 0 0 12rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--skh-steel);
}

.skh-summary__value {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--skh-ink);
}

/* Bloc d'ouverture d'un écran (ex. client + n° de commande sur l'écran de
   préparation d'un BL) — demande du porteur de projet, 2026-08-30 : "un
   peu plus grand" que le résumé standard, pour rester le premier repère
   visuel de la page. */
.skh-summary--lg {
    padding: 1.5rem 1.75rem;
}

.skh-summary--lg .skh-summary__label {
    font-size: 0.9rem;
}

.skh-summary--lg .skh-summary__value {
    font-size: 1.1rem;
    font-weight: 600;
}

/* --- Titres de section d'un document en lecture seule --- */
/* h2/h3/h4 restylés localement (classe explicite, pas une règle globale
   sur h2/h3/h4 — trop d'écrans non audités utilisent ces balises pour
   autre chose). Ligne pointillée en haut, même motif que les sections de
   formulaire, sauf pour la toute première (`:first-child`). */
.skh-doc-section {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--skh-ink);
    margin: 1.75rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1.5px dashed var(--skh-line);
}

.skh-doc-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.skh-doc-subsection {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--skh-steel);
    margin: 1.25rem 0 0.75rem;
}

/* Question de confirmation avant une action décisive (ex. "livrer
   maintenant ?" après l'enregistrement d'une commande) — doit se détacher
   du reste de l'écran en lecture seule, pas rester un <p> de taille
   standard noyé entre le tableau et les boutons. */
.skh-prompt {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--skh-ink);
    margin: 2rem 0 1rem;
}

/* --- Champ de recherche compact au-dessus d'un tableau --- */
.skh-recherche-liste {
    max-width: 24rem;
    margin-bottom: 1.25rem;
}

/* --- Grille de statistiques (ex. fiche produit) --- */
/* Refonte (08/09/2026, demande du porteur de projet, inspirée d'un
   dashboard existant) : remplace les `.card`/`.card-body` Bootstrap bruts
   par le vocabulaire --skh-*. Liseré supérieur fin (pas latéral — un
   liseré latéral épais a été explicitement écarté ailleurs dans ce projet,
   trop proche d'un motif générique d'UI générée) en `--skh-ink`, une seule
   teinte pour les 4 cartes : ce sont des indicateurs neutres, sans urgence
   distincte à coder par couleur. */
.skh-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.skh-stat-card {
    position: relative;
    border: 1.5px solid var(--skh-line);
    border-radius: 9px;
    background: var(--skh-card);
    padding: 1.1rem 1.25rem;
    overflow: hidden;
}

/* Liseré supérieur porté par un pseudo-élément (pas un `border-top` d'une
   autre couleur/épaisseur) : un bord de couleur différente sur un côté
   d'une carte arrondie crée un angle mal raccordé au border-radius — signalé
   par le hook de revue design. Ici la bordure du contour reste uniforme
   sur les 4 côtés, l'accent est un bandeau interne suivant le rayon via
   `overflow: hidden` sur la carte. */
.skh-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--skh-ink);
}

.skh-stat-card__label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--skh-steel);
    margin-bottom: 0.5rem;
}

.skh-stat-card__valeur {
    font-size: 2rem;
    font-weight: 700;
    color: var(--skh-ink);
    line-height: 1;
}

/* --- Onglets (ex. fiche produit : Mouvements/Entrées/Sorties) --- */
/* Comportement de bascule délégué au plugin Tab de Bootstrap déjà chargé
   globalement (`data-bs-toggle="tab"`, qui bascule lui-même les classes
   `.active`/`.show` sans dépendre du nom des classes `.nav-tabs`/`.nav-link`
   d'origine) — seul l'habillage visuel est repris ici, pas de JS
   supplémentaire écrit. */
.skh-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1.5px solid var(--skh-line);
}

.skh-tab {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--skh-steel);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 1rem;
    margin-bottom: -1.5px;
    cursor: pointer;
}

.skh-tab:hover {
    color: var(--skh-ink);
}

.skh-tab.active {
    color: var(--skh-ink);
    border-bottom-color: var(--skh-ink);
}

.skh-tab-content {
    border: 1.5px solid var(--skh-line);
    border-top: none;
    border-radius: 0 0 9px 9px;
    padding: 1.25rem;
}