/* Server Tab.
   Purpose: clean server overview with separated internal/public links, ports,
   VPN hints and secret-safe integration notes. */
.page-server .server-page-notice{
  border:1px solid rgba(255,209,102,.34);
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,209,102,.075);
  color:#ffe2a3;
  margin-bottom:16px;
}

.page-server .server-actions,
.page-server .server-detail-list{
  width:100%;
}

.page-server .server-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.page-server .server-actions h3{margin:0 0 4px;}
.page-server .server-actions p{margin:0;color:var(--muted);}

.server-detail-list{
  display:grid;
  gap:14px;
}

.server-detail-card{
  position:relative;
  border:1px solid color-mix(in srgb, var(--system-color, #6db2ff) 38%, rgba(109,178,255,.18));
  border-radius:22px;
  padding:0;
  background:rgba(14,34,58,.52);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
  overflow:hidden;
}

.server-detail-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--system-color, #6db2ff);
  opacity:.82;
}

.server-summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:16px 18px 16px 20px;
}

.server-summary::-webkit-details-marker{display:none;}

.server-detail-card[open] .server-detail-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  min-width:0;
}

.server-title-block{min-width:0;}
.server-title-block h3{margin:2px 0 4px;}
.server-title-block p{margin:0;color:var(--muted);}

.server-vpn-chip,
.server-capability-chip{
  border:1px solid rgba(255,209,102,.34);
  border-radius:999px;
  padding:5px 9px;
  color:#ffe2a3;
  background:rgba(255,209,102,.09);
  font-size:.8rem;
  font-weight:800;
  white-space:nowrap;
}

.server-detail-body{
  display:grid;
  gap:14px;
  padding:0 18px 18px 58px;
}

.server-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}

.server-info-box{
  border:1px solid rgba(109,178,255,.16);
  border-radius:15px;
  padding:10px 12px;
  background:rgba(255,255,255,.025);
}
.server-info-box small{display:block;color:var(--muted);margin-bottom:5px;}
.server-info-box strong{font-size:1rem;}

.server-address-sections{
  display:grid;
  gap:12px;
}

.server-address-section{
  display:grid;
  gap:8px;
  border:1px solid rgba(109,178,255,.12);
  border-radius:16px;
  padding:12px;
  background:rgba(0,0,0,.08);
}

.server-address-section h4,
.server-port-section h4,
.server-capability-section h4{
  margin:0 0 2px;
  color:#d5efff;
  font-size:.9rem;
  letter-spacing:.02em;
}

.server-address-section.muted p{
  margin:0;
  color:var(--muted);
}

.server-address-row{
  display:grid;
  grid-template-columns:minmax(110px,170px) minmax(0,1fr) max-content;
  gap:10px;
  align-items:center;
  border:1px solid rgba(109,178,255,.14);
  border-radius:14px;
  padding:9px 10px;
  background:rgba(0,0,0,.10);
  text-align:left;
}

.server-address-row span{color:var(--muted);font-size:.84rem;}

.server-address-row code,
.server-link-button{
  min-width:0;
  overflow-wrap:anywhere;
  text-align:left;
}

.server-address-row code{
  color:var(--text);
  background:rgba(0,0,0,.16);
  border:1px solid rgba(109,178,255,.12);
  border-radius:10px;
  padding:6px 8px;
  font-weight:800;
  letter-spacing:.01em;
}

.server-link-button{
  appearance:none;
  border:1px solid rgba(109,178,255,.30);
  border-radius:12px;
  padding:7px 10px;
  color:#d5efff;
  background:rgba(53,167,255,.12);
  cursor:pointer;
  font-weight:800;
}

.server-link-button:hover{
  border-color:rgba(122,255,204,.40);
  background:rgba(122,255,204,.10);
}

.game-address-row code{
  color:#ffe0b6;
  border-color:rgba(255,158,66,.42);
  background:rgba(255,158,66,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  user-select:all;
}

.server-port-section,
.server-capability-section{
  display:grid;
  gap:8px;
}

.server-port-list,
.server-capability-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.server-port-pill{
  border:1px solid rgba(109,178,255,.20);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
}
.server-port-pill.online{color:#b6ffe7;border-color:rgba(122,255,204,.32);background:rgba(122,255,204,.10);}
.server-port-pill.offline{color:#ffd4dc;border-color:rgba(255,77,109,.34);background:rgba(255,77,109,.09);}
.server-port-pill.prepared,
.server-port-pill.unknown{color:#d5efff;border-color:rgba(109,178,255,.28);background:rgba(53,167,255,.10);}

.server-integration-note,
.server-vpn-hint,
.server-permission-note{
  border:1px solid rgba(109,178,255,.12);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:.86rem;
}

.server-integration-note{
  display:grid;
  gap:3px;
}
.server-integration-note strong{color:#d5efff;}

.server-vpn-hint{
  border-color:rgba(255,209,102,.24);
  color:#ffe2a3;
  background:rgba(255,209,102,.065);
}

.ghost-btn.mini{
  min-height:30px;
  padding:5px 9px;
  font-size:.78rem;
  justify-self:end;
  width:auto;
  white-space:nowrap;
}

.content-panel.content-panel-server > .page-server{
  width:100%;
  max-width:none;
  margin-inline:0;
}

@media(max-width:900px){
  .server-detail-head{display:grid;}
  }

@media(max-width:720px){
  .page-server .server-actions{display:grid;}
  .page-server .server-actions .button-row{justify-content:start;}
  .server-summary{grid-template-columns:24px minmax(0,1fr);padding:14px 14px 14px 18px;}
  .server-detail-body{padding:0 14px 14px 44px;}
  .server-address-row{grid-template-columns:1fr;align-items:stretch;}
  .server-address-row .ghost-btn,
  .server-link-button{width:100%;justify-self:start;}
}

/* 31R-I-H3 fixed reusable server stat component */
.server-stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:10px;
  align-items:stretch;
}

.server-stat-pill{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  gap:2px 9px;
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(109,178,255,.22);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(8,17,31,.74),rgba(7,14,26,.58));
  color:#dcecff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.server-stat-icon{
  grid-area:icon;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  min-width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid currentColor;
  background:rgba(255,255,255,.035);
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 0 14px rgba(255,255,255,.045);
}

.server-stat-label{
  grid-area:label;
  min-width:0;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.server-stat-value{
  grid-area:value;
  min-width:0;
  font-size:1.02rem;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.server-stat-pill.online{
  border-color:rgba(47,255,178,.42);
  color:#b6ffe7;
  background:linear-gradient(145deg,rgba(47,255,178,.105),rgba(8,17,31,.62));
}

.server-stat-pill.warning,
.server-stat-pill.prepared,
.server-stat-pill.maintenance,
.server-stat-pill.starting,
.server-stat-pill.booting,
.server-stat-pill.waking,
.server-stat-pill.checking{
  border-color:rgba(255,209,102,.46);
  color:#ffe2a3;
  background:linear-gradient(145deg,rgba(255,209,102,.115),rgba(8,17,31,.62));
}

.server-stat-pill.critical,
.server-stat-pill.restarting,
.server-stat-pill.shutting_down{
  border-color:rgba(255,159,67,.50);
  color:#ffd2a0;
  background:linear-gradient(145deg,rgba(255,159,67,.12),rgba(8,17,31,.62));
}

.server-stat-pill.offline,
.server-stat-pill.blocked,
.server-stat-pill.revoked{
  border-color:rgba(255,77,109,.50);
  color:#ffb3c0;
  background:linear-gradient(145deg,rgba(255,77,109,.12),rgba(8,17,31,.62));
}

.server-stat-pill.info,
.server-stat-pill.ready,
.server-stat-pill.unknown{
  border-color:rgba(109,178,255,.34);
  color:#cfe6ff;
  background:linear-gradient(145deg,rgba(53,167,255,.085),rgba(8,17,31,.62));
}

.server-port-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.server-port-pill span{
  color:var(--muted);
}

.server-port-pill strong{
  font-weight:900;
}

@media (max-width:520px){
  .server-stat-grid{
    grid-template-columns:1fr;
  }
}

/* 31R-I-H5n server slim fields */
.server-card,
.collapsible-card {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.field-row,
.detail-row,
.info-row,
.url-row,
.server-field,
.copy-row,
.kv-row,
[class*="field-row"],
[class*="detail-row"],
[class*="copy-row"],
[class*="kv-row"] {
  min-height: 34px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.field-value,
.detail-value,
.copy-value,
.kv-value,
[class*="field-value"],
[class*="detail-value"],
[class*="copy-value"],
[class*="kv-value"] {
  min-height: 28px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* 31R-I-H5q server real slim fields safety-net */
.server-detail-card[open] .server-detail-body{
  gap:8px !important;
  padding-top:8px !important;
  padding-bottom:12px !important;
}

.server-address-row{
  min-height:32px !important;
  padding:5px 9px !important;
  gap:8px !important;
  margin:0 !important;
  border-radius:11px !important;
  line-height:1.18 !important;
  align-items:center !important;
}

.server-address-row span,
.server-address-row strong,
.server-address-row code,
.server-address-row a{
  font-size:.82rem !important;
  line-height:1.16 !important;
}

.server-address-row button,
.server-address-row .ghost-btn,
.server-address-row button.server-link-button{
  min-height:28px !important;
  padding:4px 8px !important;
  line-height:1.1 !important;
  border-radius:9px !important;
}

.server-integration-note,
.server-vpn-hint,
.server-permission-note,
.server-detail-body > p{
  min-height:30px !important;
  padding:6px 9px !important;
  margin:0 !important;
  line-height:1.2 !important;
  border-radius:11px !important;
  font-size:.82rem !important;
}

.server-stat-pill,
.server-stat-pill.z-stat-pill{
  min-height:32px !important;
  padding:5px 9px !important;
  gap:7px !important;
  border-radius:11px !important;
  line-height:1.16 !important;
}

/* 31R-I-H5am-final: clean final /server card component
   Finaler Stand:
   - Header-Chips nutzen echtes Monitoring-DOM: .monitoring-summary-actions + .status-pill
   - Metrics nutzen .monitoring-stat-pill
   - altes server-vpn-chip/server-summary-actions/server-expand-icon DOM ist entfernt
*/

/* Karte + neuer linker Streifen */
.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;
}

.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;
}

/* Alte echte Icons/Glow-Reste ausblenden, falls Cache/Alt-DOM existiert */
.server-expand-icon,
.server-detail-card > .h5u-server-left-glow,
.server-detail-card .h5v-summary-left-glow,
.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;
}

.server-detail-card > summary::marker,
.server-detail-card > summary::-webkit-details-marker {
  display: none !important;
  content: "" !important;
}

/* Summary-Kopf */
.server-detail-card.monitoring-item > summary.monitoring-summary.server-summary {
  list-style: none !important;
  position: relative !important;
  overflow: hidden !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;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  background: transparent !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

/* Dreieck über CSS, kein echtes span mehr */
.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;
  z-index: 3 !important;
}

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

/* Titelblock */
.server-title-block.monitoring-title-block,
.server-title-block {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  align-self: center !important;
}

.server-title-block .eyebrow {
  display: block !important;
  margin: 0 0 3px !important;
  font-size: .72rem !important;
  line-height: 1.08 !important;
  letter-spacing: .16em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.server-title-block h3 {
  display: block !important;
  margin: 0 !important;
  font-size: clamp(1rem, 1.08vw, 1.16rem) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.server-title-block p:not(.eyebrow) {
  display: block !important;
  margin: 4px 0 0 !important;
  font-size: .84rem !important;
  line-height: 1.14 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Header-Chips: echtes Monitoring-DOM */
.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;
  min-width: max-content !important;
  max-width: 42vw !important;
}

/* Keine Server-Sondergröße für status-pill */
.server-detail-card.monitoring-item > summary.monitoring-summary.server-summary .monitoring-summary-actions .status-pill {
  text-transform: none !important;
  box-shadow: none !important;
}

/* Metrics: echtes monitoring-stat-pill */
.server-detail-card.monitoring-item .monitoring-stat-pill {
  box-sizing: border-box !important;
}

/* Detailbereich */
.server-detail-card.monitoring-item .server-detail-body {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Section-Titel final ausgerichtet */
.server-detail-card.monitoring-item .server-detail-body section.server-address-section > h4,
.server-detail-card.monitoring-item .server-detail-body section.server-public-section > h4,
.server-detail-card.monitoring-item .server-detail-body section.server-port-section > h4,
.server-detail-card.monitoring-item .server-detail-body section.server-action-section > h4,
.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;
}

/* Responsive */
@media (max-width: 900px) {
  .server-detail-card.monitoring-item > summary.monitoring-summary.server-summary {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "chev title"
      "chev actions" !important;
    min-height: 70px !important;
    padding: 12px 14px 12px 18px !important;
    column-gap: 12px !important;
  }

  .server-detail-card.monitoring-item > summary.monitoring-summary.server-summary::before {
    grid-area: chev !important;
  }

  .server-title-block {
    grid-area: title !important;
  }

  .server-detail-card.monitoring-item > summary.monitoring-summary.server-summary .monitoring-summary-actions {
    grid-area: actions !important;
    justify-self: start !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 560px) {
  .server-title-block p:not(.eyebrow) {
    white-space: normal !important;
  }
}


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

/* Falls der erste Abschnitt direkt nach den Metrics kommt, sichere Extra-Luft */
.server-detail-card.monitoring-item .server-stat-grid + .server-address-section,
.server-detail-card.monitoring-item .server-detail-grid + .server-address-section,
.server-detail-card.monitoring-item .z-stat-grid + .server-address-section {
  margin-top: 4px !important;
}