/* Thème « Datasheet » appliqué à Basecoat (voir DESIGN.md). Les composants viennent de
   Basecoat ; ce fichier ne porte que les tokens, le shell et les rares compléments. */

:root {
  --radius: 0.25rem;
  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --background: #ffffff;
  --foreground: #141414;
  --card: #ffffff;
  --card-foreground: #141414;
  --popover: #ffffff;
  --popover-foreground: #141414;
  --primary: #1d3557;
  --primary-foreground: #ffffff;
  --secondary: #e9ecef;
  --secondary-foreground: #141414;
  --muted: #f1f3f5;
  --muted-foreground: #596170;
  --accent: #eef1f6;
  --accent-foreground: #1d3557;
  --destructive: #d62828;
  --border: #d5dae0;
  --input: #c3c9d1;
  --ring: #1d3557;

  /* Datasheet */
  --rule: #e9ecef;          /* fond des en-têtes de tableau */
  --band: #1d3557;          /* bandeau du shell */
  --band-ink: #ffffff;
  --band-muted: #c3cede;
  --ok: #2b8a3e;            /* LED en ligne */
  --ok-ink: #1f6f31;
  --warn: #e8a317;          /* LED / repère « à mettre à jour » */
  --warn-ink: #8a5a00;
}

[x-cloak] { display: none !important; }

/* --- Surfaces du navigateur ---------------------------------------------------------------- */
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { background: var(--background); color: var(--foreground); }
::selection { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--foreground); }
input, textarea { caret-color: var(--primary); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
a { text-underline-offset: 3px; }
* { scrollbar-color: var(--input) transparent; }
code, kbd, samp, pre, .font-mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* Classes du monde datasheet, dans le calque components pour que les utilitaires Tailwind
   (hidden, sm:…) gardent la main. */
@layer components {
/* --- Shell : bandeau de titre -------------------------------------------------------------- */
.band { background: var(--band); color: var(--band-ink); }
.band ::selection { background: rgb(255 255 255 / 0.3); color: #fff; }
.band :focus-visible { outline-color: #fff; }
.band-brand { white-space: nowrap; font-weight: 700; font-stretch: 90%; letter-spacing: -0.01em; font-size: 1rem; }
.band-link {
  display: inline-flex; align-items: center; gap: 0.25rem; height: 2rem; padding: 0 0.5rem;
  border-radius: var(--radius); color: var(--band-muted); font-size: 0.875rem; font-weight: 500;
}
.band-link:hover, .band-link[aria-expanded="true"] { color: #fff; background: rgb(255 255 255 / 0.1); }
.band-link[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #fff; border-radius: 0; }
.band-chip {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.22); border-radius: var(--radius);
  color: var(--band-muted); font-size: 0.75rem;
}
.band-chip b { color: #fff; font-weight: 500; }

/* --- Titres -------------------------------------------------------------------------------- */
.doc-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.5rem; border-bottom: 3px solid var(--foreground);
}
.doc-title { font-size: 2.25rem; line-height: 1; font-weight: 700; font-stretch: 75%; letter-spacing: -0.01em; }
.doc-stamp { font-size: 0.75rem; line-height: 1.4; text-align: end; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.spec-table .col-num { width: 7.5rem; }
.spec-table .col-ota { width: 9rem; }
.page-title { font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }

/* --- LED d'état (toujours doublée d'un libellé ou d'un nombre) ---------------------------- */
.led {
  display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex: none;
  border: 1.5px solid var(--input); background: transparent;
}
.led[data-state="ok"] { background: var(--ok); border-color: var(--ok); }
.led[data-state="fault"] { background: var(--destructive); border-color: var(--destructive); }
.led[data-state="warn"] { background: var(--warn); border-color: var(--warn); }
.band .led { border-color: rgb(255 255 255 / 0.45); }
.band .led[data-state="ok"] { background: #51cf66; border-color: #51cf66; }
.band .led[data-state="fault"] { background: #ff6b6b; border-color: #ff6b6b; }

/* --- Tableau de référence (signature « datasheet ») --------------------------------------- */
.spec { margin: 0; }
.spec-table { font-variant-numeric: tabular-nums; border-top: 2px solid var(--foreground); border-bottom: 1px solid var(--foreground); }
.spec-table caption {
  caption-side: top; text-align: start; padding: 0 0 0.5rem; font-size: 0.75rem;
  color: var(--muted-foreground); font-stretch: 90%;
}
.spec-table caption b { color: var(--foreground); font-weight: 700; margin-right: 0.375rem; }
.spec-table thead tr { background: var(--rule); border-bottom: 1px solid var(--foreground); }
.spec-table thead tr:hover { background: var(--rule); }
.spec-table th {
  height: 2.25rem; padding: 0 0.75rem; text-align: start; font-size: 0.75rem; font-weight: 700;
  font-stretch: 85%; color: var(--foreground); letter-spacing: 0.01em;
}
.spec-table td { padding: 0.625rem 0.75rem; vertical-align: top; }
.spec-table tbody tr { border-color: var(--border); }
.spec-table .num { text-align: end; }
.spec-table sup { font-size: 0.625rem; font-weight: 600; color: var(--muted-foreground); margin-left: 1px; }
.spec-table tbody tr[data-href] { position: relative; cursor: pointer; }
.spec-table .row-link { font-weight: 600; color: var(--foreground); }
.spec-table .row-link::after { content: ""; position: absolute; inset: 0; }
.spec-table tbody tr[data-href]:hover .row-link { text-decoration: underline; }
.spec-notes { margin-top: 0.625rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); max-width: 75ch; }
.spec-notes li { display: flex; gap: 0.375rem; }
.spec-notes li > span:first-child { font-weight: 700; color: var(--foreground); min-width: 0.75rem; }
}

/* --- Compatibilité des écrans pas encore migrés vers Basecoat ------------------------------ */
@layer components {
  .btn.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
  .btn.btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 8%); }
  .btn.btn-danger { background: var(--destructive); color: #fff; }
  .btn.btn-danger:hover { background: color-mix(in srgb, var(--destructive) 85%, #000); }
  .card:not(:has(> header, > section)) { display: block; padding: 1rem; border-radius: var(--radius); box-shadow: none; }
  .card { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--border); }
  .input { width: auto; }
  select.input, textarea.input {
    border: 1px solid var(--input); border-radius: var(--radius); background: var(--background);
    padding: 0.25rem 0.5rem; font-size: 0.875rem; min-height: 2rem;
  }
}

/* --- Éditeur YAML et HTMX ------------------------------------------------------------------ */
.yaml-editor .cm-editor { height: 32rem; border: 1px solid var(--input); border-radius: var(--radius); font-size: 13px; background: #fff; }
.yaml-editor .cm-editor.cm-focused { outline: 2px solid var(--ring); }
.yaml-editor .cm-scroller { font-family: var(--font-mono); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }