/* RackMe — direction visuelle : graphite de baie, LED cyan pour la sélection, couleurs de cycle de vie
   partagées entre la 3D et l'interface. Police système (usage hors ligne en datacentre), identifiants en mono.
   Voir docs/03-ui-ux.md. */
:root {
  --bg: #15181c;
  --surface: #1d2126;
  --surface-2: #262b31;
  --line: #343b43;
  --ink: #eef1f4;
  --ink-2: #a7b0ba;
  --ink-3: #6f7983;
  --accent: #62d4ff;
  --st-installed: #5b8dc9;
  --st-planned: #38b56d;
  --st-remove: #e5533d;
  --zone: #e0a030;
  --server: #8d949c;
  --accessory: #4a525b;
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; font-variant-numeric: tabular-nums;
}
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
code, .mono { font-family: var(--mono); font-size: 0.93em; }

/* --- Barre haute ------------------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand span { color: var(--accent); }
.field { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.field select { min-width: 150px; max-width: 260px; }
select, input[type=text], input[type=number], input:not([type]) {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; color: var(--ink);
}
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segmented button { background: transparent; border: 0; padding: 6px 12px; color: var(--ink-2); cursor: pointer; }
.segmented button.on { background: var(--surface-2); color: var(--ink); }
button.ghost, button.primary {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; background: transparent; cursor: pointer;
}
button.ghost[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; }
button.primary { background: var(--accent); color: #062633; border-color: transparent; font-weight: 600; }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.small { padding: 3px 8px; font-size: 12.5px; }
.spacer { flex: 1; }
.chip { font-family: var(--mono); font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.chip.user { font-family: var(--font); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.chip.user b { color: var(--accent); font-weight: 600; }
.only-mobile { display: none; }

/* --- Bandeau d'intervention et porte de connexion ------------------------------------------ */
.banner { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: #3a2a10; color: #ffd9a0; border-bottom: 1px solid #6b4a12; font-size: 13.5px; }
.banner b { color: #fff; }
.gate { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(21,24,28,.82); }
.gate .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 26px; max-width: 420px; text-align: center; }
.gate h2 { margin: 0 0 8px; font-size: 18px; }
.gate p { color: var(--ink-2); margin: 0 0 16px; }
.gate .error { color: #ffb3a7; }

/* --- Disposition -------------------------------------------------------------------------- */
.layout { flex: 1; display: flex; min-height: 0; }
.viewport { position: relative; flex: 1; min-width: 0; background: radial-gradient(ellipse at 50% 30%, #23292f 0%, var(--bg) 70%); }
.viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* Empilement : étiquettes 3D (CSS2DRenderer pose un z-index par étiquette, isolé ici) < légende et statut < infobulle souris. */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.legend, .scene-status { z-index: 2; }
.tooltip { z-index: 3; }
.labels.off { display: none; }
.labels[data-face="front"] .lbl.dev[data-face="rear"], .labels[data-face="rear"] .lbl.dev[data-face="front"] { display: none; }
.lbl {
  font-family: var(--mono); font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 3px;
  color: var(--ink); background: rgba(21, 24, 28, .78); border: 1px solid rgba(255,255,255,.08); white-space: nowrap;
  transform: translate(-50%, -50%);
}
.lbl.u { color: var(--ink-3); background: transparent; border: 0; font-size: 10px; }
.lbl.rack { font-family: var(--font); font-weight: 600; font-size: 13px; background: var(--surface); }
.lbl.zone { color: var(--zone); border-color: rgba(224,160,48,.4); }
/* --- Vue 2D (élévation SVG) ---------------------------------------------------------------- */
.viewport.is-2d canvas, .viewport.is-2d .labels { visibility: hidden; }
.flat { position: absolute; inset: 0; z-index: 1; overflow: auto; display: flex; gap: 28px; justify-content: safe center; align-items: flex-start; padding: 14px 16px 44px; }
.flat svg { flex: 0 0 auto; height: 100%; max-width: 100%; }
.flat text { font-family: var(--mono); }
.flat .title { fill: var(--ink); font-family: var(--font); font-weight: 600; font-size: 13px; }
.flat .frame { fill: var(--surface); stroke: var(--line); }
.flat .rail { stroke: var(--line); stroke-width: .5; }
.flat .u { fill: var(--ink-3); font-size: 8.5px; }
.flat .zone rect { fill: var(--zone); fill-opacity: .14; stroke: var(--zone); stroke-dasharray: 4 3; }
.flat .zone text { fill: var(--zone); font-size: 10.5px; }
.flat .dev { cursor: pointer; }
.flat .dev:focus-visible { outline: none; }
.flat .dev:focus-visible rect.body, .flat .dev.sel rect.body { stroke: var(--accent); stroke-width: 2; }
.flat .dev rect.body { stroke: #0f1215; stroke-width: 1; }
.flat .dev:hover rect.body { filter: brightness(1.18); }
.flat .c-network rect.body { fill: var(--st-installed); }
.flat .c-server rect.body { fill: var(--server); }
.flat .c-patch_panel rect.body, .flat .c-optical rect.body { fill: #8a6fae; }
.flat .c-accessory rect.body, .flat .c-other rect.body { fill: var(--accessory); }
.flat .planned rect.body { fill: var(--st-planned); fill-opacity: .22; stroke: var(--st-planned); stroke-dasharray: 5 3; }
.flat .to_remove rect.body { fill: var(--st-remove); fill-opacity: .6; stroke: var(--st-remove); }
.flat .name { fill: var(--ink); font-size: 10.5px; }
.flat .sub { fill: var(--ink-2); font-size: 9.5px; }
.flat .other rect.body { fill-opacity: .16; stroke-dasharray: 3 3; }
.flat .other text { fill: var(--ink-3); }

.legend {
  position: absolute; left: 12px; bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); display: inline-block; }
.tooltip {
  position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px 8px; font-size: 12.5px; transform: translate(10px, 10px); max-width: 260px;
}
.tooltip b { font-family: var(--mono); font-weight: 600; }
.tooltip .none { color: var(--ink-3); }
.scene-status {
  position: absolute; top: 12px; left: 12px; font-size: 13px; color: var(--ink-2); background: rgba(29,33,38,.85);
  border-radius: var(--radius); padding: 4px 9px;
}
.scene-status:empty { display: none; }
.scene-status.error { color: #ffb3a7; }

/* --- Panneau ------------------------------------------------------------------------------ */
.panel { width: 400px; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs [role=tab] {
  flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 6px; color: var(--ink-2); cursor: pointer;
}
.tabs [role=tab][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs b { background: var(--st-planned); color: #062; border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.pane { overflow: auto; padding: 12px 14px 20px; }
.pane h2 { font-size: 16px; margin: 4px 0 2px; }
.pane h3 { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin: 16px 0 6px; }
.pane .meta { color: var(--ink-2); font-size: 12.5px; margin: 0 0 10px; }
.empty { color: var(--ink-2); font-size: 13px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; margin: 8px 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; overflow-wrap: break-word; }

.ulist { list-style: none; margin: 0; padding: 0; }
.ulist li { display: grid; grid-template-columns: 44px 6px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ulist li.zone { color: var(--ink-2); }
.ulist button { all: unset; cursor: pointer; display: contents; }
.ulist li:hover { background: var(--surface-2); }
.ulist li.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ulist .u { font-family: var(--mono); color: var(--ink-3); font-size: 12px; text-align: right; }
.ulist .bar { width: 6px; align-self: stretch; border-radius: 2px; background: var(--c, var(--st-installed)); }
.ulist .name { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulist .sub { color: var(--ink-2); font-size: 12px; font-family: var(--font); }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.badge.installed { color: var(--st-installed); }
.badge.planned { color: var(--st-planned); }
.badge.to_remove { color: var(--st-remove); }
.badge.connected { color: var(--st-installed); }
.badge.face { color: var(--ink-2); }
.badge.pending { color: var(--zone); }
.badge.validated { color: var(--accent); }
.badge.rejected { color: var(--st-remove); }
.decl { border-left: 3px solid var(--zone); padding: 6px 10px; margin: 8px 0; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.decl.validated { border-color: var(--accent); }
.decl.rejected { border-color: var(--st-remove); }
.decl b { color: var(--ink); }

/* --- Photos, compte, journal -------------------------------------------------------------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.photo-grid a { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid .cap { font-size: 11.5px; color: var(--ink-2); padding: 4px 6px; }
.upload-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.upload-list li.ok { color: var(--st-planned); }
.upload-list li.err { color: #ffb3a7; }
dialog.wide-dialog { width: min(960px, 96vw); }
.acc-tabs { display: flex; gap: 4px; margin: 10px 0; }
.acc-tabs button { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-2); cursor: pointer; }
.acc-tabs button.on { color: var(--ink); border-color: var(--accent); }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl .mono { font-size: 11.5px; }
.acc-scroll { max-height: 55vh; overflow: auto; }

.ports { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ports th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.ports td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ports tbody tr { cursor: pointer; }
.ports tbody tr:hover td { background: var(--surface-2); }
.ports tbody tr.sel td { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ports tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ports .n { font-family: var(--mono); white-space: nowrap; }
.ports .none { color: var(--ink-3); }
.ports .peer { font-family: var(--mono); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.todo-group { margin-bottom: 14px; }

/* --- Dialogue ----------------------------------------------------------------------------- */
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; width: min(640px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 4px; font-size: 18px; }
dialog .hint { color: var(--ink-2); margin: 0 0 12px; font-size: 13px; }
dialog .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
dialog label.wide { grid-column: 1 / -1; }
dialog label.check { flex-direction: row; align-items: center; color: var(--ink); }
dialog label[hidden] { display: none; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 0; padding: 0; }
.form-error { color: #ffb3a7; font-size: 13px; margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (max-width: 900px) {
  .only-mobile { display: inline-block; }
  .banner { flex-wrap: wrap; }
  .layout { flex-direction: column; }
  .viewport { min-height: 52vh; }
  .panel { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 48vh; }
  .panel.collapsed { display: none; }
  .field select { min-width: 120px; }
}