/* ============================================================
   RE:ACTIVE — библиотека компонентов.
   Пишется вручную, но ТОЛЬКО через переменные из tokens.css.
   Каждый компонент описан во всех состояниях: покой, наведение,
   фокус с клавиатуры, нажатие, отключён, загрузка, пусто, ошибка.
   ============================================================ */

/* ---------- 1. Общее ---------- */

*,*::before,*::after{box-sizing:border-box}

:focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
/* На цветных заливках кольцо отделяется белой прослойкой, иначе его не видно. */
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible,.icon-btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

.u-tabular{font-variant-numeric:tabular-nums}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-stack{display:flex;flex-direction:column}
.u-row{display:flex;align-items:center}

/* ---------- 2. Кнопка ---------- */

.btn{
  --btn-bg:var(--action-secondary);
  --btn-ink:var(--ink-primary);
  --btn-border:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--size-control-md);
  padding:0 var(--space-4);
  border:1px solid var(--btn-border);
  border-radius:var(--radius-md);
  background:var(--btn-bg);
  color:var(--btn-ink);
  font:var(--font-weight-semibold) var(--font-size-sm)/1 var(--font-family-sans);
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--tr-fast),border-color var(--tr-fast),transform var(--tr-fast);
}
.btn svg{width:var(--size-icon-md);height:var(--size-icon-md);flex:none}
.btn:hover{--btn-bg:var(--action-secondary-hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{
  --btn-bg:var(--action-primary-disabled);
  --btn-ink:var(--ink-muted);
  cursor:not-allowed;transform:none;
}

.btn--primary{--btn-bg:var(--action-primary);--btn-ink:var(--ink-on-brand)}
.btn--primary:hover{--btn-bg:var(--action-primary-hover)}
.btn--primary:active{--btn-bg:var(--action-primary-active)}

.btn--ghost{--btn-bg:transparent;--btn-border:var(--border-default)}
.btn--ghost:hover{--btn-bg:var(--surface-sunken)}

.btn--danger{--btn-bg:var(--action-danger-bg);--btn-ink:var(--surface-card)}
.btn--danger:hover{--btn-bg:var(--action-danger-hover)}

.btn--sm{min-height:var(--size-control-sm);padding:0 var(--space-3);font-size:var(--font-size-xs)}
.btn--lg{min-height:var(--size-control-lg);padding:0 var(--space-5);font-size:var(--font-size-base)}

/* Кнопка в работе: текст остаётся на месте, добавляется точка-индикатор. */
.btn[data-loading="true"]{pointer-events:none;position:relative;color:transparent}
.btn[data-loading="true"]::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:var(--radius-full);
  border:2px solid currentColor;border-top-color:transparent;color:var(--btn-ink);
  animation:rx-spin 700ms linear infinite;
}
@keyframes rx-spin{to{transform:rotate(360deg)}}

/* Кнопка-иконка: палец должен попадать. */
.icon-btn{
  display:inline-grid;place-items:center;
  width:var(--size-control-md);height:var(--size-control-md);
  border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-secondary);
  cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast);
}
.icon-btn:hover{background:var(--surface-sunken);color:var(--ink-primary)}
.icon-btn svg{width:var(--size-icon-md);height:var(--size-icon-md)}
@media (pointer:coarse){
  .icon-btn{width:var(--size-tap-min);height:var(--size-tap-min)}
}

/* ---------- 3. Поля ввода ---------- */

.field{display:flex;flex-direction:column;gap:6px}
.field__label{
  font-size:var(--font-size-label);font-weight:var(--font-weight-medium);
  color:var(--ink-secondary);
}
.input,.select,.textarea{
  min-height:var(--size-control-md);
  padding:0 var(--space-3);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  color:var(--ink-primary);
  font:var(--font-weight-regular) var(--font-size-value)/1.4 var(--font-family-sans);
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast);
}
.input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.textarea{padding:var(--space-2) var(--space-3);min-height:96px;line-height:var(--font-leading-normal)}
.input::placeholder,.textarea::placeholder{color:var(--ink-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input[disabled],.select[disabled],.textarea[disabled]{
  background:var(--surface-sunken);color:var(--ink-muted);cursor:not-allowed;
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--action-danger-bg);
}
.field__error{
  display:flex;gap:var(--space-1);align-items:flex-start;
  font-size:var(--font-size-xs);color:var(--feedback-danger-text);
}
.field__hint{font-size:var(--font-size-xs);color:var(--ink-muted)}
/* На телефоне поля не мельче 16 px, иначе браузер увеличивает страницу сам. */
@media (max-width:900px){
  .input,.select,.textarea{font-size:var(--font-size-base)}
}

/* ---------- 4. Чип состояния ---------- */

.chip{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:2px var(--space-2);
  border-radius:var(--radius-full);
  font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);
  background:var(--surface-sunken);color:var(--ink-secondary);
  white-space:nowrap;
}
.chip--success{background:var(--feedback-success-bg);color:var(--feedback-success-text)}
.chip--warning{background:var(--feedback-warning-bg);color:var(--feedback-warning-text)}
.chip--danger{background:var(--feedback-danger-bg);color:var(--feedback-danger-text)}
.chip--info{background:var(--feedback-info-bg);color:var(--feedback-info-text)}
/* Цвет никогда не единственный признак: перед текстом идёт значок-точка нужной формы. */
.chip::before{
  content:"";width:6px;height:6px;border-radius:var(--radius-full);
  background:currentColor;flex:none;
}
.chip--plain::before{display:none}

/* ---------- 5. Карточка и заголовок раздела ---------- */

.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card__head{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--border-subtle);
}
.card__title{
  margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);
  color:var(--ink-primary);letter-spacing:var(--font-tracking-normal);
}
.card__sub{font-size:var(--font-size-xs);color:var(--ink-muted)}
.card__body{padding:var(--space-6)}
.card__foot{
  padding:var(--space-3) var(--space-6);border-top:1px solid var(--border-subtle);
  color:var(--ink-muted);font-size:var(--font-size-xs);
}

/* ---------- 6. Ответ первым (правило «сначала вывод») ---------- */

.answer{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-5) var(--space-6);
  border:1px solid var(--border-subtle);
  border-left:4px solid var(--action-primary);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  box-shadow:var(--shadow-sm);
}
.answer__main{
  font-size:var(--font-size-lg);line-height:var(--font-leading-snug);
  font-weight:var(--font-weight-semibold);color:var(--ink-primary);
}
.answer__sub{font-size:var(--font-size-sm);color:var(--ink-secondary)}

/* ---------- 7. Таблица ---------- */

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.table th,.table td{
  padding:var(--space-3) var(--space-4);
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  line-height:var(--font-leading-snug);
}
.table thead th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-card);
  font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);
  color:var(--ink-muted);text-transform:uppercase;letter-spacing:var(--font-tracking-wide);
  white-space:nowrap;
}
.table tbody tr{transition:background var(--tr-fast)}
.table tbody tr:hover{background:var(--surface-sunken)}
.table tbody tr[data-clickable]{cursor:pointer}
.tel-link{color:inherit;text-decoration:none;white-space:nowrap}
.tel-link:hover{text-decoration:underline}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table tbody tr:last-child td{border-bottom:0}
/* Заголовок-кнопка сортировки: видно, что по нему можно щёлкнуть. */
.table th button{
  display:inline-flex;align-items:center;gap:var(--space-1);
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;
  text-transform:inherit;letter-spacing:inherit;
}
.table th button:hover{color:var(--ink-primary)}
.table th[aria-sort="ascending"] button,.table th[aria-sort="descending"] button{color:var(--ink-brand)}
.table th .sort-mark{opacity:.45;font-size:9px}
.table th[aria-sort="ascending"] .sort-mark,
.table th[aria-sort="descending"] .sort-mark{opacity:1}

/* ---------- 8. Состояния данных: загрузка, пусто, ошибка ---------- */

.skeleton{
  background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--surface-page) 37%,var(--surface-sunken) 63%);
  background-size:400% 100%;
  border-radius:var(--radius-sm);
  animation:rx-shine 1.4s ease infinite;
}
@keyframes rx-shine{0%{background-position:100% 0}100%{background-position:0 0}}
.skeleton--line{height:12px;margin:var(--space-2) 0}
.skeleton--row{height:var(--size-row);margin-bottom:var(--space-2);border-radius:var(--radius-sm)}
.skeleton--kpi{height:104px}
.skeleton--card{height:240px}

.state{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  padding:var(--space-12) var(--space-6);text-align:center;
}
.state__icon{color:var(--ink-muted)}
.state__icon svg{width:32px;height:32px}
.state__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--ink-primary)}
.state__text{font-size:var(--font-size-sm);color:var(--ink-secondary);max-width:44ch}
.state--error .state__icon{color:var(--feedback-danger-text)}

/* ---------- 9. Вкладки ---------- */

.tabs{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--surface-sunken);border-radius:var(--radius-md);
}
.tab{
  display:inline-flex;align-items:center;gap:var(--space-2);
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:var(--space-2) var(--space-3);border-radius:calc(var(--radius-md) - 3px);
  font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--ink-secondary);
  transition:background var(--tr-fast),color var(--tr-fast);
  min-height:var(--size-control-sm);
}
.tab:hover{color:var(--ink-primary)}
.tab[aria-selected="true"]{background:var(--surface-card);color:var(--ink-primary);box-shadow:var(--shadow-sm)}
/* Иконка во вкладке того же размера, что в кнопке: без правила она растягивалась до 50 px */
.tab svg{width:var(--size-icon-md);height:var(--size-icon-md);flex:none}
/* Телефон: вкладок больше, чем влезает в ширину — переносим на вторую строку, а не прячем
   за правым краем (view режет overflow, и «Сотрудники и лицензии» было не открыть). Ряд
   вкладок карточки пациента листается сам (.pcx-tabs-wrap) — его это правило не трогает. */
@media (max-width:860px){
  .tabs{display:flex;flex-wrap:wrap}
  .tab,.btn--sm{min-height:40px}
  .chip{white-space:normal}
}

/* ---------- 10. Модальное окно ---------- */

.overlay{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:rgba(24,26,32,.42);
  display:grid;place-items:center;padding:var(--space-4);
  animation:rx-fade var(--tr-base);
}
@keyframes rx-fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;z-index:var(--z-modal);
  width:min(640px,100%);max-height:88vh;overflow:auto;   /* П4: ширины окон 480 / 640 / 800 */
  background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-modal);
  animation:rx-pop var(--tr-slow);
}
.modal--wide{width:min(880px,100%)}
@keyframes rx-pop{from{opacity:0;transform:translateY(var(--shift)) scale(.98)}to{opacity:1;transform:none}}
.modal__head{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle);
}
.modal__title{margin:0;font-size:20px;font-weight:var(--font-weight-semibold)}
.modal__head>[data-close]:last-child{margin-left:auto;flex:none}
.modal__body{padding:var(--space-6)}
/* П2: между блоками полей в окне всегда одинаковый шаг, независимо от подсказок. */
.modal__body>.field+.field,
.modal__body>.field+.form-block,
.modal__body>.form-block+.field,
.modal__body>.form-block+.form-block{margin-top:var(--space-5)}
.modal__foot{
  display:flex;justify-content:flex-end;gap:var(--space-3);   /* П5: зазор между кнопками 12 px */
  padding:var(--space-6);border-top:1px solid var(--border-subtle);
  background:var(--surface-card);border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* ---------- 11. Уведомление с отменой ---------- */

.toasts{
  position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);
  width:min(520px,calc(100vw - var(--space-8)));
}
.toast{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-inverse);color:var(--ink-on-inverse);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-size:var(--font-size-sm);
  animation:rx-toast var(--tr-base);
}
@keyframes rx-toast{from{opacity:0;transform:translateY(var(--shift))}to{opacity:1;transform:none}}
.toast__text{flex:1}
.toast__action{
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--c-brand-300);font:var(--font-weight-semibold) var(--font-size-sm)/1 var(--font-family-sans);
  padding:var(--space-2);border-radius:var(--radius-sm);
}
.toast__action:hover{color:var(--surface-card);text-decoration:underline}
.toast--success{border-left:3px solid var(--c-success-400)}
.toast--danger{border-left:3px solid var(--c-danger-400)}

/* ---------- 12. Командная строка (Ctrl+K) ---------- */

.palette{
  position:fixed;inset:0;z-index:var(--z-palette);
  background:rgba(24,26,32,.42);display:flex;justify-content:center;
  padding-top:12vh;
}
.palette__box{
  width:min(600px,calc(100vw - var(--space-8)));height:max-content;max-height:70vh;
  display:flex;flex-direction:column;
  background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-modal);overflow:hidden;
  animation:rx-pop var(--tr-base);
}
.palette__input{
  border:0;border-bottom:1px solid var(--border-subtle);
  padding:var(--space-4) var(--space-5);
  font-size:var(--font-size-base);color:var(--ink-primary);
}
.palette__input:focus{outline:none}
.palette__list{overflow-y:auto;padding:var(--space-2)}
.palette__item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  cursor:pointer;font-size:var(--font-size-sm);color:var(--ink-primary);
}
.palette__item[aria-selected="true"]{background:var(--surface-sunken)}
.palette__hint{margin-left:auto;font-size:var(--font-size-xs);color:var(--ink-muted)}
.palette__empty{padding:var(--space-6);text-align:center;color:var(--ink-muted);font-size:var(--font-size-sm)}

/* ---------- 13. Клавиша в подсказке ---------- */

.kbd{
  display:inline-block;min-width:20px;padding:1px var(--space-1);
  border:1px solid var(--border-default);border-bottom-width:2px;
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  font:var(--font-weight-medium) 11px/1.5 var(--font-family-mono);
  color:var(--ink-secondary);text-align:center;
}

/* ---------- 14. Ссылка «к содержимому» ---------- */

.skip-link{
  position:absolute;left:var(--space-3);top:-60px;z-index:var(--z-palette);
  padding:var(--space-2) var(--space-4);
  background:var(--surface-card);color:var(--ink-primary);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  transition:top var(--tr-fast);
}
.skip-link:focus{top:var(--space-3)}

/* ---------- 15. Меньше движения ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;scroll-behavior:auto !important;
  }
  .skeleton{animation:none;background:var(--surface-sunken)}
}

/* ---------- Поиск в длинных списках (пациенты, услуги) ---------- */
/* Сам <select> остаётся в разметке и хранит значение, человек видит поле с поиском. */
.ss{position:relative;display:block}
.ss__input{width:100%}
.ss__list{
  display:none;position:absolute;z-index:calc(var(--z-modal) + 1);left:0;right:0;top:calc(100% + 4px);
  max-height:264px;overflow-y:auto;padding:4px;
  background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md,0 8px 24px rgba(16,24,40,.12));
}
.ss.is-open .ss__list{display:block}
.ss__item{
  padding:10px var(--space-3);border-radius:8px;cursor:pointer;
  font-size:var(--font-size-value);color:var(--ink-primary);
}
.ss__item:hover,.ss__item.is-active{background:var(--surface-sunken)}
.ss__empty{padding:10px var(--space-3);font-size:var(--font-size-sm);color:var(--ink-muted)}
/* Пальцем по списку: строка выше, список длиннее — на планшете и телефоне
   попасть в строку высотой 36 px невозможно. */
@media (pointer: coarse){
  .ss__list{max-height:min(60vh,420px)}
  .ss__item{padding:14px var(--space-3);font-size:var(--font-size-md,16px)}
  .ss__empty{padding:14px var(--space-3)}
}

/* Кликабельная строка таблицы (строка открывает карточку) и ссылка внутри таблицы */
.tc-link{cursor:pointer}
.tc-link:hover{background:var(--surface-sunken)}
.tc-link:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px}
a.link{color:var(--ink-brand);text-decoration:none;border-bottom:1px solid transparent}
a.link:hover{border-bottom-color:currentColor}
a.link:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:4px}