/* =========================================
   BRENNHOLZ SERVER STATUS - FINAL CSS (V6.8)
   ========================================= */

/* --- 1. CONFIG & VARIABLES --- */
:root {
    --hll-bg: var(--surface, #121e38);
    --hll-border: var(--line, rgba(255,255,255,0.08));
    --hll-text: var(--text, #e2e8f0);
    --hll-muted: var(--text-muted, #94a3b8);
    --hll-gold: var(--gold, #f5d671);
    --hll-radius: var(--radius, 12px);
    
    /* Team Colors */
    --hll-us: #60a5fa; 
    --hll-de: #f87171; 
    --hll-green: #10b981;
}

/* --- 2. RESET --- */
.hll-widget, .hll-player-profile, .hll-detail-view, 
.hll-widget *, .hll-player-profile *, .hll-detail-view * {
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- 3. ANIMATIONS --- */
@keyframes hllPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@keyframes hllFlash { 0% { border-color: rgba(16, 185, 129, 0.8); } 100% { border-color: var(--hll-border); } }
.hll-animate-flash { animation: hllFlash 0.8s ease-out; }
.hll-live-pulse { width: 8px; height: 8px; background: var(--hll-green); border-radius: 50%; display: inline-block; animation: hllPulse 2s infinite; margin-right: 8px; }

/* --- 4. LAYOUT --- */
.hll-dashboard-layout { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; width: 100%; margin-bottom: 40px; }
.hll-layout-sidebar { display: flex; flex-direction: column; gap: 30px; width: 100%; min-width: 0; }
.hll-layout-main { min-width: 0; width: 100%; }
@media (max-width: 950px) { .hll-dashboard-layout { grid-template-columns: 1fr; } .hll-layout-sidebar { order: -1; } }

/* --- 5. WIDGET BASIS --- */
.hll-widget {
    background: var(--hll-bg);
    border: 1px solid var(--hll-border);
    border-radius: var(--hll-radius);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    margin-bottom: 0;
    color: var(--hll-text);
}

.hll-header {
    background: rgba(0,0,0,0.25);
    padding: 16px 20px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--hll-border);
    font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.hll-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.hll-icon { font-size: 16px; margin-right: 4px; }
.hll-pill-count { margin-left: auto; background: rgba(255,255,255,0.1); padding: 3px 10px; border-radius: 99px; font-size: 11px; color: var(--hll-muted); flex-shrink: 0; }
.hll-refresh-icon { width: 8px; height: 8px; background: var(--hll-green); border-radius: 50%; margin-left: auto; opacity: 0.5; flex-shrink: 0; transition: 0.3s; }
.hll-refresh-icon.loading { opacity: 1; transform: scale(1.5); background: var(--hll-gold); }

.hll-body { padding: 24px; background: radial-gradient(circle at top right, rgba(245, 214, 113, 0.04), transparent 70%); }
.hll-msg { padding: 40px; color: var(--hll-muted); text-align: center; }
.hll-offline { padding: 40px; text-align: center; background: var(--hll-bg); border: 1px solid var(--hll-border); border-radius: var(--hll-radius); }

/* --- 6. FRONT PAGE / SCHNELLEINSTIEG --- */
.hll-body ul { list-style: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; }
.hll-body li { 
    margin-bottom: 12px !important; 
    position: relative !important; 
    padding-left: 24px !important; 
    color: var(--hll-text);
    font-size: 14px;
    line-height: 1.4;
}
.hll-body li::before { 
    content: "✓"; color: var(--hll-gold); 
    position: absolute; left: 0; top: 0;
    font-weight: bold; font-family: sans-serif;
}

.hll-action-row { display: flex; gap: 12px; margin-top: 20px; }
.hll-btn-gold {
    background: var(--hll-gold); color: #0b1220; 
    padding: 10px 20px; border-radius: 8px; 
    font-weight: 700; text-decoration: none; font-size: 13px;
    transition: 0.2s; border: none; cursor: pointer; text-align: center;
}
.hll-btn-gold:hover { background: #ffe082; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,214,113,0.3); }

.hll-btn-dark {
    background: rgba(255,255,255,0.1); color: #fff;
    padding: 10px 20px; border-radius: 8px;
    font-weight: 600; text-decoration: none; font-size: 13px;
    transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); text-align: center;
}
.hll-btn-dark:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* --- 7. MINI WIDGET (Frontpage) --- */
.hll-mini-card {
    display: block;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
}
.hll-mini-card:hover {
    border-color: var(--hll-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.hll-mini-header {
    font-size: 10px; font-weight: 700; color: var(--hll-gold);
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
    text-transform: uppercase;
}
.hll-mini-content {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.hll-mini-map {
    font-weight: 700; font-size: 16px; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 65%;
}
.hll-mini-count { font-weight: 600; font-size: 14px; }
.hll-mini-count .muted { color: var(--hll-muted); font-size: 12px; }
.hll-mini-bar {
    height: 4px; background: rgba(255,255,255,0.1);
    border-radius: 2px; overflow: hidden;
}
.hll-mini-progress {
    height: 100%; background: var(--hll-gold); border-radius: 2px;
}

/* --- 8. LIVE STATUS --- */
.hll-status-main { text-align: center; margin-bottom: 24px; }
.hll-pill-small { display: inline-block; background: rgba(16, 185, 129, 0.2); color: var(--hll-green); font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 700; margin-bottom: 8px; }
.hll-map-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 6px 0; line-height: 1.2; }
.hll-timer { font-size: 12px; color: var(--hll-muted); }

.hll-status-score { display: flex; justify-content: center; gap: 16px; margin-bottom: 24px; font-family: monospace; font-size: 24px; font-weight: 700; }
.score-us { color: var(--hll-us) !important; } 
.score-de { color: var(--hll-de) !important; }

.hll-balance-wrapper { background: rgba(0,0,0,0.2); border-radius: 10px; padding: 12px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 20px; }
.hll-balance-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; display: flex; overflow: hidden; margin-bottom: 8px; }
.bar-segment { height: 100%; transition: width 1s; } 
.seg-us { background: var(--hll-us); } 
.seg-de { background: var(--hll-de); }
.hll-balance-text { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.hll-footer { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--hll-border); gap: 10px; }
.hll-join-btn { background: var(--hll-gold); color: #0b1220; padding: 8px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; font-size: 12px; transition: 0.2s; }
.hll-join-btn:hover { background: #ffe082; transform: translateY(-2px); }

/* --- 9. LISTEN & HISTORY --- */
.hll-list { padding: 0; margin: 0; }
.hll-scroll-list { max-height: 400px; overflow-y: auto; scrollbar-width: thin; }
.hll-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; text-decoration: none; color: inherit; gap: 10px; }
.hll-row:last-child { border-bottom: none; }
.hll-row:hover { background: rgba(255,255,255,0.06); }
.hll-rank { width: 30px; font-size: 12px; color: var(--hll-muted); font-weight: 600; flex-shrink: 0; }
.hll-player-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.hll-player-name { font-weight: 600; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hll-player-score { font-weight: 700; color: var(--hll-gold); font-size: 14px; text-align: right; min-width: 50px; }

.hll-history-map { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.hll-history-name { font-weight: 600; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hll-history-date { font-size: 11px; color: var(--hll-muted); margin-top: 3px; }
.hll-history-result { font-weight: 700; font-size: 13px; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); min-width: 60px; text-align: center; flex-shrink: 0; font-family: monospace; display: flex; justify-content: center; gap: 4px; }
.res-allies { color: var(--hll-us) !important; } 
.res-axis { color: var(--hll-de) !important; }
.res-sep { color: #fff; opacity: 0.5; }

/* --- 10. TABELLEN (Strict Layout) --- */
.hll-detail-content {
    background: var(--hll-bg);
    border-top: 1px solid var(--hll-border);
    width: 100%;
    padding: 0 !important;
    overflow-x: auto; 
    border-bottom-left-radius: var(--hll-radius);
    border-bottom-right-radius: var(--hll-radius);
}

table.hll-full-table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

#hll-live-detailed-list table.hll-full-table { min-width: 700px; }
#hll-live-simple-list .hll-detail-content { overflow-x: hidden; }
#hll-live-simple-list table.hll-full-table { min-width: 0; }

.hll-full-table thead { display: table-header-group !important; }
.hll-full-table tbody { display: table-row-group !important; }
.hll-full-table tr { display: table-row !important; border: none !important; background: transparent !important; }

/* Cells */
.hll-full-table th, .hll-full-table td {
    display: table-cell !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    color: #cbd5e1;
}

.hll-full-table th {
    background: #1a2642 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--hll-muted) !important;
    border-bottom: 2px solid var(--hll-border) !important;
    position: sticky; top: 0; z-index: 5;
}
.hll-full-table th[title] { cursor: help; text-decoration: underline dotted rgba(255,255,255,0.3); }

/* Columns */
.col-rank { width: 40px !important; text-align: center !important; color: var(--hll-muted); }
.col-name { width: auto !important; font-weight: 500; text-align: left; }
.col-stat { width: 55px !important; text-align: center !important; }
.col-total { width: 70px !important; text-align: right !important; padding-right: 20px !important; font-weight: 800; color: var(--hll-gold); }
.col-stat.high { color: #fff; font-weight: 700; font-size: 14px; }
.col-stat.muted { color: var(--hll-muted); opacity: 0.7; font-size: 12px; }
.hll-hover-table tr:hover td { background: rgba(255,255,255,0.04) !important; color: #fff; }

.hll-player-link { color: #fff !important; text-decoration: none; font-weight: 600; } 
.hll-player-link:hover { color: var(--hll-gold) !important; text-decoration: underline; }
.hll-flag { display: inline-block; font-size: 9px; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,0.1); color: var(--hll-muted); margin-left: 6px; }

/* Footer Button */
.hll-footer-actions { 
    padding: 15px; text-align: center; border-top: 1px solid var(--hll-border); background: rgba(0,0,0,0.15); 
    border-bottom-left-radius: var(--hll-radius);
    border-bottom-right-radius: var(--hll-radius);
}
.hll-detail-content:has(+ .hll-footer-actions) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.hll-btn-ghost { display: inline-block; padding: 10px 20px; border: 1px solid var(--hll-border); border-radius: 8px; color: var(--hll-text); text-decoration: none; font-weight: 600; font-size: 13px; background: rgba(255,255,255,0.02); }
.hll-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--hll-gold); color: #fff; }

/* --- 11. PROFILE & DETAIL LAYOUT --- */
.hll-detail-view { width: 100%; }
.hll-nav-top { margin-bottom: 20px; }
.hll-btn-back, .hll-btn-back-small { display: inline-flex; align-items: center; background: rgba(255,255,255,0.05); color: #fff; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; border: 1px solid rgba(255,255,255,0.1); transition: 0.2s; gap: 8px; }
.hll-btn-back:hover { border-color: var(--hll-gold); }

.hll-detail-header { background: linear-gradient(135deg, rgba(23,43,78,0.9), rgba(11,18,32,0.95)); border: 1px solid var(--hll-border); border-radius: var(--hll-radius); padding: 40px; margin-bottom: 30px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.hll-detail-header::before { content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient(circle, rgba(56, 189, 248, 0.05), transparent 60%); pointer-events: none; }
.hll-detail-meta { display: flex; justify-content: center; gap: 16px; margin-bottom: 20px; }
.hll-detail-title { font-size: clamp(28px, 5vw, 42px); margin: 0 0 30px; color: #fff; line-height: 1.1; font-weight: 800; }

.hll-detail-score-board { display: inline-grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; background: rgba(0,0,0,0.4); padding: 30px 60px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); margin-top: 10px; min-width: 300px; }
.team-name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; opacity: 0.9; } 
.team-score { font-size: 56px; font-weight: 800; line-height: 1; }

/* Farben erzwingen */
.team-allies .team-name, .team-allies .team-score { color: var(--hll-us) !important; }
.team-axis .team-name, .team-axis .team-score { color: var(--hll-de) !important; }

.hll-detail-actions { margin-top: 30px; text-align: center; }

/* Profil Layout */
.hll-player-profile { display: flex !important; flex-direction: column !important; gap: 30px !important; width: 100%; max-width: 1000px; margin: 0 auto; }
.hll-player-profile > * { margin: 0 !important; }

.hll-profile-header { display: flex; flex-wrap: wrap; text-align: left; padding: 32px; align-items: center; background: linear-gradient(135deg, rgba(23,43,78,0.9), rgba(11,18,32,0.95)); border-radius: var(--hll-radius); border: 1px solid var(--hll-border); }
.hll-avatar-wrap { width: 100px; height: 100px; position: relative; flex-shrink: 0; }
.hll-profile-avatar { width: 100%; height: 100%; border-radius: 12px; border: 2px solid rgba(255,255,255,0.1); background: #000; object-fit: cover; }
.hll-flag-large { position: absolute; bottom: -6px; right: -6px; background: var(--hll-bg); border: 1px solid var(--hll-border); padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.hll-profile-meta { flex: 1; min-width: 200px; margin-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.hll-profile-name { font-size: 32px; margin: 0; color: #fff; font-weight: 800; }
.hll-meta-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.hll-pill { background: rgba(245, 214, 113, 0.1); color: var(--hll-gold); padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: uppercase; border: 1px solid rgba(245, 214, 113, 0.2); }
.hll-pill.green { background: rgba(16, 185, 129, 0.15); color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
.hll-pill.red { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.hll-pill.green-soft { background: rgba(16, 185, 129, 0.1); color: #34d399; border-color: rgba(16, 185, 129, 0.2); }

.hll-profile-bigstats { display: flex; gap: 15px; margin-left: auto; }
.stat-block { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.03); padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); min-width: 80px; }
.stat-block.highlight { background: rgba(245, 214, 113, 0.1); border-color: rgba(245, 214, 113, 0.2); }
.stat-block .val { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 2px; } .stat-block.highlight .val { color: var(--hll-gold); }
.stat-block .lbl { font-size: 9px; text-transform: uppercase; color: var(--hll-muted); }

.hll-extra-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.extra-stat-item { background: rgba(255,255,255,0.03); padding: 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); text-align: center; }
.es-lbl { font-size: 10px; text-transform: uppercase; color: var(--hll-muted); margin-bottom: 5px; font-weight: 600; }
.es-val { font-size: 16px; font-weight: 700; color: #fff; }
.text-gold { color: var(--hll-gold); } .text-red { color: #ef4444; }

.hll-profile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; }
.hll-profile-split .hll-widget { height: 100%; }
.hll-bars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 40px; }
.hll-bar-row { margin-bottom: 0; }
.hll-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; font-weight: 600; } .hll-bar-label .val { color: #fff; }
.hll-progress-bg { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.hll-progress-fill { height: 100%; border-radius: 4px; }
.hll-progress-fill.combat { background: #f87171; } .hll-progress-fill.offense { background: #fb923c; } .hll-progress-fill.defense { background: #60a5fa; } .hll-progress-fill.support { background: #34d399; }
.hll-scroll-list-small { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.hll-list-name { color: #fff; font-weight: 600; } .hll-list-val { margin-left: auto; color: var(--hll-gold); font-weight: 700; font-size: 13px; }
.text-red { color: #f87171; } .green { color: #34d399; font-weight: 700; }

@media (max-width: 768px) {
    .hll-profile-header { flex-direction: column; text-align: center; }
    .hll-profile-meta { margin: 0; align-items: center; }
    .hll-profile-bigstats { margin: 20px 0 0 0; width: 100%; justify-content: center; flex-wrap: wrap; }
    .hll-profile-split, .hll-bars-grid, .hll-extra-stats-grid { grid-template-columns: 1fr; }
    .hll-detail-score-board { grid-template-columns: 1fr; gap: 20px; text-align: center; }
}