/* HomeLab Homepage v2.4 — Compact Material Dark.
   Scoped CSS, no modification to authentication or Docker integration.
   CSS may require selector adjustment if Homepage changes its DOM. */
:root { --md-outline:rgba(176,199,239,.14); --md-blue:#a9c7ff; }
body {background:radial-gradient(ellipse at 15% 0%,#273852 0%,#1d293d 42%,#172235 100%) fixed !important;}
#services .service-card,.service-card,.bookmark-card {
 background:linear-gradient(145deg,rgba(47,64,88,.95),rgba(35,49,69,.97)) !important;
 border:1px solid var(--md-outline) !important;border-radius:16px !important;
 box-shadow:0 4px 15px rgba(4,10,24,.13) !important;
 transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
#services .service-card:hover,.service-card:hover,.bookmark-card:hover {
 transform:translateY(-2px);border-color:rgba(169,199,255,.48) !important;
 box-shadow:0 10px 24px rgba(0,0,0,.25) !important;
}
.service-card:focus-within{outline:2px solid var(--md-blue);outline-offset:2px;}
/* Header: put all resources + date/time in the first row, search in a second row.
   Homepage header IDs are used as progressive enhancements; search also has :has() fallback. */
#information-widgets,#information-widgets-right {display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px 22px !important;}
/* Resources widgets can be nested flex/grid containers in different releases. */
#information-widgets > div:has(> div),#information-widgets-right > div:has(> div){min-width:0;}
/* Search: new full row, 680–900 px on desktop (was ~200 px in screenshot). */
#information-widgets > div:has(input[type="text"]),
#information-widgets > div:has(input[type="search"]),
#information-widgets-right > div:has(input[type="text"]),
#information-widgets-right > div:has(input[type="search"]),
#information-widgets .search-widget,#information-widgets-right .search-widget {
 flex:0 0 100% !important;width:min(900px,100%) !important;max-width:900px !important;
 margin:4px 0 0 !important;order:99 !important;
}
#information-widgets input[type="text"],#information-widgets input[type="search"],
#information-widgets-right input[type="text"],#information-widgets-right input[type="search"] {
 width:100% !important;max-width:900px !important;min-width:0 !important;border-radius:12px !important;
}
/* Prefer a single horizontal resources row instead of CPU / RAM / disk wrapping. */
#information-widgets .resources-widget,#information-widgets-right .resources-widget,
#information-widgets [class*="resources"],#information-widgets-right [class*="resources"] {
 display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:14px !important;align-items:center !important;
}
/* Compact Docker stats. Homepage generates these fields from showStats: true.
   Multiple selectors cover known class patterns; no blanket targeting of other widgets. */
.service-card .docker-stats,.service-card [class*="docker-stats"],
.service-card .docker-widget,.service-card [class*="dockerStats"] {
 gap:3px !important;margin-top:4px !important;
}
.service-card .docker-stats > *, .service-card [class*="docker-stats"] > * {
 padding:3px 4px !important;min-height:0 !important;border-radius:5px !important;
}
.service-card .docker-stats p,.service-card [class*="docker-stats"] p,
.service-card .docker-stats span,.service-card [class*="docker-stats"] span {
 font-size:10px !important;line-height:1.15 !important;
}
/* Plain colored Docker health text, no badge background. */
.service-card [class*="status"],.service-card [class*="Status"] {
 background-color:transparent !important;box-shadow:none !important;border:0 !important;
}
.service-card [class*="status"][class*="green"],.service-card [class*="Status"][class*="green"]{color:#66dda4 !important;}
.service-card [class*="status"][class*="yellow"],.service-card [class*="status"][class*="amber"]{color:#f2c66e !important;}
.service-card [class*="status"][class*="red"]{color:#ff7c85 !important;}
@media(max-width:900px){
 #information-widgets,#information-widgets-right{gap:8px 12px !important;}
 #information-widgets > div:has(input),#information-widgets-right > div:has(input){width:100% !important;max-width:100% !important;}
 #information-widgets [class*="resources"],#information-widgets-right [class*="resources"]{flex-wrap:wrap !important;}
}
@media(prefers-reduced-motion:reduce){.service-card,.bookmark-card{transition:none !important;}.service-card:hover,.bookmark-card:hover{transform:none !important;}}

/* v2.4.1: VERIFIED selectors from user's live Portainer DOM.
   Restrict changes to service cards; do not affect Synology top resource widgets. */
.service-card .service-stats .service-container {
  display:flex !important;
  flex-flow:row nowrap !important;
  gap:3px !important;
  align-items:stretch !important;
  padding:0 3px 3px !important;
}
.service-card .service-stats .service-container .service-block {
  display:flex !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:3px 2px !important;
  border-radius:5px !important;
  background:rgba(13,25,43,.26) !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px 4px !important;
}
.service-card .service-block .service-block-value {
  font-size:10px !important;
  font-weight:500 !important;
  line-height:13px !important;
  white-space:nowrap !important;
}
.service-card .service-block .service-block-label {
  font-size:9px !important;
  font-weight:500 !important;
  line-height:13px !important;
  opacity:.7;
}
/* The stats are toggled by the status button: preserve Homepage collapse behavior. */
.service-card .docker-status {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.service-card .docker-status-running, .service-card .docker-status-healthy {color:#66dda4 !important;}
.service-card .docker-status-exited, .service-card .docker-status-stopped, .service-card .docker-status-dead {color:#ff7c85 !important;}
.service-card .docker-status-unhealthy, .service-card .docker-status-restarting, .service-card .docker-status-paused {color:#f2c66e !important;}
.service-card .docker-status > div {color:inherit !important;font-size:10px !important;font-weight:600 !important;}
/* DSM is a standalone first group, not a section under Security. */

/* v2.4.2 — geometry override based on verified .service-block DOM.
   Place after all earlier rules to ensure cascade precedence. */
.service-card .service-stats .service-container {
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:3px !important;
  padding:2px 5px 4px !important;
  margin:0 !important;
  min-height:0 !important;
}
.service-card .service-stats .service-container > .service-block {
  box-sizing:border-box !important;
  display:flex !important;
  flex:1 1 0 !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  width:0 !important;
  min-width:0 !important;
  height:23px !important;
  min-height:23px !important;
  max-height:23px !important;
  padding:0 2px !important;
  margin:0 !important;
  border-radius:4px !important;
  background:rgba(13,25,43,.28) !important;
  overflow:hidden !important;
}
.service-card .service-stats .service-block > .service-block-value {
  font-size:10px !important;
  font-weight:500 !important;
  line-height:12px !important;
  white-space:nowrap !important;
  flex:0 1 auto !important;
  min-width:0 !important;
}
.service-card .service-stats .service-block > .service-block-label {
  font-size:9px !important;
  font-weight:600 !important;
  line-height:12px !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  opacity:.75 !important;
}
/* Do not set height on .service-stats: Homepage uses it to collapse/expand. */
@media (max-width:600px) {
 .service-card .service-stats .service-container > .service-block {gap:2px !important;}
 .service-card .service-stats .service-block > .service-block-value {font-size:9px !important;}
 .service-card .service-stats .service-block > .service-block-label {font-size:8px !important;}
}
/* Homepage v2.4.3 — compact two-line Docker statistics */

.service-card .service-stats .service-container > .service-block {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  padding: 2px 1px !important;
  overflow: hidden !important;
}

.service-card .service-stats .service-block > .service-block-value {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 13px !important;
  white-space: nowrap !important;
}

.service-card .service-stats .service-block > .service-block-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 10px !important;
  opacity: 0.7 !important;
}
/* Homepage v2.4.4 — rounded Docker stats */

.service-card .service-stats .service-container > .service-block {
  border-radius: 8px !important;
}
/* Homepage v2.4.5 — muted Docker statistics */

.service-card .service-stats .service-container > .service-block {
  background: rgba(12, 22, 37, 0.18) !important;
  border: 1px solid rgba(160, 180, 210, 0.035) !important;
  border-radius: 8px !important;
}

.service-card .service-stats .service-block > .service-block-value {
  color: #9EADC2 !important;
  font-weight: 400 !important;
}

.service-card .service-stats .service-block > .service-block-label {
  color: #7588A3 !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
}
/* Homepage v2.5.1 — rounded API widget statistics */

.service-card .service-stats .service-container > .service-block,
.service-card .service-stats .service-container > div {
  border-radius: 8px !important;
}

/* Native Homepage API widget blocks */
.service-card .widget-container .information-widget,
.service-card .widget-container .information-widget > div,
.service-card .widget-container .information-widget > div > div {
  border-radius: 8px !important;
}