/* Bilard.online - poprawka modułu statystyk online */
.online-panel,
.who-online-page {
  box-sizing: border-box;
  width: 100%;
  clear: both;
  display: block;
  overflow: hidden;
  margin: 18px 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),#111923;
}
.online-panel *, .who-online-page * { box-sizing: border-box; }
.online-panel-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; width:100%; margin:0 0 16px;
}
.online-panel-head h3,.who-online-page h2 { margin:0 0 5px; }
.online-panel-head p { margin:0; }
.online-stats-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important; width:100%; margin:0 0 16px !important;
}
.online-stat {
  min-width:0; display:flex; flex-direction:column; justify-content:center;
  padding:16px; min-height:82px; border-radius:16px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.online-stat strong {
  display:block; margin:0 0 7px; font-size:27px; line-height:1.05;
  color:#fff; white-space:nowrap;
}
.online-stat span {
  display:block; margin:0; font-size:12px; line-height:1.35;
  color:#91a0b2; overflow-wrap:anywhere;
}
.online-detail-grid {
  display:grid !important; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) !important;
  gap:14px !important; width:100%;
}
.online-users-box,.online-meta-box {
  min-width:0; padding:15px; border-radius:16px;
  background:rgba(4,10,18,.38); border:1px solid rgba(255,255,255,.06);
}
.online-label {
  margin:0 0 10px; font-size:12px; line-height:1.3; text-transform:uppercase;
  letter-spacing:.08em; color:#91a0b2; font-weight:800;
}
.online-user-list {
  display:flex;
  align-items:center;
  align-content:flex-start;
  gap:5px 12px;
  flex-wrap:wrap;
  min-width:0;
  width:100%;
  max-height:126px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 4px 2px 0;
  scrollbar-width:thin;
}
.online-user {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-width:0;
  max-width:180px;
  padding:3px 0 3px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#dff6ff;
  font-size:13px;
  line-height:1.3;
  font-weight:700;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.online-user::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.10);
}
.online-user:hover {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.online-meta-box { display:flex; flex-direction:column; gap:9px; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.online-table { display:grid; gap:9px; width:100%; }
.online-row {
  min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.9fr);
  gap:14px; align-items:center; padding:13px 14px; border-radius:14px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.055);
}
.online-page-name { min-width:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px) {
  .online-panel,.who-online-page { padding:16px; border-radius:16px; }
  .online-panel-head { flex-direction:column; align-items:stretch; }
  .online-panel-head .chip-btn { align-self:flex-start; }
  .online-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .online-detail-grid { grid-template-columns:minmax(0,1fr) !important; }
  .online-row { grid-template-columns:minmax(0,1fr); gap:5px; }
  .online-page-name { text-align:left; white-space:normal; }
}
@media (max-width:420px) {
  .online-stats-grid { grid-template-columns:minmax(0,1fr) !important; }
  .online-stat { min-height:70px; }
}

/* Duże listy online: kompaktowy, wielowierszowy układ zamiast dużych pill-boxów */
@media (max-width:760px) {
  .online-user-list { max-height:150px; gap:6px 10px; }
  .online-user { max-width:150px; font-size:12.5px; }
}
@media (max-width:420px) {
  .online-user-list { max-height:180px; }
  .online-user { max-width:135px; }
}

/* Bilard.online — kompaktowe narożniki zgodne z resztą forum */
.online-panel,
.who-online-page { border-radius: 10px !important; }
.online-stat,
.online-users-box,
.online-meta-box,
.online-row { border-radius: 8px !important; }
