/* ============================================================
   RoT Voice Monitor — Stylesheet
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --rot-950: #050505;
  --rot-900: #0a0a0a;
  --rot-850: #0f0f0f;
  --rot-800: #141414;
  --rot-750: #1a1a1a;
  --rot-700: #252525;
  --rot-600: #333333;
  --rot-500: #555555;
  --rot-400: #888888;
  --rot-300: #aaaaaa;
  --rot-200: #cccccc;
  --rot-100: #e5e5e5;

  --rot-crimson:      #8B0000;
  --rot-crimson-light:#a01010;
  --rot-crimson-dark: #6b0000;
  --rot-crimson-glow: rgba(139, 0, 0, 0.15);

  --rot-green:  #57F287;
  --rot-yellow: #FEE75C;
  --rot-red:    #ED4245;

  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html.grey-mode {
  --rot-950: #121218; --rot-900: #1a1a22; --rot-850: #22222b;
  --rot-800: #2a2a34; --rot-750: #32323d; --rot-700: #3d3d49;
  --rot-600: #4f4f5c; --rot-500: #6b6b78; --rot-400: #9090a0;
  --rot-300: #b0b0be; --rot-200: #d0d0da; --rot-100: #ebebf0;
  --rot-crimson: #9a1515; --rot-crimson-light: #b42020; --rot-crimson-dark: #7a0a0a;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--rot-900);
  color: var(--rot-300);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.page-main { padding-top: 1.5rem; padding-bottom: 3rem; }

/* ---------- Navbar ---------- */
.navbar {
  background: var(--rot-950);
  border-bottom: 1px solid rgba(139,0,0,0.30);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand { height: 28px; display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 28px; width: auto; }
.nav-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--rot-400);
  border-left: 1px solid var(--rot-700);
  padding-left: 1rem;
  flex: 1;
}
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

/* ---------- Buttons ---------- */
.btn-ghost {
  background: transparent;
  color: var(--rot-300);
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.875rem;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-ghost:hover { background: var(--rot-700); color: var(--rot-100); }
.btn-icon { padding: 0.35rem 0.5rem; font-size: 14px; line-height: 1; }

.btn-view-members {
  background: transparent;
  border: 1px solid var(--rot-700);
  color: var(--rot-400);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn-view-members:hover {
  border-color: var(--rot-crimson);
  color: var(--rot-crimson-light);
  background: var(--rot-crimson-glow);
}
.btn-view-members:disabled { cursor: default; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  background: var(--rot-900);
  border: 1px solid var(--rot-700);
  color: var(--rot-400);
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-green   { border-color: var(--rot-green);   color: var(--rot-green);         background: rgba(87,242,135,0.07); }
.badge-crimson { border-color: var(--rot-crimson);  color: var(--rot-crimson-light); background: var(--rot-crimson-glow); }

/* ---------- Refresh bar ---------- */
.refresh-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 12px;
  color: var(--rot-500);
}
.refresh-bar button {
  background: none;
  border: 1px solid var(--rot-700);
  color: var(--rot-400);
  border-radius: 6px;
  padding: 0.25rem 0.625rem;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.refresh-bar button:hover { border-color: var(--rot-crimson); color: var(--rot-crimson-light); }

/* ---------- Live pulse ---------- */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rot-green);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.8); }
}

/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding:4rem 1rem; color:var(--rot-500); }
.empty-state h3 { font-size:16px; color:var(--rot-400); margin-bottom:0.5rem; }
.empty-state p  { font-size:13px; }

/* ---------- Server Grid ---------- */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.875rem;
  align-items: start;
}

/* ---------- Server Card ---------- */
.server-card {
  background: var(--rot-800);
  border: 1px solid var(--rot-700);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.server-card:hover {
  border-color: rgba(139,0,0,0.4);
  box-shadow: 0 4px 20px var(--rot-crimson-glow);
}

.server-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  background: var(--rot-850);
  border-bottom: 1px solid var(--rot-700);
}
.server-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rot-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Channel Rows ---------- */
.server-card-channels { display: flex; flex-direction: column; }

.channel-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.875rem;
  border-bottom: 1px solid var(--rot-700);
  transition: background 0.15s;
}
.channel-row:last-child { border-bottom: none; }
.channel-row:hover { background: var(--rot-750); }

.channel-row-name {
  flex: 0 0 auto;
  width: 90px;
}
.channel-row-label {
  font-size: 11px;
  color: var(--rot-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.channel-avatars {
  flex: 1;
  display: flex;
  align-items: center;
}

.channel-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.channel-row-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--rot-600);
  min-width: 18px;
  text-align: right;
  line-height: 1;
}
.channel-row-count.has-users { color: var(--rot-crimson-light); }

/* ---------- Avatars ---------- */
.avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--rot-700);
  border: 1.5px solid var(--rot-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
  color: var(--rot-200);
  margin-left: -5px;
  position: relative; z-index: 1;
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar:first-child { margin-left: 0; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-overflow { background:var(--rot-700); color:var(--rot-400); font-size:8px; }

/* ---------- Modal ---------- */
.modal {
  background: var(--rot-800);
  border: 1px solid var(--rot-700);
  border-radius: 10px;
  padding: 0;
  max-width: 440px;
  width: calc(100% - 2rem);
  color: var(--rot-300);
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.modal[open]     { display: block; }
.modal:not([open]) { display: none; }
.modal::backdrop { display: none; }

.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem 1rem 0.875rem;
  border-bottom: 1px solid var(--rot-700);
}
.modal-title    { font-size: 16px; font-weight: 600; color: var(--rot-100); }
.modal-subtitle { font-size: 12px; color: var(--rot-400); margin-top: 2px; }
.modal-body     { padding: 1rem; }

/* ---------- Members list ---------- */
.members-list { display:flex; flex-direction:column; gap:0.5rem; max-height:360px; overflow-y:auto; }

.member-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
  background: var(--rot-850);
  border: 1px solid var(--rot-700);
  transition: background 0.15s;
}
.member-row:hover { background: var(--rot-750); }

.member-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--rot-700); border:1.5px solid var(--rot-600);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--rot-200);
  text-transform:uppercase; flex-shrink:0; overflow:hidden;
}
.member-avatar img { width:100%; height:100%; object-fit:cover; }

.member-info  { flex:1; min-width:0; }
.member-name  { font-size:13px; font-weight:500; color:var(--rot-100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-badges { display:flex; gap:0.375rem; }
.member-badge {
  font-size:10px; padding:0.15rem 0.45rem;
  border-radius:9999px; font-weight:500;
}
.member-badge.muted     { background:rgba(237,66,69,0.12);  border:1px solid rgba(237,66,69,0.3);  color:var(--rot-red); }
.member-badge.deafened  { background:rgba(88,101,242,0.12); border:1px solid rgba(88,101,242,0.3); color:#8a95f5; }
.member-badge.streaming { background:rgba(87,242,135,0.10); border:1px solid rgba(87,242,135,0.3); color:var(--rot-green); }

/* ---------- Inputs ---------- */
.input {
  width:100%; background:var(--rot-950); border:1px solid var(--rot-700);
  border-radius:6px; padding:0.5rem 0.75rem; font-size:13px;
  font-family:var(--font); color:var(--rot-200); outline:none;
  transition:border-color 0.15s;
}
.input::placeholder { color:var(--rot-500); }
.input:focus { border-color:var(--rot-crimson); box-shadow:0 0 0 2px var(--rot-crimson-glow); }
.form-group   { margin-bottom:1rem; }
.form-label   { display:block; font-size:12px; font-weight:500; color:var(--rot-300); margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.04em; }
.form-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1.25rem; }

/* ---------- Backdrop ---------- */
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:99; }
.backdrop.hidden { display:none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--rot-900); }
::-webkit-scrollbar-thumb { background:var(--rot-700); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--rot-600); }

/* ---------- Active badge ---------- */
.channel-row-active {
  font-size: 11px;
  font-weight: 500;
  color: var(--rot-green);
  background: rgba(87,242,135,0.08);
  border: 1px solid rgba(87,242,135,0.25);
  border-radius: 9999px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

/* ---------- Server card badges ---------- */
.server-card-badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* ---------- Login Screen ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rot-900);
}

.login-card {
  background: var(--rot-800);
  border: 1px solid var(--rot-700);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.login-logo {
  height: 36px;
  width: auto;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  font-size: 13px;
  color: var(--rot-400);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #5865F2;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.65rem 1.25rem;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  transition: background 0.15s, transform 0.1s;
  width: 100%;
  justify-content: center;
}
.btn-discord:hover  { background: #4752c4; }
.btn-discord:active { transform: scale(0.98); }

.login-note {
  font-size: 11px;
  color: var(--rot-500);
  margin-top: 1rem;
}

/* ---------- Nav avatar ---------- */
.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--rot-600);
  display: block;
}

/* ---------- Hidden utility ---------- */
.hidden { display: none !important; }

/* ---------- Server card badges ---------- */
.server-card-badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* ---------- Active badge ---------- */
.channel-row-active {
  font-size: 11px;
  font-weight: 500;
  color: var(--rot-green);
  background: rgba(87,242,135,0.08);
  border: 1px solid rgba(87,242,135,0.25);
  border-radius: 9999px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

/* ---------- Server card avatar ---------- */
.server-card-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}

.server-card-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--rot-600);
}

/* ---------- Filter toggle ---------- */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  color: var(--rot-400);
  cursor: pointer;
  user-select: none;
  margin-left: 0.5rem;
}
.filter-toggle:hover { color: var(--rot-200); }
.filter-toggle input[type="checkbox"] {
  accent-color: var(--rot-crimson);
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* ---------- Channel status ---------- */
.channel-row-status {
  display: block;
  font-size: 10px;
  color: var(--rot-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  margin-top: 1px;
}

/* ---------- Modal status ---------- */
.modal-status {
  font-size: 11px;
  color: var(--rot-500);
  margin-top: 2px;
}

/* ---------- Inline status emoji ---------- */
.status-emoji {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin: 0 1px;
  display: inline-block;
}