/* Палитра-оверрайды и базовые сбросы поверх дизайн-системы Organic.
   Все токены — CSS-переменные; компоненты берут цвета отсюда. */
:root{
  --color-bg:oklch(0.975 0.002 260);
  --color-text:oklch(0.22 0.01 260);
  --color-accent:oklch(0.55 0.16 265);
  --color-accent-100:oklch(0.93 0.035 265);
  --color-accent-200:oklch(0.88 0.06 265);
  --color-accent-300:oklch(0.78 0.1 265);
  --color-accent-400:oklch(0.62 0.14 265);
  --color-accent-500:oklch(0.55 0.16 265);
  --color-accent-600:oklch(0.5 0.16 265);
  --color-accent-700:oklch(0.45 0.15 265);
  --color-accent-800:oklch(0.38 0.13 265);
  --color-accent-900:oklch(0.3 0.1 265);
  --color-accent-2:oklch(0.6 0.09 155);
  --color-accent-2-100:oklch(0.93 0.04 155);
  --color-accent-2-200:oklch(0.88 0.06 155);
  --color-accent-2-300:oklch(0.8 0.08 155);
  --color-accent-2-400:oklch(0.7 0.09 155);
  --color-accent-2-500:oklch(0.6 0.09 155);
  --color-accent-2-600:oklch(0.52 0.09 155);
  --color-accent-2-700:oklch(0.45 0.09 155);
  --color-accent-2-800:oklch(0.39 0.08 155);
  --color-accent-2-900:oklch(0.32 0.07 155);
  --color-neutral-100:oklch(0.96 0.003 260);
  --color-neutral-200:oklch(0.92 0.004 260);
  --color-neutral-300:oklch(0.86 0.005 260);
  --color-neutral-400:oklch(0.72 0.008 260);
  --color-neutral-500:oklch(0.6 0.01 260);
  --color-neutral-600:oklch(0.5 0.012 260);
  --color-neutral-700:oklch(0.42 0.012 260);
  --color-neutral-800:oklch(0.34 0.012 260);
  --color-neutral-900:oklch(0.26 0.01 260);
  --color-surface:oklch(0.995 0.001 260);
  --color-divider:oklch(0.9 0.004 260);
}
body{margin:0;background:var(--color-bg)}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-800)}
.card,.btn,.tag,.input,button,select,a,tr{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease,transform .22s ease;
}

/* — формы админки —
   Дизайн-система даёт `.input` с состояниями и `.radio`, но `<select>` в ней
   не оформлен вовсе: браузер рисует его по-своему, и рядом с остальными
   полями он выглядит чужим. Здесь довёрстано ровно недостающее — на тех же
   токенах, без своей палитры. */

select.input {
  appearance: none;
  padding-right: 34px;
  /* Стрелка — фоном, чтобы не заводить ради неё элемент разметки.
     Цвет берётся из токена: в inline-SVG он не подставляется, поэтому здесь
     повторён нейтральный оттенок дизайн-системы. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}
select.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Поля в строках форм по ширине содержимого, а не на всю карточку:
   `.input` из дизайн-системы всегда `width: 100%`. */
.input-xs { width: 92px; }
.input-sm { width: 132px; }
.input-md { width: 190px; }
.input-lg { width: 240px; }
.input-xl { width: 320px; }
/* Выпадающий список — по содержимому: значения разной длины, а фиксированная
   ширина либо режет длинное, либо оставляет пустоту у короткого. */
.input-auto { width: auto; max-width: 210px; }
.input.input-xs, .input.input-sm, .input.input-md,
.input.input-lg, .input.input-xl { min-height: 34px; font-size: 13px; }

/* Строка формы: поля и кнопки в ряд, с общим базовым выравниванием. */
.form-row {
  display: flex; flex-direction: row; gap: 10px;
  align-items: center; flex-wrap: wrap;
}

/* Подпись группы полей внутри карточки. */
.field-group {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-500); margin-top: 2px;
}

/* Сегментированный переключатель ссылками: `.seg-opt` в дизайн-системе
   рассчитан на radio, а у нас это переходы по адресу. */
a.seg-opt { text-decoration: none; color: inherit; }
a.seg-opt.is-on { background: var(--color-accent); color: var(--color-bg); }
a.seg-opt:not(.is-on):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

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

   Высота фиксированная. Ячейки в строке разной высоты — адрес с подписью,
   часы работы в две строки, касса с отметкой времени, — и без фиксации
   список «дышит»: строки прыгают на десяток пикселей, и глазом их уже не
   сканируешь. Двух строк по 12,5 пикселя внутри хватает с запасом. */
.row-link {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  height: 64px; box-sizing: border-box; overflow: hidden;
  /* Отступ внутри самой строки, а не у карточки. Разница видна при наведении:
     подсветка идёт от края до края, а текст стоит с полем — иначе он лип бы
     к границе карточки. */
  padding: 0 22px;
  color: inherit; text-decoration: none;
  transition: background 90ms linear;
}
.row-link:hover { background: var(--color-neutral-100); }

/* Разделитель строк. Цвет здесь, а не в разметке: скрипт отбора прячет
   разделитель у последней видимой строки, и делать это инлайновым стилем
   значит стирать цвет вместе с ним — граница остаётся без цвета, то есть
   чёрной (`currentColor`). Проверено: так и было. */
.row-link { border-bottom: 1px solid var(--color-neutral-200); }
.row-link:last-child, .row-link--last { border-bottom-color: transparent; }

/* Возврат к списку. Отдельного вида в дизайн-системе нет, поэтому собран из
   её же ghost-кнопки: важно, чтобы он выглядел кнопкой, а не случайной
   ссылкой в тексте — на карточке точки это единственный путь назад.
   Отрицательный отступ слева выравнивает надпись по заголовку под ней. */
.btn-back {
  font-size: 12.5px; gap: 4px;
  padding: 4px 8px; margin-left: -8px;
}

/* Кто вошёл — внизу бокового меню. Раньше это были три строки текста подряд,
   и «Выйти» терялось между ними: одинаковый кегль, одинаковый вес, никакой
   границы. Теперь имя с кружком инициалов, роль отдельной меткой, выход —
   кнопкой дизайн-системы. */
.side-user { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-neutral-200); }
.side-user__who { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.side-user__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  background: var(--color-neutral-200); color: var(--color-neutral-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
}
.side-user__name {
  font-size: 13px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-user__meta {
  font-size: 11.5px; color: var(--color-neutral-500); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Карточка со списком: содержимое идёт от края до края, поэтому подсветка
   строки при наведении должна обрезаться по скруглению — иначе прямоугольник
   вылезает за угол карточки. */
.card:has(> .row-link) { overflow: hidden; }

/* Поле и кнопка в одной строке — одной высоты и одного кегля. Кнопка
   складывается из отступов (8,8 + 8,8), строки в 16,8 и рамки, то есть около
   36 пикселей, а поле с размерным классом было 34 и с текстом на пункт мельче:
   рядом оно выглядело вдавленным. Задаём обоим одну высоту явно. */
.form-row .input, .form-row .btn, .form-row .seg { min-height: 38px; }
/* Сегменты тянутся на всю высоту переключателя: у него своя рамка, и без
   этого он оказывался на 1,9 пикселя ниже соседней кнопки — замерено. */
.form-row .seg-opt { display: flex; align-items: center; }
.form-row .input { font-size: 14px; }

/* Подсветка фокуса у поля — внутрь. Общая рамка фокуса рисуется снаружи и
   визуально увеличивает поле в момент, когда в него встали: соседняя кнопка
   остаётся на месте, а поле «раздувается». */
.input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Правило на весь интерфейс, а не на одну строку списка: браузерное
   `[hidden] { display: none }` слабее любого класса с собственным display, и
   всё, что в проекте прячется атрибутом, — это `.card` и `.row-link`, у обоих
   `display:flex`. Частное правило было только для строки, и блок «Ничего не
   найдено» показывался поверх полного списка при пустом поиске: атрибут стоял,
   а `.card` его перебивал. `!important` здесь по делу — правило описывает не
   вид, а само наличие элемента на экране. */
[hidden] { display: none !important; }

/* Текст в кнопке по центру. В дизайн-системе задан line-height 1.2, и при
   системном шрифте строка садится на 1,8 пикселя выше середины: у шрифта
   больше свободного места под базовой линией, чем над ней, и заданная
   вручную высота строки это расхождение не выравнивает. Замерено прямо в
   браузере: при 1.2 перекос −1,8, при 1.35 −1,9, при normal ноль. */
.btn { line-height: normal; }

/* Уведомление о результате последней команды. Появляется поверх страницы в
   углу и само гаснет через семь секунд: экран при этом не перестраивается,
   а прочитать успеваешь.

   Скрипта нет намеренно — «forwards» оставляет уведомление в конечном
   состоянии анимации, то есть скрытым. При выключенных анимациях оно
   остаётся видимым: исчезнуть без предупреждения хуже, чем задержаться. */
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  max-width: 420px; padding: 14px 18px;
  background: var(--color-surface); border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  animation: toast-in 160ms ease-out, toast-out 400ms ease-in 7s forwards;
}
.toast--bad { border-left-color: var(--color-accent); }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Цвет тревоги. В палитре его не было: акцент синий, второй акцент зелёный, а
   «правило не разобрано» и «прошлый запуск не удался» красились тем же синим,
   что и обычные подсказки. Состояние, требующее вмешательства, не должно
   выглядеть как пояснение — иначе экран честно всё показывает, а глазом это
   не отличается. */
:root {
  --color-danger: oklch(0.55 0.17 25);
  --color-danger-100: oklch(0.94 0.04 25);
  --color-danger-800: oklch(0.43 0.14 25);
}
.tag-danger { background: var(--color-danger-100); color: var(--color-danger-800); }
.toast--bad { border-left-color: var(--color-danger); }

/* Кнопка перелистывателя на экране аптек. Тот же вид, что у серверного
   `_pager.html`, но кнопка, а не ссылка: страница не перезагружается, и
   ссылка вела бы в никуда. Стили здесь, а не в скрипте, — чтобы вид
   перелистывателей менялся в одном месте, а не в двух. */
.page-btn {
  font-size: 12.5px; padding: 6px 12px; border: 0;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100); color: var(--color-text);
  cursor: pointer; line-height: normal;
}
.page-btn:hover { background: var(--color-neutral-200); }
.page-btn--now, .page-btn--now:hover {
  background: var(--color-accent); color: #fff;
}
/* Стрелка на краю списка. Не спрятана, а погашена: место за ней остаётся, и
   ряд кнопок не съезжает вбок при переходе на первую или последнюю страницу. */
.page-btn:disabled, .page-btn:disabled:hover {
  background: var(--color-neutral-100); color: var(--color-neutral-400);
  cursor: default;
}


/* Кнопка необратимого действия. Не красная заливка на весь блок: удаление
   кассы стоит рядом с обычными кнопками карточки, и заливка перетягивала бы
   на себя внимание с того, зачем на экран заходят. Цвет только у текста и
   рамки — заметно, но не кричит. */
.btn-danger {
  background: transparent; color: var(--color-danger-800);
  border: 1px solid var(--color-danger); line-height: normal;
}
.btn-danger:hover { background: var(--color-danger-100); }

/* Ключ приёма в карточке кассы. Моноширинный и с подложкой: его переносят
   в мастер установки на точке, и границы строки должны быть видны — где
   кончается ключ и начинается подпись рядом. */
.key-plain {
  font-family: ui-monospace, monospace; font-size: 12.5px;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--color-neutral-100); user-select: all;
}