/* theme-mumble.css — reskins the XLX dashboard to match the Mumble dashboard
   "nebula glass" look. Loaded AFTER layout.css so it overrides it.
   Geometry of the original absolute layout (#top 115px, #menubar @115, #content @175)
   is intentionally left intact — only colours/surfaces/typography are restyled. */
:root{
  --bg0:#070912; --bg1:#0b1022;
  --stroke:rgba(90,120,255,.22);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --ok:rgba(126,252,255,.92);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:16px;
}
body{
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial !important;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(90,120,255,.18), transparent 60%),
    radial-gradient(900px 700px at 85% 20%, rgba(126,252,255,.10), transparent 55%),
    radial-gradient(1100px 800px at 50% 90%, rgba(160,90,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  background-attachment: fixed !important;
  min-height:100vh;
}
/* subtle starfield, behind everything */
body::before{
  content:''; position:fixed; inset:0; z-index:0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:120px 120px; opacity:.16; pointer-events:none;
}
#top, #menubar, #content{ z-index:1; }

/* header: dark glass, drop the light banner image */
#top{
  background:linear-gradient(180deg, rgba(11,19,43,.92), rgba(10,18,40,.88)) !important;
  background-image:none !important;
  border-bottom:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
#top, #top *{ color:var(--text) !important; }
h1{ letter-spacing:.6px; font-weight:800; }

/* nav bar + tabs -> pills */
#menubar{
  background:rgba(9,14,30,.85) !important;
  border-bottom:1px solid var(--stroke) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.menulink, .menulinkactive{
  border:1px solid var(--stroke) !important;
  border-radius:999px !important;
  background:rgba(10,16,40,.55) !important;
  color:var(--text) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.menulink:hover{ border-color:rgba(126,252,255,.45) !important; color:var(--ok) !important; }
.menulinkactive{
  background:rgba(126,252,255,.14) !important;
  border-color:rgba(126,252,255,.45) !important;
  color:var(--ok) !important;
}

/* data tables -> glass cards with sticky-style headers */
.listingtable{
  background:linear-gradient(180deg, rgba(11,19,43,.85), rgba(10,18,40,.78)) !important;
  border:1px solid var(--stroke) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
  border-collapse:separate !important; border-spacing:0 !important;
  overflow:hidden;
  color:var(--text);
}
.listingtable th{
  background:rgba(9,14,30,.92) !important;
  background-image:none !important;
  color:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  font-weight:800; letter-spacing:.25px;
}
.listingtable td{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.88);
}
.listingtable tr:hover td{ background:rgba(126,252,255,.05); }

/* links */
a, .pl, .listinglink, .smalllink{ color:var(--ok) !important; }
a:hover{ color:#ffffff !important; }

/* filter controls */
.FilterField, .FilterSubmit{
  background:rgba(10,12,24,.55) !important;
  color:var(--text) !important;
  border:1px solid rgba(30,42,82,.65) !important;
  border-radius:10px !important;
}
.FilterField:focus{
  border-color:rgba(126,252,255,.45) !important;
  box-shadow:0 0 0 3px rgba(126,252,255,.12) !important; outline:none;
}
/* tooltip bubble */
a.tip span{ background:rgba(10,12,24,.94) !important; border:1px solid var(--stroke) !important; }

/* ---- readability: override legacy bgcolor zebra rows (white/lightblue) ---- */
#content tr[bgcolor]{ background:transparent !important; }
#content tr[bgcolor] td{ color:rgba(255,255,255,.90) !important; }
#content tr[bgcolor="#FFFFFF"] td{ background:transparent !important; }      /* odd rows */
#content tr[bgcolor="#F1FAFA"] td{ background:rgba(255,255,255,.05) !important; } /* even rows */
#content tr[bgcolor]:hover td,
.listingtable tr:hover td{ background:rgba(126,252,255,.10) !important; }
.listingtable th{ color:#ffffff !important; }

/* ---- header text title (replaces img/header.jpg) ---- */
#top .hdr-title{
  display:inline-block;
  margin:26px 0 0 20px;
  font-size:26px; font-weight:800; letter-spacing:.4px;
  color:var(--text);
  text-shadow:0 2px 18px rgba(90,120,255,.45);
}
#top img[src*="header.jpg"]{ display:none !important; }