/* ===============================
   style.css — COD Chat & Calendar
   =============================== */

/* ---- Reset & Box Sizing ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.hidden { display: none !important; }

/* ---- Theme Colors ---- */
:root {
  --bg:     #0d0f14;
  --fg:     #ffffff;
  --accent: #ffcc00;
  --info:   #4ecca3;
  --error:  #e84545;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
  height: 100vh;
  overflow: hidden;
}

/* ---- HUD (Header) ---- */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: rgba(13,15,20,0.9);
  border-bottom: 1px solid #333;
}
.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#time-display {
  font-family: monospace;
  font-size: 0.9rem;
}
.hud button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}
.hud button:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ---- Main Layout (Chat) ---- */
.main-container {
  display: flex;
  height: calc(100vh - 50px);
}
.sidebar {
  width: 240px;
  background: rgba(13,15,20,0.9);
  padding: 1rem;
  overflow-y: auto;
}
.sidebar h3 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.sidebar ul {
  list-style: none;
  margin-bottom: 1rem;
}
.sidebar li {
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.sidebar li:hover {
  background: #222;
}
.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.chat-window h3 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}
#messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding-right: 0.5rem;
}
#message-form {
  display: flex;
  gap: 0.5rem;
}
#message-form input[type="text"] {
  flex: 1;
  padding: 0.6rem;
  background: #262a33;
  border: none;
  color: #fff;
  border-radius: 4px 0 0 4px;
}
#message-form button {
  padding: 0.6rem 1rem;
  border: none;
  background: var(--info);
  color: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
#message-form button:hover {
  background: var(--accent);
}

/* ---- Calendar Page ---- */
.calendar-container {
  height: calc(100vh - 50px);
  padding: 1rem;
}
#calendar {
  width: 100%;
  /* Allow control via FullCalendar height settings */
}


/* ---- Event Modal ---- */
#event-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(26,28,35,0.95);
  padding: 1rem;
  border-radius: 8px;
  z-index: 2000;
  width: 300px;
}
.event-form input, .event-form button {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #262a33;
  border: none;
  color: #fff;
  border-radius: 4px;
}
.event-form-buttons {
  display: flex;
  gap: 0.5rem;
}

/* ---- Login Page ---- */
.login-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#login-form {
  background: rgba(26,28,35,0.95);
  padding: 2rem;
  border-radius: 8px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#login-form h2 {
  text-align: center;
  color: var(--accent);
}
#login-form input,
#login-form button {
  padding: 0.6rem;
  border: none;
  border-radius: 4px;
  background: #262a33;
  color: #fff;
  font-size: 1rem;
}
#login-form input:focus {
  outline: 2px solid var(--info);
}
#login-form button {
  background: var(--accent);
  color: var(--bg);
  font-weight: bold;
  cursor: pointer;
}
#login-form button:hover {
  background: var(--info);
}
.error {
  color: var(--error);
  font-size: 0.9rem;
  min-height: 1.2em;
}

/* ---- Overlay & Spinner ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,15,20,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1000;
}
.spinner {
  border: 8px solid #333;
  border-top: 8px solid var(--accent);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 3s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Glitch Effect ---- */
.glitch {
  position: relative;
  font-size: 2rem;
  text-transform: uppercase;
  margin-top: 1rem;
  opacity: 0;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%;
}
.glitch::before {
  left: 2px; text-shadow: -2px 0 var(--error);
  animation: glitch1 1s infinite;
}
.glitch::after {
  left: -2px; text-shadow: -2px 0 var(--info);
  animation: glitch2 1s infinite;
}
@keyframes glitch1 { 0%,100%{clip-path:inset(0 0 85% 0)}50%{clip-path:inset(30% 0 50% 0)} }
@keyframes glitch2 { 0%,100%{clip-path:inset(50% 0 35% 0)}50%{clip-path:inset(10% 0 80% 0)} }