/* Глассморфизм, сине-голубая палитра (синий + бирюзовый/циан, в духе
   Stripe/Linear) на тёмном фоне, боковой сайдбар. Component-level CSS
   рядом с Tailwind-утилитами в разметке — Tailwind CDN не обрабатывает
   @apply в связанных файлах, поэтому тут обычный CSS с переменными,
   отражающими tailwind.config в views/partials/head.ejs. */

:root {
  --bg-void: #0a0a12;
  --bg-glow-blue: #2563eb;
  --bg-glow-cyan: #22d3ee;

  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-hover: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-border-hover: rgba(34, 211, 238, 0.45);

  --accent: #2563eb;
  --accent-bright: #3b82f6;
  --accent-dim: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.16);

  --cyan: #22d3ee;
  --cyan-bright: #67e8f9;
  --cyan-soft: rgba(34, 211, 238, 0.14);

  --text-primary: #f5f5f6;
  --text-muted: #a3a0ad;
  --text-faint: #656274;

  --success: #22c55e;
  --success-bright: #4ade80;
  --danger: #f43f5e;
  --warning: #eab308;

  --sidebar-w: 240px;
}

html, body { background: var(--bg-void); }
body { font-size: 14px; font-weight: 400; }

::selection { background: rgba(37, 99, 235, 0.4); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* числа/ID не должны "прыгать" по ширине в колонках */
code, .tabular, td.muted, .stat-num { font-variant-numeric: tabular-nums; }

/* ---- фоновое свечение: 3 больших размытых пятна на двух оттенках —
   синий и бирюзовый, перетекающих друг в друга по краям экрана — сквозь
   них и играет блюр стеклянных карточек ---- */
.bg-blobs { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 9999px; filter: blur(130px); will-change: transform; }
.blob-1 {
  width: 680px; height: 680px; top: -220px; left: -160px; opacity: 0.30;
  background: radial-gradient(circle at 30% 30%, var(--bg-glow-blue), transparent 70%);
}
.blob-2 {
  width: 620px; height: 620px; bottom: -200px; right: -180px; opacity: 0.26;
  background: radial-gradient(circle at 60% 40%, var(--bg-glow-cyan), transparent 70%);
}
.blob-3 {
  width: 520px; height: 520px; top: 40%; left: 46%; opacity: 0.20;
  background: radial-gradient(circle at 50% 50%, var(--bg-glow-blue), transparent 70%);
}

/* ---- сайдбар ---- */
.sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
.sidebar.sidebar-open { transform: translateX(0); }
@media (min-width: 1024px) {
  .sidebar { transform: translateX(0); }
}
.sidebar-item .sidebar-icon { flex-shrink: 0; }
.sidebar-item:hover { background: rgba(255, 255, 255, 0.04); }
.sidebar-active-bar {
  background: var(--accent);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-item.active .sidebar-active-bar { opacity: 1; transform: scaleY(1); }

.content-area {
  max-width: 1100px;
  padding: 32px 28px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .content-area { margin-left: var(--sidebar-w); margin-right: 0; max-width: 1100px; }
}

/* ---- типографика ---- */
h1 { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 600; color: #fff; }
h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 4px; }
label { display: block; margin: 12px 0 5px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.01em; }
.muted { color: var(--text-muted); font-size: 13px; }

/* ---- стеклянные карточки ---- */
.card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.hover-card:hover {
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
}

input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 180px; }

/* ---- кастомный комбобокс (замена нативного <select> для длинных списков: каналы/роли) ---- */
.combo { position: relative; }
.combo-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.combo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03); color: var(--text-primary); font-size: 14px;
  font-weight: 400; text-align: left; cursor: pointer; box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.combo-btn::after {
  content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-top: -3px;
  border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.combo-btn.open::after { transform: rotate(-135deg); margin-top: 3px; }
.combo-btn:hover { border-color: var(--glass-border-hover); }
.combo-btn.open { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.combo-btn.combo-placeholder { color: var(--text-muted); }
.combo-btn.combo-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.16); }

.combo-panel {
  position: fixed; z-index: 1000;
  background: rgba(16, 15, 24, 0.94); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.combo-search {
  width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04); color: var(--text-primary); font-size: 13.5px; margin-bottom: 6px;
}
.combo-search:focus { outline: none; border-color: var(--accent); }
.combo-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.combo-option {
  padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-primary);
  cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease;
}
.combo-option:hover, .combo-option:focus { background: rgba(255, 255, 255, 0.06); outline: none; }
.combo-option.active { background: var(--accent-soft); color: var(--accent-bright); font-weight: 600; }
.combo-empty { padding: 10px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* ---- кнопки ---- */
button, .btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff; font-weight: 600; cursor: pointer; font-size: 14px;
  text-decoration: none; box-shadow: 0 4px 20px rgba(37, 99, 235, 0.28);
  transition: box-shadow 0.2s ease;
}
button:hover, .btn:hover { box-shadow: 0 6px 26px rgba(37, 99, 235, 0.45); }

button.danger, .btn.danger {
  background: transparent; border: 1px solid var(--danger); color: var(--danger); box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
button.danger:hover, .btn.danger:hover { background: var(--danger); color: #fff; }

button.secondary, .btn.secondary {
  background: transparent; border: 1px solid var(--glass-border); color: var(--text-muted); box-shadow: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
button.secondary:hover, .btn.secondary:hover { border-color: var(--accent); color: var(--text-primary); }

button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; background: var(--accent-dim); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: transparent; color: var(--text-muted);
  font-weight: 600; cursor: pointer; font-size: 13px; transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--text-primary); }

/* ---- кастомный toggle-switch ---- */
.toggle-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle-track {
  position: absolute; inset: 0; border-radius: 999px; background: var(--glass-bg);
  border: 1px solid var(--glass-border); transition: background-color 0.25s ease, border-color 0.25s ease;
}
.toggle-switch input:checked ~ .toggle-track {
  background: var(--success); border-color: var(--success);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.45);
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 10px 12px; font-size: 13.5px; border-bottom: none; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr { transition: background-color 0.2s ease; border-radius: 8px; }
tbody tr:hover { background: rgba(255, 255, 255, 0.045); }

/* ---- статус-пилюли: точка + текст, фон в цвет статуса; активные/успешные — с живым свечением ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; margin-left: 6px;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.pill-pending, .pill-warning { background: rgba(234, 179, 8, 0.14); color: #fde047; }
.pill-pending::before, .pill-warning::before { background: var(--warning); }
.pill-sent, .pill-success {
  background: rgba(34, 197, 94, 0.16); color: #86efac;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}
.pill-sent::before, .pill-success::before { background: var(--success-bright); box-shadow: 0 0 6px var(--success-bright); }
.pill-failed, .pill-danger { background: rgba(244, 63, 94, 0.14); color: #fda4af; }
.pill-failed::before, .pill-danger::before { background: var(--danger); }

.banner-ok {
  background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #86efac;
  padding: 11px 15px; border-radius: 12px; margin-bottom: 16px; font-size: 14px;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.12);
}
.banner-err {
  background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.35); color: #fda4af;
  padding: 11px 15px; border-radius: 12px; margin-bottom: 16px; font-size: 14px;
}
.login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh; }
.error { color: var(--danger); margin-top: 8px; font-size: 13.5px; }
a.plain { color: var(--accent-bright); text-decoration: none; transition: color 0.15s ease; }
a.plain:hover { color: var(--accent); text-decoration: underline; }

.stat-tile {
  background: var(--glass-bg); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 16px 18px; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.stat-num { font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1.1; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success-bright) !important; }
.text-warning { color: var(--warning) !important; }

code {
  background: rgba(255, 255, 255, 0.07); padding: 1px 6px; border-radius: 6px; font-size: 12.5px;
  color: var(--cyan-bright);
}

/* ---- резолвленные <@ID>-упоминания в логах ---- */
.mention { color: var(--accent-bright); font-weight: 600; }
.mention-unknown { color: var(--text-faint); font-weight: 500; font-style: italic; }

.collapse-caret { transition: transform 0.25s ease; display: inline-block; }
.rotate-open .collapse-caret { transform: rotate(90deg); }

/* ---- карточки фракций на дашборде ---- */
.faction-card { padding-right: 52px; }
.faction-card-link { display: block; text-decoration: none; color: inherit; }

.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.activity-active { background: var(--success-bright); box-shadow: 0 0 8px var(--success-bright); }
.activity-quiet { background: var(--warning); box-shadow: 0 0 6px rgba(234, 179, 8, 0.5); }
.activity-quiet-long { background: var(--text-faint); }

.pending-badge {
  position: absolute; top: 16px; right: 16px; outline: none; cursor: default;
}
.pending-badge-count {
  display: flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-border);
  color: var(--text-muted); font-size: 12.5px; font-weight: 700;
}
.pending-badge-count-active {
  background: rgba(234, 179, 8, 0.16); border-color: rgba(234, 179, 8, 0.4); color: #fde047;
}
.pending-breakdown {
  display: none; position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: rgba(16, 15, 24, 0.94); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.pending-badge:hover .pending-breakdown, .pending-badge:focus .pending-breakdown, .pending-badge:focus-within .pending-breakdown {
  display: block;
}

/* ---- полоска здоровья бота/БД + топ активности ---- */
.health-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 14px 18px; }
.health-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }

/* ---- фильтры над лентой событий ---- */
.feed-filters { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding: 16px 18px; }
.feed-filter-group { display: flex; flex-direction: column; gap: 6px; }
.feed-filter-group label { margin: 0; }
.feed-filter-group select { min-width: 200px; }
.filter-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--glass-border); background: transparent;
  color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.filter-chip:hover { color: var(--text-primary); }
.filter-chip-application.active { border-color: var(--success); color: #86efac; background: rgba(34, 197, 94, 0.12); }
.filter-chip-antinuke.active { border-color: var(--danger); color: #fda4af; background: rgba(244, 63, 94, 0.12); }
.filter-chip-roster.active { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-soft); }

/* ---- лента событий: крупные карточки, во всю ширину, друг под другом ---- */
.feed-cards { display: flex; flex-direction: column; gap: 10px; }
.feed-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: var(--glass-bg); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-border); border-left: 4px solid transparent;
  text-decoration: none; color: inherit; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.feed-card:hover { background: var(--glass-bg-hover); }
.feed-card-application { border-left-color: var(--success); }
.feed-card-antinuke { border-left-color: var(--danger); }
.feed-card-roster { border-left-color: var(--accent); }
.feed-card-icon {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  flex-shrink: 0; color: #fff;
}
.feed-card-icon-application { background: var(--success); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3); }
.feed-card-icon-antinuke { background: var(--danger); box-shadow: 0 4px 16px rgba(244, 63, 94, 0.3); }
.feed-card-icon-roster { background: var(--accent); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3); }
.feed-card-body { min-width: 0; flex: 1; padding-top: 2px; }
.feed-card-title { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 4px; }
.feed-card-meta { font-size: 13px; }
.feed-card-chip { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 11.5px; color: var(--text-muted); }

/* ---- перетаскивание порядка фракций (SortableJS) ---- */
.drag-handle { cursor: grab; color: var(--text-faint); transition: color 0.15s ease; }
.drag-handle:hover { color: var(--text-muted); }
#factions-list tr.sortable-ghost { opacity: 0.35; }
#factions-list tr.sortable-chosen { background: rgba(255, 255, 255, 0.04); }