/* =============================================================================
   ТЕМА CTFd «school» — стиль «Cyber Terminal» (8-я Летняя школа по ИБ, МЭИ).
   -----------------------------------------------------------------------------
   Цель: CTFd должен выглядеть единым продуктом с публичным сайтом —
   зелёный неон на чёрном, ТОЛЬКО JetBrains Mono, острые углы 0px, фосфорное
   свечение, терминальная брутал-эстетика.

   КАК ЭТО РАБОТАЕТ
   - tokens.css и components.css — синхронные КОПИИ общего слоя shared/, их
     кладёт сюда scripts/sync-design.sh. НЕ редактируйте их здесь — правьте
     shared/ и пересинхронизируйте. Здесь мы используем только их переменные.
   - Ниже переопределяем переменные и ключевые элементы CTFd (core-beta /
     bootstrap 5), чтобы цвета/шрифты/радиусы совпадали с сайтом.
   - !important применяется точечно — чтобы перебить дефолтные стили core-beta.
   - Острые углы (border-radius:0) — ВЕЗДЕ.
   ============================================================================= */

/* 1) Подтягиваем ТОКЕНЫ единого слоя (синхронная копия из shared/) ---------- */
/* ВАЖНО: components.css в тему CTFd НЕ импортируем — его дженерик-классы
   (.btn/.card/.container/.footer) конфликтуют с bootstrap core-beta.
   Здесь нужны только переменные-токены + точечные оверрайды bootstrap ниже. */
@import url("./tokens.css");

/* 2) Маппинг наших токенов на переменные CTFd (core-beta / bootstrap 5) ----- */
:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  /* фон и поверхности */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-bg: var(--color-surface);
  --bs-border-color: var(--color-border);

  /* бренд */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 61, 220, 132; /* #3ddc84 — для bootstrap rgba-утилит */
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: #ffffff;

  /* шрифты — единственный шрифт проекта */
  --bs-body-font-family: var(--font-mono);
  --bs-font-monospace: var(--font-mono);

  /* радиусы — острые углы везде */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
}

/* 3) Базовый фон / типографика --------------------------------------------- */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text);
  font-family: var(--font-mono) !important;
  letter-spacing: -0.02em;
}

/* Заголовки и бренд — UPPERCASE моноширинные, разрядка, жирные */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* Код / моноширинное (флаги, очки, теги) — тоже JetBrains Mono */
code, pre, kbd, samp,
.font-monospace,
.submission-input {
  font-family: var(--font-mono) !important;
}

/* Фосфорное свечение для бренда */
.navbar-brand,
h1.pc-glow, .pc-glow {
  text-shadow: var(--text-glow);
}

/* 4) Навбар — fixed-стиль, blur, полупрозрачный тёмный фон ------------------ */
.navbar {
  background: rgba(9, 13, 9, 0.7) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}
.navbar .navbar-brand {
  color: var(--color-primary) !important;
}
.navbar .nav-link {
  color: var(--color-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--color-text) !important;
  text-shadow: var(--text-glow);
}
/* Примечание: ссылки «Программа»/«Расписание» ведут на публичный сайт —
   они добавляются в шаблоне навбара темы, не здесь. */

/* 5) Кнопки CTFd → терминальные ghost/fill --------------------------------- */
/* .btn-primary — рамка primary поверх прозрачного фона; hover → заливка + glow */
.btn-primary {
  background: transparent !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--text-on-primary) !important; /* #000 */
  box-shadow: var(--shadow-glow) !important;
}

/* Вторичные / outline — ghost (приглушённая рамка) */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0 !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* 6) Карточки / задачи / модалки ------------------------------------------- */
.card,
.challenge-button,
.modal-content {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-text);
}
.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background-color: transparent !important;
  border-color: var(--color-border) !important;
  border-radius: 0 !important;
}

/* hover задачи → усиленная рамка + фосфорное свечение */
.challenge-button:hover,
.card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Категория задачи отображается в шаблоне как "[ WEB ]" — текст из шаблона,
   здесь только моноширинный стиль/разрядка для подписи категории. */
.challenge-button .category,
.challenge-category {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Состояние «решено» — зелёная рамка/акцент + галочка */
.challenge-button.solved-challenge,
.challenge-button.solved,
.solved .challenge-button,
.card.solved {
  border-color: var(--color-solved) !important;
  box-shadow: var(--shadow-glow) !important;
}
.challenge-button.solved-challenge .challenge-name::after,
.challenge-button.solved .challenge-name::after {
  content: " ✓";
  color: var(--color-solved);
}
.solved-challenge .corner-button-check,
.solved .corner-button-check {
  color: var(--color-solved) !important;
}

/* Состояние «заблокировано» — приглушение + замок */
.challenge-button.locked-challenge,
.challenge-button.locked,
.card.locked {
  opacity: 0.5;
  border-color: var(--color-locked) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.challenge-button.locked-challenge .challenge-name::before,
.challenge-button.locked .challenge-name::before {
  content: "🔒 ";
}

/* 7) Поля ввода / поле флага ----------------------------------------------- */
/* Обычные поля (логин/регистрация/настройки) — тёмная поверхность + рамка */
.form-control,
.form-select,
input.form-control,
textarea.form-control {
  background-color: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
}
.form-control::placeholder { color: var(--color-text-muted) !important; }
.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-glow) !important;
  background-color: transparent !important;
  color: var(--color-text) !important;
}

/* Поле ВВОДА ФЛАГА — подчёркнутая терминальная строка (без рамки-короба).
   Статичный префикс "MPEI{" добавляется в шаблоне отправки флага. */
input[name="answer"],
.submission-input,
#challenge-input,
.challenge-submit input[type="text"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--color-primary) !important;
  border-radius: 0 !important;
  color: var(--color-primary) !important;
  font-family: var(--font-mono) !important;
  text-shadow: var(--text-glow);
}
input[name="answer"]:focus,
.submission-input:focus,
#challenge-input:focus,
.challenge-submit input[type="text"]:focus {
  border-bottom-color: var(--color-primary) !important;
  box-shadow: 0 2px 0 0 var(--color-primary-dim), var(--text-glow) !important;
  background: transparent !important;
  outline: none !important;
}

/* 8) Таблицы (scoreboard) --------------------------------------------------- */
.table {
  color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  border-color: var(--color-border);
}
/* Убираем вертикальные границы; горизонтальные — пунктир */
.table > :not(caption) > * > * {
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px dotted var(--color-border) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Заголовок — моноширинный uppercase muted, без фона */
.table thead th,
.table > thead > tr > th {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-text-muted) !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
}
/* Зебра — чередование лёгкой прозрачности */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table tbody tr:nth-of-type(odd) > * {
  background-color: var(--color-primary-dim) !important;
}
.table tbody tr:nth-of-type(odd) > * {
  background-color: rgba(61, 220, 132, 0.04) !important;
}
.table tbody tr:hover > * {
  background-color: var(--color-surface-bright) !important;
}
/* Строка текущего пользователя — рамка вокруг всей строки */
.table tbody tr.current-user,
.table tbody tr.you,
.table tbody tr.active {
  outline: 1px solid var(--color-border-strong);
  outline-offset: -1px;
}
.table tbody tr.current-user > *,
.table tbody tr.you > *,
.table tbody tr.active > * {
  color: var(--color-primary) !important;
  text-shadow: var(--text-glow);
}

/* 9) Прочие оверрайды для целостности темы --------------------------------- */
.alert {
  border-radius: 0 !important;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
}
.alert-danger  { border-color: var(--color-error);   color: var(--color-error); }
.alert-warning { border-color: var(--color-warning); color: var(--color-warning); }
.alert-success { border-color: var(--color-success); color: var(--color-success); }

.badge {
  border-radius: 0 !important;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.progress,
.progress-bar {
  border-radius: 0 !important;
}
.progress { background-color: var(--color-surface-bright) !important; }
.progress-bar { background-color: var(--color-primary) !important; color: var(--text-on-primary) !important; }

.dropdown-menu {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}
.dropdown-item { color: var(--color-text) !important; }
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-surface-bright) !important;
  color: var(--color-primary) !important;
}

.nav-tabs,
.nav-pills {
  border-bottom: 1px solid var(--color-border) !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
  border-radius: 0 !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border-color: var(--color-border-strong) var(--color-border-strong) transparent !important;
}

a { color: var(--color-primary); }
a:hover { color: #ffffff; }

/* =============================================================================
   Кастомный футер темы (терминальный System Status) + бренд навбара
   ============================================================================= */
.ct-footer { border-top: 1px solid var(--color-border); padding: var(--space-md) 0; background: transparent; }
.ct-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; }
.ct-footer__status { color: var(--color-primary); text-shadow: var(--text-glow); font-family: var(--font-mono); }
.ct-footer__meta, .ct-footer__pb { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 12px; }
.ct-footer__link { color: var(--color-primary) !important; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.ct-footer__pb small { color: var(--color-text-muted); }
/* Терминальный префикс у бренда навбара */
.navbar-brand { font-family: var(--font-mono); font-weight: 700; color: var(--color-primary) !important; }
.navbar-brand::before { content: "> "; color: var(--color-primary); }

/* =============================================================================
   Хедер-полоса страниц (.jumbotron) — терминальная тёмная, без заливки primary
   ============================================================================= */
.jumbotron {
  background-color: var(--color-bg) !important;
  background-image: radial-gradient(820px 240px at 72% -40%, rgba(61, 220, 132, 0.12), transparent 60%) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}
.jumbotron h1, .jumbotron .h1, .jumbotron h2 {
  color: var(--color-primary) !important;
  text-shadow: var(--text-glow);
}

/* =============================================================================
   Перебиваем инъекцию CTFd <style id="theme-color"> (она ставит
   .navbar/.jumbotron background = theme_color !important). Берём выше по
   специфичности (html[data-bs-theme] .x = 0,2,1 > .x = 0,1,0) → наши выигрывают.
   ============================================================================= */
html[data-bs-theme] .navbar {
  background-color: rgba(9, 13, 9, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border) !important;
}
html[data-bs-theme] .jumbotron {
  background-color: var(--color-bg) !important;
  background-image: radial-gradient(820px 240px at 72% -40%, rgba(61, 220, 132, 0.12), transparent 60%) !important;
  border-bottom: 1px solid var(--color-border) !important;
}