/* Server Status (Mogroft) */

.status-section{
    width: 100%;
    margin-top: 24px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    outline: 2px solid rgba(59,130,246,0.35);
  }
  
  .status-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
  }
  
  .status-head h3{ margin:0; }
  .status-sub{ opacity:.75; font-size:.95rem; }
  
  /* Scrollbox: bis 6 Kacheln sichtbar (2 Reihen), ab 7 scrollt nur die Box */
  .status-scroll{
    max-height: calc((190px * 2) + 14px);
    overflow-y:auto;
    padding-right: 6px;
  }
  
  /* Grid = 3 Spalten (Desktop) */
  .status-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  
  /* responsive */
  @media (max-width: 980px){
    .status-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .status-scroll{ max-height: calc((190px * 2) + 14px); }
  }
  @media (max-width: 640px){
    .status-grid{ grid-template-columns:1fr; }
    .status-scroll{ max-height: none; overflow: visible; padding-right:0; }
  }
  
  /* Cards */
  .server-card{
    min-height:190px;
    border-radius:16px;
    padding:14px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.10);
    transition: transform 120ms ease, border-color 120ms ease;
  }
  
  .server-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
  }
  
  .server-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
  }
  
  .server-name{
    font-weight:800;
    font-size:1.05rem;
    line-height:1.2;
  }
  
  .server-meta{
    opacity:.72;
    font-size:.9rem;
    margin-top:2px;
  }
  
  .badge{
    font-size:.82rem;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.14);
    user-select:none;
    white-space:nowrap;
  }
  
  .badge.online{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.30); }
  .badge.offline{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); }
  
  .server-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:12px;
  }
  
  .stat{
    padding:10px;
    border-radius:12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .stat-label{ opacity:.7; font-size:.85rem; }
  .stat-value{ font-size:1.05rem; font-weight:800; margin-top:4px; }
  
  .server-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  
  .join{
    display:inline-block;
    padding:8px 10px;
    border-radius:12px;
    background: rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.10);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:.9rem;
    max-width:70%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  .copy-btn{
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color:inherit;
    padding:8px 10px;
    border-radius:12px;
    font-weight:700;
  }
  
  .copy-btn:hover{ background: rgba(255,255,255,0.08); }
  
  .server-card.is-offline{ opacity:.75; }
  .server-card.is-offline .copy-btn{ opacity:.75; }
  
  /* Scrollbar */
  .status-scroll::-webkit-scrollbar{ width:10px; }
  .status-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius:999px; }
  .status-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,0.04); border-radius:999px; }
  .status-scroll{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) rgba(255,255,255,0.05); }