/* Panneau des Kludgets (shortcode klugle_kludgets, page « 16. Kludgets ») : liste des appareils, pastilles de statut, commandes ; préfixe .kld-.
   Feuille autonome (jetons --tcc-* lus avec repli en dur, comme page-head.css). Aucune classe en « ad », « adv » ni « banner » (bloqueurs de publicité). */
/* Date: 2026-10-20 ; Version: 1.2.0 ; GSt / Claude ; Tableau à colonnes ajustables, triables et filtrables : disposition fixe (largeurs posées par kludgets.js), poignée .kld-col-resize au bord droit de chaque titre, titres-boutons .kld-sort avec flèche de tri, ligne de filtres .kld-filter-row, bouton « Effacer les filtres » ; texte des cellules coupé proprement quand la colonne est étroite. */
/* Date: 2026-10-15 ; Version: 1.1.0 ; GSt / Claude ; HostName cliquable (.kld-hostlink) : bouton sans habillage, souligné pointillé, vert fluo au survol. */
/* Date: 2026-10-12 ; Version: 1.0.0 ; GSt / Claude ; Création. */

.kld-wrap { width: 100%; box-sizing: border-box; padding: 14px; font-family: sans-serif; color: var(--tcc-texte, #F4F6F2); text-transform: none; }
.kld-panel {
    background: rgba(13, 15, 14, 0.94); border: 1px solid var(--tcc-vert-klugle, #009513); border-radius: 10px;
    padding: 14px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

/* ── Champs et boutons ───────────────────────────────────────────────────── */
.kld-input {
    box-sizing: border-box; padding: 7px 10px; border-radius: 6px; font: 400 0.88rem/1.3 sans-serif;
    background: #0D0F0E; color: var(--tcc-texte, #F4F6F2); border: 1px solid rgba(223, 255, 158, 0.35);
}
.kld-input:focus { outline: none; border-color: var(--tcc-fluo, #C6FF00); box-shadow: 0 0 0 2px rgba(198, 255, 0, 0.18); }
.kld-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    padding: 7px 12px; border-radius: 6px; font: 600 0.82rem/1.2 sans-serif; white-space: nowrap;
    background: #1a201c; color: var(--tcc-texte, #F4F6F2); border: 1px solid rgba(223, 255, 158, 0.35);
    transition: background 0.15s, border-color 0.15s;
}
.kld-btn:hover:not(:disabled) { background: #26302a; border-color: var(--tcc-fluo, #C6FF00); }
.kld-btn:focus-visible { outline: 2px solid var(--tcc-fluo, #C6FF00); outline-offset: 2px; }
.kld-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.kld-btn-primary { background: var(--tcc-vert-klugle, #009513); border-color: var(--tcc-vert-klugle, #009513); color: #fff; }
.kld-btn-primary:hover:not(:disabled) { background: #00b318; }
.kld-btn-danger { background: #a93226; border-color: #c0392b; color: #fff; }
.kld-btn-danger:hover:not(:disabled) { background: #c0392b; border-color: #e74c3c; }
.kld-btn-icon { padding: 6px 8px; min-width: 32px; }

/* ── Avertissement (bridge ou broker non configuré) ──────────────────────── */
.kld-notice {
    margin: 0 0 12px; padding: 9px 12px; border-radius: 6px; font-size: 0.86rem; line-height: 1.45;
    background: rgba(243, 156, 18, 0.12); border: 1px solid rgba(243, 156, 18, 0.6); color: #ffd58a;
}

/* ── Filtres par statut ──────────────────────────────────────────────────── */
.kld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.kld-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 11px; border-radius: 999px;
    font: 600 0.8rem/1.2 sans-serif; background: #151a17; color: #cfd6d0; border: 1px solid rgba(255, 255, 255, 0.16);
}
.kld-chip:hover { border-color: rgba(255, 255, 255, 0.4); }
.kld-chip[aria-pressed="true"] { background: #26302a; color: #fff; border-color: var(--tcc-fluo, #C6FF00); }
.kld-chip-count { font-variant-numeric: tabular-nums; opacity: 0.8; }

/* ── Tableau ─────────────────────────────────────────────────────────────── */
.kld-table-box { width: 100%; overflow-x: auto; border: 1px solid rgba(223, 255, 158, 0.18); border-radius: 8px; }
.kld-table { width: 100%; min-width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 0.86rem; }
.kld-table th {
    position: sticky; top: 0; z-index: 2; padding: 10px; background: #101412; overflow: visible;
    color: var(--tcc-vert-clair, #DFFF9E); font: 700 0.76rem/1.2 sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
    border-bottom: 2px solid var(--tcc-vert-klugle, #009513);
}
.kld-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: middle; overflow: hidden; overflow-wrap: anywhere; }
.kld-table th.kld-th-actions { text-align: right; }

/* v1.2.0 — titres triables : tout le titre est un bouton, la flèche dit le sens. */
.kld-sort {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kld-sort i { opacity: 0.45; font-size: 0.85em; }
.kld-sort:hover i, .kld-sort.is-actif i { opacity: 1; color: var(--tcc-fluo, #C6FF00); }
.kld-sort:focus-visible { outline: 2px solid var(--tcc-fluo, #C6FF00); outline-offset: 2px; border-radius: 3px; }
.kld-th-label { white-space: nowrap; }

/* v1.2.0 — poignée de largeur, au bord droit de chaque titre (le titre, « sticky », la positionne). */
.kld-col-resize {
    position: absolute; top: 0; right: 0; z-index: 3; width: 9px; height: 100%; cursor: col-resize; touch-action: none;   /* DANS son titre : à cheval, le titre voisin (sticky, peint après) prenait le clic */
}
.kld-col-resize::after {
    content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 1px; background: rgba(223, 255, 158, 0.25); transition: background 0.15s;
}
.kld-col-resize:hover::after, .kld-col-resize:focus-visible::after, .kld-col-resize.is-glisse::after { background: var(--tcc-fluo, #C6FF00); width: 2px; }
.kld-col-resize:focus-visible { outline: none; }
.kld-th-actions .kld-col-resize { right: auto; left: 0; }
.kld-th-actions .kld-col-resize::after { right: auto; left: 0; }   /* la dernière colonne s'ajuste par son bord gauche */

/* v1.2.0 — ligne de filtres sous les titres. */
.kld-table tr.kld-filter-row th {
    position: static; padding: 6px 8px; background: #0d110f; border-bottom: 1px solid rgba(223, 255, 158, 0.18);
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.kld-col-filter { width: 100%; padding: 5px 8px; font-size: 0.8rem; }
.kld-btn-clear { padding: 5px 10px; font-size: 0.76rem; }
.kld-btn-clear[hidden] { display: none; }
.kld-table tbody tr:hover { background: rgba(198, 255, 0, 0.04); }
.kld-empty { text-align: center; padding: 30px 10px !important; color: #93A199; }
.kld-foot { margin: 10px 0 0; font-size: 0.78rem; color: #93A199; }

.kld-name { font-weight: 700; color: #fff; }
.kld-sub { display: block; margin-top: 2px; font: 400 0.76rem/1.3 ui-monospace, Consolas, monospace; color: #93A199; }
.kld-hostlink {
    background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.kld-hostlink:hover, .kld-hostlink:focus-visible { color: var(--tcc-fluo, #C6FF00); }
.kld-muted { color: #7f8c84; }

/* Pastille de statut : la couleur ne porte jamais seule le sens, le mot est toujours écrit. */
.kld-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
    font: 700 0.76rem/1.3 sans-serif; border: 1px solid transparent; white-space: nowrap;
}
.kld-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kld-status-new    { color: #5dade2; background: rgba(52, 152, 219, 0.14); border-color: rgba(52, 152, 219, 0.5); }
.kld-status-active { color: #58d68d; background: rgba(46, 204, 113, 0.14); border-color: rgba(46, 204, 113, 0.5); }
.kld-status-absent { color: #ec7063; background: rgba(231, 76, 60, 0.14); border-color: rgba(231, 76, 60, 0.5); }
.kld-status-never  { color: #aab7b0; background: rgba(170, 183, 176, 0.1); border-color: rgba(170, 183, 176, 0.4); }
.kld-link { display: block; margin-top: 4px; font-size: 0.74rem; color: #93A199; }
.kld-link-on { color: #58d68d; }

/* Relais : un bouton par sortie, qui dit son état et le bascule. */
.kld-relay {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; margin: 0 4px 3px 0; padding: 3px 9px; border-radius: 5px;
    font: 700 0.76rem/1.3 sans-serif; background: #1a201c; color: #cfd6d0; border: 1px solid rgba(255, 255, 255, 0.2);
}
.kld-relay:hover:not(:disabled) { border-color: var(--tcc-fluo, #C6FF00); }
.kld-relay:disabled { opacity: 0.45; cursor: not-allowed; }
.kld-relay-on { background: rgba(46, 204, 113, 0.2); color: #7dffb0; border-color: rgba(46, 204, 113, 0.7); }
.kld-meta { display: block; margin-top: 3px; font-size: 0.76rem; color: #93A199; }

.kld-hold { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 0.78rem; background: rgba(241, 196, 15, 0.14); border: 1px solid rgba(241, 196, 15, 0.5); color: #f9e79f; }

.kld-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.kld-table td .kld-name, .kld-table td .kld-sub { overflow: hidden; text-overflow: ellipsis; }

/* ── Fenêtres ────────────────────────────────────────────────────────────── */
.kld-modal {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0, 0, 0, 0.78);
}
.kld-modal[hidden] { display: none; }
.kld-modal-box {
    width: min(460px, 100%); box-sizing: border-box; padding: 18px 20px; border-radius: 10px;
    background: #101412; border: 1px solid var(--tcc-vert-klugle, #009513); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8);
    color: var(--tcc-texte, #F4F6F2); font-family: sans-serif;
}
.kld-modal-box h3 { margin: 0 0 12px; font: 700 1.05rem/1.3 'Cinzel', serif; color: var(--tcc-fluo, #C6FF00); }
.kld-modal-box p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; }
.kld-field { display: block; margin: 0 0 12px; }
.kld-field span { display: block; margin-bottom: 4px; font-size: 0.78rem; color: var(--tcc-vert-clair, #DFFF9E); }
.kld-field .kld-input { width: 100%; }
.kld-hint { font-size: 0.8rem !important; color: #93A199; word-break: break-all; }
.kld-hint code { color: #DFFF9E; background: #0D0F0E; padding: 1px 5px; border-radius: 3px; }
.kld-hint a { color: var(--tcc-fluo, #C6FF00); }
.kld-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ── Message bref après une commande ─────────────────────────────────────── */
.kld-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100001; max-width: min(520px, 92vw);
    padding: 10px 16px; border-radius: 8px; font: 600 0.88rem/1.4 sans-serif; text-align: center;
    background: #101412; color: #fff; border: 1px solid var(--tcc-vert-klugle, #009513); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}
.kld-toast[hidden] { display: none; }
.kld-toast-error { border-color: #e74c3c; color: #ffb3aa; }

@media (max-width: 720px) {
    .kld-wrap { padding: 8px; }
    .kld-panel { padding: 12px; }
    .kg-page-tools .kld-input { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .kld-btn { transition: none; } }