/* =============================================================================
 * tb2-schemadoc.css — Page « Doc message » (vue schema, layout message).
 * Design Claude Design remappé sur la charte telebib2 (variables --tb2-*).
 * Tout est scopé sous .tb2-sd.
 * ========================================================================== */

.tb2-sd {
    --sd-primary: var(--tb2-primary, #0047AB);
    --sd-dark:    var(--tb2-dark, #1A1D29);
    --sd-bg:      var(--tb2-light, #F3F4F6);
    --sd-border:  var(--tb2-border, #E5E7EB);
    --sd-muted:   var(--tb2-grey, #6B7280);
    --sd-text:    #26303b;
    --sd-mono:    var(--tb2-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    --sd-main:    var(--tb2-font-main, 'DM Sans', system-ui, sans-serif);
    --sd-req:     var(--tb2-modif-txt, #9A3412);
    --sd-err-bg:  var(--tb2-mand-bg, #FEE2E2);
    --sd-err-tx:  var(--tb2-mand-txt, #991B1B);
    font-family: var(--sd-main);
    color: var(--sd-text);
    max-width: var(--tb2-container, 1440px);
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

/* Type chips — couleurs sémantiques par kind (accordées à la charte) */
.tb2-sd {
    --k-list-bg:#e6f3f0; --k-list-fg:#1a6e5c; --k-list-bd:#bfded7;
    --k-comp-bg:#e8eef9; --k-comp-fg:#0047AB; --k-comp-bd:#c9d8f0;
    --k-defs-bg:#f0edf7; --k-defs-fg:#5b4a8f; --k-defs-bd:#d6cfe8;
    --k-prim-bg:#fef3e8; --k-prim-fg:#9A3412; --k-prim-bd:#f0d5bd;
    --k-grey-bg:#f0f2f5; --k-grey-fg:#5a6774; --k-grey-bd:#dde2e8;
    --k-cond-bg:#eef2ff; --k-cond-fg:#3730a3; --k-cond-bd:#c7d2fe;
}

/* ── Sous-barre : onglets + $id ─────────────────────────────────────────── */
.tb2-sd-subbar {
    display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--sd-border); margin: .5rem 0 1.25rem;
}
.tb2-sd-tabs { display: flex; gap: 4px; }
/* Sélecteurs scopés .tb2-sd : le template applique un hover orange global sur
   tous les <button> (background + couleur) — il faut le battre en spécificité. */
.tb2-sd .tb2-sd-tab {
    font: 400 15px var(--sd-main); color: var(--sd-muted);
    background: #fff; border: 1px solid var(--sd-border); border-bottom: none;
    border-radius: 7px 7px 0 0; padding: 9px 18px; margin-bottom: -1px; cursor: pointer;
}
.tb2-sd .tb2-sd-tab:hover {
    background: #f8fafc; color: var(--sd-dark);
}
.tb2-sd .tb2-sd-tab.active,
.tb2-sd .tb2-sd-tab.active:hover {
    font-weight: 700; color: var(--sd-dark);
    background: var(--sd-bg); border-color: var(--sd-border); border-bottom: 1px solid var(--sd-bg);
}
.tb2-sd-tab-badge {
    display: inline-block; margin-left: .35rem; padding: 0 .45rem; font-size: .72rem;
    line-height: 1.5; border-radius: 999px; background: #e2e8f0; color: #334155;
}
.tb2-sd .tb2-sd-tab.active .tb2-sd-tab-badge { background: var(--sd-primary); color: #fff; }
.tb2-sd-subbar-right {
    margin-left: auto; display: flex; gap: 10px; align-items: center;
    padding-bottom: 8px; font-size: 12.5px; color: var(--sd-muted);
}

/* ── Layout deux colonnes ───────────────────────────────────────────────── */
.tb2-sd-layout { display: flex; gap: 20px; align-items: flex-start; }
.tb2-sd-col-main { flex: 1.55; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tb2-sd-col-inspector {
    /* Sous le header fixe du template (--tb2-header-offset), comme les autres colonnes collantes. */
    flex: 1; max-width: 400px; position: sticky; top: calc(var(--tb2-header-offset, 100px) + 16px);
    max-height: calc(100vh - var(--tb2-header-offset, 100px) - 32px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
}
/* Les cartes gardent leur hauteur de contenu. Sans cela, enfants flex d'une
   colonne bornée en hauteur et en overflow:hidden, elles se compressent quand
   la fenêtre est basse — le texte est tronqué et la colonne, qui n'a plus rien
   à faire défiler, ne défile pas. C'est la colonne qui défile, pas la carte. */
.tb2-sd-col-inspector > *,
#tb2-sd-inspector > * { flex: none; }

@media (max-width: 900px) {
    .tb2-sd-layout { flex-direction: column; }
    .tb2-sd-col-inspector { position: static; max-width: none; width: 100%; }
}
/* Fenêtre trop basse pour un volet collant lisible (moins de ~430 px utiles sous
   le header) : l'inspecteur reprend le flux et défile avec la page, en entier. */
@media (max-height: 560px) {
    .tb2-sd-col-inspector { position: static; max-height: none; overflow: visible; }
}
/* #tb2-sd-inspector fond dans le flux : ses cartes + le bloc requis s'empilent
   comme enfants directs de la colonne (même gap). */
#tb2-sd-inspector { display: contents; }

.tb2-sd-card {
    background: #fff; border: 1px solid var(--sd-border);
    border-radius: var(--tb2-radius, 8px); overflow: hidden;
}
.tb2-sd-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8a95a1; }

/* ── Onglet Structure — barre d'outils ──────────────────────────────────── */
.tb2-sd-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--sd-border); background: #fafbfc;
}
.tb2-sd-toolbar input {
    flex: 1; font: 400 13.5px var(--sd-main); color: var(--sd-text);
    border: 1px solid #cdd3da; border-radius: 6px; padding: 7px 12px; outline: none; background: #fff;
}
.tb2-sd-toolbar input:focus { border-color: var(--sd-primary); }

/* ── Onglet Structure — arbre ───────────────────────────────────────────── */
.tb2-sd-tree-head {
    display: flex; gap: 10px; padding: 7px 14px; background: #fafbfc;
    border-bottom: 1px solid var(--sd-border);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8a95a1;
}
.tb2-sd-caretcol { width: 16px; flex: none; }
.tb2-sd-col-name { flex: 1.5; }
.tb2-sd-col-type { flex: .9; }
.tb2-sd-col-card { width: 52px; }

.tb2-sd-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer;
    border-bottom: 1px solid #eef1f4; background: #fff;
}
.tb2-sd-row:hover { background: #f3f6fb; }
.tb2-sd-row.is-selected { background: #eef4fc; box-shadow: inset 3px 0 0 var(--sd-primary); }
.tb2-sd-row.is-error { background: #fffafa; box-shadow: inset 3px 0 0 #d76b6b; }
.tb2-sd-caret {
    width: 16px; flex: none; text-align: center; font-size: 11px; color: var(--sd-muted);
    user-select: none;
}
.tb2-sd-caret.is-leaf { color: #d4d9de; cursor: default; }
.tb2-sd-namecell { flex: 1.5; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.tb2-sd-name { font: 12.5px var(--sd-mono); color: var(--sd-text); white-space: nowrap; }
.tb2-sd-name.is-strong { font-weight: 600; }
.tb2-sd-typecell { flex: .9; min-width: 0; }
.tb2-sd-cardcell { width: 52px; font: 500 11px var(--sd-mono); color: var(--sd-muted); }

.tb2-sd-badge-req { font-size: 10px; font-weight: 700; color: var(--sd-req); }
.tb2-sd-badge-err {
    font: 700 9.5px var(--sd-mono); background: var(--sd-err-bg); color: var(--sd-err-tx);
    border: 1px solid #f0c4c4; border-radius: 3px; padding: 1px 5px;
}
.tb2-sd-chip {
    display: inline-block; font: 500 10.5px var(--sd-mono);
    border-radius: 4px; padding: 1px 7px; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    background: var(--k-grey-bg); color: var(--k-grey-fg); border: 1px solid var(--k-grey-bd);
}
.tb2-sd-chip.k-list { background: var(--k-list-bg); color: var(--k-list-fg); border-color: var(--k-list-bd); }
.tb2-sd-chip.k-comp { background: var(--k-comp-bg); color: var(--k-comp-fg); border-color: var(--k-comp-bd); }
.tb2-sd-chip.k-defs,
.tb2-sd-chip.k-object { background: var(--k-defs-bg); color: var(--k-defs-fg); border-color: var(--k-defs-bd); }
.tb2-sd-chip.k-prim { background: var(--k-prim-bg); color: var(--k-prim-fg); border-color: var(--k-prim-bd); }
.tb2-sd-chip.k-cond { background: var(--k-cond-bg); color: var(--k-cond-fg); border-color: var(--k-cond-bd); }

/* ── Blocs conditionnels : bloc « selon X » et branches Si / Sinon si / Sinon ─
   Barres teintées comme dans un organigramme, contenu indenté en dessous. */
.tb2-sd-row.is-cond { background: #f5f7ff; border-bottom-color: #e3e8fb; }
.tb2-sd-row.is-cond:hover { background: #eef2fd; }
.tb2-sd-row.is-branch { background: #fafbff; }
.tb2-sd-row.is-branch .tb2-sd-namecell { flex-wrap: wrap; overflow: visible; row-gap: 3px; }
.tb2-sd-kw {
    flex: none; font: 700 10.5px var(--sd-main); text-transform: uppercase; letter-spacing: .04em;
    color: var(--k-cond-fg); background: var(--k-cond-bg); border: 1px solid var(--k-cond-bd);
    border-radius: 4px; padding: 1px 7px; white-space: nowrap;
}
.tb2-sd-kw.is-cond { font: 700 13px/1 var(--sd-mono); text-transform: none; padding: 1px 6px; }
.tb2-sd-condlabel { font: 12.5px var(--sd-main); color: var(--sd-muted); white-space: nowrap; }
.tb2-sd-when { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 5px; font: 12px var(--sd-mono); color: var(--sd-text); }
.tb2-sd-when code { font: inherit; color: var(--sd-text); background: none; padding: 0; }
.tb2-sd-op { color: var(--sd-muted); }
.tb2-sd-val { background: var(--k-comp-bg); color: var(--k-comp-fg); border: 1px solid var(--k-comp-bd); border-radius: 3px; padding: 0 5px; white-space: nowrap; }
.tb2-sd-when-and, .tb2-sd-when-empty, .tb2-sd-when-plus { font: 11.5px var(--sd-main); color: var(--sd-muted); }
.tb2-sd-when-plus { color: var(--sd-req); }
.tb2-sd-badge-base { font-size: 10px; font-weight: 700; color: var(--k-comp-fg); text-transform: uppercase; letter-spacing: .04em; }
.tb2-sd-empty { margin: 0; padding: 16px 14px; font-size: 13px; color: var(--sd-muted); }

.tb2-sd-count { padding: 9px 14px; background: #fafbfc; border-top: 1px solid var(--sd-border); font-size: 12px; color: #8a95a1; }

/* ── Onglet Bac à sable ─────────────────────────────────────────────────── */
.tb2-sd-editor-head, .tb2-sd-results-head {
    display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    border-bottom: 1px solid var(--sd-border); background: #fafbfc;
}
.tb2-sd-dirty { font-size: 12px; color: #98a2ad; }
.tb2-sd-editor-head .btn:nth-of-type(1) { margin-left: auto; }
.tb2-sd-editor { display: flex; }
.tb2-sd-gutter {
    flex: none; margin: 0; padding: 12px 0 12px 12px; text-align: right;
    font: 400 12.5px/1.65 var(--sd-mono); color: #c2c9d1; user-select: none; background: #fcfcfd;
    white-space: pre;
}
.tb2-sd-editor textarea {
    flex: 1; min-height: 430px; border: none; outline: none; resize: vertical;
    padding: 12px 14px; font: 12.5px/1.65 var(--sd-mono); color: var(--sd-text);
    background: #fcfcfd; tab-size: 2; white-space: pre; overflow-x: auto;
}
.tb2-sd-verdict {
    font: 700 12px var(--sd-mono); border-radius: 4px; padding: 2px 9px; white-space: nowrap;
    background: var(--k-grey-bg); color: var(--sd-muted); border: 1px solid var(--sd-border);
}
.tb2-sd-verdict.is-ok { background: #eaf7f1; color: #16785c; border-color: #bfe3d5; }
.tb2-sd-verdict.is-err { background: var(--sd-err-bg); color: var(--sd-err-tx); border-color: #f0c4c4; }
.tb2-sd-issue {
    display: flex; align-items: baseline; gap: 10px; padding: 9px 14px;
    border-bottom: 1px solid #eef1f4; cursor: pointer;
}
.tb2-sd-issue:hover { background: #fafbfc; }
.tb2-sd-issue-path { font: 500 12px var(--sd-mono); color: var(--sd-primary); white-space: nowrap; }
.tb2-sd-issue-msg { font-size: 13px; color: #3d4a58; line-height: 1.4; }
.tb2-sd-skip { padding: 9px 14px; border-top: 1px solid var(--sd-border); background: #fafbfc; font-size: 12px; color: #8a95a1; }
.tb2-sd-privacy { margin: 0; padding: 9px 14px; border-top: 1px solid var(--sd-border); background: #fafbfc; font-size: 12px; color: #8a95a1; }

/* ── Inspecteur ─────────────────────────────────────────────────────────── */
.tb2-sd-insp { background: #fff; border: 1px solid var(--sd-border); border-radius: var(--tb2-radius, 8px); overflow: hidden; flex-shrink: 0; }
.tb2-sd-insp-head { padding: 14px 16px; background: var(--sd-primary); }
.tb2-sd-insp-name { font: 600 15px var(--sd-mono); color: #fff; word-break: break-all; }
.tb2-sd-insp-path { font: 11.5px var(--sd-mono); color: #9fb0c4; margin-top: 4px; word-break: break-all; }
.tb2-sd-insp-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tb2-sd-insp-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.tb2-sd-pill {
    font: 600 11.5px var(--sd-mono); border-radius: 4px; padding: 2px 8px;
    background: var(--k-grey-bg); color: var(--sd-muted); border: 1px solid var(--sd-border);
}
.tb2-sd-pill.is-type { background: var(--k-comp-bg); color: var(--sd-primary); border-color: var(--k-comp-bd); }
.tb2-sd-pill.is-req { background: #fdf1e8; color: var(--sd-req); border-color: #edcbb2; }
.tb2-sd-insp-desc { margin: 0; font-size: 14px; line-height: 1.55; color: #3d4a58; }
.tb2-sd-insp-note { font-size: 12.5px; line-height: 1.5; color: #7a5a12; background: #fdf8e7; border: 1px solid #ecdba4; border-radius: 6px; padding: 8px 11px; }
.tb2-sd-insp-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8a95a1; margin-bottom: 6px; }
.tb2-sd-constraint { font: 12px var(--sd-mono); color: #4a5866; padding: 4px 0; border-bottom: 1px dashed #e8ebee; }
.tb2-sd-value { font: 12px/1.5 var(--sd-mono); color: #1a6e5c; background: #f2f9f6; border: 1px solid #cfe6dd; border-radius: 6px; padding: 7px 10px; white-space: pre-wrap; word-break: break-all; max-height: 150px; overflow: auto; }

.tb2-sd-ref { background: var(--k-comp-bg); border: 1px solid var(--k-comp-bd); border-radius: 8px; padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; }
.tb2-sd-ref-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sd-primary); }
.tb2-sd-ref a { font: 600 13px var(--sd-mono); word-break: break-all; }
.tb2-sd-ref-uses { font-size: 12.5px; color: #4a5866; }

/* Contraintes — pendant « danger » (rouge) du bloc « Schéma partagé » */
.tb2-sd-constraints { background: var(--sd-err-bg); border: 1px solid #f3b4b4; border-radius: 8px; padding: 13px 16px; display: flex; flex-direction: column; gap: 4px; }
.tb2-sd-constraints-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--sd-err-tx); }
.tb2-sd-constraints .tb2-sd-constraint { color: var(--sd-err-tx); border-bottom: none; padding: 2px 0; }

.tb2-sd-kids { background: #fff; border: 1px solid var(--sd-border); border-radius: 8px; padding: 13px 16px; }
.tb2-sd-kids-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tb2-sd-kid {
    font: 500 11.5px var(--sd-mono); color: var(--sd-primary); background: #fff;
    border: 1px solid var(--k-comp-bd); border-radius: 4px; padding: 3px 9px; cursor: pointer;
}
.tb2-sd-kid:hover { background: var(--k-comp-bg); }