/* Единственный файл оформления панели.

   Он один потому, что политика содержимого запрещает встроенные стили
   (style-src 'self', без 'unsafe-inline'): всё оформление обязано приезжать
   отсюда, и это же делает невозможным атрибут style с данными внутри.

   Вёрстка простая и переживает узкий экран: §8.2 требует от мобильного
   вида просмотра и ротации, а таблицы для этого достаточно прокрутить. */

:root {
  --bg: #14161a;
  --fg: #d8dee9;
  --muted: #8a93a0;
  --line: #2a2f38;
  --card: #1b1f26;
  --accent: #6ea8fe;
  --warn: #e0a458;
  --err: #e06c75;
  --ok: #8bc98b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
}

main { padding: 1rem 1.25rem 3rem; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
h4 { font-size: .95rem; margin: 1rem 0 .35rem; color: var(--muted); }

a { color: var(--accent); }

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.nav a { text-decoration: none; color: var(--fg); padding-bottom: 2px; }
.nav a.on { color: var(--accent); border-bottom: 2px solid var(--accent); }

.foot { padding: 1rem 1.25rem; color: var(--muted); border-top: 1px solid var(--line); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem;
  margin: 0 0 1rem;
}
.narrow { max-width: 32rem; }

.muted { color: var(--muted); }
.warn { color: var(--warn); }
.code { font-size: 2rem; margin: 0 0 .5rem; color: var(--muted); }

.flash { padding: .6rem .8rem; border-radius: 4px; border: 1px solid var(--line); }
.flash.ok { border-color: var(--ok); color: var(--ok); }
.flash.warn { border-color: var(--warn); color: var(--warn); }
.flash.err { border-color: var(--err); color: var(--err); }

table { border-collapse: collapse; }

.grid { width: 100%; display: block; overflow-x: auto; white-space: nowrap; }
.grid th, .grid td {
  border-bottom: 1px solid var(--line);
  padding: .4rem .6rem;
  text-align: left;
  vertical-align: top;
}
.grid th { color: var(--muted); font-weight: normal; }
.grid tr.dead td { color: var(--muted); }

.kv td { padding: .25rem .6rem .25rem 0; vertical-align: top; }
.kv td:first-child { color: var(--muted); white-space: nowrap; }

.caps { margin: .5rem 0; }
.caps th, .caps td { padding: .2rem .8rem .2rem 0; text-align: left; }
.caps th { color: var(--muted); font-weight: normal; }
.caps td:first-child { color: var(--muted); }

.slot.off { color: var(--muted); text-decoration: line-through; }

label { display: block; margin: .6rem 0 .2rem; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=url], select {
  width: 100%;
  max-width: 32rem;
  padding: .4rem .5rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
input[type=checkbox] { width: auto; }

textarea.mono {
  width: 100%;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .5rem;
}

button {
  margin-top: .6rem;
  padding: .35rem .8rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.link { border: none; background: none; color: var(--muted); }

.inline { display: inline-block; margin-right: .5rem; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.filters label { margin: 0; }
.filters select, .filters input[type=text] { width: auto; }

.lease { display: inline-block; }
.hp { display: inline-block; }