/* ════════════════════════════════════════════════════════════════════════════
   minecraft-servers.css  —  Minecraft Servers page specific styles
   Defines local colour vars --c-vanilla/modded/map/minigame/creative/other.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Local colour vars ── */
:root {
  --c-vanilla:  107, 181, 95;   /* #6BB55F — grass green     */
  --c-modded:   234, 142, 57;   /* #EA8E39 — forge orange    */
  --c-map:       88, 166, 255;  /* #58A6FF — explorer blue   */
  --c-minigame: 251, 191,  36;  /* #FBBF24 — gold yellow     */
  --c-creative: 167, 139, 250;  /* #A78BFA — creative purple */
  --c-other:    148, 163, 184;  /* #94A3B8 — slate grey      */
}

/* ── Featured checkbox (pin as featured) — custom styled ── */
.featured-check-wrap {
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; user-select: none;
}
.featured-check-wrap input[type="checkbox"] { display: none; }
.featured-check-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; font-size: 0.65rem; color: transparent;
}
.featured-check-wrap input:checked ~ .featured-check-box {
  background: var(--accent1); border-color: var(--accent1); color: #fff;
}
.featured-check-wrap:hover .featured-check-box {
  border-color: rgba(124,92,252,0.55);
}

/* ── type system — pages.html tc-* pattern ── */
.tc-vanilla  { --tc: var(--c-vanilla);  }
.tc-modded   { --tc: var(--c-modded);   }
.tc-map      { --tc: var(--c-map);      }
.tc-minigame { --tc: var(--c-minigame); }
.tc-creative { --tc: var(--c-creative); }
.tc-other    { --tc: var(--c-other);    }

/* ── toolbar ── */
.tb { display:flex; align-items:center; gap:0.5rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.srv-count { font-size:0.65rem; font-weight:700; font-family:'DM Mono',monospace; padding:2px 9px; border-radius:20px; background:rgba(124,92,252,0.1); border:1px solid rgba(124,92,252,0.22); color:var(--accent2); }

/* ── featured card ── */
.featured-wrap { margin-bottom:1.1rem; }
.featured-card {
  border-radius:var(--radius-sm); padding:1.4rem 1.5rem;
  position:relative; overflow:hidden;
  background:rgba(var(--tc),0.07);
  border:1px solid rgba(var(--tc),0.28);
  box-shadow:0 4px 20px rgba(var(--tc),0.1),inset 0 1px 0 rgba(255,255,255,0.06);
  transition:all 0.2s ease;
}
.featured-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--tc),0.6),transparent); }
.featured-card::after  { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:rgba(var(--tc),0.8); border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.featured-card:hover   { border-color:rgba(var(--tc),0.45); background:rgba(var(--tc),0.11); box-shadow:0 6px 28px rgba(var(--tc),0.15),inset 0 1px 0 rgba(255,255,255,0.07); }

.featured-badge { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(var(--tc),1); background:rgba(var(--tc),0.12); border:1px solid rgba(var(--tc),0.28); border-radius:20px; padding:2px 9px; margin-bottom:0.9rem; }
.featured-body { display:flex; align-items:center; gap:1.25rem; }
.featured-icon { width:72px; height:72px; border-radius:14px; flex-shrink:0; background:rgba(var(--tc),0.12); border:1px solid rgba(var(--tc),0.2); display:flex; align-items:center; justify-content:center; font-size:2.2rem; position:relative; }
.featured-sdot { position:absolute; bottom:4px; right:4px; width:13px; height:13px; border-radius:50%; border:2.5px solid var(--bg2); }
.featured-sdot.on  { background:var(--green); box-shadow:0 0 6px rgba(52,211,153,0.65); animation:livepulse 2s ease infinite; }
.featured-sdot.off { background:var(--text-muted); }
@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.featured-info { flex:1; min-width:0; }
.featured-name { font-size:1.2rem; font-weight:800; color:var(--text); letter-spacing:-0.4px; margin-bottom:0.18rem; }
.featured-meta { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.45rem; flex-wrap:wrap; }
.featured-type-badge { font-size:0.6rem; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; padding:2px 8px; border-radius:20px; border:1px solid rgba(var(--tc),0.3); background:rgba(var(--tc),0.1); color:rgba(var(--tc),1); font-family:'DM Mono',monospace; }
.featured-players { font-size:0.72rem; font-family:'DM Mono',monospace; color:var(--text-dim); }
.featured-players .on-c { color:var(--green); font-weight:700; }
.featured-latency { font-size:0.65rem; font-family:'DM Mono',monospace; color:var(--text-muted); }
.featured-desc { font-size:0.8rem; color:var(--text-dim); line-height:1.5; margin-bottom:0.85rem; max-width:560px; }
.featured-addr-row { display:flex; align-items:center; gap:0.55rem; flex-wrap:wrap; }
.featured-addr { font-family:'DM Mono',monospace; font-size:0.78rem; color:var(--text-muted); background:rgba(0,0,0,0.3); border:1px solid var(--border); border-radius:6px; padding:0.28rem 0.7rem; display:flex; align-items:center; gap:0.3rem; }
.addr-copy { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.72rem; padding:0; line-height:1; transition:color 0.12s; }
.addr-copy:hover { color:rgba(var(--tc),1); }
.featured-admin { display:flex; gap:0.3rem; }

/* ── list section label ── */
.list-section-label { display:flex; align-items:center; gap:0.5rem; font-size:0.6rem; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:rgba(150,150,180,0.5); margin-bottom:0.75rem; }
.list-section-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(150,150,180,0.12),transparent); }

/* ── server row cards ── */
.srv-list { display:flex; flex-direction:column; gap:0.65rem; }
.srv-card {
  background:rgba(var(--tc),0.05);
  border:1px solid rgba(var(--tc),0.22);
  border-radius:var(--radius-sm);
  box-shadow:0 2px 10px rgba(var(--tc),0.07),inset 0 1px 0 rgba(255,255,255,0.05);
  position:relative; overflow:hidden; transition:all 0.2s ease;
  display:grid; grid-template-columns:52px 1fr auto auto;
  align-items:center; gap:0.9rem; padding:1rem 1.1rem;
}
.srv-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--tc),0.55),transparent); }
.srv-card::after  { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:rgba(var(--tc),0.7); border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.srv-card:hover   { border-color:rgba(var(--tc),0.42); background:rgba(var(--tc),0.09); transform:translateY(-2px); box-shadow:0 6px 20px rgba(var(--tc),0.14),inset 0 1px 0 rgba(255,255,255,0.07); }

.srv-icon-wrap { width:52px; height:52px; border-radius:10px; flex-shrink:0; background:rgba(var(--tc),0.12); border:1px solid rgba(var(--tc),0.18); display:flex; align-items:center; justify-content:center; font-size:1.5rem; position:relative; }
.srv-dot { position:absolute; bottom:2px; right:2px; width:11px; height:11px; border-radius:50%; border:2px solid var(--bg2); }
.srv-dot.on  { background:var(--green); box-shadow:0 0 5px rgba(52,211,153,0.6); animation:livepulse 2s ease infinite; }
.srv-dot.off { background:var(--text-muted); }
.srv-dot.loading { background:var(--amber); animation:livepulse 0.8s ease infinite; }

.srv-info { min-width:0; }
.srv-name { font-size:0.95rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:0.22rem; }
.srv-meta { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.srv-addr { font-family:'DM Mono',monospace; font-size:0.72rem; color:var(--text-muted); background:rgba(0,0,0,0.28); border:1px solid var(--border); border-radius:5px; padding:1px 7px; display:flex; align-items:center; gap:0.3rem; }
.srv-type-badge { font-size:0.6rem; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; padding:2px 7px; border-radius:20px; border:1px solid rgba(var(--tc),0.3); background:rgba(var(--tc),0.1); color:rgba(var(--tc),1); font-family:'DM Mono',monospace; }
.srv-desc { font-size:0.76rem; color:var(--text-dim); margin-top:0.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; }

.srv-players { font-size:0.72rem; font-family:'DM Mono',monospace; color:var(--text-dim); white-space:nowrap; text-align:right; flex-shrink:0; min-width:80px; }
.srv-players .on-c { color:var(--green); font-weight:700; }
.srv-players .latency { display:block; font-size:0.62rem; color:var(--text-muted); margin-top:1px; }

.srv-actions { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; }
.srv-edit-btns { display:none; gap:0.2rem; }
.srv-card:hover .srv-edit-btns { display:flex; }
.s-act { width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,0.05); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.68rem; color:var(--text-dim); transition:background 0.12s; }
.s-act:hover { background:rgba(255,255,255,0.11); color:var(--text); }
.s-act.del:hover { background:rgba(248,113,113,0.1); color:var(--red); }
.s-act.star:hover { color:var(--amber); }

.btn-connect { padding:0.38rem 1rem; border-radius:7px; font-size:0.78rem; font-weight:700; cursor:pointer; font-family:'DM Sans',inherit; transition:all 0.15s; background:rgba(var(--tc),0.14); border:1px solid rgba(var(--tc),0.38); color:rgba(var(--tc),1); white-space:nowrap; }
.btn-connect:hover { background:rgba(var(--tc),0.24); border-color:rgba(var(--tc),0.6); }

/* ── empty state ── */
.empty-state { text-align:center; padding:3.5rem 1rem; color:var(--text-muted); }
.empty-state .es-icon { font-size:2.5rem; margin-bottom:0.65rem; }
.empty-state .es-title { font-size:0.9rem; font-weight:600; color:var(--text-dim); margin-bottom:0.3rem; }

/* ── type grid in modal ── */
.type-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.4rem; }
.type-opt { padding:0.5rem 0.5rem 0.45rem; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,0.03); cursor:pointer; text-align:center; transition:all 0.14s; display:flex; flex-direction:column; align-items:center; gap:0.22rem; }
.type-opt:hover { border-color:var(--border-hi); background:rgba(255,255,255,0.06); }
.type-opt.active { border-color:rgba(var(--tc),0.5); background:rgba(var(--tc),0.1); }
.type-opt-icon { font-size:1.1rem; line-height:1; }
.type-opt-label { font-size:0.68rem; font-weight:700; color:var(--text-dim); letter-spacing:0.4px; }
.type-opt.active .type-opt-label { color:rgba(var(--tc),1); }

/* ── status refresh indicator ── */
.status-indicator { display:flex; align-items:center; gap:0.35rem; font-size:0.65rem; color:var(--text-muted); }
.status-indicator.refreshing { color:var(--amber); }
.status-indicator.refreshing::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--amber); animation:livepulse 0.8s ease infinite; }
.status-indicator.done::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); }

/* responsive */
@media(max-width:700px){
  .srv-card { grid-template-columns:44px 1fr; }
  .srv-players { display:none; }
  .srv-actions { grid-column:2; justify-content:flex-end; }
}

/* ── edition toggle (modal) ── */
.edition-toggle { display:flex; gap:0.4rem; margin-top:0.25rem; }
.edition-btn { flex:1; padding:0.45rem 0; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text-dim); font-size:0.78rem; font-weight:600; cursor:pointer; font-family:'DM Sans',inherit; transition:all 0.14s; }
.edition-btn:hover { border-color:var(--border-hi); background:rgba(255,255,255,0.06); }
.edition-btn.active { border-color:rgba(124,92,252,0.55); background:rgba(124,92,252,0.12); color:var(--accent1); }

/* ── edition badge (cards) ── */
.edition-badge { font-size:0.62rem; font-weight:700; padding:0.12rem 0.45rem; border-radius:5px; letter-spacing:0.3px; }
.edition-badge.java { background:rgba(255,183,77,0.12); color:#ffb74d; border:1px solid rgba(255,183,77,0.3); }
.edition-badge.bedrock { background:rgba(46,213,115,0.12); color:#2ed573; border:1px solid rgba(46,213,115,0.3); }