/* =========================================================
   BAJER HOME v2 - Homepage dashboard theme
   Cesta: /volume1/docker/homepage/config/custom.css
   ========================================================= */

:root {
  --bh-bg: #101b2c;
  --bh-bg-deep: #0b1322;
  --bh-panel: rgba(35, 49, 67, 0.88);
  --bh-panel-soft: rgba(41, 57, 78, 0.78);
  --bh-card: rgba(43, 58, 79, 0.90);
  --bh-card-hover: rgba(56, 75, 101, 0.96);
  --bh-border: rgba(148, 163, 184, 0.18);
  --bh-border-soft: rgba(148, 163, 184, 0.10);
  --bh-text: #eaf2ff;
  --bh-muted: #aebbd0;
  --bh-blue: #1597ff;
  --bh-blue-soft: rgba(21, 151, 255, 0.22);
  --bh-shadow: 0 22px 60px rgba(0, 0, 0, 0.30);
  --bh-radius: 18px;
}

/* Celkové pozadí */
html,
body,
#__next,
#page_wrapper,
#inner_wrapper {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(21, 151, 255, 0.14), transparent 34rem),
    radial-gradient(circle at 10% 15%, rgba(30, 64, 175, 0.16), transparent 28rem),
    linear-gradient(180deg, var(--bh-bg) 0%, var(--bh-bg-deep) 100%) !important;
}

/* Šířka obsahu */
.container {
  max-width: 1620px !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}

/* =========================================================
   HORNÍ PANEL
   ========================================================= */

#information-widgets {
  position: relative !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(21, 151, 255, 0.17), transparent 18rem),
    linear-gradient(180deg, rgba(43, 58, 79, 0.96) 0%, rgba(30, 43, 60, 0.94) 100%) !important;
  border: 1px solid var(--bh-border) !important;
  border-radius: var(--bh-radius) !important;
  box-shadow: var(--bh-shadow) !important;
  padding: 0px 34px 0px 34px !important;
  margin: 24px 0 30px 0 !important;
  border-bottom: 1px solid var(--bh-border) !important;
}

/* Jemná linka v horním panelu - odstraněno */
#information-widgets::after {
  content: none;
}

/* Logo uprostřed, mimo widget - používá /images/logo.png */
#information-widgets::before {
  content: "";
  display: block;
  width: 470px;
  height: 320px;
  max-width: 90%;
  margin: 0 auto 0 auto;
  background: url("/images/logo.png") center center no-repeat;
  background-size: contain;
  /* zadny box-shadow/border-radius na obdelnik - jinak je vidět
     hranatý "polštář" za průhledným logem. Místo toho měkký stín
     kopírující tvar loga podle alfa kanálu obrázku. */
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

/* Řádek metrik pod logem */
#widgets-wrap {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 36px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#widgets-wrap .widget-container,
.widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

#widgets-wrap .widget-container {
  margin: 0 !important;
}

/* Resource widgety */
.information-widget-resource {
  padding: 3px 0 !important;
  margin-right: 0 !important;
}

.information-widget-resource .resource-icon {
  color: #cfe6ff !important;
  filter: drop-shadow(0 0 8px rgba(21,151,255,0.20));
}

.information-widget-resource .resource-usage {
  background: rgba(255,255,255,0.15) !important;
}

.information-widget-resource .resource-usage > div {
  background: linear-gradient(90deg, var(--bh-blue), #79c8ff) !important;
}

/* Datum vpravo dole */
#information-widgets-right {
  position: absolute !important;
  right: 34px !important;
  bottom: 4px !important;
  width: auto !important;
  flex-grow: 0 !important;
}

#information-widgets-right span {
  color: var(--bh-text) !important;
  font-size: 1.18rem !important;
  letter-spacing: 0.01em;
}

/* =========================================================
   SEKCE A KARTY
   ========================================================= */

/* Nadpisy sekcí */
h2,
.text-theme-800.dark\:text-theme-200,
.dark .text-theme-200 {
  color: var(--bh-text) !important;
}

h2 {
  font-size: 1.48rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.72rem !important;
}

/* Karty služeb - více selektorů pro různé verze Homepage */
a.service-card,
.service-card,
a[href].service,
div[class*="service-card"],
div[class*="service"] a[href] {
  background: linear-gradient(180deg, rgba(47, 64, 87, 0.94), rgba(38, 53, 73, 0.92)) !important;
  border: 1px solid var(--bh-border-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 9px 26px rgba(0,0,0,0.16) !important;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

a.service-card:hover,
.service-card:hover,
a[href].service:hover,
div[class*="service-card"]:hover,
div[class*="service"] a[href]:hover {
  background: linear-gradient(180deg, rgba(61, 82, 110, 0.98), rgba(43, 62, 86, 0.96)) !important;
  border-color: rgba(21, 151, 255, 0.35) !important;
  box-shadow: 0 13px 34px rgba(0,0,0,0.24), 0 0 0 1px rgba(21,151,255,0.10) inset !important;
  transform: translateY(-1px) !important;
}

/* Ikony služeb */
.service-card img,
a[href].service img,
div[class*="service"] img {
  border-radius: 8px !important;
}

/* Popisy */
.service-card p,
a[href].service p,
div[class*="service"] p {
  color: var(--bh-muted) !important;
}

/* Odsazení mezi skupinami */
div[id^="group-"] {
  margin-bottom: 1.15rem !important;
}

/* Footer / verze - čistší vzhled */
#footer {
  opacity: 0.45 !important;
}

/* Tlačítko refresh dole */
#revalidate svg {
  color: rgba(234, 242, 255, 0.75) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #information-widgets {
    min-height: 0 !important;
    max-width: 100% !important;
    margin-top: 14px !important;
    padding: 0px 18px 6px 18px !important;
  }

  #information-widgets::before {
    width: 510px;
    height: 345px;
    max-width: 90%;
  }

  #widgets-wrap {
    gap: 16px !important;
    justify-content: flex-start !important;
  }

  #information-widgets-right {
    position: static !important;
    margin-top: 12px !important;
    justify-content: center !important;
    width: 100% !important;
  }
}