/* ===== Premium Homelab Glass + Blurred Wallpaper ===== */
:root{
  --wallpaper: url("http://192.168.1.54:8099/wallpaper.png");
}

html, body, #__next{
  height:100% !important;
  min-height:100% !important;
  background: var(--wallpaper) center/cover no-repeat fixed !important;
  background-color:#020617 !important;
}

/* Stronger cinematic overlay */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.55), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,0.60), transparent 62%),
    linear-gradient(135deg, rgba(2,6,23,0.88), rgba(2,6,23,0.72));
}

/* Add a soft blur layer ON TOP of wallpaper (keeps text sharp) */
html::after{
  content:"";
  position:fixed;
  inset:-20px;
  z-index:0;
  pointer-events:none;
  background: var(--wallpaper) center/cover no-repeat fixed;
  filter: blur(14px) saturate(1.05) brightness(0.9);
  opacity:0.55; /* tune 0.40 - 0.70 */
  transform: scale(1.05);
}

/* Keep app content above both overlays */
#__next, main, .container, .page{
  position:relative;
  z-index:1;
}

/* ===== Cards: real glass tiles, not long stripes ===== */
.service-card,
.widget,
.header{
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(15, 23, 42, 0.55) !important; /* darker glass */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  border-radius: 14px;
}

/* Reduce the “full-width bar” look by limiting internal stretching */
.service-card{
  padding: 14px 16px !important;
}

/* Slight hover lift */
.service-card:hover{
  transform: translateY(-4px);
  transition: all .2s ease;
}

/* Make headings pop a bit */
.section-title{
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .95;
}

/* Optional: make status tags more readable */
.status-running, .status-healthy{
  filter: brightness(1.25);
}
/* ===== Header tweaks (glass + compact) ===== */

/* header compacter + glass look */
.header {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  padding: 10px 12px !important;
}

/* zoekbalk kleiner (breedte) */
.header input[type="search"],
.header input[placeholder*="Search"],
.header input[placeholder*="Zoek"] {
  width: 320px !important;      /* <- pas aan (240-420) */
  max-width: 40vw !important;
  height: 36px !important;
  border-radius: 12px !important;
}

/* minder verticale ruimte tussen secties */
.section-title { margin: 14px 0 8px !important; }
.section { margin-bottom: 10px !important; }

/* cards compacter zodat alles op 1 pagina past */
.service-card { padding: 12px 14px !important; }

/* ===== Fit-to-screen (reduce scroll) ===== */
main { padding-bottom: 8px !important; }
.service-card { min-height: 62px !important; }