/* ===== AARN glass theme for the xlxd dashboard ===== */
body {
  background:
    linear-gradient(rgba(5, 10, 20, 0.55), rgba(5, 10, 20, 0.55)),
    url('../img/xlx_bkgrnd.webp') center / cover no-repeat fixed !important;
  color: #e5e7eb;
}
body > div, #top, #menu, #content { background: transparent !important; }

table {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
th {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
td {
  background: transparent !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
tr:nth-child(even) td { background: rgba(255, 255, 255, 0.03) !important; }

a[class^="menulink"] {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px;
  color: #e5e7eb !important;
}
a.menulinkactive { background: rgba(34, 197, 94, 0.55) !important; color: #ffffff !important; }

a { color: #38bdf8; }
input[type="text"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px;
}

/* Start the background photo below the banner's yellow bar */
body {
  background-color: #0b1220 !important;
  background-image:
    linear-gradient(rgba(5, 10, 20, 0.55), rgba(5, 10, 20, 0.55)),
    url('../img/xlx_bkgrnd.webp') !important;
  background-position: center, center min(11.22vw, 220px) !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
}

/* Make the page fill the window so the tint covers the whole photo */
html { min-height: 100%; }

/* More see-through panels */
table {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
a[class^="menulink"] {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(6px);
}

/* Make data rows see-through too */
tr, tbody tr, tr[bgcolor], tr[class] {
  background: transparent !important;
  background-color: transparent !important;
}
td, td[bgcolor] {
  background-color: transparent !important;
}
tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.04) !important;
}
tr:hover td {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Extra-transparent pass ===== */
table {
  background: rgba(15, 23, 42, 0.18) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
th {
  background: rgba(255, 255, 255, 0.05) !important;
}
tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}
tr:hover td {
  background: rgba(255, 255, 255, 0.06) !important;
}
a[class^="menulink"] {
  background: rgba(15, 23, 42, 0.20) !important;
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}
a.menulinkactive {
  background: rgba(34, 197, 94, 0.45) !important;
}
input[type="text"] {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Keep text crisp over the photo */
td, th, a[class^="menulink"], input[type="text"] {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Module panel cells and peer entries: see-through */
table tr td,
table tr td[class] {
  background-color: transparent !important;
}
table td div,
table td span,
table td a,
table td li {
  background-color: transparent !important;
}

/* ===== Menu: individual buttons instead of a bar ===== */
table:has(a[class^="menulink"]) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-collapse: separate !important;
  border-spacing: 8px 0 !important;
}
table:has(a[class^="menulink"]) td {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
a[class^="menulink"] {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.30) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  text-decoration: none !important;
  transition: background 150ms ease, transform 150ms ease;
}
a[class^="menulink"]:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  transform: translateY(-1px);
}
a.menulinkactive {
  background: rgba(34, 197, 94, 0.55) !important;
  border-color: rgba(34, 197, 94, 0.8) !important;
}

/* 5px more breathing room between banner and menu buttons */
table:has(a[class^="menulink"]) {
  padding-top: 5px !important;
}

/* 5px more space between menu buttons and the info blocks */
table:has(a[class^="menulink"]) {
  padding-bottom: 5px !important;
}

/* Move the info blocks (not the menu) down 5px */
table:not(:has(a[class^="menulink"])):not(td table):not(th table) {
  margin-top: 15px !important;
}

/* Second button row (clock + Support AARN): 10px lower on dashboard pages */
.aarn-bar {
  margin-top: 20px !important;
}

/* Nested tables (like the Callsign/Module search bar) don't get the extra top margin */
table table {
  margin-top: 0 !important;
}