/* Homepage: Nextcloud-inspired frosted cards, black text, white group headers.
 * Put this file in Homepage's config directory (/app/config/custom.css
 * inside the Docker container), then hard-refresh your browser.
 * Keep your existing background image in settings.yaml.
 */

:root {
  /* Increase the alpha (0.78) for more opaque cards. */
  --frosted-card: rgba(255, 255, 255, 0.78);
  --frosted-card-hover: rgba(255, 255, 255, 0.86);
  --frosted-blur: 12px;
  --frosted-radius: 18px;
  --frosted-border: rgba(255, 255, 255, 0.45);
  --frosted-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
}

/* Override Homepage's light/dark text utilities, including hover states.
 * Exclude SVG artwork so multicolour service logos retain their colours.
 * Text rendered in SVG charts is explicitly covered below.
 */
html,
body,
body *:not(svg):not(svg *),
svg text,
svg tspan {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}

svg text,
svg tspan {
  fill: #000 !important;
}

/* White service and bookmark group headers in both light and dark mode. */
body .service-group-name,
body .service-group-name *,
body .bookmark-group-name,
body .bookmark-group-name * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

input::placeholder,
textarea::placeholder {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}

/* Frost the actual card surfaces, rather than entire groups. */
.service-card,
.bookmark > a {
  background: var(--frosted-card) !important;
  background-image: none !important;
  border: 1px solid var(--frosted-border) !important;
  border-radius: var(--frosted-radius) !important;
  box-shadow: var(--frosted-shadow) !important;
  -webkit-backdrop-filter: blur(var(--frosted-blur)) !important;
  backdrop-filter: blur(var(--frosted-blur)) !important;
  transition: background-color 160ms ease, box-shadow 160ms ease !important;
}

.service-card:hover,
.bookmark > a:hover {
  background: var(--frosted-card-hover) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10) !important;
}

.service-card {
  padding: 8px !important;
}

/* Remove the dark tile behind bookmark initials/icons. */
.bookmark-icon,
.bookmark-text,
.service-title,
.service-title-text {
  background: transparent !important;
}

.bookmark > a {
  overflow: hidden;
}

/* Keep metric tiles readable within the frosted service cards. */
.service-block {
  background: rgba(255, 255, 255, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.service-name,
.bookmark-name {
  font-weight: 600 !important;
}

.service-description,
.bookmark-description {
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Give the existing search box the same white glass treatment. */
.information-widget-search input {
  background: var(--frosted-card) !important;
  border: 1px solid var(--frosted-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--frosted-shadow) !important;
  -webkit-backdrop-filter: blur(var(--frosted-blur)) !important;
  backdrop-filter: blur(var(--frosted-blur)) !important;
}

.information-widget-search button {
  background: rgba(255, 255, 255, 0.30) !important;
}

/* Search menus need a light surface even when Homepage is in dark mode. */
[role="listbox"],
[role="menu"],
[role="dialog"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border-radius: 12px !important;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #2d7386 !important;
  outline-offset: 3px;
}

/* Readable fallback for browsers without backdrop filtering. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .service-card,
  .bookmark > a,
  .information-widget-search input {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .bookmark > a {
    transition: none !important;
  }
}