/* Панель модерации Unturned — тёмная тема, плотные таблицы, читаемость в первую очередь */

:root {
  --bg:#0e1116; --bg2:#151a22; --bg3:#1c232e; --line:#252d3a;
  --fg:#e6eaf0; --fg2:#9aa6b8; --fg3:#6b7789;
  --acc:#4f8cff; --acc2:#7aa7ff;
  --ok:#3fb950; --warn:#d29922; --err:#f85149; --crit:#ff5c8a;
  --r:8px;
}
:root[data-theme="light"] {
  --bg:#f6f7f9; --bg2:#fff; --bg3:#eef1f5; --line:#d9dee6;
  --fg:#111820; --fg2:#5b6674; --fg3:#8794a5;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--fg);
  font:14px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; gap:20px;
  padding:0 20px; height:52px;
  background:var(--bg2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand { font-weight:700; letter-spacing:.5px; color:var(--fg); }
.brand span { color:var(--acc); }
.topbar nav { display:flex; gap:4px; flex:1; overflow-x:auto; }
.topbar nav a {
  padding:6px 12px; border-radius:var(--r); color:var(--fg2);
  white-space:nowrap;
}
.topbar nav a:hover { background:var(--bg3); color:var(--fg); text-decoration:none; }
.topbar nav a.active { background:var(--acc); color:#fff; }
.me { display:flex; align-items:center; gap:10px; color:var(--fg2); font-size:13px; }

.role { font-size:11px; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
.role-owner { background:#5b2d8e; color:#fff; }
.role-admin { background:#1f4f9c; color:#fff; }
.role-moderator { background:#2c5f3f; color:#fff; }
.role-viewer { background:var(--bg3); color:var(--fg2); }

main { max-width:1500px; margin:0 auto; padding:20px; }
main.centered { max-width:440px; margin-top:8vh; }
.foot { text-align:center; color:var(--fg3); font-size:12px; padding:30px 20px; }

/* ── блоки ─────────────────────────────────────────────────────────────── */
.card {
  background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--r); padding:16px; margin-bottom:16px;
}
.card > h2, .card > h3 { margin:0 0 12px; font-size:15px; font-weight:600; }
.card h2 .sub { color:var(--fg3); font-weight:400; font-size:13px; margin-left:8px; }

.grid { display:grid; gap:16px; }
.grid.c2 { grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); }
.grid.c3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid.c4 { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }

.stat { background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.stat .n { font-size:26px; font-weight:700; line-height:1.1; }
.stat .l { color:var(--fg2); font-size:12px; margin-top:4px; }

/* ── таблицы ───────────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
/* Шапка таблицы намеренно НЕ sticky.
   Таблицы лежат внутри .scroll-x с overflow-x:auto, а любой overflow создаёт
   собственный контейнер прокрутки: position:sticky начинает липнуть к нему,
   а не к окну. Отступ top:52px, задуманный под высоту шапки сайта, уезжал
   внутрь карточки, и первая строка вылезала поверх заголовков. */
th { color:var(--fg2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px;
     background:var(--bg2); border-bottom:1px solid var(--line); }
tbody tr:hover { background:var(--bg3); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:12px; }
.nowrap { white-space:nowrap; }
.muted { color:var(--fg3); }
.small { font-size:12px; }
.scroll-x { overflow-x:auto; }
.scroll-y { max-height:480px; overflow-y:auto; }

/* ── риск ──────────────────────────────────────────────────────────────── */
.risk {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.risk-clean      { background:#1b2b1f; color:var(--ok); }
.risk-low        { background:#1e2733; color:var(--fg2); }
.risk-suspicious { background:#332a17; color:var(--warn); }
.risk-high       { background:#3a1d1d; color:var(--err); }
.risk-critical   { background:#4a1730; color:var(--crit); }

.status { font-size:11px; padding:2px 8px; border-radius:20px; background:var(--bg3); color:var(--fg2); }
.status-watching { background:#332a17; color:var(--warn); }
.status-banned   { background:#3a1d1d; color:var(--err); }
.status-cleared  { background:#1b2b1f; color:var(--ok); }

/* полоса риска */
.bar { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; min-width:70px; }
.bar > i { display:block; height:100%; background:var(--acc); }
.bar.w > i { background:var(--warn); }
.bar.e > i { background:var(--err); }
.bar.c > i { background:var(--crit); }

/* ── флаги эвристик ────────────────────────────────────────────────────── */
.flag { border-left:3px solid var(--line); padding:8px 12px; margin-bottom:8px; background:var(--bg3); border-radius:0 var(--r) var(--r) 0; }
.flag .t { font-weight:600; display:flex; justify-content:space-between; gap:10px; }
.flag .d { color:var(--fg2); font-size:12.5px; margin-top:3px; }
.flag .sev { color:var(--fg3); font-size:12px; font-variant-numeric:tabular-nums; }
.flag.s-hi  { border-left-color:var(--err); }
.flag.s-mid { border-left-color:var(--warn); }
.flag.s-lo  { border-left-color:var(--fg3); }

/* ── формы ─────────────────────────────────────────────────────────────── */
input, select, textarea, button {
  font:inherit; color:var(--fg);
  background:var(--bg3); border:1px solid var(--line);
  border-radius:6px; padding:7px 10px;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--acc); outline-offset:-1px; }
textarea { width:100%; min-height:80px; resize:vertical; }
label { display:block; margin-bottom:10px; color:var(--fg2); font-size:13px; }
label input, label select, label textarea { width:100%; margin-top:4px; color:var(--fg); }

button, .btn {
  cursor:pointer; background:var(--acc); color:#fff; border:none;
  padding:8px 14px; border-radius:6px; font-weight:500; display:inline-block;
}
button:hover, .btn:hover { background:var(--acc2); text-decoration:none; }
button.ghost, .btn.ghost { background:var(--bg3); color:var(--fg); border:1px solid var(--line); }
button.ghost:hover { background:var(--line); }
button.danger { background:var(--err); }
button.link { background:none; border:none; color:var(--fg2); padding:0; text-decoration:underline; cursor:pointer; }
button.sm, .btn.sm { padding:4px 9px; font-size:12px; }
form.inline { display:inline; }

.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px; }
.filters label { margin:0; }
.filters input, .filters select { min-width:140px; }
.filters input[type=search] { min-width:260px; }

.flash { padding:10px 14px; border-radius:var(--r); margin-bottom:16px; border:1px solid; }
.flash.ok  { background:#12251a; border-color:#1e4429; color:#7fe08c; }
.flash.err { background:#2a1517; border-color:#5c2326; color:#ff9b93; }

.note { background:var(--bg3); border-left:3px solid var(--acc); padding:10px 14px;
        border-radius:0 var(--r) var(--r) 0; color:var(--fg2); font-size:13px; margin-bottom:14px; }
.note.warn { border-left-color:var(--warn); }

/* ── профиль игрока ────────────────────────────────────────────────────── */
.phead { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.phead img { width:80px; height:80px; border-radius:var(--r); background:var(--bg3); }
.phead .info { flex:1; min-width:240px; }
.phead h1 { margin:0 0 6px; font-size:22px; }
.phead .ids { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--fg2); font-size:12.5px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; }
.kv dt { color:var(--fg2); }
.kv dd { margin:0; }

.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--bg3); border:1px solid var(--line); border-radius:20px;
        padding:3px 10px; font-size:12px; color:var(--fg2); }
.chip.on { background:var(--acc); color:#fff; border-color:var(--acc); }

.chatline { padding:2px 0; }
.chatline .who { color:var(--acc2); font-weight:500; }

/* ── прочее ────────────────────────────────────────────────────────────── */
.pager { display:flex; gap:6px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.pager a, .pager span { padding:5px 10px; border-radius:6px; background:var(--bg3); font-size:13px; }
.pager span.cur { background:var(--acc); color:#fff; }


.copy { cursor:pointer; border-bottom:1px dashed var(--fg3); }

@media (max-width:760px) {
  .topbar { height:auto; flex-wrap:wrap; padding:8px 12px; gap:8px; }
  main { padding:12px; }
}

/* Присутствие на сервере */
.online {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .35);
}

/* Строка с флажком: подпись рядом, а не под полем */
label.row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
label.row input[type="checkbox"] { width: auto; margin: 0; }

/* ── шапка карточки игрока ─────────────────────────────────────────────── */

/* ID и внешние ссылки — два отдельных ряда с воздухом между ними,
   иначе всё слипается в одну кашу под ником */
.phead .ids { margin-top: 10px; }
.phead .chips.links { margin-top: 12px; gap: 7px; }

/* Ссылка-чип должна выглядеть кликабельной, а не подписью */
.chips.links .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--fg2);
  transition: background .12s, border-color .12s, color .12s;
}
.chips.links .chip span { color: var(--fg3); font-size: 11px; }
.chips.links .chip:hover {
  background: var(--bg2);
  border-color: var(--acc);
  color: var(--fg);
  text-decoration: none;
}
.chips.links .chip:hover span { color: var(--acc); }

/* Колонка действий справа: одна ширина на все элементы, ничего не рвано */
.pactions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 210px;
  flex-shrink: 0;
}
.pactions form { margin: 0; }
.pactions button { width: 100%; }
.pactions button.ok { background: var(--ok); color: #0d1912; }
.pactions button.ok:hover { filter: brightness(1.1); }

/* Статус: список тянется, галочка занимает ровно своё */
.pactions .statusrow { display: flex; gap: 6px; }
.pactions .statusrow select { flex: 1; min-width: 0; }
.pactions .statusrow button { width: auto; flex: 0 0 34px; padding: 4px 0; }

/* Тонкая черта делит «что со статусом» и «что пересчитать» */
.pactions .sep {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}

/* На узком экране колонка перестаёт быть колонкой */
@media (max-width: 720px) {
  .pactions { width: 100%; }
}

/* ── ряд кнопок над списком ────────────────────────────────────────────── */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
  /* Действия над всем списком прижаты вправо: глаз читает страницу слева,
     а это не то, с чего начинают — сначала фильтры, потом уже кнопки. */
  justify-content: flex-end;
}
.toolbar form { margin: 0; display: flex; }

/* ── график активности ─────────────────────────────────────────────────── */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
}
.spark i {
  flex: 1;
  min-width: 0;
  background: var(--acc);
  border-radius: 3px 3px 0 0;
  opacity: .75;
  transition: opacity .12s;
}
.spark i:hover { opacity: 1; }
/* День без событий: не «столбик в два пикселя», который читается как данные,
   а явная пустая засечка — видно, что в этот день ничего не было. */
.spark i.zero { background: var(--line); height: 3px !important; opacity: 1; }

.sparkx {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
}

/* Плитки статистики: воздух под рядом, чтобы не липли к карточке ниже */
.grid.c4 { margin-bottom: 20px; }
.stat .l a { color: inherit; }

/* Исходный текст события — раскрывается по требованию */
.rawdet { margin-top: 6px; }
.rawdet summary { cursor: pointer; user-select: none; }
.rawdet summary:hover { color: var(--acc); }
.raw {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 560px;
  max-height: 260px;
  overflow: auto;
  color: var(--fg2);
}

/* Якорь под липкой шапкой.
   Без отступа переход по #logs прячет заголовок блока под верхней панелью:
   браузер ставит элемент вплотную к верху окна, не зная про неё. */
[id] { scroll-margin-top: 68px; }