/* ============================================================
   GAME SERVER PANEL – base.css
   Design System: Dark industrial with red accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Exo+2:wght@300;400;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    --red:          #c4161c;
    --red-dark:     #9e1116;
    --red-glow:     rgba(196, 22, 28, 0.35);
    --red-subtle:   rgba(196, 22, 28, 0.12);
    --bg:           #1a1a1a;
    --bg-card:      #222222;
    --bg-elevated:  #2a2a2a;
    --bg-hover:     #2e2e2e;
    --surface:      #333333;
    --surface-2:    #3a3a3a;
    --border:       rgba(255,255,255,0.07);
    --border-hover: rgba(196, 22, 28, 0.5);
    --text:         #e8e8e8;
    --text-muted:   #888888;
    --text-dim:     #555555;
    --green:        #22c55e;
    --green-glow:   rgba(34, 197, 94, 0.25);
    --yellow:       #f59e0b;
    --mono:         'JetBrains Mono', monospace;
    --display:      'Rajdhani', sans-serif;
    --body:         'Exo 2', sans-serif;
    --radius:       6px;
    --radius-lg:    12px;
    --shadow:       0 4px 24px rgba(0,0,0,0.4);
    --shadow-red:   0 4px 24px var(--red-glow);
    --transition:   0.18s ease;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Background grid pattern */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(196,22,28,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(196,22,28,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: #e52229; }

button { font-family: var(--body); cursor: pointer; border: none; outline: none; }

input { font-family: var(--body); outline: none; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ── Utility ───────────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}