:root {
  --radius: 14px;
  --border-width: 2px;
  --gap: 0.5rem;

  --card-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.25);

  --card-shadow-hover:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 6px 14px rgba(0, 0, 0, 0.32);

  --row-seam: rgba(255, 255, 255, 0.10);
  --row-seam-hover: rgba(255, 255, 255, 0.14);

  --row-bg: rgba(255, 255, 255, 0.07);

  --orange-row-hover: rgba(249, 115, 22, 0.18);
  --red-row-hover: rgba(220, 38, 38, 0.18);
  --purple-row-hover: rgba(139, 92, 246, 0.18);
  --aurral-row-hover: rgba(143, 163, 107, 0.22);
}

/* ================================================= */
/* GLOBAL CARD NORMALISATION */
/* ================================================= */

.service-card {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: var(--gap) !important;

  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

li[id],
#plex-btn,
#tautulli-btn,
#serverinst-1,
#serverinst-2,
#serverinst-3,
#serverinst-4,
#serverinst-5,
[id^="infra-"] {
  margin: 0 !important;
}

li:hover > .service-card {
  box-shadow: var(--card-shadow-hover);
}

/* ================================================= */
/* REQUEST MEDIA */
/* Seerr = purple */
/* Aurral = olive */
/* Targets by href because Homepage was not applying the IDs reliably */
/* ================================================= */

/* Seerr outer border */
li:has(a[href="https://requests.robplex.uk"]) {
  margin: 0 0 var(--gap) 0 !important;
  padding: 0 !important;
  border: var(--border-width) solid #8b5cf6 !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Aurral outer border */
li:has(a[href="https://aurral.robplex.uk"]) {
  margin: 0 0 var(--gap) 0 !important;
  padding: 0 !important;
  border: var(--border-width) solid #8fa36b !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Seerr inner card */
li:has(a[href="https://requests.robplex.uk"]) .service-card {
  border: 0 !important;
  border-radius: calc(var(--radius) - 2px) !important;
  margin: 0 !important;
  padding: var(--gap) !important;

  background-color: var(--row-bg) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Aurral inner card */
li:has(a[href="https://aurral.robplex.uk"]) .service-card {
  border: 0 !important;
  border-radius: calc(var(--radius) - 2px) !important;
  margin: 0 !important;
  padding: var(--gap) !important;

  background-color: var(--row-bg) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Seerr hover */
li:has(a[href="https://requests.robplex.uk"]):hover .service-card {
  background-color: var(--purple-row-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* Aurral hover */
li:has(a[href="https://aurral.robplex.uk"]):hover .service-card {
  background-color: var(--aurral-row-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ================================================= */
/* MEDIA SERVER – ORANGE */
/* ================================================= */

#plex-btn,
#tautulli-btn {
  margin: 0 !important;
  box-sizing: border-box !important;

  border-left: var(--border-width) solid #f97316 !important;
  border-right: var(--border-width) solid #f97316 !important;

  background: transparent !important;
}

#plex-btn {
  border-top: var(--border-width) solid #f97316 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;

  padding-top: var(--gap) !important;
  padding-bottom: calc(var(--gap) / 2) !important;
}

#tautulli-btn {
  border-top: 0 !important;
  border-bottom: var(--border-width) solid #f97316 !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;

  padding-top: calc(var(--gap) / 2) !important;
  padding-bottom: var(--gap) !important;
}

#plex-btn .service-card,
#tautulli-btn .service-card {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: var(--gap) !important;

  background-color: var(--row-bg) !important;
  box-shadow: var(--card-shadow) !important;
}

#tautulli-btn .service-card {
  box-shadow:
    inset 0 1px 0 var(--row-seam),
    var(--card-shadow) !important;
}

#plex-btn:hover .service-card,
#tautulli-btn:hover .service-card {
  background-color: var(--orange-row-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

#tautulli-btn:hover .service-card {
  box-shadow:
    inset 0 1px 0 var(--row-seam-hover),
    var(--card-shadow-hover) !important;
}

#plex-btn + #tautulli-btn {
  margin-top: 0 !important;
}

/* ================================================= */
/* SERVER INSTRUCTIONS – RED */
/* ================================================= */

#serverinst-1,
#serverinst-2,
#serverinst-3,
#serverinst-4,
#serverinst-5 {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  border-left: var(--border-width) solid #dc2626 !important;
  border-right: var(--border-width) solid #dc2626 !important;
}

#serverinst-1 {
  padding-top: var(--gap) !important;
  border-top: var(--border-width) solid #dc2626 !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

#serverinst-2,
#serverinst-3,
#serverinst-4 {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

#serverinst-5 {
  border-top: 0 !important;
  border-bottom: var(--border-width) solid #dc2626 !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

#serverinst-1 .service-card,
#serverinst-2 .service-card,
#serverinst-3 .service-card,
#serverinst-4 .service-card,
#serverinst-5 .service-card {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: var(--gap) !important;

  background-color: var(--row-bg) !important;
  box-shadow: var(--card-shadow) !important;
}

#serverinst-2 .service-card,
#serverinst-3 .service-card,
#serverinst-4 .service-card,
#serverinst-5 .service-card {
  box-shadow:
    inset 0 1px 0 var(--row-seam),
    var(--card-shadow) !important;
}

#serverinst-1:hover .service-card,
#serverinst-2:hover .service-card,
#serverinst-3:hover .service-card,
#serverinst-4:hover .service-card,
#serverinst-5:hover .service-card {
  background-color: var(--red-row-hover) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

#serverinst-2:hover .service-card,
#serverinst-3:hover .service-card,
#serverinst-4:hover .service-card,
#serverinst-5:hover .service-card {
  box-shadow:
    inset 0 1px 0 var(--row-seam-hover),
    var(--card-shadow-hover) !important;
}

/* ================================================= */
/* INFRASTRUCTURE – WHITE */
/* ================================================= */

[id^="infra-"] {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  border-left: var(--border-width) solid rgba(255, 255, 255, 0.9) !important;
  border-right: var(--border-width) solid rgba(255, 255, 255, 0.9) !important;
}

[id^="infra-"]:first-of-type {
  padding-top: var(--gap) !important;
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.9) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}

[id^="infra-"]:not(:first-of-type):not(:last-of-type) {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

[id^="infra-"]:last-of-type {
  border-top: 0 !important;
  border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

[id^="infra-"] .service-card {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: var(--gap) !important;

  background-color: var(--row-bg) !important;
  box-shadow: var(--card-shadow) !important;
}

[id^="infra-"]:hover .service-card {
  background-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* ================================================= */
/* HIDE HOMEPAGE BOTTOM CONTROL BAR */
/* ================================================= */

#style {
  display: none !important;
}