/* ============================================================
   Einsatzleitstand — Homepage Custom CSS v2
   ============================================================ */

:root {
  --ember:      #ef4444;
  --ember-hot:  #f97316;
  --ember-dim:  rgba(239, 68, 68, 0.35);
  --ember-glow: rgba(239, 68, 68, 0.15);
  --panel-bg:   rgba(12, 14, 20, 0.78);
  --panel-brd:  rgba(255, 255, 255, 0.05);
  --text-hi:    #f5f5f7;
  --text-mid:   #a1a1aa;
}

/* ---------- Background override: dark gradient base ---------- */
body, #page_container {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(239,68,68,0.08), transparent 60%),
    linear-gradient(180deg, #0a0b10 0%, #0d0f17 40%, #0a0b10 100%) !important;
}
/* (overlay removed — caused blackout) */

/* ---------- Ember edge indicator ---------- */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--ember) 20%, var(--ember-hot) 50%, var(--ember) 80%, transparent);
  box-shadow: 0 0 18px var(--ember-dim), 0 0 36px var(--ember-glow);
  z-index: 9999;
  animation: ember-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ember-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- Service groups side-by-side (grid layout) ---------- */
div:has(> .services-group + .services-group) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px 28px !important;
  align-items: start !important;
}
/* Large groups span both columns: Medien (3), Applikationen (4) */
div:has(> .services-group + .services-group) > .services-group:nth-of-type(3),
div:has(> .services-group + .services-group) > .services-group:nth-of-type(4) {
  grid-column: 1 / -1 !important;
}
@media (max-width: 1100px) {
  div:has(> .services-group + .services-group) {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Cards ---------- */
.services-group .service-card,
.services-group .service,
#information-widgets > div,
.bookmark {
  background: var(--panel-bg) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--panel-brd) !important;
  border-radius: 10px !important;
  transition: all 0.22s ease;
}

.services-group .service-card:hover,
.bookmark:hover {
  border-color: var(--ember-dim) !important;
  box-shadow:
    0 0 0 1px var(--ember-dim),
    0 10px 30px rgba(0,0,0,0.55),
    0 0 36px var(--ember-glow);
  transform: translateY(-2px);
}

/* ---------- Status dots: make them visible, hide verbose text labels ---------- */
/* Hide only textual status badges if any text remains */
[class*="statusLabel"],
[class*="StatusLabel"] {
  display: none !important;
}
/* Boost dot visibility */
.status-dot, [class*="status"][class*="dot"] {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px currentColor;
}

/* ---------- Group titles: tactical labels ---------- */
.services-group > h2,
h2.services-group,
h2 {
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
  color: var(--text-hi) !important;
  position: relative;
  padding-left: 16px !important;
  font-size: 0.95rem !important;
}
.services-group > h2::before,
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(180deg, var(--ember), var(--ember-hot));
  border-radius: 2px;
  box-shadow: 0 0 10px var(--ember-dim);
}

/* ---------- Text colors ---------- */
.service-name, .bookmark-text-name, .service-title {
  color: var(--text-hi) !important;
  font-weight: 600 !important;
}
.service-description {
  color: var(--text-mid) !important;
  font-size: 0.78rem !important;
}
/* Hide URL/description text under bookmarks */
.bookmark-text-description,
.bookmark .description {
  display: none !important;
}

/* ---------- Progress bars / usage indicators ---------- */
/* Resource widget bars (CPU, Memory, Disk) */
#information-widgets [class*="bg-theme"],
#information-widgets [class*="progress"],
.resources [class*="bg-theme"],
.resources [role="progressbar"] {
  background-color: rgba(239, 68, 68, 0.85) !important;
}
#information-widgets [class*="bg-theme-300"],
#information-widgets [class*="bg-theme-200"],
.resources .bg-theme-300,
.resources .bg-theme-200 {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Any small icon SVGs in widgets */
#information-widgets svg {
  color: #f5f5f7 !important;
  fill: currentColor;
}

/* ---------- Force readable text on all widget elements ---------- */
#information-widgets *,
#information-widgets span,
#information-widgets div,
#information-widgets p {
  color: #f5f5f7 !important;
}
#information-widgets .label,
#information-widgets [class*="label" i],
#information-widgets [class*="Label"] {
  color: #a1a1aa !important;
}

/* ---------- Information widgets row ---------- */
#information-widgets {
  gap: 14px;
}
#information-widgets .resources .label,
#information-widgets .label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.65rem !important;
  color: var(--text-mid) !important;
}
#information-widgets .value {
  color: var(--text-hi) !important;
  font-weight: 700 !important;
}

/* Search bar */
input[type="search"], input[type="text"] {
  background: rgba(10,10,15,0.75) !important;
  border: 1px solid rgba(239,68,68,0.18) !important;
  color: var(--text-hi) !important;
}
input[type="search"]:focus {
  border-color: var(--ember) !important;
  box-shadow: 0 0 0 2px var(--ember-glow) !important;
  outline: none !important;
}

/* Weather/datetime accents */
#information-widgets [class*="text-theme"] {
  color: var(--ember) !important;
}

/* ---------- Bookmarks: compact single-line style ---------- */
.bookmark {
  padding: 10px 14px !important;
}
.bookmark-text-name {
  font-size: 0.85rem !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(239,68,68,0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ember-dim); }

/* ---------- Widget numbers inside service cards ---------- */
.service .widget .label,
.widget .label {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.62rem !important;
  color: var(--text-mid) !important;
}
.service .widget .value,
.widget .value {
  color: var(--text-hi) !important;
  font-weight: 700 !important;
}

/* ponytail: Familie-Instanz – größere Kacheln für bessere Lesbarkeit.
   Selektoren ggf. an Homepage-Version anpassen, falls Optik nicht greift. */
.service-card { padding: 1.4rem 1.2rem !important; }
.service-title { font-size: 1.5rem !important; line-height: 1.3 !important; }
.service-description { font-size: 1.05rem !important; }
.service-icon, .service-icon img, .service-icon svg {
  width: 4rem !important; height: 4rem !important;
}