/* Касса TradeR. Тёмная тема: бар работает вечером, светлый экран слепит.
   Цели нажатия не меньше 48 px — попадать надо мокрыми руками и не глядя. */

:root {
    --bg:      #12161b;
    --panel:   #1b2027;
    --panel-2: #232932;
    --line:    #2e3641;
    --ink:     #e8edf3;
    --ink-soft:#8b96a5;
    --accent:  #c4573b;
    --accent-2:#d96b4e;
    --ok:      #2f9e63;
    --warn:    #d9534f;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Правило класса с display перебивает браузерное [hidden] { display: none },
   и скрытый элемент остаётся на экране. Для модального окна это означало
   тёмную подложку поверх всей кассы, съедающую каждый клик. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    font: 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    overscroll-behavior: none;
}

button, input { font: inherit; color: inherit; }

/* ---------- вход по PIN ---------- */

.pin-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 0; }

.pin {
    width: 340px;
    padding: 28px;
    background: var(--panel);
    border-radius: 18px;
    text-align: center;
}

.pin--wide { width: 420px; }
.pin__title { margin: 0 0 6px; font-size: 20px; }
.pin__sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; }
.pin__foot { margin: 18px 0 0; }
.pin__foot a { color: var(--ink-soft); }

.pin__error {
    margin: 0 0 14px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(217, 83, 79, .15);
    color: #f0a29f;
    font-size: 14px;
}

.pin__display {
    width: 100%;
    margin-bottom: 18px;
    padding: 14px;
    font-size: 28px;
    letter-spacing: 12px;
    text-align: center;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.pin__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.pin__key {
    padding: 18px 0;
    font-size: 22px;
    background: var(--panel-2);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.pin__key:active { background: var(--line); }
.pin__key--muted { color: var(--ink-soft); }
.pin__key--go { background: var(--accent); }

.terminal-pick {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 16px;
    text-align: left;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}

.terminal-pick b { display: block; font-size: 17px; }
.terminal-pick small { color: var(--ink-soft); }

/* ---------- каркас кассы ---------- */

.pos { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.bar__left, .bar__right, .bar__center { display: flex; align-items: center; gap: 8px; }

.bar__tab {
    padding: 10px 18px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--ink-soft);
    cursor: pointer;
}

.bar__tab.is-active { background: var(--panel-2); color: var(--ink); }

.bar__shift { font-size: 14px; color: var(--ink-soft); }
.bar__shift.is-open { color: var(--ok); }
.bar__net { font-size: 14px; color: var(--warn); }
.bar__user { font-size: 14px; color: var(--ink-soft); }

.bar__btn {
    padding: 10px 14px;
    background: var(--panel-2);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.work { display: flex; flex: 1; min-height: 0; }

/* ---------- каталог ---------- */

.catalog { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.catalog__cats {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    /* Прокрутка колесом не должна утекать в страницу и в жест «назад» */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--line);
}

.cat {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: var(--panel);
    border: 0;
    border-radius: 20px;
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
}

.cat.is-active { background: var(--accent); color: #fff; }

/* Плитка 1:2, ровно два ряда на экран.
   Высоту считает pos.js от видимой области каталога и кладёт в --tile-h,
   ширина — половина высоты. Чистым CSS так не выйдет: «половина высоты контейнера»
   в grid не выражается, а два ряда должны помещаться при любой высоте окна.
   Ряды заданы жёстко, поэтому единственная строка товаров не растягивается
   на весь экран — снизу остаётся поле. */
.catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--tile-w, 150px));
    grid-auto-rows: var(--tile-h, 300px);
    justify-content: start;
    align-content: start;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

/* Порядок внутри плитки сверху вниз: фото, название, цена.
   Цена всегда прижата к низу — глаз ищет её на одном месте во всех плитках,
   а не там, куда её сдвинуло название из одной или трёх строк. */
.good {
    display: flex;
    flex-direction: column;
    height: var(--tile-h, 300px);
    overflow: hidden;
    padding: 0;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}
/* Название вверху: официант ищет позицию по нему, а фото лишь подтверждает
   выбор. Картинка занимает всё, что осталось между названием и ценой. */
.good__name {
    margin: 10px 10px 8px;
    font-size: 15px;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.good__img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    background: var(--panel-2);
}
.good__price {
    margin: 8px 10px 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-2);
    font-variant-numeric: tabular-nums;
}

/* Без фото названию достаётся весь центр плитки */
.good:not(.good--photo) .good__name { flex: 1; -webkit-line-clamp: 5; }

.good:active { background: var(--panel-2); }
.good--noprice { opacity: .45; }

/* ---------- столы ---------- */

.tables { flex: 1; padding: 14px; overflow-y: auto; }
.tables__empty { color: var(--ink-soft); }
.hall { margin-bottom: 22px; }
.hall__title { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.hall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.table {
    min-height: 84px;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}

.table b { display: block; font-size: 20px; }
.table small { color: var(--ink-soft); }
.table.is-busy { border-color: var(--accent); background: rgba(196, 87, 59, .16); }
.table.is-busy small { color: var(--accent-2); }

/* ---------- чек ---------- */

.check {
    display: flex;
    flex-direction: column;
    width: 340px;
    background: var(--panel);
    border-left: 1px solid var(--line);
}

.check__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
}

.check__clear { background: none; border: 0; color: var(--ink-soft); font-size: 13px; cursor: pointer; }
.check__items { flex: 1; overflow-y: auto; padding: 6px 0; }
.check__empty { padding: 24px 14px; color: var(--ink-soft); text-align: center; }

.line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}

.line__name { font-size: 14px; }
.line__qty { display: flex; align-items: center; gap: 6px; }

.line__pm {
    width: 34px;
    height: 34px;
    background: var(--panel-2);
    border: 0;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}

.line__n { min-width: 22px; text-align: center; }
.line__sum { min-width: 78px; text-align: right; font-variant-numeric: tabular-nums; }

.check__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px;
    border-top: 1px solid var(--line);
    font-size: 15px;
}

.check__total b { font-size: 24px; }
.check__actions { display: grid; gap: 8px; padding: 0 14px 14px; }

.btn {
    padding: 14px;
    background: var(--accent);
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.btn:active { background: var(--accent-2); }
.btn--big { padding: 18px; font-size: 18px; font-weight: 600; }
.btn--ghost { background: var(--panel-2); color: var(--ink-soft); }

/* ---------- окна ---------- */

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .6);
    z-index: 50;
}

.modal__box {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px;
    background: var(--panel);
    border-radius: 16px;
}

.modal__box h2 { margin: 0 0 16px; font-size: 19px; }
/* Кнопки всегда в кадре: на низком экране окно прокручивается, а полоса
   действий остаётся внизу */
.modal__actions {
    position: sticky;
    bottom: -22px;
    z-index: 2;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 0;
    background: var(--panel);
}
.modal__actions .btn { flex: 1; }

@media (max-height: 800px) {
    .modal { padding: 8px; }
    .modal__box { max-height: 98vh; padding: 14px; }
    .modal__box h2 { margin-bottom: 10px; font-size: 18px; }
    .fld { margin-bottom: 8px; }
    .modal__actions { margin-top: 10px; padding: 8px 0; bottom: -14px; }
}

.fld { display: block; margin-bottom: 14px; }
.fld span { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink-soft); }

.fld input {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.seg { display: flex; gap: 6px; margin-bottom: 16px; }

.seg__b {
    flex: 1;
    padding: 13px 0;
    background: var(--panel-2);
    border: 0;
    border-radius: 10px;
    color: var(--ink-soft);
    cursor: pointer;
}

.seg__b.is-active { background: var(--accent); color: #fff; }

.change { margin: 0; color: var(--ink-soft); font-size: 15px; }

.report { width: 100%; border-collapse: collapse; }
.report td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.report td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.report--warn td { color: var(--warn); font-weight: 600; }

.menu-list { display: grid; gap: 8px; }

.menu-item {
    display: block;
    padding: 15px;
    text-align: left;
    background: var(--panel-2);
    border: 0;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

/* ---------- уведомления ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    padding: 13px 20px;
    background: var(--ok);
    color: #fff;
    border-radius: 12px;
    z-index: 60;
    max-width: 90vw;
}

.toast--error { background: var(--warn); }

/* ---------- узкий экран ---------- */

@media (max-width: 820px) {
    .work { flex-direction: column; }
    .check { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 46vh; }
    /* Размер плитки не трогаем и здесь: в ряд просто помещается меньше */
    .catalog__grid { grid-template-columns: repeat(auto-fill, var(--tile-w, 150px)); }
}

/* ---------- Экран оплаты ---------- */

/* Оплата занимает весь экран: попадать пальцем в мелкие кнопки над чужим
   заказом неудобно, а ошибка в сумме стоит дороже, чем лишний экран. */
.modal__box--pay {
    max-width: 980px;
    width: 100%;
    max-height: 96vh;
    padding: 0;
    overflow: hidden;
}

.pay { display: flex; min-height: 560px; }

.pay__pad {
    flex: 0 0 44%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--panel-2);
}

.pay__quick { display: flex; gap: 10px; }
.pay__q {
    flex: 1;
    padding: 20px 0;
    font: inherit;
    font-size: 26px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.pay__keys {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pay__k {
    font: inherit;
    font-size: 26px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.pay__k:active, .pay__q:active { background: var(--line); }

.pay__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

.pay__due { font-size: 24px; margin-bottom: 18px; }
.pay__due b { font-size: 28px; }
.pay__hint { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }

.pay__methods { display: flex; flex-direction: column; gap: 8px; }
.pay__m {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    font: inherit;
    font-size: 17px;
    color: var(--ink);
    text-align: left;
    background: var(--panel-2);
    border: 2px solid transparent;
    border-radius: 12px;
}
/* Выбранный способ виден рамкой, а не заливкой: заливка тут читалась бы
   как «уже оплачено», а это ещё не так */
.pay__m.is-active { border-color: var(--accent); }
.pay__ml { flex: 1; }
.pay__mv { font-variant-numeric: tabular-nums; font-weight: 600; }
.pay__mv.is-empty { color: var(--ink-soft); font-weight: 400; }

.pay__change {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 18px;
    background: rgba(47, 158, 106, .15);
    border-radius: 12px;
}

.pay__print {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--panel-2);
    border-radius: 12px;
}
.pay__print input { width: 22px; height: 22px; }

.pay__foot { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.pay__free {
    font: inherit;
    color: var(--warn);
    background: none;
    border: 0;
    padding: 14px 0;
}
.pay__foot .btn { margin-left: auto; min-width: 200px; }

@media (max-width: 860px) {
    .pay { flex-direction: column; min-height: 0; }
    .pay__pad { flex: none; }
    .pay__keys { min-height: 260px; }
}

/* ---------- Поиск и строка чека ---------- */

.catalog__search { position: relative; padding: 10px 12px 0; }
.catalog__search input {
    width: 100%;
    padding: 12px 36px 12px 14px;
    font: inherit;
    color: var(--ink);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.catalog__x {
    position: absolute;
    right: 20px; top: 18px;
    font: inherit;
    color: var(--ink-soft);
    background: none;
    border: 0;
}

/* Пожелание гостя видно прямо в чеке: официант должен замечать его,
   не открывая строку заново */
.line__note { margin-top: 3px; font-size: 12px; color: var(--accent-2); }
.line__name { cursor: pointer; }

.lined__qty { margin-bottom: 12px; font-size: 17px; }
.lined__qty b { font-size: 22px; }
.lined__keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.lined__keys .pay__k { padding: 16px 0; font-size: 22px; }


/* План зала на кассе: та же расстановка, что нарисована в админке */
.hall__plan {
    position: relative;
    width: 100%;
    padding-top: 70%;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.table--plan {
    position: absolute;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform-origin: center;
}
.table--plan.table--circle { border-radius: 50%; }
.table--plan b     { font-size: 15px; line-height: 1.1; }
.table--plan small { font-size: 11px; }

/* Стойка и стены: официант их видит, но нажать не может */
.table--decor {
    background: rgba(255, 255, 255, .07);
    border-style: dashed;
    color: var(--ink-soft);
    pointer-events: none;
}

.brand { display: block; width: 220px; max-width: 70vw; margin: 0 auto 22px; object-fit: contain; }