html,
body,
#page_container {
  color: #ecf8ff !important;
}

/* =========================
   GROUPS / SECTIONS
   ========================= */
div[data-name],
section {
  margin-bottom: 26px !important;
  padding: 14px 14px 18px 14px !important;
  border-radius: 18px !important;
  background: rgba(10, 17, 28, 0.42) !important;
  border: 1px solid rgba(72, 202, 228, 0.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Gruppentitel */
div[data-name] h2,
section h2,
h2 {
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: #eaf7ff !important;
  margin-bottom: 14px !important;
}

/* =========================
   CARDS GENERAL
   ========================= */
.service-card,
.bookmark,
.widget-card,
div[class*="service_"],
div[class*="bookmark_"] {
  min-height: 94px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 180, 216, 0.14) !important;
  background:
    radial-gradient(circle at top left, rgba(90, 170, 255, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(18, 28, 45, 0.80), rgba(10, 17, 30, 0.90)) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
  overflow: hidden !important;
}

.service-card:hover,
.bookmark:hover,
.widget-card:hover,
div[class*="service_"]:hover,
div[class*="bookmark_"]:hover {
  transform: translateY(-2px);
  border-color: rgba(72, 202, 228, 0.30) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(72, 202, 228, 0.05) inset !important;
}

/* =========================
   LINKS / INNER CARD LAYOUT
   ========================= */
.service-card > a,
.bookmark > a,
.widget-card > a,
div[class*="service_"] > a,
div[class*="bookmark_"] > a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 15px 16px !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.bookmark a > div,
.service-card a > div,
.widget-card a > div,
div[class*="bookmark_"] a > div,
div[class*="service_"] a > div {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* =========================
   TITLES / TEXT
   ========================= */
.service-card h3,
.bookmark h3,
.widget-card h3,
div[class*="service_"] h3,
div[class*="bookmark_"] h3 {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
  color: #f4fbff !important;
}

.service-card p,
.bookmark p,
.widget-card p,
div[class*="service_"] p,
div[class*="bookmark_"] p {
  font-size: 0.87rem !important;
  line-height: 1.3 !important;
  color: #9fb3c8 !important;
  margin: 0 !important;
}

/* =========================
   ICONS
   ========================= */
.service-card img,
.service-card svg,
.widget-card img,
.widget-card svg,
div[class*="service_"] img,
div[class*="service_"] svg {
  width: 27px !important;
  height: 27px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.bookmark img,
.bookmark svg,
div[class*="bookmark_"] img,
div[class*="bookmark_"] svg {
  width: 19px !important;
  height: 19px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  opacity: 0.95 !important;
}

/* =========================
   BOOKMARK / DOC SECTIONS
   kompakter und ruhiger
   ========================= */
.bookmark,
div[class*="bookmark_"] {
  min-height: 74px !important;
  border-radius: 15px !important;
}

.bookmark > a,
div[class*="bookmark_"] > a {
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
}

.bookmark h3,
div[class*="bookmark_"] h3 {
  font-size: 0.93rem !important;
  margin-bottom: 2px !important;
}

.bookmark p,
div[class*="bookmark_"] p {
  font-size: 0.82rem !important;
  color: #a9bbcd !important;
}

/* =========================
   METRICS / WIDGET CONTENT
   ========================= */
[class*="widget"] [class*="value"],
[class*="widget"] [class*="metric"],
[class*="widget"] .text-xs,
[class*="widget"] .text-sm {
  color: #edf8ff !important;
}

[class*="widget"] .text-xs,
[class*="widget"] .uppercase {
  letter-spacing: 0.02em !important;
  opacity: 0.88 !important;
}

[class*="widget"] strong,
[class*="widget"] b {
  color: #ffffff !important;
}

/* Zahlen/Metriken unten optisch ruhiger */
.service-card [class*="grid"],
.widget-card [class*="grid"],
div[class*="service_"] [class*="grid"] {
  gap: 8px !important;
}

/* =========================
   SEARCH
   ========================= */
input,
.search-input,
input[type="text"] {
  background: rgba(18, 24, 35, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #ecf8ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

input:focus,
.search-input:focus,
input[type="text"]:focus {
  outline: none !important;
  border-color: rgba(72, 202, 228, 0.28) !important;
  box-shadow:
    0 0 0 3px rgba(72, 202, 228, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* =========================
   ERROR / WARNING STATES
   weniger brutal als vorher
   ========================= */
[class*="error"],
[class*="Error"],
.bg-red-500,
.bg-rose-500,
.bg-red-600,
.bg-rose-600 {
  background: linear-gradient(
    180deg,
    rgba(120, 18, 52, 0.78),
    rgba(92, 12, 40, 0.78)
  ) !important;
  border: 1px solid rgba(255, 70, 120, 0.26) !important;
  border-left: 3px solid rgba(255, 85, 128, 0.55) !important;
  color: #ffd5df !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Fehlertexte in Balken */
[class*="error"] *,
[class*="Error"] * {
  color: #ffd5df !important;
}

/* =========================
   STATUS DOTS / BADGES
   ========================= */
[class*="status"],
[class*="badge"] {
  border-radius: 999px !important;
}

/* =========================
   SPACING INSIDE LAYOUT
   ========================= */
div[class*="services"],
div[class*="bookmarks"],
div[class*="widgets"] {
  gap: 14px !important;
}

/* =========================
   COLLAPSED / BACKEND GROUPS
   ========================= */
details,
summary {
  color: #e7f6ff !important;
}

summary {
  cursor: pointer !important;
  opacity: 0.92 !important;
}

/* =========================
   SCROLLBAR
   ========================= */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 216, 0.28);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 180, 216, 0.42);
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

/* =========================
   MOBILE / SMALLER WIDTH
   ========================= */
@media (max-width: 900px) {
  div[data-name],
  section {
    padding: 12px 12px 16px 12px !important;
    margin-bottom: 18px !important;
  }

  .service-card,
  .bookmark,
  .widget-card,
  div[class*="service_"],
  div[class*="bookmark_"] {
    min-height: 84px !important;
  }

  .service-card > a,
  .bookmark > a,
  .widget-card > a,
  div[class*="service_"] > a,
  div[class*="bookmark_"] > a {
    padding: 13px 14px !important;
  }

  .service-card h3,
  .bookmark h3,
  .widget-card h3,
  div[class*="service_"] h3,
  div[class*="bookmark_"] h3 {
    font-size: 0.93rem !important;
  }

  .service-card p,
  .bookmark p,
  .widget-card p,
  div[class*="service_"] p,
  div[class*="bookmark_"] p {
    font-size: 0.81rem !important;
  }
}
/* =========================
   HERO-LAYER (optische Priorität)
   ========================= */

/* Erste 4 Services optisch hervorheben */
div[data-name="🖥️ Infrastruktur"] .service-card:nth-child(-n+4) {
  background:
    radial-gradient(circle at top left, rgba(72, 202, 228, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(20, 32, 55, 0.9), rgba(10, 18, 35, 0.95)) !important;
  border: 1px solid rgba(72, 202, 228, 0.25) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 0 0 1px rgba(72, 202, 228, 0.08) inset !important;
}

/* =========================
   ERROR ULTRA CLEAN (kein Banner mehr)
   ========================= */

[class*="error"],
[class*="Error"],
.bg-red-500,
.bg-rose-500,
.bg-red-600,
.bg-rose-600 {
  background: rgba(255, 80, 120, 0.12) !important;
  border: 1px solid rgba(255, 80, 120, 0.25) !important;
  border-left: 2px solid rgba(255, 80, 120, 0.5) !important;
  color: #ffb3c7 !important;
  font-size: 0.85rem !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}

/* =========================
   DOKU / TOOLBOX LOOK
   ========================= */

.bookmark,
div[class*="bookmark_"] {
  background:
    linear-gradient(180deg, rgba(18, 28, 45, 0.65), rgba(10, 17, 30, 0.75)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.bookmark:hover,
div[class*="bookmark_"]:hover {
  border-color: rgba(72, 202, 228, 0.25) !important;
  transform: translateY(-1px);
}

/* =========================
   MEDIA SECTION BALANCE
   ========================= */

/* Immich leicht hervorheben */
div[data-name="🎬 Medien"] .service-card:first-child {
  border-color: rgba(72, 202, 228, 0.25) !important;
  background:
    radial-gradient(circle at top left, rgba(72, 202, 228, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(18, 28, 45, 0.85), rgba(10, 17, 30, 0.95)) !important;
}

/* Plex Error weniger dominant */
div[data-name="🎬 Medien"] .service-card:nth-child(2) {
  opacity: 0.92;
}

/* =========================
   MICRO-POLISH
   ========================= */

/* Status dots dezenter */
[class*="status"] {
  transform: scale(0.85);
  opacity: 0.85;
}

/* mehr Luft zwischen Reihen */
div[class*="services"] {
  gap: 16px !important;
}