/* Админка. Цвета, шрифт и кнопки берутся из /theme.css */
html { overflow-y: scroll; } /* полоса прокрутки всегда на месте, чтобы страница не сдвигалась при смене вкладок */
body { font-size: 15px; }
h1, h2 { margin: 16px 0 8px; }
h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .02em; margin-top: 32px; }
#content > h2:first-child { margin-top: 12px; }

#login-screen { max-width: 340px; margin: 60px auto; padding: 0 16px; }
/* заголовок поля всегда над полем (на компьютере и на телефоне) */
form label, .row label { display: flex; flex-direction: column; gap: 4px; }
form label { margin: 10px 0; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { flex-direction: row; align-items: flex-start; gap: 6px; }
input, select { width: 100%; max-width: 360px; }
td input[type=text], td input[type=number] { width: 100%; max-width: none; min-width: 70px; }
td input[name=name] { min-width: 160px; }
input[type=checkbox], input[type=radio] { width: auto; }
input[type=radio] { margin-right: 6px; }
textarea { width: 100%; min-width: 200px; }

header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 2px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 33px; width: auto; display: block; }
.brand span { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; line-height: 1.1; }
nav { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
/* вкладки: у всех одинаковая рамка, активная только заливается красным, поэтому кнопки не двигаются и не меняют размер */
nav button { min-height: 38px; padding: 6px 9px; font-size: 13px; }
nav button.active { background: var(--accent); border-color: var(--accent); color: var(--text); }
.user-info { color: var(--muted); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; text-align: right; }
main { padding: 8px 16px 40px; }

table { border-collapse: collapse; width: 100%; margin: 8px 0; }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: var(--card); font-weight: 700; }
.table-wrap { overflow-x: auto; }
td button { min-height: 34px; padding: 5px 10px; font-size: 12px; margin: 2px 4px 2px 0; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0; }
.row label { margin: 0; }
/* строка фильтра: поле поиска растягивается, «Показать» стоит сразу за ним, «Скачать CSV» прижата к правому краю */
.filter-row .grow { flex: 1 1 260px; }
.filter-row .grow input { max-width: none; }
.csv-link { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
.page-size { margin-left: auto; }
.page-size select { width: auto; }

button.primary.flat { border-bottom: 0; }
button.danger { color: var(--accent); border-color: var(--accent); }

/* Страницы журнала */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 16px 0; }
.pager button { min-width: 40px; min-height: 40px; padding: 4px 10px; font-size: 14px; letter-spacing: 0; }
.pager button.current { background: var(--accent); border-color: var(--accent); }
.pager .gap { padding: 0 4px; color: var(--muted); }

/* Отдельные блоки на вкладке (копирование, загрузка файла, новый сотрудник) */
.panel { border: 1px solid var(--line); padding: 16px 16px 20px; margin: 32px 0; }
.panel > h2:first-child { margin-top: 0; }

/* Сообщения закреплены сверху и видны при любой прокрутке страницы */
.message {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 30;
  width: min(720px, calc(100vw - 16px)); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; background: #1F3A22; border: 1px solid var(--ok); box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
.message.err { background: #4A2123; border-color: var(--err); }
.message button, .message button:hover:not(:disabled) {
  min-height: 0; padding: 0 4px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--text); letter-spacing: 0;
}
.message button:hover:not(:disabled) { color: var(--accent); }
.error { color: var(--err); }

.box { border: 1px solid var(--line); padding: 14px; margin: 12px 0; background: var(--card); }
.link { word-break: break-all; font-family: ui-monospace, Consolas, monospace; }
.st-active { color: var(--ok); } .st-redeemed { color: var(--muted); } .st-expired { color: var(--err); } .st-cancelled { color: var(--err); }
pre { white-space: pre-wrap; margin: 0; font-size: 13px; }
#env-banner { background: #FFD54F; color: #201E1E; text-align: center; padding: 6px 8px; font-weight: 800; }
.warn { margin: 8px 0; padding: 10px 12px; background: rgba(255, 183, 77, .12); border: 1px solid var(--warn); }
.note { color: var(--muted); font-size: 13px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0; }
.checks label { display: flex; gap: 4px; align-items: center; margin: 0; }
details summary { cursor: pointer; }
tr.row-cancelled td { background: rgba(255, 138, 128, .08); color: var(--muted); }
.lvl-ok { color: var(--ok); } .lvl-warn, .lvl-low { color: var(--warn); } .lvl-empty, .lvl-error, .lvl-critical, .lvl-out { color: var(--err); }

/* Плашка «призы заканчиваются» сверху админки */
.stock-banner { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--warn); background: rgba(255, 183, 77, .12); }
.stock-banner.critical { border-color: var(--err); background: rgba(238, 53, 55, .14); }
.stock-banner p { margin: 4px 0; }
.stock-banner .lvl-low { font-weight: 800; }
.stock-banner .lvl-critical, .stock-banner .lvl-out { font-weight: 800; }
.stock-hint { margin: 0 0 12px; }
.qr { width: 200px; height: 200px; display: block; margin: 8px 0; padding: 8px; background: #fff; }
.overlay { position: fixed; inset: 0; background: #fff; color: #201E1E; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; cursor: pointer; }
.overlay img { width: min(80vw, 70vh); height: min(80vw, 70vh); }
.overlay p { font-size: 18px; margin: 8px 0; }
.overlay .note { color: #555; }
.club-grid { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0; }
.tariff { border: 1px solid var(--line); padding: 10px 12px; margin: 0 0 10px; }
.tariff.row-cancelled { opacity: .7; }
.tariff .row { margin: 0 0 4px; align-items: center; }
.tariff .row strong { font-size: 18px; margin-right: 8px; }
.tariff .row button { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.club-grid label { display: flex; gap: 4px; align-items: center; margin: 0; }
.result-box { margin: 8px 0; padding: 10px 12px; background: rgba(102, 187, 106, .12); border: 1px solid var(--ok); }
.result-box.bad { background: rgba(255, 138, 128, .12); border-color: var(--err); }
.result-box ul { margin: 4px 0; padding-left: 20px; }

/* Журнал: подробности метками */
.tags { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tag { background: rgba(255, 255, 255, .1); padding: 2px 8px; font-size: 13px; }
.tag.warn { background: rgba(255, 183, 77, .22); border: 0; margin: 0; padding: 2px 8px; }
.tag.change { background: rgba(238, 53, 55, .28); }
.tags .sub { flex-basis: 100%; font-size: 13px; color: var(--muted); }

/* Порядок призов */
.order-cell { white-space: nowrap; }
.drag-handle { display: inline-block; cursor: grab; font-size: 22px; line-height: 1; padding: 4px 6px; touch-action: none; user-select: none; color: var(--accent); }
.order-cell button { padding: 2px 8px; min-height: 30px; font-size: 14px; }
tr.dragging td { background: rgba(238, 53, 55, .22); }
tr.dragging .drag-handle { cursor: grabbing; }

dialog { width: min(480px, calc(100vw - 24px)); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 0; padding: 18px; }
dialog::backdrop { background: rgba(0, 0, 0, .65); }
dialog h3 { margin: 0 0 8px; }
dialog textarea { background: var(--bg); }

/* Телефон: строки таблиц превращаются в карточки, поля на всю ширину */
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* шапка: сверху логотип и «Выйти», ниже вкладки на всю ширину в две колонки, под ними строка с именем и правилами */
  header { padding: 10px 8px; gap: 10px; }
  header > .brand { flex: 1 1 0; }
  .brand { gap: 8px; }
  .brand img { height: 26px; }
  .brand span { font-size: 11px; }
  #logout { order: 1; min-height: 38px; padding: 6px 12px; font-size: 13px; }
  nav { order: 2; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  nav button { min-height: 44px; }
  .user-info { order: 3; flex: 1 1 100%; flex-direction: row; justify-content: space-between; gap: 10px; text-align: left; }
  main { padding: 8px 8px 40px; }
  input, select { max-width: none; }
  button { padding: 8px 14px; }
  .table-wrap { overflow-x: visible; }
  table, tbody { display: block; }
  thead { display: none; }
  /* карточка = сетка из 6 колонок; поле занимает всю ширину, а короткие поля (data-w) встают по 2-3 в ряд;
     между строками карточки линия, заголовок и поле каждой ячейки прижаты книзу, чтобы поля в строке стояли ровно */
  tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); border-top: 0; background: var(--card); }
  tr.row-cancelled { background: #3A2B2C; }
  th, td { border: 0; }
  td {
    display: flex; flex-direction: column; justify-content: flex-end; grid-column: span 6; min-width: 0;
    padding: 10px 10px; border-top: 1px solid var(--line); overflow-wrap: anywhere;
  }
  td[data-w="2"] { grid-column: span 3; }
  td[data-w="3"] { grid-column: span 2; }
  td[data-w="4"] { grid-column: span 4; order: -2; }
  td[data-w="btn"] { grid-column: span 2; order: -1; align-items: flex-end; }
  tr.row-cancelled td { background: none; }
  td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; letter-spacing: .02em; }
  td[data-label=""]::before, td:not([data-label])::before, td[data-w="btn"]::before { display: none; }
  td:empty { display: none; }
  td input, td select, td textarea { background: var(--bg); width: 100%; }
  td input[type=checkbox] { width: 26px; height: 26px; }
  /* ячейка только с галочкой: подпись и галочка в одной строке, по центру по высоте */
  td:has(> input[type=checkbox]:only-child) { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; }
  td:has(> input[type=checkbox]:only-child)::before { margin: 0; }
  input[type=date] { min-width: 0; -webkit-appearance: none; appearance: none; height: 46px; }
  .csv-link, .page-size { margin-left: auto; }
  .filter-row .grow { flex-basis: 100%; }
  td input[type=text], td input[type=number], td select, td textarea { min-width: 0; }
  td button { margin: 2px 6px 2px 0; }
  .order-cell { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
  .order-cell::before { margin: 0 8px 0 0; }
  .row { align-items: stretch; }
  .row label, .row input:not([type=checkbox]):not([type=radio]), .row select { width: 100%; }
  .row label:has(> input[type=radio]), .row label:has(> input[type=checkbox]) { display: flex; align-items: flex-start; gap: 6px; }
  .qr { width: min(240px, 100%); height: auto; }
  .club-grid label, .checks label { min-width: 45%; }
}