/* Оболочка портала VinylRussia.
   Фирменные цвета: Vinyl black #1A1A1B, Vinyl range #EF2B15, Vinyl gray #545A67.
   Красный расходуется скупо — только на действия и акценты. */

:root {
  --ground: #f4f5f7;
  --surface: #ffffff;
  --surface-sunk: #edeff2;
  --line: #dfe2e7;
  --line-soft: #eaecf0;
  --ink: #1a1a1b;
  --ink-mid: #545a67;
  --ink-soft: #7c828e;
  --accent: #ef2b15;
  --ok: #1c7a52;
  --ok-soft: rgba(28, 122, 82, 0.11);
  --warn: #9a6410;
  --warn-soft: rgba(154, 100, 16, 0.12);
  --idle-soft: rgba(107, 114, 128, 0.11);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(26, 26, 27, 0.05), 0 8px 24px -16px rgba(26, 26, 27, 0.25);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

/* ── шапка ─────────────────────────────────────────────────────── */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.reel {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  position: relative;
  flex: none;
}
.reel::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.top nav {
  display: flex;
  gap: 4px;
  flex: 1;
  align-self: stretch;
  align-items: center;
}

.top nav a {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--ink-mid);
  text-decoration: none;
  white-space: nowrap;
}
.top nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.top nav a.on { background: var(--surface-sunk); color: var(--ink); font-weight: 600; }

/* Меню «Отделы»: .menu растянут на всю высоту шапки, поэтому выпадающая
   панель начинается ровно от её нижней кромки — между курсором и панелью
   нет зазора, на котором :hover обрывался бы. */
.menu {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.menu .mtop { display: flex; align-items: center; gap: 6px; }
.caret { font-size: 9px; color: var(--ink-soft); transform: translateY(1px); }

.menu .drop {
  display: none;
  position: absolute;
  top: 100%;
  left: -8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  gap: 22px;
  z-index: 30;
  max-width: calc(100vw - 32px);
}
.menu:hover .drop,
.menu:focus-within .drop { display: flex; }

.drop .group {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.top nav .drop a { padding: 6px 10px; }
.top nav .drop .gtitle {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 10px 6px;
}
.top nav .drop .gtitle:hover { background: none; color: var(--accent); }

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.who b { color: var(--ink); font-weight: 600; }

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
}
.linkbtn:hover { color: var(--accent); }

/* ── страницы ──────────────────────────────────────────────────── */

.wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 72px; }

h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.lede { margin: 0 0 28px; color: var(--ink-mid); max-width: 62ch; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--ink-soft); }
.card h2 { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-mid); }
.card .when {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font: 11.5px var(--mono);
  color: var(--ink-soft);
}

.card.soon {
  border-style: dashed;
  box-shadow: none;
  color: var(--ink-soft);
}
.card.soon h2 { color: var(--ink-mid); }
.card.soon:hover { border-color: var(--line); }

.crumbs {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 4px; }

.empty {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-mid);
}

/* ── формы ─────────────────────────────────────────────────────── */

.narrow { max-width: 380px; margin: 72px auto; padding: 0 24px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

label { display: block; font-size: 13px; color: var(--ink-mid); margin: 16px 0 5px; }
label:first-of-type { margin-top: 0; }

input[type="text"], input[type="password"], select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: 15px var(--sans);
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

button.primary {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font: 600 15px var(--sans);
  cursor: pointer;
}
button.primary:hover { filter: brightness(0.93); }

.msg { padding: 11px 13px; border-radius: 7px; font-size: 13.5px; margin-bottom: 18px; }
.msg.bad { background: rgba(239, 43, 21, 0.09); color: #a81c0c; }
.msg.good { background: var(--ok-soft); color: var(--ok); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }

.secret {
  font: 15px var(--mono);
  background: var(--surface-sunk);
  padding: 9px 11px;
  border-radius: 7px;
  display: inline-block;
  margin-top: 6px;
  user-select: all;
}

/* ── таблицы ───────────────────────────────────────────────────── */

.tablewrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th {
  text-align: left;
  font: 400 10.5px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-mid); }
tr:last-child td { border-bottom: none; }
td.main { color: var(--ink); font-weight: 500; }
td.mono { font: 12px var(--mono); white-space: nowrap; }

.chip {
  display: inline-block;
  font: 500 10.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 20px;
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.off { background: var(--idle-soft); color: var(--ink-soft); }

.rowform { display: inline; }
.rowform button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 9px;
  font: 12px var(--sans);
  color: var(--ink-mid);
  cursor: pointer;
}
.rowform button:hover { border-color: var(--accent); color: var(--accent); }
.rowform button.danger { color: #a81c0c; }
.rowform button.danger:hover { border-color: #a81c0c; background: rgba(239, 43, 21, 0.09); }

.checkmatrix td, .checkmatrix th { text-align: center; }
.checkmatrix td.main, .checkmatrix th.main { text-align: left; }
.checkmatrix input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }

/* ── дашборд во весь экран ─────────────────────────────────────── */

.frame { width: 100%; height: calc(100vh - 56px); border: 0; display: block; background: var(--surface); }

/* переключатель периода над отчётом (отдел продаж) */
.periodbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-mid);
}
.periodbar form { display: flex; align-items: center; gap: 8px; }
.periodbar select {
  font: 13px var(--sans);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-mid);
  cursor: pointer;
}
.archnote { color: var(--warn); }
.frame.withbar { height: calc(100vh - 98px); }

.stale {
  background: var(--warn-soft);
  color: var(--warn);
  padding: 8px 24px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  .top { padding: 0 14px; gap: 12px; }
  .who span.name { display: none; }
  .wrap { padding: 24px 14px 56px; }
  /* На телефоне hover-меню нет — путь к отчётам лежит через карточки
     на главной, ссылка «Отделы» ведёт именно туда. */
  .menu .drop { display: none !important; }
}