/* Тёмная тема, рассчитанная и на телефон: на фазе 4 эти же экраны станут PWA. */
:root {
  --bg: #14161a;
  --panel: #1c1f26;
  --line: #2a2f39;
  --text: #e6e8ec;
  --muted: #8b93a3;
  --accent: #4c9aff;
  --green: #3fb950;
  --amber: #d29922;
  --red: #f85149;
}

* { box-sizing: border-box; }

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

header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 600; color: var(--text); text-decoration: none; }
.who { margin-left: auto; color: var(--muted); font-size: 13px; }
.out { color: var(--muted); font-size: 13px; text-decoration: none; }
.out:hover { color: var(--accent); }

main { padding: 16px; max-width: 1100px; margin: 0 auto; }
footer {
  padding: 20px 16px 40px; text-align: center;
  color: var(--muted); font-size: 12px;
}

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

h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 26px 0 8px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.card.narrow { max-width: 560px; margin: 40px auto; }

pre {
  background: #0e1014; border: 1px solid var(--line); border-radius: 6px;
  padding: 10px; overflow-x: auto; font-size: 12.5px; color: #b9c0cc;
}

.muted { color: var(--muted); }
.note { font-size: 13px; margin: 10px 0 18px; }
.center { text-align: center; }
.error {
  background: rgba(248, 81, 73, .12); border: 1px solid var(--red);
  color: #ffb4ae; border-radius: 6px; padding: 10px;
}

/* --- плитки со сводкой ---
   Сетка, а не flex: при flex-wrap последняя плитка в неполном ряду
   растягивается на всю ширину и выглядит важнее остальных, хотя это просто
   остаток от деления. */
/* Число колонок фиксировано по ширине экрана, а не подобрано auto-fill:
   при auto-fill восемь показателей ложились как 6+2, и вторая строка
   выглядела полупустой. */
.stats {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.stat .k { color: var(--muted); font-size: 12px; }
.stat .v { font-size: 17px; font-weight: 600; }
.stats.money .stat .v { font-size: 16px; }
.stat.big .v { color: var(--green); }

/* Окно средней ширины: в четыре колонки длинные подписи вроде
   «Себестоимость продаж» ломаются на две строки */
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

/* Главная цифра экрана. Отдельным блоком во всю ширину, потому что ради неё
   всё и считается — остальное лишь слагаемые. */
.headline {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
  display: flex; align-items: baseline; flex-wrap: wrap;
  justify-content: center; gap: 4px 12px;
}
.headline .k {
  color: var(--muted); font-size: 13px; width: 100%; text-align: center;
}
.headline .v { font-size: 30px; font-weight: 700; color: var(--green); }
.headline .v.minus { color: var(--red); }
.headline .sub { color: var(--muted); font-size: 13px; }

/* --- таблицы --- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; }
tbody tr:hover { background: #1a1d24; cursor: pointer; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.no { color: var(--muted); }
.states { white-space: nowrap; }

.tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 11px; color: var(--muted);
}

.badge {
  display: inline-block; padding: 2px 7px; border-radius: 20px;
  font-size: 11.5px; white-space: nowrap; margin-right: 4px;
}
.s-sold { background: rgba(63, 185, 80, .15); color: var(--green); }
.s-pending { background: rgba(210, 153, 34, .15); color: var(--amber); }
.s-received { background: rgba(76, 154, 255, .15); color: var(--accent); }
.s-cancelled { background: rgba(139, 147, 163, .15); color: var(--muted); }

/* --- карточка заказа --- */
.props { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.props dt { color: var(--muted); font-size: 13px; }
.props dd { margin: 0; }

/* Полоса «данные из копии». Янтарная, а не красная: это не поломка,
   а честное предупреждение о давности цифр. */
.offline-bar {
  background: rgba(210, 153, 34, .15);
  border-bottom: 1px solid var(--amber);
  color: var(--amber);
  padding: 8px 16px; font-size: 13px; text-align: center;
}
.offline-bar time { font-weight: 600; }

/* --- навигация --- */
header nav { display: flex; gap: 14px; }
header nav a {
  color: var(--muted); text-decoration: none; font-size: 14px;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
header nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* --- формы (фаза 2: веб начал писать) --- */
.form .grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.form .grid.one { grid-template-columns: 1fr; }
.form button { margin-top: 14px; }
.form label {
  display: flex; flex-direction: column; gap: 5px;
  color: var(--muted); font-size: 12px;
}
input, select {
  background: #0e1014; color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font: inherit; font-size: 14px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

button {
  background: var(--accent); color: #06101f; border: 0;
  border-radius: 6px; padding: 9px 16px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
button.danger:hover { background: rgba(248, 81, 73, .12); filter: none; }
button.link {
  background: none; border: 0; padding: 0; font-weight: 400;
  font-size: 13px; color: var(--muted); text-decoration: underline;
}
button.link.danger { border: 0; color: var(--muted); }
button.link.danger:hover { color: var(--red); background: none; }

.row-actions { display: flex; gap: 12px; flex-wrap: wrap; }
form.inline { display: inline; }
form.inline select { min-width: 190px; font-size: 13px; padding: 5px 8px; }

/* строка редактирования плеча: статус, две даты и кнопка в одну линию,
   на телефоне переносятся */
form.row-inline {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
form.row-inline select, form.row-inline input { width: auto; font-size: 13px; padding: 5px 8px; }
form.row-inline button { padding: 6px 12px; font-size: 13px; }

/* строки таблицы позиций не кликабельны — там формы */
.batch-items tbody tr:hover { background: none; cursor: default; }

/* Себестоимость штуки — главная цифра таблицы, ради неё всё считается */
.unit-cost { font-weight: 700; color: var(--text); }

/* Отклонение от плана. Опоздание янтарным, а не красным: сорванный на день
   срок это норма жизни, а не авария */
.late { color: var(--amber); }
.early { color: var(--green); }

/* Строка правки под позицией: визуально примыкает к своей строке, а не
   выглядит отдельной записью */
.sub-row td { border-bottom: 1px solid var(--line); padding-top: 0; }
.batch-items tbody tr:not(.sub-row) td { border-bottom: 0; padding-bottom: 4px; }
.breakdown { font-size: 12px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* Предупреждение о неполном расчёте: заметное, но не паническое —
   это не ошибка, а нехватка данных */
.card.warn { border-color: var(--amber); background: rgba(210, 153, 34, .08); }
.card.ok-note { border-color: var(--green); background: rgba(63, 185, 80, .08); }

/* Трек-номер и ссылки на отслеживание в одну строку */
.track-card { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.track-input { min-width: 190px; font: 14px/1 ui-monospace, Consolas, monospace; }
.track-num {
  font: 15px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .5px; user-select: all;   /* выделяется одним кликом */
}

/* Ссылка, выглядящая кнопкой: выгрузка это переход по адресу, а не форма */
.export-line { margin: 0 0 14px; }
.btn-link {
  display: inline-block; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 8px 14px; font-size: 14px;
}
.btn-link:hover { border-color: var(--accent); color: var(--accent); }
.btn-link.primary { background: var(--accent); color: #06101f; border-color: var(--accent); font-weight: 600; }
.btn-link.primary:hover { color: #06101f; filter: brightness(1.08); }
.export-line { display: flex; gap: 10px; flex-wrap: wrap; }

/* Правка полей заказа.
   Сетка на контейнере, а формы внутри — display:contents, чтобы их поля
   попадали в ту же сетку. Иначе каждая форма считает ширину сама, и подписи
   с полями и кнопками разъезжаются лесенкой. */
.edit-fields {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 8px 12px;
}
.field-row { display: contents; }
.field-name { color: var(--muted); font-size: 13px; }
.field-row input[name="value"] { width: 100%; }
.field-actions { display: flex; gap: 6px; }

/* Галочка и крестик вместо слова «Сохранить»: строк много, и подпись
   на каждой занимала больше места, чем само поле */
button.icon {
  width: 32px; height: 32px; padding: 0; line-height: 1;
  font-size: 15px; border-radius: 6px;
}
button.icon.ok { background: var(--green); color: #06180b; }
button.icon.no { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.icon.no:hover { color: var(--text); border-color: var(--muted); filter: none; }

@media (max-width: 560px) {
  /* На телефоне подпись уходит на свою строку, поле и кнопки — под ней */
  .edit-fields { grid-template-columns: 1fr max-content; }
  .field-name { grid-column: 1 / -1; margin-bottom: -4px; }
}

/* Поле прямо в ячейке таблицы: правка суммы перед применением */
.cell-input { width: 90px; text-align: right; padding: 4px 6px; font-size: 13px; }
.form label.wide { display: flex; flex-direction: column; gap: 5px;
                   color: var(--muted); font-size: 12px; margin-top: 12px; }
textarea {
  background: #0e1014; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px; font: 13px/1.5 ui-monospace, Consolas, monospace;
  width: 100%; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--accent); }
.card.warn ul { margin: 8px 0; padding-left: 20px; }
.card.warn li { margin-bottom: 4px; }

@media (max-width: 560px) {
  main { padding: 12px; }
  /* Ровно две колонки: одинокая плитка займёт половину ряда, а не всю ширину */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .headline .v { font-size: 24px; }
  .props { grid-template-columns: 1fr; gap: 2px; }
  .props dd { margin-bottom: 8px; }
  header nav { gap: 10px; }
  .form .grid { grid-template-columns: 1fr; }
}