/* Unified page edge spacing and full-width content tracks. */
:root{
  --page-edge-desktop: 32px;
  --page-edge-tablet: 24px;
  --page-edge-mobile: 16px;
}

.content-panel.content-panel-dashboard,
.content-panel.content-panel-server,
.content-panel.content-panel-monitoring,
.content-panel.content-panel-control,
.content-panel.content-panel-tools,
.content-panel.content-panel-settings,
.content-panel.content-panel-profile,
.content-panel.content-panel-inventory,
.content-panel.content-panel-logs,
.content-panel.content-panel-admin,
.content-panel.content-panel-vpn_admin{
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: var(--page-edge-desktop);
  box-sizing: border-box;
}

.content-panel.content-panel-dashboard > *,
.content-panel.content-panel-server > *,
.content-panel.content-panel-monitoring > *,
.content-panel.content-panel-control > *,
.content-panel.content-panel-tools > *,
.content-panel.content-panel-settings > *,
.content-panel.content-panel-profile > *,
.content-panel.content-panel-inventory > *,
.content-panel.content-panel-logs > *,
.content-panel.content-panel-admin > *,
.content-panel.content-panel-vpn_admin > *{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Remove older per-page width caps for the affected route content only. */
.content-panel.content-panel-dashboard .dashboard-shell,
.content-panel.content-panel-dashboard .dashboard-status-grid,
.content-panel.content-panel-dashboard .dashboard-main-graph,
.content-panel.content-panel-dashboard .dashboard-graph-card,
.content-panel.content-panel-monitoring .monitoring-layout,
.content-panel.content-panel-monitoring .monitoring-list,
.content-panel.content-panel-monitoring .monitoring-actions,
.content-panel.content-panel-server .server-list,
.content-panel.content-panel-server .server-page-stack,
.content-panel.content-panel-tools .tools-panel-stack,
.content-panel.content-panel-tools .tools-backup-grid,
.content-panel.content-panel-settings .page-settings,
.content-panel.content-panel-profile .page-profile,
.content-panel.content-panel-profile .profile-grid,
.content-panel.content-panel-inventory .page-inventory,
.content-panel.content-panel-inventory .inventory-alert,
.content-panel.content-panel-inventory .inventory-accordion,
.content-panel.content-panel-inventory .inventory-layout,
.content-panel.content-panel-logs .page-logs,
.content-panel.content-panel-logs .logs-shell,
.content-panel.content-panel-admin .admin-panel-stack,
.content-panel.content-panel-admin .admin-link-layout,
.content-panel.content-panel-vpn_admin .vpn-admin-panel-stack,
.content-panel.content-panel-vpn_admin .admin-link-layout{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.content-panel.content-panel-dashboard .page-intro,
.content-panel.content-panel-server .page-intro,
.content-panel.content-panel-monitoring .page-intro,
.content-panel.content-panel-control .page-intro,
.content-panel.content-panel-tools .page-intro,
.content-panel.content-panel-settings .page-intro,
.content-panel.content-panel-profile .page-intro,
.content-panel.content-panel-inventory .page-intro,
.content-panel.content-panel-logs .page-intro,
.content-panel.content-panel-admin .page-intro,
.content-panel.content-panel-vpn_admin .page-intro{
  width: 100%;
  max-width: none;
  margin-bottom: 22px;
}

@media (max-width: 1100px){
  .content-panel.content-panel-dashboard,
  .content-panel.content-panel-server,
  .content-panel.content-panel-monitoring,
  .content-panel.content-panel-control,
  .content-panel.content-panel-tools,
  .content-panel.content-panel-settings,
  .content-panel.content-panel-profile,
  .content-panel.content-panel-inventory,
  .content-panel.content-panel-logs,
  .content-panel.content-panel-admin,
  .content-panel.content-panel-vpn_admin{
    padding-inline: var(--page-edge-tablet);
  }
}

@media (max-width: 720px){
  .content-panel.content-panel-dashboard,
  .content-panel.content-panel-server,
  .content-panel.content-panel-monitoring,
  .content-panel.content-panel-control,
  .content-panel.content-panel-tools,
  .content-panel.content-panel-settings,
  .content-panel.content-panel-profile,
  .content-panel.content-panel-inventory,
  .content-panel.content-panel-logs,
  .content-panel.content-panel-admin,
  .content-panel.content-panel-vpn_admin{
    padding-inline: var(--page-edge-mobile);
  }
}

/* 31R-I-H3g: shared stat component override for old metric-pill/page CSS */
.z-stat-grid.metric-grid,
.dashboard-mini-metrics.z-stat-grid,
.monitoring-metrics.z-stat-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr)) !important;
  gap:9px !important;
  width:100% !important;
  max-width:none !important;
  margin-top:10px !important;
  align-items:stretch !important;
}

.dashboard-status-card .z-stat-pill.metric-pill,
.monitoring-item .z-stat-pill.metric-pill,
.z-stat-pill.metric-pill.dashboard-stat-pill,
.z-stat-pill.metric-pill.monitoring-stat-pill{
  display:grid !important;
  grid-template-columns:minmax(62px,.42fr) minmax(0,1fr) !important;
  align-items:center !important;
  justify-content:initial !important;
  gap:10px !important;
  min-width:0 !important;
  min-height:38px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  text-align:left !important;
}

.dashboard-status-card .z-stat-pill.metric-pill > .z-stat-label,
.monitoring-item .z-stat-pill.metric-pill > .z-stat-label,
.z-stat-pill.metric-pill.dashboard-stat-pill > .z-stat-label,
.z-stat-pill.metric-pill.monitoring-stat-pill > .z-stat-label{
  display:block !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:start !important;
  color:var(--muted) !important;
  font-size:.76rem !important;
  line-height:1.1 !important;
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.dashboard-status-card .z-stat-pill.metric-pill > .z-stat-value,
.monitoring-item .z-stat-pill.metric-pill > .z-stat-value,
.z-stat-pill.metric-pill.dashboard-stat-pill > .z-stat-value,
.z-stat-pill.metric-pill.monitoring-stat-pill > .z-stat-value{
  display:block !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  justify-self:end !important;
  font-size:.96rem !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  text-align:right !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Old metric-pill rules must not shrink shared stat values. */
.z-stat-pill.metric-pill strong,
.z-stat-pill.metric-pill span{
  max-width:none !important;
}

/* Dashboard status cards should keep compact stats instead of oversized bars. */
.dashboard-status-card .dashboard-mini-metrics{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
}

/* Monitoring detail cards need slightly wider stat slots because more values are shown. */
.page-monitoring .monitoring-metrics.z-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr)) !important;
}

/* /server already has page-specific rules, but this keeps the shared component stable. */
.page-server .server-stat-grid.z-stat-grid,
.page-server .server-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr)) !important;
}

@media (max-width:720px){
  .dashboard-status-card .z-stat-pill.metric-pill,
  .monitoring-item .z-stat-pill.metric-pill,
  .z-stat-pill.metric-pill.dashboard-stat-pill,
  .z-stat-pill.metric-pill.monitoring-stat-pill{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .dashboard-status-card .z-stat-pill.metric-pill > .z-stat-value,
  .monitoring-item .z-stat-pill.metric-pill > .z-stat-value,
  .z-stat-pill.metric-pill.dashboard-stat-pill > .z-stat-value,
  .z-stat-pill.metric-pill.monitoring-stat-pill > .z-stat-value{
    justify-self:start !important;
    text-align:left !important;
  }
}

/* 31R-I-H3h: dashboard/monitoring use clean z-stat fields without legacy metric-pill */
.dashboard-mini-metrics.z-stat-grid,
.monitoring-metrics.z-stat-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:9px !important;
  width:100% !important;
  margin-top:10px !important;
  align-items:stretch !important;
}

.dashboard-status-card .dashboard-stat-pill.z-stat-pill,
.monitoring-item .monitoring-stat-pill.z-stat-pill{
  display:grid !important;
  grid-template-columns:minmax(70px,.42fr) minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  min-height:38px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
}

.dashboard-status-card .dashboard-stat-pill .z-stat-label,
.monitoring-item .monitoring-stat-pill .z-stat-label{
  display:block !important;
  justify-self:start !important;
  min-width:0 !important;
  color:var(--muted) !important;
  font-size:.76rem !important;
  line-height:1.1 !important;
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.dashboard-status-card .dashboard-stat-pill .z-stat-value,
.monitoring-item .monitoring-stat-pill .z-stat-value{
  display:block !important;
  justify-self:end !important;
  min-width:0 !important;
  font-size:.96rem !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  text-align:right !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.page-monitoring .monitoring-metrics.z-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
}

@media (max-width:720px){
  .dashboard-status-card .dashboard-stat-pill.z-stat-pill,
  .monitoring-item .monitoring-stat-pill.z-stat-pill{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .dashboard-status-card .dashboard-stat-pill .z-stat-value,
  .monitoring-item .monitoring-stat-pill .z-stat-value{
    justify-self:start !important;
    text-align:left !important;
  }
}

/* 31R-I-H3i: shared stat labels must not inherit server legacy label classes */
.z-stat-pill > .z-stat-label{
  display:block !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:start !important;
  color:var(--muted) !important;
  font-size:.76rem !important;
  line-height:1.1 !important;
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  visibility:visible !important;
  opacity:1 !important;
}

.z-stat-pill > .z-stat-value{
  display:block !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:end !important;
  color:inherit !important;
  font-size:.96rem !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  text-align:right !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  visibility:visible !important;
  opacity:1 !important;
}

.dashboard-status-card .dashboard-stat-pill.z-stat-pill,
.monitoring-item .monitoring-stat-pill.z-stat-pill,
.page-server .server-stat-pill.z-stat-pill{
  display:grid !important;
  grid-template-columns:minmax(72px,.42fr) minmax(0,1fr) !important;
  align-items:center !important;
  gap:10px !important;
}

.dashboard-mini-metrics.z-stat-grid,
.monitoring-metrics.z-stat-grid,
.page-server .server-stat-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:9px !important;
}

.page-monitoring .monitoring-metrics.z-stat-grid{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
}

@media (max-width:720px){
  .dashboard-status-card .dashboard-stat-pill.z-stat-pill,
  .monitoring-item .monitoring-stat-pill.z-stat-pill,
  .page-server .server-stat-pill.z-stat-pill{
    grid-template-columns:1fr !important;
    gap:4px !important;
  }

  .z-stat-pill > .z-stat-value{
    justify-self:start !important;
    text-align:left !important;
  }
}

/* 31R-I-H3j: prevent descender clipping in shared stat labels/values */
.z-stat-pill{
  min-height:42px !important;
  padding-top:9px !important;
  padding-bottom:9px !important;
  overflow:visible !important;
}

.z-stat-pill > .z-stat-label,
.z-stat-pill > .z-stat-value{
  line-height:1.32 !important;
  padding-top:1px !important;
  padding-bottom:2px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.dashboard-status-card .dashboard-stat-pill.z-stat-pill,
.monitoring-item .monitoring-stat-pill.z-stat-pill,
.page-server .server-stat-pill.z-stat-pill{
  min-height:42px !important;
  align-items:center !important;
}

/* Keep compact look, but give lowercase letters like g/p/y enough room. */
.dashboard-status-card .dashboard-stat-pill .z-stat-label,
.monitoring-item .monitoring-stat-pill .z-stat-label,
.page-server .server-stat-pill .z-stat-label{
  line-height:1.32 !important;
}

.dashboard-status-card .dashboard-stat-pill .z-stat-value,
.monitoring-item .monitoring-stat-pill .z-stat-value,
.page-server .server-stat-pill .z-stat-value{
  line-height:1.28 !important;
}

/* 31R-I-H5am-final safety: server/monitoring final component state */

/* Neuer guter Streifen auch für Monitoring */
.page-monitoring .monitoring-item {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--system-color, var(--blue)) 28%, rgba(109,178,255,.22)) !important;
  box-shadow:
    inset 4px 0 0 var(--system-color, var(--blue)),
    inset 0 0 0 1px color-mix(in srgb, var(--system-color, var(--blue)) 13%, transparent) !important;
}

.page-monitoring .monitoring-item::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: var(--system-color, var(--blue)) !important;
  opacity: .92 !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--system-color, var(--blue)) 58%, transparent) !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

.page-monitoring .monitoring-item > summary.monitoring-summary {
  background: transparent !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

/* Server final */
.page-server .server-detail-card.monitoring-item {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--system-color, var(--blue)) 28%, rgba(109,178,255,.22)) !important;
  box-shadow:
    inset 4px 0 0 var(--system-color, var(--blue)),
    inset 0 0 0 1px color-mix(in srgb, var(--system-color, var(--blue)) 13%, transparent) !important;
}

.page-server .server-detail-card.monitoring-item::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: var(--system-color, var(--blue)) !important;
  opacity: .92 !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--system-color, var(--blue)) 58%, transparent) !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

.page-server .server-detail-card.monitoring-item > summary.monitoring-summary.server-summary {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  min-height: 66px !important;
  padding: 13px 18px 13px 22px !important;
  background: transparent !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

.page-server .server-detail-card.monitoring-item > summary.monitoring-summary.server-summary::before {
  content: "▶" !important;
  position: static !important;
  display: inline-flex !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--system-color, var(--blue)) !important;
  font-size: .98rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  opacity: .96 !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--system-color, var(--blue)) 60%, transparent) !important;
  filter: none !important;
  pointer-events: none !important;
}

.page-server .server-detail-card.monitoring-item[open] > summary.monitoring-summary.server-summary::before {
  content: "▼" !important;
}

.page-server .server-detail-card.monitoring-item > summary.monitoring-summary.server-summary .monitoring-summary-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.page-server .server-detail-card.monitoring-item .server-detail-body section.server-address-section > h4,
.page-server .server-detail-card.monitoring-item .server-detail-body section.server-public-section > h4,
.page-server .server-detail-card.monitoring-item .server-detail-body section.server-port-section > h4,
.page-server .server-detail-card.monitoring-item .server-detail-body section.server-action-section > h4,
.page-server .server-detail-card.monitoring-item .server-detail-body section > h4 {
  margin: 0 0 6px 0 !important;
  padding: 6px 0 0 14px !important;
  transform: none !important;
  translate: none !important;
  position: relative !important;
  left: 0 !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.page-server .server-expand-icon,
.page-server .server-detail-card > .h5u-server-left-glow,
.page-server .server-detail-card .h5v-summary-left-glow,
.page-server .server-summary .h5v-summary-left-glow {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}


/* 31R-I-H5an safety: Abstand zwischen Status/Metric-Zeile und erstem Detailabschnitt */
.page-server .server-detail-card.monitoring-item .server-stat-grid,
.page-server .server-detail-card.monitoring-item .server-detail-grid.server-stat-grid,
.page-server .server-detail-card.monitoring-item .z-stat-grid.server-stat-grid {
  margin-bottom: 14px !important;
}

.page-server .server-detail-card.monitoring-item .server-stat-grid + .server-address-section,
.page-server .server-detail-card.monitoring-item .server-detail-grid + .server-address-section,
.page-server .server-detail-card.monitoring-item .z-stat-grid + .server-address-section {
  margin-top: 4px !important;
}