/* SECTR7 — /index/info/server_status/server_status.css */
/* Kompakt serverstatus-kort. Tilføj .win for vindue-look med titelbar + tre dots. */

/* højre kolonne: stak af kort, centreret */
.s7__info{ display:flex; flex-direction:column; align-items:center; gap:14px; }

/* BASIS-KORT (kompakt) */
.fm-status{
  position: relative;
  width: 92%;
  max-width: 300px;
  min-width: 280px;
  margin: 8px auto;
  padding: 10px 12px;          /* kompakt indre luft */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16,25,49,.92), rgba(11,18,42,.92));
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 6px 16px rgba(0,0,0,.24);
  overflow: hidden;            /* så titelbar følger radius */
}

/* header */
.fm-status .fm__groupHead{
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  padding-bottom: 4px;
  position: relative;
  z-index: 2;                  /* over titelbar ::before */
}
.fm-status .fm__groupHead h3{
  margin:0;
  text-align:center;
  font-weight:800;
  color: var(--ink, #e7eefb);
  letter-spacing:.2px;
}

/* RÆKKER: label | bar | tal — stram og symmetrisk spacing */
.fm-status .fm__kv{
  display:grid;
  grid-template-columns: 66px 120px 54px; /* TEKST | BAR | TAL */
  column-gap: 4px;                        /* ens afstand mellem kolonner */
  row-gap: 6px;                           /* lodret mellemrum */
  align-items:center;
  padding: 2px 0;                         /* stram indre luft pr. række */
  border-radius:8px;
}
.fm-status .fm__kv + .fm__kv{ margin-top:4px; }

/* Tekster */
.fm-status .key{
  color: var(--ink, #dfe6f5);
  font-weight:600;
  text-align:right;
  padding-right:0;                        /* ingen ekstra luft */
}
.fm-status .val{
  display:flex; align-items:center; justify-content:flex-end;
  gap:2px;                                /* tal og enhed tæt */
  white-space:nowrap;
  color: var(--muted, #9fb0c8);
  padding-right:0;
}
.fm-status .val b{ color: var(--ink, #ffffff); font-weight:800; }
.fm-status .val em{ font-style:normal; color: var(--muted, #9fb0c8); }

/* Bars (korte) */
.fm-status .bar{
  width:120px; height:8px; margin:0;      /* ingen skjult margin */
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.fm-status .bar__fill{
  height:100%; width:0%;
  transition: width .25s ease, background .15s linear;
}

/* advarselsfarver (sættes via JS på rækken) */
.fm-status .warn .key,
.fm-status .warn .val b { color:#ffd36a; }
.fm-status .crit .key,
.fm-status .crit .val b { color:#ff7b7b; }

/* ————— VINDUE-LOOK (aktivér med .win) ————— */
.fm-status.win{
  background: #0b0f14;                    /* mørk terminalbaggrund */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.02);
}

/* tydelig titelbar */
.fm-status.win .fm__groupHead{
  padding-top: 30px;                      /* plads til titlebar */
  padding-bottom: 8px;
}
.fm-status.win .fm__groupHead::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 24px;
  background: linear-gradient(180deg, #121a26, #0e1520); /* tydeligere kontrast */
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 9px 9px 0 0;
  z-index: 1;
}

/* tre prikker i øverste højre hjørne */
.fm-status.win .fm__groupHead::after{
  content: "";
  position: absolute;
  top: 5px; right: 10px;
  width: 48px; height: 12px;
  background:
    radial-gradient(circle 4px at 6px 6px,   #ff5f57 48%, transparent 49%),
    radial-gradient(circle 4px at 24px 6px,  #ffbd2e 48%, transparent 49%),
    radial-gradient(circle 4px at 42px 6px,  #28c840 48%, transparent 49%);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
  z-index: 2;
}

/* titel-tekst over titlebar */
.fm-status.win .fm__groupHead h3{
  position: relative;
  z-index: 3;
  color: #e7eefb;
  letter-spacing:.2px;
}

/* ————— Responsiv finpudsning ————— */
@media (max-width:1200px){
  .fm-status{ max-width: 290px; }
  .fm-status .fm__kv{
    grid-template-columns: 64px 112px 52px;
    column-gap: 4px;
  }
  .fm-status .bar{ width:112px; }
}
@media (max-width:980px){
  .fm-status{ max-width: 280px; }
  .fm-status .fm__kv{
    grid-template-columns: 62px 108px 50px;
    column-gap: 4px;
  }
  .fm-status .bar{ width:108px; }
}