/* =====================================================================
   VELTO – Theme & Layout
   Hell (grün) + Dark, dezente Neon-Grün-Akzente.
   Skalierbar über --ui-scale (persoenliche Einstellung) + Browser-Zoom.
   ===================================================================== */

:root{
  --ui-scale: 1;

  /* Light (Standard) */
  --bg:        #eef3ee;
  --surface:   #ffffff;
  --surface-2: #e6ede7;
  --surface-3: #dde7df;
  --border:    #cbd8cd;
  --text:      #19241d;
  --text-muted:#5a6b60;
  --primary:   #1f9d63;
  --primary-600:#178a55;
  --primary-050:#e3f6ec;
  --accent:    #00e676;          /* Neon-Grün-Akzent (sparsam) */
  --accent-glow: rgba(0,230,118,.45);
  --danger:    #d2483a;
  --warn:      #c98a00;
  --shadow:    0 1px 3px rgba(20,40,28,.08), 0 6px 18px rgba(20,40,28,.06);
  --radius:    10px;
  --radius-sm: 7px;
}

html[data-theme="dark"]{
  --bg:        #0f1512;
  --surface:   #161d19;
  --surface-2: #1b231e;
  --surface-3: #222d27;
  --border:    #2a3831;
  --text:      #e7efe9;
  --text-muted:#93a89b;
  --primary:   #2fc77f;
  --primary-600:#27b06f;
  --primary-050:#13251c;
  --accent:    #2dfc7a;
  --accent-glow: rgba(45,252,122,.55);
  --danger:    #ff6b5e;
  --warn:      #ffce5c;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html{ font-size: calc(16px * var(--ui-scale)); }
body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:1.6rem; margin:.2rem 0 1rem; }
h2{ font-size:1.2rem; margin:1.2rem 0 .6rem; }
h3{ font-size:1rem; margin:1rem 0 .4rem; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:.85rem;
  height:54px; padding:0 .9rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.04em; color:var(--text); }
.brand:hover{ text-decoration:none; }
.brand-mark{
  display:grid; place-items:center; width:28px; height:28px; border-radius:7px;
  background:var(--primary); color:#fff; font-weight:800;
  box-shadow:0 0 0 1px var(--accent), 0 0 10px var(--accent-glow);
}
.brand-mark.lg{ width:40px; height:40px; font-size:1.3rem; }
.brand-text{ font-size:1.05rem; }
.topnav{ display:flex; gap:.25rem; margin-left:.6rem; }
.topnav a{
  padding:.45rem .7rem; border-radius:var(--radius-sm); color:var(--text-muted); font-weight:500;
}
.topnav a:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.topnav a.active{ color:var(--text); background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--accent); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.user-chip{ font-size:.82rem; color:var(--text-muted); padding:0 .3rem; }

.icon-btn{
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid transparent; color:var(--text-muted); cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn.sm{ width:26px; height:26px; }

/* ---------- Shell / Sidebar ---------- */
.shell{ display:flex; min-height:calc(100vh - 54px); }
.sidebar{
  width:248px; flex:0 0 248px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; transition:margin-left .18s ease;
}
body.sidebar-hidden .sidebar{ margin-left:-248px; }
.sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .85rem; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.tree{ padding:.4rem; overflow:auto; }
.tree-empty{ color:var(--text-muted); font-size:.85rem; padding:.6rem; }
.tree-item{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.45rem;
  padding:.42rem .55rem; border-radius:var(--radius-sm); color:var(--text); font-size:.9rem;
}
.tree-item:hover{ background:var(--surface-2); text-decoration:none; }
.tree-ico{ color:var(--primary); }
.tree-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-sub{ grid-column:2; font-size:.72rem; color:var(--text-muted); }

.content{ flex:1; min-width:0; padding:1.4rem 1.8rem; max-width:1500px; margin:0 auto; width:100%; }
body.is-fullbleed .content{ max-width:none; padding:0; overflow:hidden; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.5rem .9rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  transition:.13s ease;
}
.btn:hover{ border-color:var(--primary); text-decoration:none; }
.btn-sm{ padding:.32rem .6rem; font-size:.8rem; }
.btn-block{ width:100%; justify-content:center; }
.btn-primary{
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:0 0 0 1px var(--accent) inset, 0 0 0 0 var(--accent-glow);
}
.btn-primary:hover{ background:var(--primary-600); box-shadow:0 0 0 1px var(--accent) inset, 0 0 14px var(--accent-glow); }
.btn-ghost{ background:transparent; }
.btn-danger{ color:var(--danger); border-color:var(--border); }
.btn-danger:hover{ border-color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.btn-accent{
  background:transparent; color:var(--text); border:1px solid var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}

/* ---------- Forms ---------- */
label{ display:block; font-size:.85rem; color:var(--text-muted); margin:.55rem 0; font-weight:500; }
input, select, textarea{
  width:100%; margin-top:.25rem; padding:.55rem .65rem; font-size:.92rem; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-050);
}

/* ---------- Dropdowns (select): minimalistisch, eigener Pfeil, themes-fest ---------- */
:root{
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%235a6b60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"]{
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2393a89b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right .55rem center;
  background-size:15px;
  padding-right:2.1rem;
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
select:hover:not(:disabled){ border-color:var(--primary); }
select:focus{ background-color:var(--surface); }
select:disabled{ opacity:.55; cursor:default; }
select option{ background:var(--surface); color:var(--text); }
select option:checked{ background:var(--primary-050); color:var(--text); }
/* Firefox: gepunktete Fokus-Umrandung im aufgeklappten Zustand entfernen */
select:-moz-focusring{ color:transparent; text-shadow:0 0 0 var(--text); }
/* IE/Edge-Legacy-Pfeil ausblenden */
select::-ms-expand{ display:none; }
.check{ display:flex; align-items:center; gap:.4rem; }
.check input{ width:auto; margin:0; }
.form .btn{ margin-top:.6rem; }
.hint{ font-size:.78rem; color:var(--text-muted); margin:.4rem 0; }
.row-form{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.row-form input, .row-form select{ width:auto; margin:0; min-width:160px; }

/* ---------- Cards / layout helpers ---------- */
.page{ animation:fade .2s ease; }
.page.narrow{ max-width:640px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; margin:1rem 0; box-shadow:var(--shadow); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.muted{ color:var(--text-muted); }
.small{ font-size:.85rem; }
.hidden{ display:none; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.stat-card{ display:flex; flex-direction:column; gap:.2rem; padding:1.1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); color:var(--text); }
.stat-card:hover{ border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); text-decoration:none; }
.stat-num{ font-size:2rem; font-weight:800; color:var(--primary); }
.stat-label{ color:var(--text-muted); font-size:.85rem; }

.card-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem; }
.doc-card, .proj-card{ display:flex; flex-direction:column; gap:.3rem; padding:.8rem .9rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); box-shadow:var(--shadow); }
.doc-card:hover{ border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); text-decoration:none; }
.doc-card-row{ display:flex; gap:.5rem; align-items:stretch; }
.doc-card-row .doc-card{ flex:1; }
.doc-title{ font-weight:600; }
.doc-meta{ font-size:.76rem; color:var(--text-muted); }
.doc-type{ align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.12rem .45rem; border-radius:999px; background:var(--surface-2); color:var(--text-muted); }
.type-network{ color:#e08a00; } .type-room{ color:#2b86d9; } .type-rack{ color:#a35bd9; }
.doc-group{ color:var(--text-muted); border-bottom:1px solid var(--border); padding-bottom:.2rem; }

.proj-card{ flex-direction:row; align-items:center; justify-content:space-between; gap:.6rem; }
.proj-card.is-archived{ opacity:.7; }
.proj-main{ display:flex; flex-direction:column; gap:.15rem; color:var(--text); flex:1; }
.proj-main:hover{ text-decoration:none; }
.proj-name{ font-weight:700; }
.proj-sub{ font-size:.78rem; color:var(--text-muted); }
.proj-role{ align-self:flex-start; }
.proj-actions{ display:flex; gap:.35rem; }
.proj-desc{ color:var(--text-muted); }

/* ---------- Badges / tables / tabs / flash ---------- */
.badge{ display:inline-block; font-size:.72rem; font-weight:600; padding:.12rem .5rem; border-radius:999px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.badge-accent{ color:var(--primary); border-color:var(--accent); box-shadow:0 0 6px var(--accent-glow); }
.badge-warn{ color:var(--warn); border-color:var(--warn); }

.table{ width:100%; border-collapse:collapse; margin-top:.6rem; font-size:.88rem; }
.table th, .table td{ text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.table .actions form{ display:flex; gap:.3rem; flex-wrap:wrap; }

.tabs{ display:flex; gap:.3rem; border-bottom:1px solid var(--border); margin-bottom:.6rem; }
.tab{ padding:.5rem .9rem; color:var(--text-muted); border-bottom:2px solid transparent; }
.tab:hover{ text-decoration:none; color:var(--text); }
.tab.active{ color:var(--text); border-bottom-color:var(--accent); }

.flash{ padding:.7rem .9rem; border-radius:var(--radius-sm); margin:.6rem 0; font-size:.9rem; border:1px solid var(--border); }
.flash-success{ background:var(--primary-050); border-color:var(--primary); color:var(--primary-600); }
.flash-error{ background:color-mix(in srgb, var(--danger) 12%, transparent); border-color:var(--danger); color:var(--danger); }
.flash-info{ background:var(--surface-2); }

/* ---------- Auth ---------- */
.auth-body{ display:grid; place-items:center; min-height:100vh; background:
   radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent), var(--bg); }
.auth-card{ width:min(380px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.6rem 1.5rem; box-shadow:var(--shadow); }
.auth-brand{ display:flex; align-items:center; gap:.6rem; font-size:1.4rem; font-weight:800; }
.auth-sub{ color:var(--text-muted); margin:.2rem 0 1rem; }

/* =====================================================================
   Editor
   ===================================================================== */
.editor-shell{ display:flex; flex-direction:column; height:calc(100vh - 54px); min-width:0; }
.toolbar{
  display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem;
  background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.toolbar .doc-title-input{ width:auto; min-width:220px; margin:0; font-weight:600; }
.toolbar .spacer{ flex:1; }
.save-state{ font-size:.78rem; color:var(--text-muted); min-width:90px; }

.editor-body{ display:flex; flex:1; min-height:0; min-width:0; }
.palette{
  width:208px; flex:0 0 208px; background:var(--surface); border-right:1px solid var(--border);
  overflow:auto; padding:.5rem;
}
.palette h4{ margin:.7rem .2rem .35rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.stencil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.stencil{
  display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.5rem .3rem;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2);
  cursor:grab; font-size:.7rem; text-align:center; color:var(--text); user-select:none;
}
.stencil:hover{ border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }
.stencil svg{ width:30px; height:30px; }

.canvas-wrap{ flex:1; position:relative; overflow:hidden; background:var(--bg); min-width:0; }
#canvas{ width:100%; height:100%; display:block; touch-action:none; }
.canvas-grid{ background-image:
   linear-gradient(var(--border) 1px, transparent 1px),
   linear-gradient(90deg, var(--border) 1px, transparent 1px);
   background-size:24px 24px; opacity:.4; }

.props-panel{
  width:248px; flex:0 0 248px; background:var(--surface); border-left:1px solid var(--border);
  overflow:auto; padding:.7rem;
}
.props-panel h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin:.3rem 0 .5rem; }
.props-panel .empty{ color:var(--text-muted); font-size:.85rem; }

.node-selected{ outline:2px dashed var(--accent); outline-offset:2px; }

/* Rack-spezifisch */
.rack-stage{ display:flex; gap:2rem; padding:1.2rem; overflow:auto; height:100%; }
.rack-col{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.rack-frame{
  width:340px; background:var(--surface-3); border:2px solid var(--border); border-radius:8px;
  padding:8px; box-shadow:var(--shadow);
}
.rack-units{ display:flex; flex-direction:column-reverse; }
.rack-u{
  height:22px; border-bottom:1px dashed var(--border); position:relative;
  display:flex; align-items:center;
}
.rack-u .u-num{ position:absolute; left:-26px; font-size:.62rem; color:var(--text-muted); width:22px; text-align:right; }
.rack-device{
  position:absolute; left:2px; right:2px; border-radius:5px; color:#fff; font-size:.72rem;
  display:flex; align-items:center; justify-content:space-between; padding:0 .4rem; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.rack-device:hover{ box-shadow:inset 0 0 0 1px var(--accent), 0 0 8px var(--accent-glow); }
.rack-device .rd-ports{ font-size:.6rem; opacity:.85; }

/* Port-Detail Modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:60; }
.modal{ width:min(720px,94vw); max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; box-shadow:var(--shadow); }
.port-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.4rem; margin-top:.6rem; }
.port-cell{ border:1px solid var(--border); border-radius:6px; padding:.35rem; font-size:.78rem; }
.port-cell label{ margin:0; }
.port-cell .pn{ font-weight:700; color:var(--primary); }

/* Legende */
.legend-box{ font-size:.72rem; }

/* ---------- Responsive (nur große Screens, kein Mobile-Fokus) ---------- */
@media (max-width:1100px){
  .palette{ width:170px; flex-basis:170px; }
  .props-panel{ width:210px; flex-basis:210px; }
}
@media (min-width:2200px){
  .content{ max-width:1800px; }
}

/* Editor – Werkzeugleiste in der Palette */
.tool-row{ display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.5rem; }
.tool-row .tool.active, .tool-row .side.active{ border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); color:var(--text); }
.stencil span{ line-height:1.12; }
.toolbar .badge{ white-space:nowrap; }

/* Demo-Modus-Banner */
.demo-banner{
  text-align:center; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  padding:.3rem .5rem; color:#04210f; background:var(--accent);
  box-shadow:0 0 14px var(--accent-glow);
}
html[data-theme="dark"] .demo-banner{ color:#04210f; }

/* =====================================================================
   Rack v2 – modern, Drag&Drop-Verschieben, Live-Vorschau
   ===================================================================== */
.rack-stage{ padding:1.5rem 1.4rem; gap:2.6rem; align-items:flex-start; }
.rack-col{ display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.rack-title{ font-weight:700; display:flex; align-items:center; gap:.55rem; }
.rack-side-pill{ font-size:.72rem; font-weight:600; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:.12rem .6rem; }
.rack-frame{
  display:flex; align-items:stretch; gap:0;
  background:linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border:1px solid var(--border); border-radius:14px; padding:12px;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.03);
  transform-origin:top center;
}
.rack-rail{ display:flex; flex-direction:column; width:24px; user-select:none; }
.rack-rail span{ display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--text-muted); }
.rack-mount{
  position:relative; width:368px; border-radius:7px;
  background:
    repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 92%, #000 8%) 0 calc(var(--row) - 1px),
      color-mix(in srgb, var(--border) 55%, transparent) calc(var(--row) - 1px) var(--row));
  box-shadow:inset 0 0 0 2px var(--surface-3), inset 0 0 16px rgba(0,0,0,.28);
}
.rack-device{
  position:absolute; left:7px; right:7px; border-radius:7px; cursor:grab; overflow:hidden; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.45);
  transition:box-shadow .12s ease;
}
.rack-device:active{ cursor:grabbing; }
.rack-device:hover{ box-shadow:0 0 0 1px var(--accent), 0 0 10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.rack-device.is-selected{ box-shadow:0 0 0 2px var(--accent), 0 0 14px var(--accent-glow); }
.rd-ear{ position:absolute; top:0; bottom:0; width:9px; left:0; background:repeating-linear-gradient(180deg, rgba(0,0,0,.38) 0 3px, transparent 3px 9px); }
.rd-ear.right{ left:auto; right:0; }
.rd-body{ position:absolute; left:11px; right:11px; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:2px 4px; }
.rd-row{ display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.rd-name{ font-size:.76rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 1px rgba(0,0,0,.45); }
.rd-he{ font-size:.6rem; opacity:.9; border:1px solid rgba(255,255,255,.45); border-radius:4px; padding:0 .28rem; flex:0 0 auto; }
.rd-ports{ display:flex; flex-wrap:wrap; gap:2px; }
.rd-ports .pp{ width:6px; height:6px; border-radius:1px; background:rgba(255,255,255,.32); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.rd-ports .pp.pp-used{ background:rgba(255,255,255,.75); }
.rd-ports .pp.pp-copper{ background:#39ff8b; }
.rd-ports .pp.pp-fiber{ background:#ffb020; }
.rack-preview{ position:absolute; left:7px; right:7px; border-radius:7px; pointer-events:none; z-index:6; transition:top .04s linear; }
.rack-preview.ok{ background:color-mix(in srgb, var(--accent) 26%, transparent); box-shadow:0 0 0 2px var(--accent), 0 0 12px var(--accent-glow); }
.rack-preview.bad{ background:color-mix(in srgb, var(--danger) 26%, transparent); box-shadow:0 0 0 2px var(--danger); }

/* =====================================================================
   Fixes: Checkbox, Projekt-Karten, Suchfeld
   ===================================================================== */
input[type="checkbox"]{ width:auto; accent-color:var(--primary); }
.row-form label{ margin:0; }
.check{
  display:inline-flex; align-items:center; gap:.45rem; margin:0; padding:.5rem .75rem;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--text); font-size:.88rem; white-space:nowrap; cursor:pointer;
}
.check input{ width:16px; height:16px; margin:0; }
.check:hover{ border-color:var(--accent); }

.search-input{ max-width:300px; margin:.2rem 0 .7rem; }

/* Projekt-Karten: Inhalt oben, Aktionen darunter – kein Ueberlappen mehr */
.proj-card{ flex-direction:column; align-items:stretch; gap:.55rem; padding:.85rem .95rem; }
.proj-main{ width:100%; }
.proj-role{ align-self:flex-start; margin-top:.1rem; }
.proj-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
.proj-actions .btn{ flex:0 0 auto; }

/* =====================================================================
   Kontextmenü, Geräte-Faces, große Port-/Bay-Ansicht
   ===================================================================== */
.ctx-menu{ position:fixed; z-index:80; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:.3rem; }
.ctx-item{ display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text); padding:.46rem .6rem; border-radius:6px; font-size:.86rem; cursor:pointer; }
.ctx-item:hover{ background:var(--surface-2); }
.ctx-item:disabled{ color:var(--text-muted); cursor:default; }
.ctx-item.danger{ color:var(--danger); }
.ctx-item.danger:hover{ background:color-mix(in srgb, var(--danger) 14%, transparent); }
.ctx-sep{ height:1px; background:var(--border); margin:.25rem .2rem; }

/* Geräte-Faces (symbolische Darstellung im Rack) */
.rd-meta{ display:flex; align-items:center; gap:.25rem; flex:0 0 auto; }
.rd-side{ font-size:.56rem; font-weight:800; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.35); border-radius:3px; padding:0 .2rem; }
.rf{ display:flex; align-items:center; gap:2px; margin-top:2px; overflow:hidden; }
.rf-ports{ flex-wrap:wrap; }
.rf-ports .rfp{ width:7px; height:7px; border-radius:1px; background:rgba(0,0,0,.30); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22); }
.rf-ports .rfp.on{ box-shadow:0 0 3px rgba(255,255,255,.55); }
.rf-bays{ gap:3px; }
.rf-bays .rfb{ flex:1; min-width:6px; height:11px; border-radius:2px; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.rf-bays .rfb.on{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.rf-ups{ gap:3px; }
.rf-ups i{ width:10px; height:13px; border:1px solid rgba(255,255,255,.5); border-radius:2px; background:linear-gradient(0deg, rgba(255,255,255,.45), transparent); }
.rf-ups b{ font-size:.6rem; opacity:.8; margin-left:.2rem; }
.rf-kvm{ justify-content:center; }
.rf-kvm i{ width:60%; height:12px; background:#0c130f; border:1px solid rgba(255,255,255,.4); border-radius:2px; }
.rf-shelf{ width:100%; height:7px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 8px, transparent 8px 16px); border-top:1px solid rgba(255,255,255,.3); }
.rf-blank{ width:100%; height:60%; background:repeating-linear-gradient(45deg, rgba(0,0,0,.18) 0 5px, transparent 5px 10px); }
.rf-cable{ gap:6px; }
.rf-cable i{ flex:1; height:8px; border-radius:4px; background:rgba(0,0,0,.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }

/* Eigene Geräte – Loeschknopf am Stencil */
.stencil{ position:relative; }
.stencil-del{ position:absolute; top:2px; right:2px; width:16px; height:16px; line-height:13px; padding:0; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--danger); font-size:11px; cursor:pointer; display:none; }
.stencil:hover .stencil-del{ display:block; }

/* Grosse, klickbare Switch-/Port-Ansicht */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.sw-graphic{ background:#10231a; border:1px solid var(--border); border-radius:10px; padding:14px; overflow-x:auto; }
.sw-rows{ display:flex; flex-direction:column; gap:6px; min-width:max-content; }
.sw-row{ display:flex; gap:4px; }
.sw-port{ width:26px; height:26px; flex:0 0 auto; border:1px solid #2a4a3a; border-radius:4px; background:#16321f; color:#9fe3bd; font-size:.66rem; cursor:pointer; }
.sw-port:hover{ border-color:var(--accent); }
.sw-port.sel{ outline:2px solid var(--accent); outline-offset:1px; }
.sw-editor{ margin-top:.8rem; }
.sw-editor h4{ margin:.2rem 0 .4rem; }

/* Server-/Storage-Bays */
.bay-graphic{ display:flex; flex-wrap:wrap; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px; }
.bay-cell{ width:66px; height:46px; border:1px solid var(--border); border-radius:5px; background:var(--surface-3); color:var(--text); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:.7rem; }
.bay-cell.used{ color:#fff; }
.bay-cell.sel{ outline:2px solid var(--accent); outline-offset:1px; }
.bay-cell small{ font-size:.6rem; opacity:.85; }

/* =====================================================================
   Raum-Editor: Etagenleiste
   ===================================================================== */
.floor-bar{
  position:absolute; left:10px; bottom:10px; z-index:8;
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; max-width:calc(100% - 20px);
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.3rem .4rem; box-shadow:var(--shadow);
}
.fb-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:0 .3rem; }
.fb-tab{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:.3rem .6rem; border-radius:6px; font-size:.82rem; cursor:pointer; }
.fb-tab:hover{ border-color:var(--accent); }
.fb-tab.active{ border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }
.fb-add{ background:transparent; border:1px dashed var(--border); color:var(--text-muted); padding:.3rem .6rem; border-radius:6px; font-size:.82rem; cursor:pointer; }
.fb-add:hover{ color:var(--text); border-color:var(--accent); }

/* Aufklappbarer Projektbaum (Seitenleiste) */
.tree-row{ display:flex; align-items:center; }
.tree-toggle{ width:18px; height:26px; display:grid; place-items:center; background:transparent; border:0; color:var(--text-muted); cursor:pointer; flex:0 0 auto; padding:0; }
.tree-toggle svg{ transition:transform .15s ease; }
.tree-group.open > .tree-row .tree-toggle svg{ transform:rotate(90deg); }
.tree-row .tree-item{ flex:1; grid-template-columns:auto 1fr auto; }
.tree-count{ font-size:.66rem; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:0 .35rem; }
.tree-children{ display:none; margin-left:1.05rem; padding-left:.35rem; border-left:1px solid var(--border); }
.tree-group.open > .tree-children{ display:block; }
.tree-doc{ display:flex; align-items:center; gap:.45rem; padding:.3rem .45rem; border-radius:6px; font-size:.82rem; color:var(--text); }
.tree-doc:hover{ background:var(--surface-2); text-decoration:none; }
.tree-doc.is-empty{ color:var(--text-muted); font-style:italic; }
.tree-doc-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-dot{ width:8px; height:8px; border-radius:2px; background:currentColor; flex:0 0 auto; }
.doc-dot.type-network{ color:#e08a00; } .doc-dot.type-room{ color:#2b86d9; } .doc-dot.type-rack{ color:#a35bd9; }

/* Typ-Icons (Sidebar-Baum + Überschriften in der Projekt-Dokumentation) */
.tree-doc-ico{ display:grid; place-items:center; width:15px; height:15px; flex:0 0 auto; }
.tree-doc-ico svg{ width:14px; height:14px; display:block; }
.doc-group-ico{ display:grid; place-items:center; width:21px; height:21px; flex:0 0 auto; }
.doc-group-ico svg{ width:19px; height:19px; display:block; }


/* Eigene Bestaetigungs-/Hinweis-Dialoge (ersetzen confirm/alert) */
.modal-backdrop.vconfirm{ z-index:90; }
.modal-confirm{ width:min(440px,92vw); }
.mc-title{ margin:.1rem 0 .5rem; font-size:1.05rem; }
.mc-msg{ margin:.2rem 0 1.1rem; color:var(--text); line-height:1.5; }
.mc-actions{ display:flex; justify-content:flex-end; gap:.5rem; }

/* =====================================================================
   Projektseite: Doc-Kacheln mit integriertem Löschen, Audit-Log, Edit-Popup
   ===================================================================== */
.doc-tile{ position:relative; }
.doc-tile-main{ display:flex; flex-direction:column; gap:.3rem; padding:.8rem .9rem; padding-right:2.3rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); box-shadow:var(--shadow); }
.doc-tile-main:hover{ border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); text-decoration:none; }
.doc-tile-del{ position:absolute; top:7px; right:7px; margin:0; }
.icon-del{ display:grid; place-items:center; width:27px; height:27px; border-radius:7px; background:transparent; border:1px solid transparent; color:var(--text-muted); cursor:pointer; opacity:0; transition:.12s ease; }
.doc-tile:hover .icon-del{ opacity:1; }
.icon-del:focus{ opacity:1; outline:none; }
.icon-del:hover{ color:var(--danger); border-color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }

.activity{ list-style:none; margin:.5rem 0 0; padding:0; }
.activity-row{ display:grid; grid-template-columns:118px 140px 1fr; gap:.6rem; padding:.42rem .2rem; border-bottom:1px solid var(--border); font-size:.86rem; align-items:baseline; }
.activity-row:last-child{ border-bottom:0; }
.act-when{ color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.act-who{ font-weight:600; }
.act-what{ color:var(--text); }
@media (max-width:760px){ .activity-row{ grid-template-columns:1fr; gap:.05rem; } }

.modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.8rem; }

/* =====================================================================
   Admin: "Neuer Nutzer"-Formular + Toggle-Schalter (eine Reihe)
   ===================================================================== */
.user-form-grid{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem 1.1rem; }
.user-form-grid .field{ display:flex; flex-direction:column; gap:.3rem; margin:0; flex:1 1 210px; max-width:320px; }
.user-form-grid .field-label{ font-size:.78rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.user-form-grid .field-label .opt{ font-weight:400; }
.user-form-grid .field input{ margin:0; width:100%; height:38px; }
.user-form-grid .toggle{ height:38px; align-self:flex-end; }
.user-form-grid .btn{ height:38px; align-self:flex-end; }
@media (max-width:760px){ .user-form-grid .field{ flex-basis:45%; max-width:none; } }

.toggle{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; margin:0; font-size:.9rem; color:var(--text); white-space:nowrap; user-select:none; }
.toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle-track{ position:relative; width:42px; height:23px; flex:0 0 auto; background:var(--surface-3); border:1px solid var(--border); border-radius:999px; transition:background .15s, box-shadow .15s, border-color .15s; }
.toggle-thumb{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--text-muted); transition:left .15s, background .15s; }
.toggle input:checked + .toggle-track{ background:var(--primary); border-color:var(--primary); box-shadow:0 0 8px var(--accent-glow); }
.toggle input:checked + .toggle-track .toggle-thumb{ left:22px; background:#fff; }
.toggle input:focus-visible + .toggle-track{ outline:2px solid var(--accent); outline-offset:2px; }
.toggle-text{ font-weight:500; }

/* =====================================================================
   Netzplan: L2/L3-Umschalter, VLAN-Auswahl
   ===================================================================== */
.tool-row .netview.active{ border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); color:var(--text); }
.check2{ display:flex; align-items:center; gap:.45rem; margin:.55rem 0; font-size:.86rem; color:var(--text); }
.check2 input{ width:auto; margin:0; }
.vlan-pick{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.1rem 0 .3rem; }
.vlan-chip{ margin:0; cursor:pointer; }
.vlan-chip input{ position:absolute; opacity:0; width:0; height:0; }
.vlan-chip span{ display:inline-block; padding:.14rem .45rem; border-radius:6px; font-size:.72rem; color:#fff; opacity:.4; border:1px solid transparent; transition:.12s; }
.vlan-chip input:checked + span{ opacity:1; box-shadow:0 0 0 2px var(--accent); }

/* =====================================================================
   Eingabe-Dialog (VELTO.prompt), "+"-Buttons je Kategorie, Dashboard
   ===================================================================== */
.mc-input{ width:100%; margin:0 0 .2rem; }
.mc-input.is-error, input.is-error{ border-color:var(--danger) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 30%, transparent); }
.modal-confirm .mc-actions{ margin-top:.9rem; }

.doc-group{ display:flex; align-items:center; gap:.5rem; }
.icon-add{
  display:grid; place-items:center; width:24px; height:24px; border-radius:7px;
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  cursor:pointer; transition:.12s ease; padding:0;
}
.icon-add:hover{ color:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }

/* Dashboard: Projektlisten */
.dash-sect-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:1.6rem; }
.dash-sect-head h2{ margin:0; }
.dash-sect-head .all-link{ font-size:.85rem; white-space:nowrap; }

/* =====================================================================
   Serverraum-Editor: mehrere Racks, Standgeräte, Geräte-Detail-Faces
   ===================================================================== */
.room-zoom{ display:flex; gap:2.6rem; align-items:flex-start; transform-origin:top left; }
.rack-col{ flex:0 0 auto; }
.rack-col.is-selected .rack-frame{ box-shadow:0 0 0 2px var(--accent), 0 0 16px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,.03); }
.rack-title{ flex-direction:column; gap:.15rem; cursor:pointer; max-width:430px; text-align:center; }
.rack-title:hover .rt-name{ color:var(--accent); }
.rt-name{ font-size:.95rem; }
.rt-desc{ font-weight:400; font-size:.74rem; color:var(--text-muted); max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rack-add{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  min-width:150px; min-height:220px; margin-top:2.4rem; padding:1.2rem;
  border:2px dashed var(--border); border-radius:14px; background:transparent;
  color:var(--text-muted); font-size:.85rem; cursor:pointer; transition:.15s ease;
}
.rack-add span{ font-size:1.7rem; line-height:1; }
.rack-add:hover{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }

/* Standgeräte (Tower auf Fachboden): links/mittig/rechts */
.rack-device.is-standing{ border-radius:6px 6px 3px 3px; }
.rack-device.is-standing.align-L{ left:9px; right:auto; width:31%; }
.rack-device.is-standing.align-C{ left:34.5%; right:auto; width:31%; }
.rack-device.is-standing.align-R{ left:auto; right:9px; width:31%; }
.rack-device.is-standing .rd-body{ left:4px; right:4px; }
.rack-device.is-standing .rd-name{ font-size:.68rem; }
.rd-feet{ position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; padding:0 5px; }
.rd-feet i{ width:8px; height:3px; background:rgba(0,0,0,.5); border-radius:2px 2px 0 0; }
.rack-preview.is-standing.align-L{ left:9px; right:auto; width:31%; }
.rack-preview.is-standing.align-C{ left:34.5%; right:auto; width:31%; }
.rack-preview.is-standing.align-R{ left:auto; right:9px; width:31%; }

/* Geräte-Faces: SFP, Rückseite (NIC/Mgmt/PSU), Outlets */
.rf-gap{ width:5px; flex:0 0 auto; }
.rf-gap.wide{ width:10px; }
.rf-ports .rfsfp{ width:10px; height:7px; border-radius:1px; background:rgba(0,0,0,.38); box-shadow:inset 0 0 0 .5px rgba(120,200,255,.45); flex:0 0 auto; }
.rf-ports .rfsfp.on{ box-shadow:0 0 3px rgba(120,200,255,.8); }
.rf-rear{ gap:6px; flex-wrap:wrap; }
.rf-group{ display:inline-flex; align-items:center; gap:2px; padding:1px 3px; border-radius:3px; background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.rf-group b{ font-size:.5rem; font-weight:700; opacity:.85; letter-spacing:.02em; margin-left:1px; }
.rf-rear .rfp{ width:7px; height:7px; border-radius:1px; background:rgba(0,0,0,.32); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22); }
.rf-rear .rfp.on{ box-shadow:0 0 3px rgba(255,255,255,.6); }
.rf-rear .rfp.mgmt{ background:#0d2b33; box-shadow:inset 0 0 0 1px #2bd9c8; }
.rf-rear .rfp.mgmt.on{ background:#2bd9c8; box-shadow:0 0 4px #2bd9c8; }
.rf-psu{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:13px; border-radius:2px; background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.rf-psu i{ width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); }
.rf-outlets{ gap:3px; flex-wrap:wrap; }
.rf-outlets .rfo{ width:9px; height:11px; border-radius:2px; background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.rf-outlets .rfo.on{ background:#e0483a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 3px rgba(224,72,58,.8); }
.rf-front-plain{ height:10px; }
.rf-power{ width:6px; height:6px; border-radius:50%; background:#39ff8b; box-shadow:0 0 4px #39ff8b; margin-left:auto; flex:0 0 auto; }

/* Port-Editor: SFP-Zellen */
.sw-port.is-sfp{ border-color:#2a4a5a; background:#142a36; color:#9fd0e3; font-size:.58rem; }
.props-btns{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; }

/* =====================================================================
   Globale Nachricht (Admin → Einstellungen): Login-Popup + Vorschau
   ===================================================================== */
.gm-backdrop{ z-index:120; }
.gm-modal{ width:min(560px,92vw); border-top:4px solid var(--accent); }
.gm-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.gm-head h2{ margin:0; font-size:1.12rem; }
.gm-icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; flex:0 0 auto; }
.gm-body{ line-height:1.65; font-size:.95rem; }
.gm-body mark{ background:color-mix(in srgb, var(--accent) 28%, transparent); color:var(--text); padding:.05em .25em; border-radius:4px; }
.gm-body u{ text-underline-offset:2px; }
.gm-info{ border-top-color:#2b86d9; }
.gm-info .gm-icon{ color:#2b86d9; background:color-mix(in srgb, #2b86d9 14%, transparent); }
.gm-warn{ border-top-color:#e08a00; }
.gm-warn .gm-icon{ color:#e08a00; background:color-mix(in srgb, #e08a00 14%, transparent); }
.gm-maintenance{ border-top-color:#1f9d63; }
.gm-maintenance .gm-icon{ color:#1f9d63; background:color-mix(in srgb, #1f9d63 14%, transparent); }
.gm-danger{ border-top-color:#d2483a; }
.gm-danger .gm-icon{ color:#d2483a; background:color-mix(in srgb, #d2483a 14%, transparent); }
.gm-toolbar{ display:inline-flex; gap:.25rem; margin:.25rem 0 .35rem; }
.gm-toolbar .btn{ min-width:32px; }
.gm-preview{ border:1px solid var(--border); border-radius:12px; padding:.9rem 1rem; background:var(--surface); }

/* =====================================================================
   Editor-Interaktivität: Bausteinsuche, große Port-Dialoge, Bay-Layouts
   ===================================================================== */
.pal-search{
  width:100%; margin:0 0 .55rem; padding:.42rem .6rem; font-size:.8rem;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text);
}
.pal-search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }

.modal-wide{ width:min(1040px,96vw); }
.pg-equip{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:flex-end; margin:.2rem 0 .7rem; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.pg-equip label{ margin:0; flex:0 1 auto; font-size:.78rem; }
.pg-equip label:first-child{ flex:1 1 240px; }
.pg-equip input{ margin:0; }
.pg-equip input[type="number"]{ width:90px; }

/* Port-Zellen: größer, mit VLAN-Anzeige im Port */
.sw-port{
  width:40px; height:44px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:1px solid #2a4a3a; border-radius:5px; background:#16321f; color:#9fe3bd; cursor:pointer; padding:1px 2px;
}
.sw-port .swp-n{ font-size:.72rem; font-weight:700; line-height:1.1; }
.sw-port .swp-vlan{ font-size:.56rem; line-height:1.1; opacity:.95; max-width:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:.6rem; }

/* Festplatten-Einschübe: bis 8 liegend (3,5" LFF), ab 9 hochkant (2,5" SFF) */
.bay-graphic.lff{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:5px; max-width:420px; }
.bay-graphic.lff .bay-cell{ width:auto; height:34px; flex-direction:row; justify-content:flex-start; gap:.6rem; padding:0 .7rem; }
.bay-graphic.lff .bay-cell span{ font-weight:700; min-width:1.2em; }
.bay-graphic.sff .bay-cell{ width:46px; height:84px; }
.bay-graphic.sff .bay-cell small{ max-width:42px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Geräte-Face im Rack: Bay-Ausrichtung */
.rf-bays.lff{ flex-wrap:wrap; gap:2px; }
.rf-bays.lff .rfb{ flex:1 1 42%; min-width:30%; height:5px; border-radius:1px; }
.rf-bays.sff .rfb{ flex:1; min-width:5px; max-width:9px; height:12px; }

/* Pro Gerät gedrehte Ansicht (zeigt Gegenseite unabhängig vom Rack) */
.rd-side.flip{ background:#0d2b33; border-color:#2bd9c8; color:#2bd9c8; font-weight:700; }

/* Undo/Redo & deaktivierte Buttons */
.btn:disabled{ opacity:.4; cursor:default; box-shadow:none; pointer-events:none; }

/* Logo (Topbar + Login) */
.brand-logo{ width:30px; height:30px; object-fit:contain; display:block; }
.brand-logo.lg{ width:60px; height:60px; }

/* Sidebar: "+"-Button je Projekt (Dokument direkt anlegen) */
.tree-add{
  display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto;
  border:1px solid transparent; border-radius:6px; background:transparent;
  color:var(--text-muted); cursor:pointer; opacity:0; transition:.12s ease; padding:0;
}
.tree-row:hover .tree-add, .tree-add:focus{ opacity:1; }
.tree-add:hover{ color:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }

/* Rack: Beide-Ansicht (Front + Rück nebeneinander) + Kabelverfolgung */
.rack-frames{ display:flex; gap:1.1rem; align-items:flex-start; }
.rf-cell{ display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.rf-caption{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.rack-device.trace-hit{ box-shadow:0 0 0 2px #2bd9c8, 0 0 14px rgba(43,217,200,.55), inset 0 1px 0 rgba(255,255,255,.25); }