/* ==========================================================================
   SERVER STATUS STYLES
   Extends css/style.css. Numbers here are placeholders — meant to be
   populated from a live SOAP/DB query later (players online, uptime,
   character counts per race/class).
   ========================================================================== */

.status-hero{max-width:700px; margin:0 auto; padding:170px 5% 0; text-align:center;}
.status-hero .page-eyebrow{justify-content:center;}
.status-hero h1{
  font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4rem);
  text-transform:uppercase; letter-spacing:2px; font-weight:800; color:var(--text);
}
.status-hero h1 span{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.status-hero p{color:var(--text-dim); margin-top:16px; line-height:1.8;}

.status-badge-big{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  padding:11px 26px; border-radius:30px;
  font-family:var(--font-display); font-size:0.95rem; letter-spacing:1.5px; text-transform:uppercase;
}
.status-badge-big::before{content:"●"; font-size:0.7rem; animation:statusPulse 1.6s ease-in-out infinite;}
.status-badge-big.online{color:#8fe0a8; border:1px solid rgba(143,224,168,0.4); background:rgba(143,224,168,0.08);}
.status-badge-big.beta{color:var(--frost-glow); border:1px solid var(--frost-dim); background:rgba(111,216,255,0.08);}
.status-badge-big.offline{color:var(--text-dim); border:1px solid var(--border); background:rgba(142,162,179,0.06);}
@keyframes statusPulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

.status-stats-grid{
  max-width:1000px; margin:0 auto; padding:0 5%;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.status-stat-card{
  text-align:center; padding:28px 20px; border-radius:12px;
  border:1px solid var(--border); background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.status-stat-card h3{font-family:var(--font-display); font-size:1.9rem; color:var(--frost-glow);}
.status-stat-card p{color:var(--text-dim); font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase; margin-top:8px;}

.status-section{max-width:900px; margin:0 auto; padding:90px 5% 0;}
.status-section:last-of-type{padding-bottom:150px;}

/* ---------- TABS (Faction Statistics / Class Statistics) ---------- */
.status-tabs{
  max-width:900px; margin:24px auto 0; padding:0 5%;
  display:flex; gap:6px; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.status-tabs a{
  padding:12px 18px; font-size:0.8rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-dim); border-bottom:2px solid transparent; transition:all .2s;
}
.status-tabs a:hover{color:var(--text);}
.status-tabs a.active{color:var(--frost-glow); border-color:var(--frost);}

.status-note{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  padding:5px 14px; border-radius:20px; border:1px solid var(--border);
  color:var(--text-dim); font-size:0.72rem; letter-spacing:0.5px;
}

.char-stats-card{
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--panel); margin-top:30px;
}
.char-stats-table{width:100%; border-collapse:collapse; font-size:0.87rem;}
.char-stats-table th{
  text-align:left; padding:12px 22px; color:var(--text-dim); font-size:0.68rem;
  letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid var(--border);
}
.char-stats-table td{padding:14px 22px; border-bottom:1px solid var(--border); color:var(--text);}
.char-stats-table tr:last-child td{border-bottom:none;}
.char-stats-table .faction-row td{
  background:var(--bg-alt); font-family:var(--font-display); font-weight:700;
  letter-spacing:0.5px; color:var(--frost-glow);
}
.char-stats-table .race-icon, .char-stats-table .class-icon, .char-stats-table .profession-icon, .char-stats-table .role-icon{
  width:20px; height:20px; margin-right:10px; border-radius:4px;
  vertical-align:middle;
}
.char-stats-table .rank-icon{
  width:20px; height:20px; border-radius:4px;
  vertical-align:middle;
}
.char-stats-table .faction-icon{
  width:16px; height:16px; margin-right:8px;
  vertical-align:middle;
}
.char-stats-table .faction-row .faction-icon{margin-right:10px;}
.char-stats-table .count{color:var(--frost-glow); font-weight:700; text-align:right;}

[data-tab-panel="pvp"] .char-stats-table td:nth-child(2),
[data-tab-panel="pvp"] .char-stats-table td:nth-child(3){text-align:center;}

@media(max-width:700px){
  .status-stats-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:420px){
  .status-stats-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  [data-tab-panel="faction"] .char-stats-table th:nth-child(2),
  [data-tab-panel="faction"] .char-stats-table td:nth-child(2){display:none;}
}

/* Population/Uptime bar-chart component now lives globally in style.css (.chart-card/.bar-chart). */