/* ===== SmithVault: CRT Cyberpunk Skin ===== */

/* 0) Custom scrollbar — dark glass, less transparent than bg */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(30, 30, 30, 0.75);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(50, 50, 50, 0.85);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 30, 30, 0.75) transparent;
}

/* 1) Global mono font + subtle green tint */
:root {
  --sv-green: #00ff66;
  --sv-green-dim: rgba(0, 255, 102, 0.22);
  --sv-border: rgba(0, 255, 102, 0.18);
  --sv-bg: rgba(0, 0, 0, 0.50);
}

body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  text-rendering: geometricPrecision;
}

/* 2) Make cards feel like terminal glass */
.services-group .service-card,
.bookmarks-group .bookmark-card,
#widgets-wrap .information-widget {
  background: linear-gradient(180deg, rgba(0,0,0,0.70), rgba(0,0,0,0.50)) !important;
  border: 1px solid var(--sv-border) !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35),
    0 6px 20px rgba(0,0,0,0.45),
    0 0 14px rgba(0, 255, 102, 0.08) !important;
}

/* 3) Neon hover “lift” — subtle */
.services-group .service-card:hover,
.bookmarks-group .bookmark-card:hover,
#widgets-wrap .information-widget:hover {
  transform: translateY(-1px);
  transition: transform 100ms ease, box-shadow 100ms ease, border-color 100ms ease;
  border-color: rgba(0, 255, 102, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.50),
    0 0 20px rgba(0, 255, 102, 0.14) !important;
}

/* 4) Titles / headers: terminal green */
h1, h2, h3,
.services-group-title,
.bookmarks-group-title {
  color: var(--sv-green) !important;
  text-shadow: 0 0 12px rgba(0, 255, 102, 0.25);
  letter-spacing: 0.6px;
}

/* 5) Subtle scanlines overlay — dialed back for cleaner look */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.00),
      rgba(0,0,0,0.00) 2px,
      rgba(0,0,0,0.12) 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.20;
}

/* 6) CRT vignette + glow */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(circle at center,
      rgba(0,255,102,0.08) 0%,
      rgba(0,0,0,0.0) 40%,
      rgba(0,0,0,0.55) 100%);
  opacity: 0.9;
}

/* 7) Make service descriptions slightly dimmer */
.service-description {
  opacity: 0.85;
}

/* 8) Accent links */
a {
  color: rgba(0, 255, 102, 0.85) !important;
}
a:hover {
  color: var(--sv-green) !important;
}

/* ===== NODE TELEMETRY — header-only label, no dropdown ===== */
#node-vitals-spacer {
  display: none !important;
}
[id="Node Vitals"] .grid {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Kill the collapse toggle arrow */
[id="Node Vitals"] .services-group-title button,
[id="Node Vitals"] .services-group-title svg {
  display: none !important;
}
/* Tighten gap between header and Proxmox below */
.services-group[id="Node Vitals"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.services-group[id="Proxmox"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===== SECTION INDENTATION ===== */

/* Indent Media Pipeline + Helpers to look like extensions of Media */
@media (min-width: 1024px) {
  #media-pipeline {
    margin-left: 2rem !important;
    border-left: 1px solid var(--sv-border) !important;
    padding-left: 1rem !important;
  }
}

/* Indent telemetry node sections to look nested under Node Vitals header */
[id="Proxmox"],
[id^="OMV Database"],
[id^="Quantflow-"] {
  margin-left: 2rem !important;
  border-left: 2px solid rgba(100, 100, 100, 0.7) !important;
  padding-left: 1rem !important;
  margin-bottom: 6px !important;
}

/* Tighter vertical spacing between groups */
.services-group {
  margin-top: 6px !important;
  margin-bottom: 2px !important;
}

/* Breathing room between telemetry cluster and bottom utility sections */
[id="Quantflow-pi"] {
  margin-bottom: 0.75rem !important;
}

/* Breathing room above System Maintenance */
[id="System Maintenance"] {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* Shortcuts bookmarks: positioned by JS beside System Maintenance */
#bookmarks {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
/* Align Shortcuts title with System Maintenance title */
#bookmarks .bookmarks-group-title {
  font-size: 0.70rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
}
/* Hide bookmark URLs */
#bookmarks .bookmark-card .bookmark-href {
  display: none !important;
}
#bookmarks .bookmarks-group li a span.text-xs {
  display: none !important;
}

/* Telemetry node section spacing — pronounced gaps between each node */
div[id="Proxmox"],
section[id="Proxmox"],
.services-group[id="Proxmox"],
div[id^="OMV Database"],
section[id^="OMV Database"],
.services-group[id^="OMV Database"],
div[id^="Quantflow-"],
section[id^="Quantflow-"],
.services-group[id^="Quantflow-"] {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Tighter grid gap between cards */
.services-group .grid {
  gap: 5px !important;
}

/* Compact card padding */
.services-group .service-card {
  padding: 8px 10px !important;
  margin-bottom: 0 !important;
  height: 100% !important;
}

/* Dim the date widget (second datetime = text-md) + shrink for mobile fit */
.information-widget-datetime span.text-md {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.8rem !important;
}

/* Reorder top bar: time/date left, search center, weather right */
.sv-datetime-stack {
  order: -2 !important;
  align-items: center !important;
}

#information-widgets-right .information-widget-search {
  order: 0 !important;
  flex: 1 1 auto !important;
}

#information-widgets-right .information-widget-openweathermap {
  order: 1 !important;
}

/* Compact top widget bar */
#information-widgets {
  gap: 4px !important;
  margin-bottom: 0 !important;
}

/* Reduce gap between top bar and first section */
#layout-groups {
  margin-top: 4px !important;
}

#information-widgets .information-widget {
  padding: 6px 10px !important;
}

/* Tighter section header spacing */
.services-group-title {
  font-size: 0.70rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
}

/* Slightly smaller widget text for density */
.service-card .text-xs {
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
}

/* Compact service title + description */
.service-title {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

.service-description {
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
  opacity: 0.7;
}

/* Reduce icon size slightly for tighter cards */
.service-icon {
  width: 28px !important;
  height: 28px !important;
}

/* Page-level padding reduction */
#page_container {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 0 !important;
  max-width: 100% !important;
}
#page_wrapper,
#page_wrapper > div,
#page_wrapper .container,
main,
#layout-groups {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Homepage wrappers use Tailwind margin utilities for side gutters */
@media (min-width: 768px) {
  #information-widgets,
  #layout-groups {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  #page_wrapper .container {
    max-width: 100% !important;
  }
}

/* Tighter search widget */
#search-container {
  margin-bottom: 2px !important;
}

/* ===== TOP WIDGET BAR — RESPONSIVE ===== */

/* Better flex control on the widget bar */
#information-widgets {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 6px !important;
  column-gap: 8px !important;
}

/* Search bar fills available space, doesn't collapse too narrow */
#information-widgets #search-container {
  flex: 1 1 260px !important;
  min-width: 200px !important;
  max-width: 420px !important;
}

/* When page shrinks, search takes its own full row cleanly */
@media (max-width: 900px) {
  #information-widgets #search-container {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    order: -1 !important;
  }
}

/* ===== STONKS — hide ticker widget title + icon ===== */
#stonks-tickers .service-title,
#stonks-tickers .service-icon,
#stonks-tickers-2 .service-title,
#stonks-tickers-2 .service-icon {
  display: none !important;
}


/* ===== TOP SECTION — 50/50 Stonks left, Tools right ===== */
/* #layout-groups is a flex-wrap container. Each .services-group has
   basis-full which forces full width. Override the first two children
   to share a row at 50/50. */
@media (min-width: 768px) {
  /* First two sections (Stonks, Tools) share a row */
  [id="Stonks"],
  [id="Tools"] {
    flex-basis: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  /* Stonks: 2-column desktop grid — tickers top row, links bottom row */
  [id="Stonks"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  /* Stonks ticker cards: kill margin, tighten padding */
  #stonks-tickers .service-card,
  #stonks-tickers-2 .service-card {
    margin-bottom: 0 !important;
    height: 100% !important;
    padding: 4px 6px !important;
  }

  /* Stonks ticker rows: tighter margins */
  #stonks-tickers .rounded-sm,
  #stonks-tickers-2 .rounded-sm {
    margin: 2px !important;
    padding: 2px 4px !important;
  }

  /* Tools: 3-column compact grid, equalize gaps */
  [id="Tools"] .grid,
  [id="tools"] .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  /* Compact Tools + Stonks link cards */
  [id="Tools"] .service-card,
  [id="tools"] .service-card,
  [id="Stonks"] .grid > *:nth-child(3) .service-card,
  [id="Stonks"] .grid > *:nth-child(4) .service-card {
    padding: 6px 8px !important;
    margin-bottom: 0 !important;
    height: 100% !important;
  }
  [id="Tools"] .service-title,
  [id="tools"] .service-title {
    font-size: 0.68rem !important;
  }
  [id="Tools"] .service-icon,
  [id="tools"] .service-icon,
  [id="Stonks"] .grid > *:nth-child(3) .service-icon,
  [id="Stonks"] .grid > *:nth-child(4) .service-icon {
    width: 22px !important;
    height: 22px !important;
  }

  /* Tools + Stonks links: compact text on desktop */
  [id="Tools"] .service-name,
  [id="Stonks"] .grid > *:nth-child(3) .service-name,
  [id="Stonks"] .grid > *:nth-child(4) .service-name {
    font-size: 0.90rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  [id="Tools"] .service-description,
  [id="Stonks"] .grid > *:nth-child(3) .service-description,
  [id="Stonks"] .grid > *:nth-child(4) .service-description {
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
  }

  /* QuantFlow + Ghostfolio + Tools: pin icon+text to top-left */
  [id="Stonks"] .grid > *:nth-child(3) .service-title,
  [id="Stonks"] .grid > *:nth-child(4) .service-title,
  [id="Tools"] .service-title {
    align-items: flex-start !important;
  }
  [id="Stonks"] .grid > *:nth-child(3) .service-title-text,
  [id="Stonks"] .grid > *:nth-child(4) .service-title-text,
  [id="Tools"] .service-title-text {
    align-items: flex-start !important;
  }
  [id="Stonks"] .grid > *:nth-child(3) .service-name,
  [id="Stonks"] .grid > *:nth-child(4) .service-name,
  [id="Tools"] .service-name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ===== TELEMETRY 4-WIDGET SECTIONS — single row on wide screens ===== */
@media (min-width: 1400px) {
  [id="Quantflow-dashboard"] .grid,
  [id="Quantflow-data"] .grid,
  [id="OMV Database"] .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== MOBILE — mostly single-column stacking ===== */
@media (max-width: 767px) {
  /* Reset 50/50 split — stack sections vertically on mobile */
  [id="Stonks"],
  [id="Tools"],
  [id="tools"],
  [id="System Monitoring"],
  [id="Networking"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* Stonks cards stack on mobile */
  [id="Stonks"] .grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  [id="Stonks"] .grid > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Compact the link-only card on mobile too */
  [id="Stonks"] .grid > *:nth-child(4) .service-card {
    min-height: unset !important;
    padding: 6px 10px !important;
  }

  /* Tools: denser two-column layout on phones */
  [id="Tools"] .grid,
  [id="tools"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* General mobile tightening */
  #page_container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .services-group .grid {
    gap: 4px !important;
  }

  /* Widget bar on phone: datetime left, weather right, search full width below */
  #information-widgets {
    align-items: stretch !important;
    gap: 4px !important;
  }

  #information-widgets #widgets-wrap,
  #information-widgets #information-widgets-right {
    width: 100% !important;
  }

  #information-widgets #information-widgets-right {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "datetime weather"
      "search search" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
  }

  /* Prevent date text from wrapping on narrow phones */
  #information-widgets #information-widgets-right .sv-datetime-stack {
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Let weather widget shrink if needed so date gets room */
  #information-widgets #information-widgets-right .information-widget-openweathermap {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #information-widgets #information-widgets-right .sv-datetime-stack {
    grid-area: datetime !important;
    order: 0 !important;
    align-items: flex-start !important;
    justify-self: start !important;
  }

  #information-widgets #information-widgets-right .sv-datetime-stack .widget-inner {
    justify-content: flex-start !important;
  }

  #information-widgets #information-widgets-right .information-widget-openweathermap {
    grid-area: weather !important;
    order: 0 !important;
    justify-self: end !important;
  }

  #information-widgets #information-widgets-right .information-widget-search {
    grid-area: search !important;
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #information-widgets #information-widgets-right .information-widget-search .relative {
    width: 100% !important;
  }

}

/* ===== SYSTEM MONITORING + NETWORKING + MEDIA + MEDIA PIPELINE — raise title+description to center with icon ===== */
[id="System Monitoring"] .service-title,
[id="Networking"] .service-title,
[id="Media"] .service-title,
[id="Media Pipeline"] .service-title {
  align-items: center !important;
}
[id="System Monitoring"] .service-title-text,
[id="Networking"] .service-title-text,
[id="Media"] .service-title-text,
[id="Media Pipeline"] .service-title-text {
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.1 !important;
}
[id="System Monitoring"] .service-name,
[id="Networking"] .service-name,
[id="Media"] .service-name,
[id="Media Pipeline"] .service-name {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 1px !important;
}
[id="System Monitoring"] .service-description,
[id="Networking"] .service-description,
[id="Media"] .service-description,
[id="Media Pipeline"] .service-description {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ===== SYSTEM MONITORING + NETWORKING + MEDIA — scaled down 25% (desktop only) ===== */
@media (min-width: 768px) {
  [id="Stonks"],
  [id="Tools"],
  [id="System Monitoring"],
  [id="Networking"],
  [id="Media"],
  [id="Media Pipeline"],
  [id="System Maintenance"],
  [id="OSINT Lab"] {
    zoom: 0.75 !important;
  }

  /* System Monitoring + Networking: 50/50 side-by-side, 2×2 grids */
  [id="System Monitoring"],
  [id="Networking"] {
    flex-basis: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  [id="System Monitoring"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  [id="Networking"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  [id="System Monitoring"] .service-card,
  [id="Networking"] .service-card {
    margin-bottom: 0 !important;
    height: 100% !important;
  }

  /* Media + Media Pipeline: lock 4-col */
  [id="Media"] .grid,
  [id="Media Pipeline"] .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* System Maintenance: 4-col grid, Speedtest+Watchtower span bottom row */
  [id="System Maintenance"] .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  [id="System Maintenance"] .grid > *:nth-child(n+5) {
    grid-column: span 2;
  }

  /* OSINT Lab: 4-col grid */
  [id="OSINT Lab"] .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== OSINT LAB — raise title+description to center with icon ===== */
[id="OSINT Lab"] .service-title {
  align-items: center !important;
}
[id="OSINT Lab"] .service-title-text {
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.1 !important;
}
[id="OSINT Lab"] .service-name {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 1px !important;
}
[id="OSINT Lab"] .service-description {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ===== NETWORKING — stronger widget metric boxes ===== */
[id="Networking"] .service-card .widget [class*="rounded"][class*="bg-"] {
  background: rgba(8, 12, 10, 0.88) !important;
  border: 1px solid rgba(0, 255, 102, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42) !important;
}

[id="Networking"] .service-card .widget .text-theme-500,
[id="Networking"] .service-card .widget .text-theme-700,
[id="Networking"] .service-card .widget .text-theme-800 {
  color: rgba(225, 242, 230, 0.92) !important;
}

/* ===== NETWORK I/O CHART — distinct Rx/Tx colors ===== */
/* RX (download) — blue */
[id="Networking"] .recharts-area .recharts-area-curve {
  stroke: #3399ff !important;
}
[id="Networking"] .recharts-area .recharts-area-area {
  fill: rgba(51, 153, 255, 0.25) !important;
}
/* TX (upload) — green override (second area in SVG) */
[id="Networking"] .recharts-area ~ .recharts-area .recharts-area-curve {
  stroke: #00ff66 !important;
}
[id="Networking"] .recharts-area ~ .recharts-area .recharts-area-area {
  fill: rgba(0, 255, 102, 0.15) !important;
}

/* ===== TOOLS + STONKS LINKS — keep icon behavior, left-align text ===== */
[id="Tools"] .service-card,
[id="tools"] .service-card,
[id="Stonks"] .grid > *:nth-child(3) .service-card,
[id="Stonks"] .grid > *:nth-child(4) .service-card {
  text-align: left !important;
}

[id="Tools"] .service-card > .service-title,
[id="tools"] .service-card > .service-title,
[id="Stonks"] .grid > *:nth-child(3) .service-card > .service-title,
[id="Stonks"] .grid > *:nth-child(4) .service-card > .service-title {
  align-items: center !important;
  justify-content: flex-start !important;
}

[id="Tools"] .service-name,
[id="tools"] .service-name,
[id="Stonks"] .grid > *:nth-child(3) .service-name,
[id="Stonks"] .grid > *:nth-child(4) .service-name,
[id="Tools"] .service-description,
[id="tools"] .service-description,
[id="Stonks"] .grid > *:nth-child(3) .service-description,
[id="Stonks"] .grid > *:nth-child(4) .service-description {
  text-align: left !important;
}

/* ===== NODE TELEMETRY — scale header to match zoomed mid-page sections ===== */
@media (min-width: 768px) {
  [id="Node Vitals"] {
    zoom: 0.75 !important;
  }
}

/* ===== NODE TELEMETRY DROPDOWNS — match header size (0.70rem * 0.75 zoom ≈ 0.53rem) ===== */
[id="Proxmox"] h2.service-group-name,
[id^="OMV Database"] h2.service-group-name,
[id^="Quantflow-"] h2.service-group-name {
  font-size: 1rem !important;
  letter-spacing: 0.8px !important;
  padding-bottom: 2px !important;
  margin-bottom: 2px !important;
  color: rgba(0, 255, 102, 0.45) !important;
  text-shadow: none !important;
}

/* ===== TELEMETRY DROPDOWN WIDGETS — compact cards, icons, titles; preserve metric values ===== */
@media (min-width: 768px) {
  /* Scale down entire telemetry node sections */
  [id="Proxmox"],
  [id^="OMV Database"],
  [id^="Quantflow-"] {
    zoom: 0.85 !important;
  }

  /* Tighter cards */
  [id="Proxmox"] .service-card,
  [id^="OMV Database"] .service-card,
  [id^="Quantflow-"] .service-card {
    padding: 4px 7px !important;
  }

  /* Smaller icons */
  [id="Proxmox"] .service-icon,
  [id^="OMV Database"] .service-icon,
  [id^="Quantflow-"] .service-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Smaller service names */
  [id="Proxmox"] .service-name,
  [id^="OMV Database"] .service-name,
  [id^="Quantflow-"] .service-name {
    font-size: 0.62rem !important;
  }

  /* Smaller descriptions */
  [id="Proxmox"] .service-description,
  [id^="OMV Database"] .service-description,
  [id^="Quantflow-"] .service-description {
    font-size: 0.52rem !important;
  }

  /* Tighter grid gap + force 1×4 row */
  [id="Proxmox"] .grid,
  [id^="OMV Database"] .grid,
  [id^="Quantflow-"] .grid {
    gap: 4px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== NODE VITALS TELEMETRY — raise title+description to center with icon ===== */
[id="Proxmox"] .service-title,
[id^="OMV Database"] .service-title,
[id^="Quantflow-data"] .service-title,
[id^="Quantflow-dashboard"] .service-title,
[id^="Quantflow-trader"] .service-title,
[id^="Quantflow-ml"] .service-title,
[id^="Quantflow-gpu"] .service-title,
[id^="Quantflow-pi"] .service-title {
  align-items: center !important;
}
[id="Proxmox"] .service-title-text,
[id^="OMV Database"] .service-title-text,
[id^="Quantflow-data"] .service-title-text,
[id^="Quantflow-dashboard"] .service-title-text,
[id^="Quantflow-trader"] .service-title-text,
[id^="Quantflow-ml"] .service-title-text,
[id^="Quantflow-gpu"] .service-title-text,
[id^="Quantflow-pi"] .service-title-text {
  align-items: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  line-height: 1.1 !important;
}
[id="Proxmox"] .service-name,
[id^="OMV Database"] .service-name,
[id^="Quantflow-data"] .service-name,
[id^="Quantflow-dashboard"] .service-name,
[id^="Quantflow-trader"] .service-name,
[id^="Quantflow-ml"] .service-name,
[id^="Quantflow-gpu"] .service-name,
[id^="Quantflow-pi"] .service-name {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 1px !important;
}
[id="Proxmox"] .service-description,
[id^="OMV Database"] .service-description,
[id^="Quantflow-data"] .service-description,
[id^="Quantflow-dashboard"] .service-description,
[id^="Quantflow-trader"] .service-description,
[id^="Quantflow-ml"] .service-description,
[id^="Quantflow-gpu"] .service-description,
[id^="Quantflow-pi"] .service-description {
  padding-top: 0 !important;
  margin-top: 0 !important;
}