/* ===========================================================================
   Rochbuster - PUBLIC dashboard (rochbuster.com)
   Redesigned 2026-08-06.

   Audience is family on phones and laptops, so this optimises for "obvious"
   over "dense": big tap targets, high-contrast titles, one clear accent.

   CLASS NAMES ARE NOT GUESSABLE. These were read off the live DOM. The
   previous version of this file styled `.services-group h2` and
   `h3.text-theme-800`, neither of which exists - the real group heading is
   `.service-group-name`, so that styling had been doing nothing. If you add
   rules here, verify the selector against the rendered page first.

   The background is deliberately pure CSS. It used to be a 2400px Unsplash
   photo fetched on every single page load, which was slow on mobile and put
   a third party in the render path of the family's front door.
   =========================================================================== */

:root {
  --rb-ink: #e8eefc;
  --rb-ink-dim: #93a3c4;
  --rb-accent: #56b6f7;
  --rb-accent-soft: rgba(86, 182, 247, 0.5);
  --rb-card: rgba(255, 255, 255, 0.045);
  --rb-card-hover: rgba(255, 255, 255, 0.085);
  --rb-edge: rgba(255, 255, 255, 0.09);
  --rb-edge-hover: rgba(86, 182, 247, 0.45);
}

/* --- Backdrop ------------------------------------------------------------ */
body {
  background-color: #070b16 !important;
  background-image:
    radial-gradient(1100px 700px at 12% -10%, rgba(56, 130, 246, 0.20), transparent 60%),
    radial-gradient(900px 650px at 88% 0%, rgba(147, 88, 246, 0.16), transparent 58%),
    radial-gradient(1000px 800px at 50% 105%, rgba(14, 165, 233, 0.12), transparent 62%),
    linear-gradient(175deg, #0a1020 0%, #070b16 55%, #05080f 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* --- Page rhythm --------------------------------------------------------- */
#page_container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem;
}

.services-group {
  margin-bottom: 2.1rem !important;
  padding-bottom: 0 !important;
}

/* --- Group headings ------------------------------------------------------ */
/* Small, quiet, and set off by an accent rule so groups read as sections
   rather than as more cards. */
.service-group-name {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--rb-ink-dim) !important;
  padding-bottom: 0.55rem !important;
  margin-bottom: 0.9rem !important;
  border-bottom: 1px solid var(--rb-edge);
  position: relative;
}

.service-group-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rb-accent), transparent);
}

/* --- Cards --------------------------------------------------------------- */
.service-card {
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-edge) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1),
              background 0.18s ease,
              border-color 0.18s ease,
              box-shadow 0.18s ease;
  height: 100%;
}

.service-card:hover {
  background: var(--rb-card-hover) !important;
  border-color: var(--rb-edge-hover) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45),
              0 0 0 1px var(--rb-accent-soft) inset;
}

/* Keyboard users get the same affordance as mouse users. */
.service-card:focus-within {
  border-color: var(--rb-edge-hover) !important;
  box-shadow: 0 0 0 2px var(--rb-accent-soft);
}

.service {
  padding: 0.3rem !important;
}

/* --- Card contents ------------------------------------------------------- */
.service-title-text,
.service-name {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--rb-ink) !important;
  letter-spacing: -0.005em;
}

.service-description {
  color: var(--rb-ink-dim) !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
  margin-top: 0.15rem;
}

/* Icons carry the recognition on this page - most people find Plex by its
   logo, not by reading "Movies & TV" - so they get a little more room. */
.service-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  transition: transform 0.18s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.06);
}

/* --- Header widgets ------------------------------------------------------ */
#information-widgets {
  margin-bottom: 1.6rem;
}

.widget-container {
  color: var(--rb-ink-dim) !important;
}

/* --- Mobile -------------------------------------------------------------- */
/* Family use this on phones more than anything else. Bigger targets, and the
   hover-lift is dropped because it just causes a flicker on tap. */
@media (max-width: 768px) {
  #page_container {
    padding: 0 0.6rem;
  }

  .service-card {
    border-radius: 14px !important;
  }

  .service-card:hover {
    transform: none;
  }

  .service-title-text,
  .service-name {
    font-size: 1.02rem !important;
  }

  .service-description {
    font-size: 0.82rem !important;
  }

  .service-icon {
    width: 2.35rem !important;
    height: 2.35rem !important;
  }

  .services-group {
    margin-bottom: 1.5rem !important;
  }
}

/* Respect a reduced-motion preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-icon {
    transition: none !important;
  }
  .service-card:hover {
    transform: none;
  }
}