/* ========================================
   gVerse Homepage - custom.css
   ======================================== */

/* ----------------------------------------
   SECTION HEADERS - Hide
   ---------------------------------------- */
section > h2,
.service-group-name,
[class*="group-name"] {
  display: none !important;
}

/* Hide ping indicators */
.service-ping {
  display: none !important;
}

/* Hide the auto-hostname label in the info bar ("localhost") */
.information-widget-hostname,
#information-widgets [class*="hostname"] {
  display: none !important;
}

/* ----------------------------------------
   SERVICE CARDS - Base
   ---------------------------------------- */
.service {
  min-height: 130px !important;
  padding-top: 6px !important;
  overflow: visible !important;
}

.service > div {
  min-height: 130px !important;
  height: auto !important;
  transition: all 0.3s ease !important;
}

.service-card {
  min-height: 130px !important;
  height: auto !important;
}

/* Hover */
.service:hover > div {
  transform: translateY(-4px) !important;
  box-shadow: inset 0 0 4.5px rgba(48, 156, 228, 0.597) !important;
  border-radius: 8px !important;
  border-color: rgba(48, 156, 228, 0.597) !important;
}

.service:hover .service-title,
.service:hover .service-title-text {
  color: #5197c9 !important;
}

/* ----------------------------------------
   BOOKMARKS - Icon-only row
   ---------------------------------------- */
.bookmark a {
  width: auto !important;
  padding: 0.75rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.bookmark a > div {
  justify-content: center !important;
}

.bookmark a > div > span:last-child,
.bookmark a > div > div:last-child {
  display: none !important;
}

.bookmark-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
}

.bookmark-list li {
  margin-bottom: 0 !important;
  width: auto !important;
}

.bookmark-group-name,
#bookmarks h2,
.bookmark-group > div:first-child {
  display: none !important;
}

/* ----------------------------------------
   TOGGLE BUTTON (first bookmark in first group)
   Falls back to fixed top-right if JS inline injection misses.
   ---------------------------------------- */
.bookmark-group:first-child .bookmark-list li:first-child a {
  position: fixed !important;
  top: 0.4rem !important;
  right: 12rem !important;
  z-index: 9999 !important;
  background: rgba(30, 41, 59, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(71, 85, 105, 0.3) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  width: auto !important;
  min-width: 80px !important;
}

.bookmark-group:first-child .bookmark-list li:first-child a:hover {
  background: rgba(48, 156, 228, 0.2) !important;
  border-color: rgba(48, 156, 228, 0.6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Show the label text for the toggle button only */
.bookmark-group:first-child .bookmark-list li:first-child a > div > span:last-child,
.bookmark-group:first-child .bookmark-list li:first-child a > div > div:last-child {
  display: inline !important;
  margin-left: 0.5rem !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
}

/* Inline toggle — #id selector beats the long .bookmark class chain */
#information-widgets a.toggle-inlined {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
  margin: 0 0.5rem !important;
  align-self: center !important;
}

/* Toggle button active state */
body.compact-mode .bookmark-group:first-child .bookmark-list li:first-child a {
  background: rgba(48, 156, 228, 0.3) !important;
  border-color: rgba(48, 156, 228, 0.8) !important;
}

body.compact-mode .bookmark-group:first-child .bookmark-list li:first-child a > div > span:last-child,
body.compact-mode .bookmark-group:first-child .bookmark-list li:first-child a > div > div:last-child {
  color: #5197c9 !important;
}

/* ----------------------------------------
   DESKTOP VISIBILITY
   System Status and Transmission are in groups 1+2 but
   hidden on desktop — they appear only in the Compact View group.
   ---------------------------------------- */
[data-service="system-status"],
[data-service="transmission"] {
  display: none !important;
}

/* ----------------------------------------
   BOOKMARKS - collapse toggle group space
   ---------------------------------------- */
.bookmark-group:first-child {
  padding: 0 !important;
  margin: 0 !important;
}

.bookmark-group:first-child .bookmark-list {
  min-height: 0 !important;
}

/* ========================================
   COMPACT MODE
   Groups 1+2 (Network, Media) hidden → replaced by
   Group 3 (Compact View): Overseerr · Transmission · System Status · Pi-hole
                            Radarr · Sonarr · UniFi · pfSense
   Groups 4+5 (Services, Monitoring) hidden as before.

   No fixed card heights — Homepage's natural responsive scaler
   handles sizing. Grid columns come from settings.yaml (columns: 4)
   with Tailwind's responsive breakpoints (1→2→4 col).
   ======================================== */

/* Compact View group: hidden in desktop */
.services-group[data-group="3"] {
  display: none !important;
}

/* In compact: swap groups 1+2 out, group 3 in; hide groups 4+ */
body.compact-mode .services-group[data-group="1"],
body.compact-mode .services-group[data-group="2"] {
  display: none !important;
}

body.compact-mode .services-group[data-group="3"] {
  display: block !important;
}

body.compact-mode .services-group[data-group="4"],
body.compact-mode .services-group[data-group="5"],
body.compact-mode .services-group[data-group="6"] {
  display: none !important;
}

/* Reduced hover lift in compact mode */
body.compact-mode .service:hover > div {
  transform: translateY(-2px) !important;
}

/* Hide bookmarks row (except toggle) in compact mode */
body.compact-mode .bookmark-group:not(:first-child) {
  display: none !important;
}