/* NetRack Pro – Neon Green Dark UI */
:root{
  --bg: #0b1220;
  --card: #0f1a2b;
  --card2:#0c1626;
  --border:#1e2a40;

  /* 🔥 NEON GREEN */
  --text:#00ff00;
  --muted:#00cc66;
  --accent:#00ff00;

  --ok:#00ff00;
  --warn:#f59e0b;
  --free:#ef4444;
}

body{ 
  background: var(--bg); 
  color: var(--text); 
}

/* ===== Topbar / Sidebar ===== */
.app-topbar{ 
  background:#050a14; 
  border-bottom:1px solid var(--border); 
}

.app-sidebar{ 
  background:#050a14; 
  min-height: calc(100vh - 56px); 
  border-right:1px solid var(--border); 
}

/* ===== Menü ===== */
.list-group-item{ 
  background: transparent; 
  border: 0; 
  color: var(--text); 
  border-radius: 10px; 
  margin: 2px 8px; 
}

.list-group-item:hover{ 
  background: rgba(0,255,0,.08); 
}

.list-group-item.active{ 
  background: rgba(0,255,0,.18); 
  color: #00ff00; 
}

/* ===== Cards ===== */
.card{ 
  background: linear-gradient(180deg,var(--card),var(--card2)); 
  border:1px solid var(--border); 
  border-radius: 16px; 
}

.card .card-header{ 
  background: transparent; 
  border-bottom:1px solid var(--border); 
}

/* ===== Tabellen ===== */
.table{ 
  color: var(--text); 
}

.table thead th{ 
  color: var(--muted); 
  border-bottom:1px solid var(--border); 
}

.table td, .table th{ 
  border-color: var(--border); 
}

/* ===== Formulare ===== */
.form-control, .form-select{ 
  background:#0a1323; 
  border:1px solid var(--border); 
  color: var(--text); 
}

.form-control:focus, .form-select:focus{ 
  box-shadow: 0 0 0 .2rem rgba(0,255,0,.2); 
  border-color: #00ff00; 
}

/* ===== Buttons ===== */
.btn-primary{ 
  background: #00ff00; 
  color:#000; 
  border:0; 
}

.btn-primary:hover{
  background: #00cc66;
}

.btn-outline-light{ 
  border-color: rgba(0,255,0,.4); 
  color: var(--text); 
}

.btn-outline-light:hover{ 
  background: rgba(0,255,0,.12); 
  color: #00ff00; 
}

/* ===== Badges ===== */
.badge-soft{ 
  background: rgba(0,255,0,.12); 
  color: #00ff00; 
  border:1px solid rgba(0,255,0,.25); 
}

/* ===== Suche ===== */
.app-search{ min-width: 320px; }
@media (max-width: 992px){ .app-search{ min-width: 0; } }

/* ===== Status Punkte ===== */
.dot{ 
  width:10px; 
  height:10px; 
  border-radius:999px; 
  display:inline-block; 
  border:1px solid rgba(255,255,255,.18); 
}

.dot-ok{ background: rgba(0,255,0,.9); }
.dot-warn{ background: rgba(245,158,11,.75); }
.dot-free{ background: rgba(239,68,68,.75); }

/* ===== Rack Layout ===== */
.rack-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.rack-card{ 
  transition: transform .12s ease, box-shadow .12s ease; 
}

.rack-card:hover{ 
  transform: translateY(-1px); 
  box-shadow: 0 10px 30px rgba(0,255,0,.15); 
}

/* ===== Rack View ===== */
.rack-view{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  padding:14px;
}

.u-grid{
  display:grid;
  grid-template-rows: repeat(var(--u), 20px);
  gap: 2px;
  position: relative;
  background: rgba(0,0,0,.2);
  border-radius: 14px;
  padding: 10px;
}

.u-row{ 
  border-bottom: 1px dashed rgba(0,255,0,.1); 
  position: relative; 
}

.u-label{
  position:absolute;
  left: -48px;
  width: 44px;
  text-align:right;
  color: rgba(0,255,0,.6);
  font-size: 11px;
  top: -6px;
}

/* ===== Devices ===== */
.device-block{
  position:absolute;
  left: 10px;
  right: 10px;
  border-radius: 14px;
  border:1px solid rgba(0,255,0,.2);
  padding: 10px 12px;
  cursor:pointer;
  transition: transform .10s ease, filter .10s ease;
}

.device-block:hover{ 
  transform: translateY(-1px); 
  filter: brightness(1.1); 
}

.device-type-switch{ background: rgba(0,255,0,.12); }
.device-type-patchpanel{ background: rgba(0,255,0,.08); }
.device-type-firewall{ background: rgba(249,115,22,.16); }
.device-type-server{ background: rgba(0,255,0,.14); }
.device-type-ups{ background: rgba(168,85,247,.14); }
.device-type-other{ background: rgba(229,231,235,.08); }

.device-title{ font-weight: 650; }
.device-meta{ color: rgba(0,255,0,.7); font-size: 12px; }

/* ===== Ports ===== */
.port-grid{
  display:grid;
  gap: 8px;
  grid-template-columns: repeat(12, minmax(0,1fr));
}

@media (max-width: 992px){ 
  .port-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); } 
}

@media (max-width: 576px){ 
  .port-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } 
}

.port-tile{
  border-radius: 12px;
  border:1px solid rgba(0,255,0,.2);
  background: rgba(0,255,0,.05);
  padding: 10px 6px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}

.port-tile small{ 
  display:block; 
  color: rgba(0,255,0,.7); 
}

.port-linked{ 
  background: rgba(0,255,0,.15); 
  border-color: rgba(0,255,0,.35); 
}

.port-endpoint{ 
  background: rgba(245,158,11,.12); 
  border-color: rgba(245,158,11,.28); 
}

.port-free{ 
  background: rgba(239,68,68,.10); 
  border-color: rgba(239,68,68,.22); 
}

/* ===== Global Neon Text Override ===== */
body,
p,
span,
label,
div,
a,
li,
td,
th,
h1, h2, h3, h4, h5, h6,
small,
strong {
  color: #00ff00;
}

/* Bootstrap helpers überschreiben */
.text-muted,
.text-secondary,
.text-dark,
.text-body,
.text-black-50,
.text-white-50,
.form-text,
small,
label,
.card-title,
.card-text {
  color: #00ff00 !important;
}

/* Login/Card Bereiche */
.card,
.card * {
  color: #00ff00;
}

.card input,
.card select,
.card textarea {
  color: #00ff00 !important;
}

/* Placeholder */
::placeholder {
  color: rgba(0,255,0,.55) !important;
  opacity: 1;
}

/* Links */
a {
  color: #00ff00;
}
a:hover {
  color: #00cc66;
}

/* Tabellen / Listen */
.table,
.table * {
  color: #00ff00;
}

/* Navbar */
.navbar,
.navbar * {
  color: #00ff00 !important;
}

/* Buttons mit dunkler Schrift korrigieren */
.btn-primary {
  background: #00ff00 !important;
  color: #000 !important;
}
.btn-primary:hover {
  background: #00cc66 !important;
  color: #000 !important;
}

/* ===== FORCE NEON GREEN TEXT ===== */
html, body,
body *,
p, span, div, label, small, strong,
h1, h2, h3, h4, h5, h6,
a, li, td, th {
  color: #00ff00 !important;
}

/* Gedimmte Texte trotzdem grün, aber etwas weicher */
.text-muted,
.text-secondary,
.text-body,
.text-dark,
.text-black-50,
.text-white-50,
.small,
.form-text {
  color: #00cc66 !important;
}

/* Inputs, Selects, Textareas */
input,
select,
textarea,
.form-control,
.form-select {
  color: #00ff00 !important;
  background: #0a1323 !important;
  border-color: #1e2a40 !important;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: rgba(0,255,0,.55) !important;
  opacity: 1;
}

/* Tabellen */
.table,
.table * {
  color: #00ff00 !important;
}

/* Karten */
.card,
.card * {
  color: #00ff00 !important;
}

/* Navbar / Sidebar */
.navbar,
.navbar *,
.app-sidebar,
.app-sidebar * {
  color: #00ff00 !important;
}

/* Labels */
.form-label,
label {
  color: #00ff00 !important;
}

/* Buttons */
.btn-primary {
  background: #00ff00 !important;
  color: #000 !important;
  border: 0 !important;
}

.btn-primary:hover {
  background: #00cc66 !important;
  color: #000 !important;
}

.btn-outline-light {
  color: #00ff00 !important;
  border-color: rgba(0,255,0,.4) !important;
}

.btn-outline-light:hover {
  background: rgba(0,255,0,.12) !important;
  color: #00ff00 !important;
}

/* Badges */
.badge-soft {
  background: rgba(0,255,0,.12) !important;
  color: #00ff00 !important;
  border: 1px solid rgba(0,255,0,.25) !important;
}