/* Sandros MC – gemeinsames Design (2026-09-25)
   Wird in jeder Seite NACH dem seiteneigenen <style> geladen und überschreibt Farben,
   Schriften und die gemeinsamen Bausteine. Seitenlogik bleibt unverändert. */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Grundpalette: Deepslate + Gras */
  --mc-bg: #0e120f; --mc-surface: #151c16; --mc-surface-2: #1b231c; --mc-surface-3: #222c23;
  --mc-border: #2a352b; --mc-border-soft: #1f281f; --mc-edge: #0b0f0b;
  --mc-text: #e8efe6; --mc-text-2: #a6b3a4; --mc-text-3: #6f7d6d;
  --mc-grass: #6cc24a; --mc-grass-dark: #3f8a28; --mc-grass-soft: #16301a;
  --mc-gold: #f4c542; --mc-diamond: #5ce1e6; --mc-redstone: #ff5a4e; --mc-lapis: #6f9cff; --mc-amethyst: #c8a2ff; --mc-xp: #b6f542;
  --mc-pixel: 'Silkscreen', 'Outfit', monospace;

  /* Variablen der bestehenden Seiten auf die neue Palette legen */
  --bg: var(--mc-bg); --bg-deep: var(--mc-bg);
  --card: var(--mc-surface); --bg-card: var(--mc-surface);
  --card-hover: var(--mc-surface-2); --bg-card-hover: var(--mc-surface-2);
  --input: #0f140f; --bg-input: #0f140f;
  --border: var(--mc-border); --border-glow: var(--mc-grass-dark);
  --text: var(--mc-text); --text-primary: var(--mc-text);
  --text2: var(--mc-text-2); --text-secondary: var(--mc-text-2);
  --text3: var(--mc-text-3); --text-muted: var(--mc-text-3); --text-dim: var(--mc-text-3);
  --green: var(--mc-grass); --green-d: var(--mc-grass-soft); --green-dim: var(--mc-grass-soft);
  --green-g: rgba(108,194,74,0.14); --green-glow: rgba(108,194,74,0.14); --glow: rgba(108,194,74,0.14);
  --red: var(--mc-redstone); --red-d: #3a1614; --red-dim: #3a1614;
  --yellow: var(--mc-gold); --yellow-d: #3a2d0c; --yellow-dim: #3a2d0c; --gold: var(--mc-gold);
  --blue: var(--mc-lapis); --blue-dim: #16243f;
  --purple: var(--mc-amethyst); --purple-dim: #2a1b40;
  --cyan: var(--mc-diamond); --orange: #ff9f45;
  --silver: #c9d1d9; --bronze: #d08a4f;
}

html, body { background: var(--mc-bg) !important; }
body { font-family: 'Outfit', system-ui, sans-serif !important; color: var(--mc-text); }
/* altes Gitter-Muster im Hintergrund aus */
body::before { background-image: none !important; background: none !important; }
/* Gras-Streifen oben als Erkennungszeichen */
body::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 6px; z-index: 200; pointer-events: none;
  background: url('/items/grass_block_side.png') repeat-x; background-size: 12px 12px; image-rendering: pixelated;
}
img[src^="/items/"], .mc-ico { image-rendering: pixelated; }

/* Überschriften in Pixel-Schrift */
h1, .header h1, .page-title { font-family: var(--mc-pixel) !important; font-weight: 400 !important; letter-spacing: .5px; }
h1 span { color: var(--mc-grass) !important; }
h2 { letter-spacing: .2px; }
.card h2, .card h3, .section-title, .card-title { font-family: var(--mc-pixel); font-weight: 400; font-size: 13px; letter-spacing: .4px; }

/* Logo-Kachel in der Kopfzeile: Item-Symbol statt Emoji (setzt mc-shell.js) */
.logo, .sidebar-logo .ico, .mob-head .ico {
  background: var(--mc-surface-2) !important; border-radius: 6px !important; box-shadow: inset 0 -4px 0 var(--mc-edge) !important;
  border: 2px solid var(--mc-border);
}
.logo img, .sidebar-logo .ico img, .mob-head .ico img { width: 60%; height: 60%; image-rendering: pixelated; }

/* Karten: flacher, mit „Block-Kante“ unten */
.card, .stat-card, .player-card, .entry, .add-card, .admin-box, .dist-card, .lb-item, .rule-item, .perm-row,
.status-banner, .stat-section, .log-container, .welcome-banner {
  background: var(--mc-surface) !important; border: 2px solid var(--mc-border-soft) !important; border-radius: 6px !important;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.28) !important;
}
.card:hover, .player-card:hover, .entry:hover { border-color: var(--mc-border) !important; }

/* Knöpfe wie im Spiel: kantig, mit dunkler Unterkante */
.btn, button.btn, .btn-sm {
  border-radius: 4px !important; font-weight: 600; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); transition: filter .12s, transform .05s;
}
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.btn-primary, .btn-green, .login-btn, button[type="submit"]:not(.mc-plain) {
  background: var(--mc-grass) !important; color: #0d1a09 !important; border: 0 !important;
  box-shadow: inset 0 -4px 0 var(--mc-grass-dark), inset 0 2px 0 #9be07a !important;
}
.btn-primary:hover, .btn-green:hover, .login-btn:hover { filter: brightness(1.07); }
.btn-danger { background: #b83228 !important; color: #fff !important; border: 0 !important; box-shadow: inset 0 -4px 0 #7a1d17 !important; }
.btn-warn { background: var(--mc-gold) !important; color: #1a1405 !important; border: 0 !important; box-shadow: inset 0 -4px 0 #b8871c !important; }
.btn-ghost, .btn-secondary { background: var(--mc-surface-2) !important; border: 2px solid var(--mc-border) !important; color: var(--mc-text-2) !important; }

/* Filter-/Reiter-Knöpfe */
.filter-btn, .sort-btn, .tab, .tab-btn {
  border-radius: 4px !important; border: 2px solid var(--mc-border) !important; background: var(--mc-surface) !important; color: var(--mc-text-2) !important;
}
.filter-btn.active, .sort-btn.active, .tab.active, .tab-btn.active {
  background: var(--mc-grass) !important; border-color: var(--mc-grass) !important; color: #0d1a09 !important; font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--mc-grass-dark);
}

/* Navigation in der Kopfzeile (Handy / Seiten ohne Seitenmenü) */
.nav a, .nav button, .nav-links a, .nav-links button {
  border-radius: 4px !important; border: 2px solid var(--mc-border) !important; background: var(--mc-surface) !important;
}
.nav a:hover, .nav-links a:hover, .nav button:hover, .nav-links button:hover { background: var(--mc-surface-2) !important; color: var(--mc-text) !important; }

/* Eingabefelder */
input[type="text"], input[type="password"], input[type="number"], input[type="search"], input:not([type]), select, textarea, .search-box {
  border-radius: 4px !important; border: 2px solid var(--mc-border) !important; background: #0f140f !important; color: var(--mc-text) !important;
}
input:focus, select:focus, textarea:focus, .search-box:focus { outline: none !important; border-color: var(--mc-grass) !important; box-shadow: 0 0 0 3px rgba(108,194,74,.18) !important; }

/* Tabellen */
table th { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--mc-text-3) !important; }
table td, table th { border-color: var(--mc-border-soft) !important; }

/* Kopfzeile der Unterseiten */
.header { border-bottom: 2px solid var(--mc-border-soft) !important; }

/* ── Seitenmenü (Dashboard hat es bereits, alle anderen Seiten bekommen es von mc-shell.js) ── */
.sidebar { background: #131914 !important; border-right: 2px solid #232c24 !important; padding-top: 6px !important; }
.sidebar-logo { border-bottom: 0 !important; padding: 18px 18px 16px !important; }
.sidebar-logo span { font-family: var(--mc-pixel); font-weight: 400 !important; font-size: 15px !important; letter-spacing: .4px; }
.sidebar-logo b { color: var(--mc-grass) !important; font-weight: 400 !important; }
.sidebar-nav { gap: 2px !important; padding: 4px 10px 12px !important; }
.nav-item { border-radius: 4px !important; padding: 8px 10px !important; font-size: 14px !important; color: var(--mc-text-2) !important; }
.nav-item:hover { background: var(--mc-surface-2) !important; color: var(--mc-text) !important; }
.nav-item.active { background: #1f2b20 !important; color: var(--mc-text) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--mc-grass-soft); }
.nav-item .e { width: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .e img { width: 20px; height: 20px; image-rendering: pixelated; }
.nav-div { background: transparent !important; height: 0 !important; margin: 4px 0 !important; }
.mc-group { font-family: var(--mc-pixel); font-size: 10px; color: #5f6d5d; padding: 12px 10px 4px; letter-spacing: .5px; }
.sidebar-user { border-top: 2px solid #232c24 !important; }
.sidebar-user img { border-radius: 2px !important; box-shadow: 0 3px 0 var(--mc-edge); }
.sidebar-user .name { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; color: var(--mc-text) !important; }
.sidebar-user .role { color: var(--mc-gold) !important; }
.sidebar-user .out { border-radius: 4px !important; border: 2px solid var(--mc-border) !important; }
.mob-bottom a .e img { width: 20px; height: 20px; image-rendering: pixelated; }
.mob-bottom a.act { color: var(--mc-grass) !important; }

/* Von mc-shell.js erzeugtes Seitenmenü auf Unterseiten */
body.mc-has-shell { padding-left: 232px; }
body.mc-has-shell .sidebar.mc-shell { width: 232px; }
body.mc-has-shell .header .nav a, body.mc-has-shell .header .nav-links a,
body.mc-has-shell .header .nav .mc-logout, body.mc-has-shell .header .nav-links .mc-logout { display: none !important; }
@media (max-width: 900px) {
  body.mc-has-shell { padding-left: 0; }
  body.mc-has-shell .sidebar.mc-shell { display: none !important; }
  body.mc-has-shell .header .nav a, body.mc-has-shell .header .nav-links a,
  body.mc-has-shell .header .nav .mc-logout, body.mc-has-shell .header .nav-links .mc-logout { display: inline-flex !important; }
}

/* Credit */
.mc-credit { font-size: 11px; color: var(--mc-text-3); padding: 10px 16px 4px; letter-spacing: .2px; }
.mc-credit b { color: var(--mc-text-2); font-weight: 600; }
.mc-credit-page { display: none; text-align: center; padding: 28px 16px 90px; }
@media (max-width: 900px) { .mc-credit-page { display: block; } }
body:not(.mc-has-shell):not(.mc-dashboard) .mc-credit-page { display: block; }

/* Chat-Seitenleiste */
.chat-sidebar { background: #131914 !important; border-left: 2px solid #232c24 !important; }
.chat-head { border-bottom: 2px solid #1d251e !important; font-family: var(--mc-pixel); font-weight: 400 !important; }
.chat-toggle-btn { border-radius: 4px !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35) !important; }
.chat-send-btn { background: var(--mc-grass) !important; color: #0d1a09 !important; border-radius: 4px !important; box-shadow: inset 0 -3px 0 var(--mc-grass-dark) !important; }

/* Grundlayout für das von mc-shell.js eingefügte Menü (Unterseiten haben kein eigenes Sidebar-CSS) */
.sidebar.mc-shell { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; padding-bottom: 8px; overflow-y: auto; }
.mc-shell .sidebar-logo { display: flex; align-items: center; gap: 12px; }
.mc-shell .sidebar-logo .ico { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mc-shell .sidebar-nav { flex: 1; display: flex; flex-direction: column; }
.mc-shell .nav-item { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; }
.mc-shell .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; }
.mc-shell .sidebar-user img { width: 32px; height: 32px; image-rendering: pixelated; }
.mc-shell .sidebar-user .info { flex: 1; min-width: 0; }
.mc-shell .sidebar-user .role { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.mc-shell .sidebar-user .out { padding: 6px 10px; background: none; color: var(--mc-text-2); font: inherit; font-size: 12px; cursor: pointer; }

/* Kennzahl-Kacheln im Dashboard */
body.mc-dashboard .stat { background: var(--mc-surface) !important; border: 2px solid var(--mc-border-soft) !important; border-radius: 6px !important; box-shadow: inset 0 -4px 0 rgba(0,0,0,.28) !important; }

/* ── Login ── */
body.mc-login::after { display: none; }
body.mc-login .stars, body.mc-login .blocks-container { display: none !important; }
body.mc-login .bg-layer {
  background: linear-gradient(180deg, rgba(10,14,20,.93) 0%, rgba(14,18,15,.86) 65%, rgba(14,18,15,.7) 100%), url('/items/deepslate_tiles.png') !important;
  background-size: auto, 64px 64px !important; image-rendering: pixelated;
}
.mc-ground { position: fixed; left: 0; right: 0; bottom: 0; height: 96px; z-index: 0; pointer-events: none;
  background: url('/items/grass_block_side.png') repeat-x top / 48px 48px, url('/items/dirt.png') repeat 0 48px / 48px 48px; image-rendering: pixelated; }
.mc-ground::after { content: ''; position: absolute; left: 0; right: 0; top: 48px; bottom: 0; background: rgba(0,0,0,.45); }
body.mc-login .main { position: relative; z-index: 1; padding-bottom: 110px; }
body.mc-login .login-card {
  background: var(--mc-surface) !important; border: 2px solid var(--mc-border) !important; border-radius: 6px !important;
  box-shadow: inset 0 -5px 0 #0f140f, 0 24px 60px rgba(0,0,0,.5) !important; backdrop-filter: none !important;
}
body.mc-login .login-card::before, body.mc-login .login-card::after { display: none !important; }
body.mc-login .logo-ring { display: none !important; }
body.mc-login .logo-inner { background: none !important; box-shadow: none !important; border: 0 !important; }
body.mc-login .logo-inner img { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 5px 0 #070907); }
body.mc-login .card-header h1 { color: var(--mc-text) !important; text-shadow: 3px 3px 0 #1f3d16 !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
body.mc-login .card-header h1 span { color: var(--mc-grass) !important; -webkit-text-fill-color: var(--mc-grass) !important; }
body.mc-login .subtitle { color: var(--mc-text-2) !important; }
body.mc-login .form-group label { color: var(--mc-text-2) !important; font-weight: 600; }
body.mc-login .btn { background: var(--mc-grass) !important; color: #0d1a09 !important; border: 0 !important; border-radius: 4px !important;
  font-family: var(--mc-pixel) !important; letter-spacing: .5px; box-shadow: inset 0 -5px 0 var(--mc-grass-dark), inset 0 2px 0 #9be07a !important; text-shadow: none !important; }
body.mc-login .mc-server-ip { border-radius: 4px !important; border: 2px solid var(--mc-border) !important; background: var(--mc-surface) !important; color: var(--mc-text) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35) !important; }
body.mc-login .modal-box { background: var(--mc-surface) !important; border: 2px solid var(--mc-border) !important; border-radius: 6px !important; }
body.mc-login .step-section { border-radius: 4px !important; }
body.mc-login .mc-credit { text-align: center; padding: 18px 0 0; }

/* Dashboard: Kennzahl-Symbole, Filter */
body.mc-dashboard .stat .ic { background: var(--mc-surface-2) !important; border-radius: 4px !important; }
body.mc-dashboard .stat .ic img { width: 22px; height: 22px; image-rendering: pixelated; }
body.mc-dashboard .stat .v { font-family: 'Outfit', sans-serif !important; font-size: 22px !important; }
.fb { border-radius: 4px !important; border: 2px solid var(--mc-border) !important; background: var(--mc-surface) !important; color: var(--mc-text-2) !important; }
.fb.on { background: var(--mc-grass) !important; border-color: var(--mc-grass) !important; color: #0d1a09 !important; font-weight: 700 !important; box-shadow: inset 0 -3px 0 var(--mc-grass-dark); }
.mob-head .logo { font-family: var(--mc-pixel); font-weight: 400 !important; font-size: 14px !important; }
.mob-head .acts button { padding: 6px 9px !important; border-radius: 4px !important; }
/* Credit unten in der Seite nur auf dem Handy bzw. auf Seiten ohne Menü */
.mc-credit-page { width: 100%; }
@media (max-width: 900px) { .sidebar .mc-credit { display: none; } }