/* ===============================
   GLOBAL
================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000;
  color: #ff2a2a;
  font-family: monospace;
  line-height: 1.4;
}

a {
  color: #ff2a2a;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: 0 0 10px 0;
  font-weight: normal;
  text-shadow: 0 0 10px rgba(255,42,42,0.4);
}

/* CHANGELOG */

.alert b {
  font-size: 15px;
}

.alert small {
  color: #777;
  font-size: 11px;
}

/* =========================
   LAYOUT GRID
========================= */

.layout-grid {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* SIDEBARS */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* MAIN CONTENT */

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .layout-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    order: 2;
  }
}


/* ===============================
   EVA STATES
================================ */

.eva-ok {
  border-color: #00ff99;
  color: #00ff99;
  box-shadow: 0 0 20px rgba(0,255,150,0.3);
}

.eva-alert {
  border-color: #ff2a2a;
  color: #ff2a2a;
  box-shadow: 0 0 20px rgba(255,42,42,0.4);
}

.eva-warn {
  border-color: #ffaa00;
  color: #ffaa00;
  box-shadow: 0 0 20px rgba(255,170,0,0.4);
}

/* ===============================
   ROLES (BLACK/RED STYLE)
================================ */

.role-USER { color: #999; }
.role-OBSERVER { color: #ff6666; }
.role-OPERATOR { color: #ff4444; }
.role-OFFICER { color: #ffaa00; }
.role-MAYOR { color: #ff2222; }
.role-COMMANDER { color: #ff00ff; }

.mention {
  color: #ff00ff;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(255,0,255,0.5);
}

/* =========================
   DISCORD STYLE GLOBAL CHAT
========================= */

.chat-box {
  max-height: 500px;
  overflow-y: auto;
  padding: 15px;
  background: #0b0b0b;
  border: 1px solid #ff2a2a;
}

/* einzelne Nachricht */
.chat-message {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.command-box {
  background: #0b0b0b;
  border: 1px solid #ff2a2a;
  padding: 8px;
  margin-top: 5px;
  font-size: 13px;
  box-shadow: 0 0 15px rgba(255,42,42,0.3);
}

/* Avatar links */
.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ff2a2a;
  object-fit: cover;
}

/* rechter Block */
.chat-content {
  background: #111;
  padding: 8px 12px;
  border-radius: 6px;
  width: 100%;
  box-shadow: 0 0 10px rgba(255,42,42,0.1);
}

/* Username + Zeit */
.chat-header {
  display: flex;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 4px;
}

.chat-username {
  font-weight: bold;
}

.chat-time {
  color: #666;
  font-size: 11px;
}

/* Text */
.chat-text {
  color: #eee;
  font-size: 14px;
  line-height: 1.4;
}

/* Input Bar */
.chat-input-bar {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.chat-input-bar input {
  flex: 1;
  background: #000;
  border: 1px solid #ff2a2a;
  color: #fff;
  padding: 10px;
}

.chat-input-bar button {
  background: #ff2a2a;
  color: #000;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
}

/* Hover wie Discord */
.chat-message:hover .chat-content {
  background: #161616;
}


/* ===============================
   LOGIN
================================ */

.login-box {
  width: 300px;
  margin: 120px auto;
  padding: 20px;
  border: 1px solid #ff2a2a;
  background: #050505;
  text-align: center;
  box-shadow: 0 0 25px rgba(255,42,42,0.3);
}

.login-box h1 {
  margin-bottom: 20px;
  font-size: 20px;
}

.login-box input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  background: #000;
  border: 1px solid #ff2a2a;
  color: #ff2a2a;
  outline: none;
}

.login-box button {
  width: 100%;
  padding: 8px;
  background: #ff2a2a;
  color: #000;
  border: none;
  cursor: pointer;
}

.login-box button:hover {
  background: #ff5555;
}

/* =========================
   PANELS
========================= */

.panel {
  background: rgba(10,10,10,0.9);
  border: 1px solid #ff2a2a;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 0 20px rgba(255,42,42,0.2);
}

/* =========================
   BUTTONS
========================= */

.button, button {
  display: inline-block;
  background: linear-gradient(135deg,#ff2a2a,#aa0000);
  border: none;
  color: #000;
  padding: 8px 14px;
  font-weight: bold;
  cursor: pointer;
  margin: 4px;
}

.button:hover, button:hover {
  filter: brightness(1.2);
}

/* =========================
   ALERT / MESSAGE
========================= */

.alert {
  background: rgba(0,0,0,0.7);
  border-left: 4px solid #ff2a2a;
  padding: 8px;
  margin-bottom: 6px;
}

/* =========================
   FORMS
========================= */

input, textarea, select {
  width: 100%;
  background: #000;
  border: 1px solid #ff2a2a;
  color: #ff2a2a;
  padding: 8px;
  margin-bottom: 8px;
}

/* =========================
   PROFILE
========================= */

.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #ff2a2a;
  object-fit: cover;
}

/* =========================
   FRIENDS
========================= */

.friend {
  display: flex;
  justify-content: space-between;
  padding: 6px;
  border-bottom: 1px solid #ff2a2a55;
}

/* =========================
   CHAT
========================= */

.chat-box {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.msg-me {
  text-align: right;
  color: #ff6666;
}

.msg-other {
  text-align: left;
  color: #ff2a2a;
}

/* =========================
   ONLINE STATUS
========================= */

.online {
  color: #00ff66;
}

.offline {
  color: #666;
}

/* =========================
   TICKETS
========================= */

.ticket-open { color: #ff2222; }
.ticket-progress { color: #ffaa00; }
.ticket-closed { color: #00ff66; }

/* =========================
   EVA GLOW
========================= */

.eva-glow {
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 5px #ff2a2a; }
  to { text-shadow: 0 0 25px #ff2a2a; }
}

.eva-footer {
  margin-top: 60px;
  opacity: 0.5;
  font-size: 11px;
  text-align: center;   /* DAS ist der wichtige Teil */
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 720px) {
  .login-box {
    width: 90%;
  }
}