/* Baie et étiquetage — couche graphique chargée après app.css et user-workflows.css.
   Vocabulaire : rails de baie gradués en U, ruban d'étiquetage jaune, LED d'état. */

:root {
  --ink:#1c2530;
  --muted:#5b6774;
  --paper:#e8ebea;
  --card:#fbfcfc;
  --soft:#f1f3f5;
  --line:#cfd5db;
  --line-strong:#aeb7c0;
  --chassis:#2b3642;
  --chassis-deep:#202933;
  --chassis-soft:#36434f;
  --chassis-muted:#9eabb8;
  --accent:#2456c6;
  --accent-dark:#1b449f;
  --green:var(--accent);
  --tape:#f2b705;
  --tape-ink:#1c2530;
  --led-ok:#1e8e5a;
  --led-warn:#c77700;
  --led-bad:#c23b2e;
  --led-idle:#5f87a8;
  --nav:var(--chassis);
  --nav-soft:var(--chassis-soft);
  --nav-muted:var(--chassis-muted);
  --radius:3px;
  --shadow:none;
  --sidebar-width:252px;
  --topbar-height:60px;
}

/* Base typographique ------------------------------------------------------ */
html,body { background:var(--paper); }
body { color:var(--ink); font:15px/1.5 var(--font-ui); font-feature-settings:"tnum" 1; -webkit-font-smoothing:antialiased; }
body.app-authenticated::before { display:none; }
h1,h2,h3 { font-family:var(--font-display); color:var(--ink); }
h1 { font-size:clamp(32px,3.6vw,46px); font-weight:700; line-height:1.04; letter-spacing:-.01em; }
h2 { font-size:23px; font-weight:700; line-height:1.15; letter-spacing:0; }
h3 { font-weight:700; letter-spacing:0; }
.eyebrow { margin:0 0 6px; color:var(--muted); font:600 13px/1.3 var(--font-ui); letter-spacing:0; text-transform:none; }
.continuity-card .eyebrow,.continuity-warning .eyebrow,.continuity-critical .eyebrow { color:var(--muted); }
.lede { color:var(--muted); font-size:15px; line-height:1.6; max-width:68ch; }
code,kbd,samp,.device-identifiers,.unit-badge { font-family:var(--font-mono); }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* En-tête ----------------------------------------------------------------- */
.topbar { height:var(--topbar-height); border-bottom:1px solid var(--line); background:var(--card); box-shadow:none; backdrop-filter:none; }
.brand { gap:10px; font-family:var(--font-display); font-size:19px; font-weight:700; }
.brand-mark { width:34px; height:34px; border-radius:2px; color:var(--tape-ink); background:var(--tape); box-shadow:none; font:700 12px var(--font-mono); letter-spacing:0; }
.brand-mark.has-logo { background:transparent; }
.brand-copy small { color:var(--muted); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; }
.topbar-search,.topbar-alerts,.mobile-menu-toggle { border-radius:var(--radius); background:var(--soft); }
.topbar-search b { font-size:13px; font-weight:500; }
.topbar-search kbd { border-radius:2px; box-shadow:none; font:500 11px var(--font-mono); }
.topbar-alerts .nav-alert-count { border-radius:2px; background:var(--led-bad); font:600 11px var(--font-mono); }
.topbar .room-context { height:auto; min-height:40px; align-content:center; gap:0; border-radius:var(--radius); border-color:var(--line); color:var(--ink); background:var(--soft); }
.topbar .room-context small { color:var(--muted); font-size:11px; line-height:1.2; letter-spacing:0; text-transform:none; }
.topbar .room-context strong { font-size:13px; line-height:1.25; }
.topbar-account strong { font-size:13px; }
.topbar-account small { font-size:12px; }
.user-avatar { border-radius:2px; color:var(--tape-ink); background:var(--tape); font:700 13px var(--font-mono); }

/* Barre latérale : le châssis de la baie, avec son rail gradué ----------- */
.app-sidebar { color:#e4e9ee; background:var(--chassis); box-shadow:none; }
.app-sidebar::after { position:absolute; top:0; right:0; bottom:0; width:9px; content:""; pointer-events:none; border-left:1px solid #ffffff14; background:repeating-linear-gradient(180deg,transparent 0 13px,#ffffff2e 13px 14px), var(--chassis-deep); }
.sidebar-scroll { padding:18px 20px 26px 12px; scrollbar-color:#4a5866 transparent; }
.nav-section > p { margin:0 10px 6px; color:var(--chassis-muted); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; }
.nav-item { min-height:38px; border-radius:2px; color:#c9d2db; font-size:14px; font-weight:500; }
.nav-item:hover,.nav-item:focus-visible { color:#fff; background:#ffffff0d; transform:none; }
.nav-item.active { color:#fff; background:var(--chassis-soft); box-shadow:inset 3px 0 0 var(--tape); }
.nav-icon { color:#8e9caa; }
.nav-item.active .nav-icon { color:var(--tape); }
.nav-group { border-top-color:#ffffff14; }
.nav-group > summary { color:#c9d2db; font-size:13px; font-weight:600; }
.sidebar-footer { border-top-color:#ffffff14; background:var(--chassis-deep); }
.sidebar-footer .demo-nav-form button { border-radius:2px; font-size:13px; }
.sidebar-user strong { font-size:13px; }
.sidebar-user small { font-size:12px; }

/* Surfaces ---------------------------------------------------------------- */
.metrics,.network-metrics,.topology-metrics,.cabling-metrics,.capacity-metrics,.instance-card,.rack-card,.room-card,.network-card,.audit-entry,.dashboard-interventions,.dashboard-inventory-actions,.continuity-card,.settings-card,.account-card,.alert-list,.inventory-table-wrap,.inventory-filters,.network-filters,.intervention-filters,.alert-filters,.hub-alert-filters,.installation-filters,.control-register-filters,.inventory-action-filters,.inventory,.empty,dialog,.toast { border-radius:var(--radius); box-shadow:none; }
.rack-card,.room-card,.network-card,.audit-entry { transition:border-color .15s ease; }
.rack-card:hover,.room-card:hover,.network-card:hover { border-color:var(--line-strong); box-shadow:none; transform:none; }
.metrics span,.network-metrics span { color:var(--muted); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; }
.metrics strong,.network-metrics strong { font:700 30px/1.1 var(--font-display); }
dialog { border:1px solid var(--line-strong); }
dialog::backdrop { background:rgba(28,37,48,.62); backdrop-filter:none; }

/* Boutons et champs ------------------------------------------------------ */
.button { min-height:38px; padding:8px 15px; border-radius:var(--radius); font:600 14px/1.2 var(--font-ui); letter-spacing:0; text-transform:none; transition:background .15s ease,border-color .15s ease; }
.button:hover:not(:disabled) { transform:none; }
.button.primary { color:#fff; background:var(--accent); box-shadow:none; }
.button.primary:hover { background:var(--accent-dark); box-shadow:none; }
.button.secondary { border-color:var(--line-strong); color:var(--ink); background:var(--card); }
.button.secondary:hover { border-color:var(--ink); background:var(--card); }
input,select,textarea { border-color:var(--line-strong); border-radius:var(--radius); font-family:var(--font-ui); font-size:14px; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
label { letter-spacing:0; }

/* Tableaux --------------------------------------------------------------- */
.inventory-table th,.responsive-table th { color:var(--muted); background:var(--soft); font:600 12.5px var(--font-ui); letter-spacing:0; text-transform:none; }
.inventory-table tr:hover td,.responsive-table tbody tr:hover td { background:#f4f6f8; }

/* Le tableau d'inventaire (13 colonnes) défile horizontalement ; la colonne Équipement reste visible. */
.inventory-table-wrap { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:var(--line-strong) transparent; }
.supervision-table-wrap,.availability-table-wrap { border-radius:var(--radius); box-shadow:none; }
.inventory-table .inventory-select-column { position:sticky; z-index:2; left:0; width:48px; min-width:48px; padding-inline:0; background:var(--card); }
.inventory-table .inventory-select-column + td,.inventory-table .inventory-select-column + th,.inventory-table tr > :first-child:not(.inventory-select-column) { position:sticky; z-index:2; left:0; min-width:220px; background:var(--card); box-shadow:1px 0 0 var(--line); }
.inventory-table .inventory-select-column + td,.inventory-table .inventory-select-column + th { left:48px; }
.inventory-table th.inventory-select-column,.inventory-table .inventory-select-column + th,.inventory-table thead tr > :first-child { z-index:3; background:var(--soft); }

/* Badges d'état : coins de ruban, pas de pilules ------------------------- */
.readonly-badge,.count,.unit-badge,.type-badge,.lifecycle-state,.device-status,.capacity-state,.room-capacity-state,.settings-state,.instance-state,.continuity-badge { border-radius:2px; letter-spacing:0; text-transform:none; }
.count { font-family:var(--font-mono); }
.unit-badge { color:var(--tape-ink); background:var(--tape); font-weight:600; white-space:nowrap; }

/* Élévation de baie : l'élément signature ------------------------------- */
.rack-frame {
  --hole:repeating-linear-gradient(180deg,transparent 0 4px,#11161c 4px 8px,transparent 8px calc(var(--unit-height) / 3));
  padding:16px 34px 16px 46px;
  border:0;
  border-radius:2px;
  background:var(--chassis);
  box-shadow:inset 0 0 0 1px #00000040;
}
.rack-rail { top:16px; bottom:16px; width:14px; border:0; background:var(--hole), #3c4955; background-size:6px 100%, auto; background-repeat:repeat-y; background-position:center top; }
.rack-rail.left { left:28px; }
.rack-rail.right { right:14px; }
.rack-unit { height:var(--unit-height); border-bottom:1px solid #00000038; background:#1b232c; }
.rack-unit:nth-child(odd) { background:#1e2730; }
.rack-unit.occupied { background:#1b232c; }
.rack-unit.reserved { background:repeating-linear-gradient(135deg,#f2b70538 0 9px,transparent 9px 18px), #1b232c; }
.unit-number { left:-44px; top:calc((var(--unit-height) - 16px) / 2); width:22px; height:16px; padding:0; border-radius:1px; color:var(--tape-ink); background:var(--tape); font:600 10px/16px var(--font-mono); text-align:center; }
.device-block { inset:2px 2px auto; padding:5px 12px 5px 30px; border:1px solid #9aa6b2; border-radius:2px; color:var(--ink); background:linear-gradient(180deg,#f3f5f7,#dfe4e9); }
.device-block::before { position:absolute; top:calc(var(--unit-height) / 2 - 6px); left:11px; width:8px; height:8px; border-radius:50%; content:""; background:var(--led-ok); box-shadow:0 0 0 2px #1e8e5a33,0 0 8px #1e8e5a99; }
.device-block::after { position:absolute; top:0; bottom:0; left:24px; width:1px; content:""; background:#b7c0c9; }
.device-block strong { font:600 14px/1.25 var(--font-mono); }
.device-block small { color:var(--muted); font-size:12px; }
.device-block[class*="type-"] { border-color:#9aa6b2; color:var(--ink); background:linear-gradient(180deg,#f3f5f7,#dfe4e9); }
.device-block.device-operational-maintenance,.device-block.device-operational-standby,.device-block.device-operational-offline,.device-block.device-operational-decommissioned { border-color:#9aa6b2; color:var(--ink); background:linear-gradient(180deg,#f3f5f7,#dfe4e9); }
.device-block.device-operational-maintenance::before { background:var(--led-warn); box-shadow:0 0 0 2px #c7770033,0 0 8px #c77700aa; }
.device-block.device-operational-standby::before { background:var(--led-idle); box-shadow:0 0 0 2px #5f87a833; }
.device-block.device-operational-offline::before { background:var(--led-bad); box-shadow:0 0 0 2px #c23b2e33,0 0 8px #c23b2eaa; }
.device-block.device-operational-decommissioned { opacity:.62; }
.device-block.device-operational-decommissioned::before { background:#8a949e; box-shadow:none; }
.device-block:hover { border-color:var(--tape); }
.planned-device-block { padding-left:12px; border:1px dashed var(--tape); color:#fff; background:repeating-linear-gradient(135deg,#f2b70540 0 9px,transparent 9px 18px), #26303a; }
.planned-device-block::before,.planned-device-block::after { display:none; }
.planned-device-block small { color:#d7dee5; }
.planned-device-block:hover { border-color:#fff; color:#fff; }
.device-dot { border-radius:50%; }

/* Mode Démo : ruban de balisage compact --------------------------------- */
.demo-banner { right:16px; bottom:16px; left:auto; width:auto; max-width:calc(100% - 32px); min-height:0; padding:8px 10px 8px 14px; border:0; border-radius:2px; color:var(--tape-ink); background:var(--tape); box-shadow:0 0 0 3px var(--chassis); }
.demo-banner strong { font-size:14px; letter-spacing:0; text-transform:none; }
.demo-banner span { color:var(--tape-ink); font-size:13px; }
.demo-banner button { border-color:#1c253066; border-radius:2px; color:var(--tape-ink); font-size:13px; }
.demo-banner button:hover { border-color:var(--tape-ink); background:#1c253014; }
body.demo-mode main { padding-bottom:120px; }

/* Connexion ------------------------------------------------------------ */
.login-card { border-radius:var(--radius); border-color:var(--line-strong); box-shadow:none; }
.login-visual { display:block; width:112px; height:112px; margin:0 0 30px; object-fit:contain; }
.login-visual.is-client-logo { width:auto; height:auto; max-width:min(320px,100%); max-height:160px; }

@media(max-width:1100px) {
  .app-sidebar::after { display:none; }
  .sidebar-scroll { padding-right:14px; }
}

@media(max-width:600px) {
  .rack-frame { padding:12px 10px 12px 38px; }
  .rack-rail.left { left:24px; }
  .rack-rail.right { display:none; }
  .unit-number { left:-36px; }
  .inventory-table .inventory-select-column + td,.inventory-table .inventory-select-column + th,.inventory-table tr > :first-child:not(.inventory-select-column) { min-width:150px; max-width:170px; }
  .login-visual { width:76px; height:76px; margin-bottom:18px; }
  .login-visual.is-client-logo { max-height:88px; }
  .demo-banner { right:10px; bottom:10px; left:10px; padding:6px 8px 6px 12px; }
  .demo-banner span { display:none; }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}