/* Toonami Theme - CSS overrides
   Scoped under body[data-theme="toonami"] */

body[data-theme="toonami"] {
  font-family: "Rajdhani", "Noto Sans", sans-serif;
  --toonami-blue: #4d7dff;
  --toonami-blue-soft: #7fb5ff;
  --toonami-yellow: #ffd84d;
  --toonami-steel: #24345f;
}

body[data-theme="toonami"] h1,
body[data-theme="toonami"] h2,
body[data-theme="toonami"] h3,
body[data-theme="toonami"] .sidebar-header h3,
body[data-theme="toonami"] .chat-welcome h3,
body[data-theme="toonami"] .auth-logo h1,
body[data-theme="toonami"] .auth-panel h2,
body[data-theme="toonami"] .channel-category,
body[data-theme="toonami"] .members-header {
  font-family: "Orbitron", "Rajdhani", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-theme="toonami"] .app-layout {
  background:
    radial-gradient(1000px 420px at 78% 6%, rgba(77, 125, 255, 0.2), transparent 65%),
    radial-gradient(800px 320px at 10% 92%, rgba(255, 216, 77, 0.08), transparent 65%),
    linear-gradient(180deg, #060911 0%, #0b1020 45%, #070b14 100%);
}

body[data-theme="toonami"] .server-rail {
  border-right: 1px solid var(--toonami-steel);
  background:
    linear-gradient(180deg, rgba(8, 12, 22, 0.98), rgba(6, 10, 18, 0.98));
}

body[data-theme="toonami"] .channel-sidebar {
  border-right: 1px solid var(--toonami-steel);
  background:
    linear-gradient(180deg, rgba(10, 14, 26, 0.95), rgba(8, 12, 21, 0.95));
}

body[data-theme="toonami"] .members-sidebar {
  border-left: 1px solid var(--toonami-steel);
}

body[data-theme="toonami"] .chat-header,
body[data-theme="toonami"] .sidebar-header,
body[data-theme="toonami"] .members-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 28, 54, 0.92), rgba(11, 17, 31, 0.96));
  border-bottom: 1px solid rgba(127, 181, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(0, 0, 0, 0.75);
}

body[data-theme="toonami"] .chat-header::after,
body[data-theme="toonami"] .sidebar-header::after,
body[data-theme="toonami"] .members-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--toonami-blue-soft), transparent);
  opacity: 0.8;
}

body[data-theme="toonami"] .channel-category {
  color: var(--toonami-yellow);
  border-bottom: 1px solid rgba(255, 216, 77, 0.24);
  padding-bottom: 5px;
  margin-bottom: 6px;
}

body[data-theme="toonami"] .channel-item.active {
  border-left: 3px solid var(--toonami-yellow);
  background: rgba(255, 216, 77, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 77, 0.12);
}

body[data-theme="toonami"] .chat-messages,
body[data-theme="toonami"] .members-list,
body[data-theme="toonami"] .channel-list {
  background: rgba(8, 12, 22, 0.58);
}

body[data-theme="toonami"] .chat-input-form {
  border: 1px solid rgba(127, 181, 255, 0.34);
  background: rgba(5, 9, 17, 0.82);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}

body[data-theme="toonami"] .chat-input-form:focus-within {
  border-color: var(--toonami-blue-soft);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(127, 181, 255, 0.26);
}

body[data-theme="toonami"] .btn-primary {
  background: linear-gradient(180deg, #ffe371 0%, #ffd84d 52%, #d9b537 100%);
  border: 1px solid #ffe686;
  color: #111425;
  font-family: "Orbitron", "Rajdhani", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body[data-theme="toonami"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffea8d 0%, #ffe371 52%, #e1c25b 100%);
  box-shadow: 0 0 12px rgba(255, 216, 77, 0.35);
}

body[data-theme="toonami"] .btn-secondary {
  background: linear-gradient(180deg, #2c3f73 0%, #1e2c53 100%);
  border: 1px solid #4868b9;
}

body[data-theme="toonami"] .msg-avatar,
body[data-theme="toonami"] .member-avatar,
body[data-theme="toonami"] .user-avatar,
body[data-theme="toonami"] .voice-user-avatar,
body[data-theme="toonami"] .server-card-icon {
  background: linear-gradient(180deg, #2b3f72, #1c2a4d);
  border: 1px solid #4f6fbf;
  color: #eef4ff;
}

body[data-theme="toonami"] .server-icon:hover,
body[data-theme="toonami"] .server-icon.active {
  box-shadow:
    0 0 0 2px rgba(255, 216, 77, 0.2),
    0 0 14px rgba(127, 181, 255, 0.25);
}

body[data-theme="toonami"] .voice-bar,
body[data-theme="toonami"] .user-panel {
  background: linear-gradient(180deg, rgba(10, 14, 25, 0.95), rgba(7, 10, 18, 0.95));
  border-top: 1px solid rgba(127, 181, 255, 0.22);
}

body[data-theme="toonami"] .voice-dot {
  background: var(--toonami-yellow);
  box-shadow: 0 0 8px rgba(255, 216, 77, 0.65);
}

body[data-theme="toonami"] .theme-dropdown {
  border: 1px solid #324a86;
  box-shadow:
    0 0 12px rgba(127, 181, 255, 0.14),
    0 4px 16px rgba(0, 0, 0, 0.55);
}