:root{
  --bg:#050a14;
  --bg2:#0b1220;
  --card:#0f1a2b;
  --card2:#0c1626;
  --border:#1e2a40;
  --text:#00ff00;
  --muted:#00cc66;
  --accent:#00ff00;
  --tablebg:#08111f;
  --tablebg2:#0b1627;
}

html, body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(0,255,0,.04), transparent 30%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--text) !important;
}

.app-topbar{
  background:#03070f !important;
  border-bottom:1px solid var(--border) !important;
}

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

.card{
  background:linear-gradient(180deg,var(--card),var(--card2)) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  color:var(--text) !important;
}

.card *{
  color:var(--text);
}

.table-responsive{
  background:transparent !important;
}

.table{
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--text) !important;
  --bs-table-border-color: var(--border) !important;
  --bs-table-striped-bg: rgba(0,255,0,.03) !important;
  --bs-table-striped-color: var(--text) !important;
  --bs-table-active-bg: rgba(0,255,0,.08) !important;
  --bs-table-active-color: var(--text) !important;
  --bs-table-hover-bg: rgba(0,255,0,.06) !important;
  --bs-table-hover-color: var(--text) !important;
  color:var(--text) !important;
  background:transparent !important;
  margin-bottom:0 !important;
}

.table thead,
.table tbody,
.table tfoot,
.table tr,
.table th,
.table td{
  background:transparent !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

.table thead th{
  background:var(--tablebg2) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border) !important;
}

.table tbody tr{
  background:var(--tablebg) !important;
}

.table tbody tr:nth-child(even){
  background:#09131f !important;
}

.table tbody td{
  background:transparent !important;
}

.table > :not(caption) > * > *{
  background-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.form-control,
.form-select{
  background:#0a1323 !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
}

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

.form-control::placeholder,
textarea::placeholder{
  color:rgba(0,255,0,.45) !important;
}

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

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

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

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

.text-muted{
  color:var(--muted) !important;
}

.alert{
  border:1px solid var(--border) !important;
}

.navbar-brand,
h1,h2,h3,h4,h5,h6,
label,small,span,div,p,a,td,th{
  color:var(--text) !important;
}

.list-group-item{
  background:transparent !important;
  color:var(--text) !important;
  border:0 !important;
  border-radius:10px !important;
}

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

.app-accordion .accordion-item{
  background:transparent !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

.app-accordion .accordion-button{
  background:#08111f !important;
  color:var(--text) !important;
  box-shadow:none !important;
  border:0 !important;
}

.app-accordion .accordion-button:not(.collapsed){
  background:#0b1627 !important;
  color:#00ff00 !important;
}

.app-accordion .accordion-button::after{
  filter: brightness(0) saturate(100%) invert(72%) sepia(93%) saturate(2566%) hue-rotate(74deg) brightness(107%) contrast(130%);
}

.app-accordion .accordion-body{
  background:#050d18 !important;
}

.v3-page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.v3-rack-list{
  display:grid;
  gap:12px;
}

.v3-rack-row{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(0,255,0,.14);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}

.v3-rack-icon{
  width:48px;
  height:64px;
  border-radius:10px;
  background:linear-gradient(180deg,#0a2f66,#08264d);
  position:relative;
}

.v3-rack-icon::before,
.v3-rack-icon::after{
  content:'';
  position:absolute;
  top:8px;
  bottom:8px;
  width:6px;
  background:#0f1a2b;
}

.v3-rack-icon::before{
  left:8px;
}

.v3-rack-icon::after{
  right:8px;
}

.v3-rack-title{
  font-weight:800;
}

.v3-rack-meta{
  font-size:12px;
  color:rgba(0,255,0,.75) !important;
}

.v3-rack-canvas-wrap{
  overflow:auto;
  padding:8px 0 16px 0;
}

.v3-rack-canvas{
  position:relative;
  min-width:1100px;
  height:calc(var(--rack-h,42) * 26px + 44px);
  border:16px solid #0a2f66;
  border-radius:18px;
  background:#08111f;
  box-shadow:inset 0 0 0 10px #04101f;
}

.v3-rack-rail{
  position:absolute;
  top:12px;
  bottom:12px;
  width:28px;
  background:#08264d;
}

.v3-rack-rail.left{
  left:18px;
}

.v3-rack-rail.right{
  right:18px;
}

.v3-u-line{
  position:absolute;
  left:66px;
  right:66px;
  height:26px;
  border-bottom:1px solid rgba(0,255,0,.08);
}

.v3-u-label{
  position:absolute;
  left:-46px;
  top:4px;
  font-size:11px;
  color:#00ff00 !important;
}

.v3-cable-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.v3-device-card{
  position:absolute;
  left:110px;
  right:110px;
  border-radius:14px;
  border:2px solid rgba(8,38,77,.18);
  padding:8px 12px;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  overflow:hidden;
}

.v3-dev-switch{
  background:#0b3f80;
}

.v3-dev-patchpanel{
  background:#0d2f55;
}

.v3-dev-server{
  background:#123b67;
}

.v3-dev-firewall{
  background:#ef6c00;
}

.v3-dev-other{
  background:#16436f;
}

.v3-device-card,
.v3-device-card *{
  color:#fff !important;
}

.v3-device-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}

.v3-device-title{
  font-weight:800;
  line-height:1.1;
}

.v3-device-meta{
  font-size:11px;
  opacity:.85;
}

.v3-port-grid{
  display:grid;
  gap:6px;
}

.v3-port{
  min-height:24px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.24);
}

.v3-port-linked{
  background:rgba(250,204,21,.18);
  color:#fef08a !important;
}

.v3-port-endpoint{
  background:rgba(251,146,60,.18);
  color:#fdba74 !important;
}

.v3-port-free{
  background:rgba(255,255,255,.10);
  color:#fff !important;
}

.v3-rack-bottom-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:16px;
  margin-top:16px;
}

@media (max-width: 992px){
  .v3-rack-row{
    grid-template-columns:48px 1fr;
  }

  .v3-rack-actions{
    grid-column:1 / -1;
  }

  .v3-rack-bottom-grid{
    grid-template-columns:1fr;
  }
}