/* ==========================================================================
   huflix cockpit - custom theme
   Loaded automatically by homepage from /app/config/custom.css.
   Selectors are the real ones from the homepage source (src/components/services):
     li.service > div  .. the card
     .service-name / .service-group-name / .service-tag
     #information-widgets / #widgets-wrap / #bookmarks / #footer
   Everything below is cosmetic - deleting this file returns the stock look.
   ========================================================================== */

:root {
  --hx-accent: #5eead4;
  --hx-accent-dim: rgba(94, 234, 212, 0.5);
  --hx-card: rgba(17, 25, 40, 0.55);
  --hx-card-hover: rgba(24, 34, 54, 0.72);
  --hx-border: rgba(148, 163, 184, 0.14);
  --hx-border-hover: rgba(94, 234, 212, 0.38);
  --hx-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.75);
}

/* --- page ---------------------------------------------------------------- */

#page_container {
  scroll-behavior: smooth;
}

/* Let the SVG blooms breathe instead of being flattened by the overlay. */
#background {
  filter: saturate(1.05);
}

/* --- group headings ------------------------------------------------------ */

.service-group-name,
#bookmarks h2 {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--hx-accent) !important;
  opacity: 0.92;
}

/* Hairline that fades out to the right, under each group title. */
.services-group > div:first-child,
.service-group-name {
  position: relative;
}
.service-group-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 1px;
  background: linear-gradient(90deg, var(--hx-accent-dim), transparent 65%);
}

.service-group-icon {
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.35));
}

/* --- service cards ------------------------------------------------------- */

li.service > div {
  background: var(--hx-card) !important;
  border: 1px solid var(--hx-border);
  border-radius: 14px !important;
  box-shadow: var(--hx-shadow);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

li.service > div:hover {
  background: var(--hx-card-hover) !important;
  border-color: var(--hx-border-hover);
  transform: translateY(-3px);
  box-shadow:
    0 16px 34px -14px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(94, 234, 212, 0.08);
}

.service-name {
  font-weight: 600 !important;
  letter-spacing: 0.005em;
}

/* Descriptions are secondary - calm them down until hover. */
.service-description {
  opacity: 0.62;
  transition: opacity 0.18s ease;
}
li.service > div:hover .service-description {
  opacity: 0.9;
}

/* Icons lift with the card. */
.service-icon {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}
li.service > div:hover .service-icon {
  transform: scale(1.06);
}

/* --- status dots & tags -------------------------------------------------- */

.status-dot {
  box-shadow: 0 0 8px 1px currentColor;
}

.service-tag {
  opacity: 0.7;
  transition: opacity 0.18s ease;
}
li.service > div:hover .service-tag {
  opacity: 1;
}

/* --- header / information widgets --------------------------------------- */

#information-widgets {
  padding-top: 0.4rem;
}

#widgets-wrap .widget-inner,
#information-widgets .information-widget-resources,
#information-widgets .information-widget-openmeteo,
#information-widgets .information-widget-datetime {
  border-radius: 12px;
}

.information-widget-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.68;
}

/* Resource bars pick up the accent instead of stock grey. */
#information-widgets .rounded-b-md > div,
#information-widgets .resource-bar > div {
  background: linear-gradient(90deg, var(--hx-accent), #38bdf8) !important;
}

/* --- quicklaunch --------------------------------------------------------- */

#quicklaunch-input {
  border-radius: 12px !important;
  border: 1px solid var(--hx-border) !important;
  backdrop-filter: blur(12px);
}
#quicklaunch-input:focus {
  border-color: var(--hx-border-hover) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

/* --- bookmarks ----------------------------------------------------------- */

#bookmarks a > div {
  border-radius: 12px !important;
  border: 1px solid var(--hx-border);
  background: rgba(17, 25, 40, 0.42) !important;
  backdrop-filter: blur(8px);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
#bookmarks a > div:hover {
  border-color: var(--hx-border-hover);
  transform: translateY(-2px);
}

/* --- entrance ------------------------------------------------------------ */

@keyframes hx-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.services-group {
  animation: hx-rise 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.services-group:nth-of-type(1) { animation-delay: 0.02s; }
.services-group:nth-of-type(2) { animation-delay: 0.08s; }
.services-group:nth-of-type(3) { animation-delay: 0.14s; }
.services-group:nth-of-type(4) { animation-delay: 0.20s; }
.services-group:nth-of-type(5) { animation-delay: 0.26s; }

/* Respect the OS setting - no motion, no transforms. */
@media (prefers-reduced-motion: reduce) {
  .services-group { animation: none; }
  li.service > div,
  li.service > div:hover,
  #bookmarks a > div:hover,
  .service-icon {
    transition: none;
    transform: none;
  }
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 640px) {
  li.service > div {
    backdrop-filter: blur(6px);           /* cheaper on phones */
    -webkit-backdrop-filter: blur(6px);
  }
  li.service > div:hover {
    transform: none;                       /* no hover lift on touch */
  }
  .service-group-name {
    font-size: 0.72rem !important;
  }
}

/* --- footer -------------------------------------------------------------- */

#footer {
  opacity: 0.35;
}