/* Responsive, no-scroll styling */
.gq-el-table { width: 100%; overflow: visible; }
.gq-el { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gq-el th, .gq-el td { padding: 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.gq-el thead th { font-weight: 600; background: #f9fafb; }
.gq-el tr.is-online td { background: #f0fff4; }
.gq-el tr.is-offline td { background: #fff5f5; }
.gq-badge { padding: 2px 8px; border-radius: 9999px; font-size: 12px; display: inline-block; }
.gq-badge.online { background: #d1fae5; }
.gq-badge.offline { background: #fee2e2; }

/* Wrap long content to avoid horizontal scroll */
.gq-el td, .gq-el th { word-break: break-word; overflow-wrap: anywhere; }
.gq-el td code { word-break: break-all; }

/* Small screens: stack into blocks for readability without scrolling */
@media (max-width: 640px) {
  .gq-el thead { display: none; }
  .gq-el, .gq-el tbody, .gq-el tr, .gq-el td { display: block; width: 100%; }
  .gq-el tr { margin-bottom: 12px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; }
  .gq-el td { border-bottom: none; padding: 6px 0; }
  .gq-el td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 2px;
  }
}

/* Cards view */
.gq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gq-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.gq-card .gq-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gq-card .gq-title { font-weight: 600; }
.gq-card .gq-meta { font-size: 12px; opacity: .8; }
.gq-card .gq-row { margin: 4px 0; }


/* --- Table readability fixes --- */
.gq-el { table-layout: auto; }
.gq-el th, .gq-el td { word-break: normal; overflow-wrap: normal; white-space: normal; }
.gq-el th { white-space: nowrap; }
.gq-el td[data-label="Typ"],
.gq-el td[data-label="Status"] { white-space: nowrap; }
.gq-el td code { word-break: break-all; overflow-wrap: anywhere; white-space: normal; }
/* Slightly softer row backgrounds to work on dark/light themes */
.gq-el tr.is-online td { background: rgba(16, 185, 129, 0.12); }   /* teal-500 @ 12% */
.gq-el tr.is-offline td { background: rgba(239, 68, 68, 0.12); }   /* red-500 @ 12% */


/* --- Dynamic column widths & better wrapping --- */
.gq-el { table-layout: auto; width: 100%; }
.gq-el th, .gq-el td { white-space: normal; word-break: normal; overflow-wrap: normal; }
/* Keep compact columns tight */
.gq-el th:nth-child(2), .gq-el td[data-label="Typ"] { width: 1%; white-space: nowrap; }
.gq-el th:nth-child(4), .gq-el td[data-label="Status"] { width: 1%; white-space: nowrap; }
.gq-el th:nth-child(5), .gq-el td[data-label="Spieler"] { width: 1%; white-space: nowrap; text-align: right; }
/* Let address grow naturally; avoid breaking mid-token */
.gq-el td[data-label="Adresse"] code { white-space: nowrap; word-break: keep-all; }
/* Map/Channel can wrap but not split characters */
.gq-el td[data-label="Map/Channel"] { overflow-wrap: break-word; word-break: normal; }
/* Headings stay on one line */
.gq-el thead th { white-space: nowrap; }

/* Modern defaults & hovers */
.gq-card { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.gq-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

.gq-el tbody tr { transition: background-color .15s ease; }
.gq-el tbody tr:hover td { background-color: rgba(107, 114, 128, 0.08); } /* gray-500 @ 8% */

.gq-badge { transition: filter .15s ease; }
.gq-badge.online:hover, .gq-badge.offline:hover { filter: brightness(0.95); }