/* Grid-Layout für die Kopfzeile */
#widgets-wrap {
  display: grid !important;
  grid-template-columns: minmax(180px, auto) 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  width: 100% !important;
  column-gap: 2rem !important;
  row-gap: 0.25rem !important;
}

/* 1. Logo links oben (Zeile 1, Spalte 1) */
#widgets-wrap > .widget-container:nth-child(1),
#widgets-wrap > *:has(img[alt="logo"]) {
  grid-row: 1 !important;
  grid-column: 1 !important;
  justify-self: start !important;
}

/* 2. Ressourcen (CPU, RAM, Uptime) links unten waagerecht unter dem Logo (Zeile 2, Spalte 1) */
#widgets-wrap > .widget-container:nth-child(2),
#widgets-wrap > *:has(.information-widget-resource) {
  grid-row: 2 !important;
  grid-column: 1 !important;
  justify-self: start !important;
}

/* 3. Rechter Bereich (Suche zentriert, Uhrzeit & Wetter rechts) */
#information-widgets-right {
  grid-row: 1 / span 2 !important;
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Zentrierte Suchleiste in der Mitte */
.information-widget-search {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 440px !important;
  width: 100% !important;
}

.information-widget-search input {
  text-align: center !important;
  border-radius: 9999px !important;
}

/* Logo-Größe und -Darstellung */
.information-widget-logo,
.information-widget-logo img,
img[alt="logo"] {
  max-height: 48px !important;
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}