/* ── Design-Tokens ─────────────────────────── */
:root {
  --sidebar-bg:     #1e293b;
  --sidebar-hover:  #2d3f56;
  --sidebar-active: #dc3545;
  --sidebar-w:      260px;
  --topbar-h:       56px;
}
body { background: #f1f5f9; }

/* ── Sidebar ─────────────────────────────────────────── */
#sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  z-index: 1040; transition: transform .28s ease;
  overflow-y: auto;
}
#sidebar .sidebar-brand {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#sidebar .sidebar-brand .brand-name {
  font-weight: 700; font-size: 1rem; color: #fff; line-height: 1.2;
}
#sidebar .sidebar-brand .brand-sub {
  font-size: .65rem; color: rgba(255,255,255,.45); letter-spacing: .06em;
}
#sidebar .sidebar-section {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.35); text-transform: uppercase;
  padding: 1.1rem 1.25rem .35rem;
}
#sidebar .nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1.25rem; color: rgba(255,255,255,.7);
  font-size: .875rem; border-radius: 0;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
#sidebar .nav-link i { font-size: 1rem; flex-shrink: 0; }
#sidebar .nav-link:hover  { background: var(--sidebar-hover); color: #fff; }
#sidebar .nav-link.active { background: var(--sidebar-active); color: #fff; font-weight: 600; }
#sidebar .nav-link .badge { margin-left: auto; font-size: .65rem; }
#sidebar .sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
#sidebar .sidebar-footer a {
  display: flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.5); font-size: .8rem;
  text-decoration: none; transition: color .15s;
}
#sidebar .sidebar-footer a:hover { color: #fff; }

/* ── Topbar (Mobile) ─────────────────────────────────── */
#topbar {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h); background: var(--sidebar-bg);
  align-items: center; padding: 0 1rem; z-index: 1039;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#topbar .topbar-title { color: #fff; font-weight: 700; font-size: .95rem; flex: 1; }

/* ── Main Content ─────────────────────────────────────── */
#main-wrap {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 2rem 2rem 3rem;
}

/* ── Overlay (Mobile) ────────────────────────────────── */
#sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 1038;
}

/* ── Mobile-Breakpoint ───────────────────────────────── */
@media (max-width: 991px) {
  #sidebar        { transform: translateX(calc(var(--sidebar-w) * -1)); }
  #sidebar.open   { transform: translateX(0); }
  #sidebar-overlay.open { display: block; }
  #main-wrap      { margin-left: 0; padding: calc(var(--topbar-h) + 1rem) 1rem 2rem; }
  #topbar         { display: flex; }
}

/* ── Flash-Meldungen ─────────────────────────────────── */
.flash-wrap { position: sticky; top: 0; z-index: 100; margin-bottom: 1.25rem; }

/* ── Stat-Karten ─────────────────────────────────────── */
.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}

/* ── Device-Typ Badge-Farben ─────────────────────────── */
.badge-router      { background:#0d6efd20;color:#0d6efd;border:1px solid #0d6efd40; }
.badge-switch      { background:#19875420;color:#198754;border:1px solid #19875440; }
.badge-access_point{ background:#0dcaf020;color:#0a8ea0;border:1px solid #0dcaf040; }
.badge-server      { background:#6610f220;color:#6610f2;border:1px solid #6610f240; }
.badge-firewall    { background:#dc354520;color:#dc3545;border:1px solid #dc354540; }
.badge-workstation { background:#fd7e1420;color:#e07016;border:1px solid #fd7e1440; }
.badge-printer     { background:#6c757d20;color:#495057;border:1px solid #6c757d40; }
.badge-camera      { background:#20c99720;color:#118970;border:1px solid #20c99740; }
.badge-phone       { background:#ffc10720;color:#a07800;border:1px solid #ffc10740; }
.badge-ups         { background:#6f42c120;color:#6f42c1;border:1px solid #6f42c140; }
.badge-other       { background:#adb5bd20;color:#6c757d;border:1px solid #adb5bd40; }

/* ── Status-Dot ──────────────────────────────────────── */
.status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.status-dot.active         { background: #198754; }
.status-dot.inactive       { background: #adb5bd; }
.status-dot.maintenance    { background: #ffc107; }
.status-dot.decommissioned { background: #dc3545; }

/* ── Druck ───────────────────────────────────────────── */
@media print {
  #sidebar, #topbar, #sidebar-overlay { display: none !important; }
  #main-wrap { margin-left: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
}

/* ── IP-Code ─────────────────────────────────────────── */
.ip-text {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .82rem;
}

/* ── Rack / RU styles ─────────────────────────────────── */
:root {
  --ru-height: 44px; /* visual height of one HE */
  --ru-gap: .25rem;  /* gap between RUs */
  --ru-unit: calc(var(--ru-height) + var(--ru-gap));
}
.rack-ru { display:block; box-sizing:border-box; height: var(--ru-height); margin-bottom: var(--ru-gap); }
.rack-assignment { display:block; overflow:hidden; }
.assignment-label { width:100%; text-align:center; }
.rack-ru .small.text-muted { font-size: .85rem; color:#6c757d; }

/* highlight assigned units */
.rack-assignment {
  background: linear-gradient(180deg, #dbeeff 0%, #eaf6ff 100%);
  border: 1px solid rgba(13,110,253,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(13,110,253,0.04);
  position: relative;
  border-left: 4px solid rgba(13,110,253,0.9);
}
.rack-ru { background: #f3f4f6; }
.rack-ru .btn-place { margin-right: .5rem; }
.assignment-label strong { color: #05204d; font-weight: 700; }
.assignment-label .small { color: #16324a; opacity: 0.9; }

/* make free slots slightly darker / more neutral */
.rack-ru:not(.rack-assignment) { background: #f3f4f6; border: 1px solid #e6e9ee; }

/* virtual rack container slightly darker */
#virtual-rack { background: #eef2f6; border: 1px solid #e0e6ec; padding: 8px; }

/* improve remove button contrast inside assigned blocks */
.rack-assignment .btn-outline-danger { border-color: rgba(220,53,69,0.18); color: #c92a2a; }
.rack-assignment .btn-outline-danger:hover { background: rgba(220,53,69,0.04); }

/* ── Tabellen ────────────────────────────────────────── */
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Progress ────────────────────────────────────────── */
.progress { border-radius: 10px; }