/* clients-scale.css — масштаб интерфейса, адаптив под телефоны, вкладки «Вылеты» и «Мой вылет» */

/* ---------- 1. Масштаб ---------- */
:root{ --ui-auto:1; }
@media (min-width:901px)  and (max-width:1279px){ :root{ --ui-auto:.94; } }
@media (min-width:1680px) { :root{ --ui-auto:1.08; } }
@media (min-width:2200px) { :root{ --ui-auto:1.2; } }
@media (min-width:2800px) { :root{ --ui-auto:1.35; } }

:root{ --ui-scale:var(--ui-auto); }
:root[data-ui-scale="fixed"]{ --ui-scale:var(--ui-user, 1); }

.client-app{
  zoom:var(--ui-scale);
  /* высота экрана в "зумленных" пикселях — без лишней прокрутки */
  min-height:calc(100vh / var(--ui-scale));
  min-height:calc(100dvh / var(--ui-scale));
}
/* сайдбар внутри зума: 100vh в незумленных пикселях, поэтому высоту делим на масштаб */
.client-app .client-sidebar{
  height:calc(100vh / var(--ui-scale)) !important;
  height:calc(100dvh / var(--ui-scale)) !important;
  max-height:calc(100vh / var(--ui-scale)) !important;
  max-height:calc(100dvh / var(--ui-scale)) !important;
}
/* модальные окна и тосты вне .client-app масштабируются так же */
.client-modal, #toast{ zoom:var(--ui-scale); }

.ui-scale-control{
  display:inline-flex; align-items:center; gap:6px;
  height:40px; padding:0 8px 0 10px;
  border:1px solid var(--c-line); border-radius:12px;
  background:var(--c-surface);
}
.ui-scale-control .ui-icon{ width:16px; height:16px; opacity:.7; }
.ui-scale-control select{
  border:0; background:transparent; color:var(--c-text);
  padding:0 2px; min-height:0; height:auto; width:auto; box-shadow:none;
  font:inherit; font-size:13px; cursor:pointer;
}
.ui-scale-control select:focus{ outline:none; }
@media (max-width:560px){ .ui-scale-control{ display:none; } }

/* ---------- 2. Адаптив ---------- */
/* вырезы экрана (iPhone/Android): отступ только снаружи основной сетки */
body{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
h1#tab-title{ font-size:clamp(20px, 1.2vw + 14px, 30px); }
.panel h2{ font-size:clamp(17px, .6vw + 13px, 22px); }

/* таблицы: горизонтальный скролл вместо сжатия колонок */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.table-wrap table{ min-width:560px; }
.table-wrap.compact table{ min-width:0; }

/* сенсорные экраны: зоны нажатия и поля без автозума */
@media (pointer:coarse){
  .client-main .text-btn, .client-main .primary, .client-main .icon-btn, .client-main .danger-btn,
  .client-main select, .client-main input:not([type=checkbox]):not([type=radio]){
    min-height:44px;
  }
  input, select, textarea{ font-size:16px !important; }
  .nav-item{ min-height:48px; }
}

@media (max-width:900px){
  .panel-actions{ flex-wrap:wrap; width:100%; }
  .panel-actions > select{ flex:1 1 180px; min-width:0; }
}
@media (max-width:560px){
  .panel-head{ flex-wrap:wrap; gap:10px; }
  .header-actions{ gap:6px; }
}

/* ---------- 3. Вылеты ---------- */
.heats-shell{ display:flex; flex-direction:column; gap:14px; }

.heats-setup{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:14px 16px; border-radius:var(--r-md);
  border:1px solid var(--c-line);
  background:color-mix(in srgb, var(--c-accent) 6%, var(--c-surface));
}
.heats-setup[hidden]{ display:none; }
.heats-setup-copy b{ display:block; margin-bottom:4px; }
.heats-setup-copy p{ margin:0; font-size:12.5px; }
.heats-setup-controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.heats-stages{ background:color-mix(in srgb, var(--c-good) 5%, var(--c-surface)); }

/* степпер — аналог spinbox клиента: крупные −/+ и автоповтор по удержанию */
.stepper-field{ display:flex; align-items:center; gap:8px; color:var(--c-muted); font-size:12.5px; }
.stepper{
  display:inline-grid; grid-template-columns:40px minmax(40px,auto) 40px; align-items:center;
  height:40px; border:1px solid var(--c-line); border-radius:12px; overflow:hidden;
  background:var(--c-surface); user-select:none; touch-action:manipulation;
}
.stepper button{
  height:100%; min-height:0; border:0; border-radius:0; padding:0;
  background:color-mix(in srgb, var(--c-accent) 12%, transparent);
  color:var(--c-accent); font-size:20px; font-weight:700; cursor:pointer;
}
.stepper button:active:not(:disabled){ background:color-mix(in srgb, var(--c-accent) 35%, transparent); }
.stepper button:disabled{ color:var(--c-faint); background:transparent; cursor:default; }
.stepper output{ text-align:center; font-weight:700; font-variant-numeric:tabular-nums; color:var(--c-text); padding:0 6px; }
@media (pointer:coarse){ .stepper{ height:46px; grid-template-columns:48px minmax(44px,auto) 48px; } }

.heats-feedback{
  padding:10px 14px; border-radius:12px; font-size:13px;
  border:1px solid color-mix(in srgb, var(--c-good) 50%, var(--c-line));
  background:color-mix(in srgb, var(--c-good) 10%, var(--c-surface));
}
.heats-feedback.warn{
  border-color:color-mix(in srgb, var(--c-warning) 60%, var(--c-line));
  background:color-mix(in srgb, var(--c-warning) 12%, var(--c-surface));
}

.heats-leftover{
  padding:14px 16px; border-radius:var(--r-md);
  border:1px solid color-mix(in srgb, var(--c-warning) 60%, var(--c-line));
  background:color-mix(in srgb, var(--c-warning) 9%, var(--c-surface));
}
.heats-leftover-head{ display:flex; align-items:center; gap:8px; }
.heats-leftover-head .icon{ width:18px; height:18px; background:var(--c-warning); }
.heats-leftover > p{ margin:6px 0 10px; font-size:12.5px; }
.heats-leftover-list{ display:grid; gap:8px; }
.heats-leftover-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,200px) auto; gap:8px; align-items:center;
  padding:8px 10px; border-radius:10px; background:var(--c-surface);
}
.heats-leftover-row small{ display:block; color:var(--c-warning); font-size:11.5px; margin-top:2px; }

.heats-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.heats-toolbar > b{ margin-right:auto; }
.heats-legend{ display:none; }

.heats-list{ display:flex; flex-direction:column; gap:8px; }
.heat-card{
  border:1px solid var(--c-line); border-radius:var(--r-md);
  background:var(--c-surface); overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.heat-card.open{
  border-color:color-mix(in srgb, var(--c-accent) 55%, var(--c-line));
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.heat-card.dup{ border-color:var(--c-danger); }

.heat-row{
  width:100%; display:grid; align-items:center; gap:10px; text-align:left;
  grid-template-columns:44px 120px 124px 80px minmax(0,1fr) 70px 18px;
  padding:12px 14px; min-height:52px;
  border:0; border-radius:0; background:transparent; color:var(--c-text); cursor:pointer; font:inherit;
}
.heat-row:hover{ background:var(--c-surface-hover); }
.heat-num{ font-weight:800; font-size:16px; }
.heat-stage{ color:var(--c-muted); font-size:13px; }
.heat-status{
  justify-self:start; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700;
  color:var(--c-accent); background:color-mix(in srgb, var(--c-accent) 15%, transparent);
}
.heat-status.s-running{ color:var(--c-good); background:color-mix(in srgb, var(--c-good) 15%, transparent); }
.heat-status.s-paused{ color:var(--c-warning); background:color-mix(in srgb, var(--c-warning) 15%, transparent); }
.heat-status.s-finished,.heat-status.s-published{ color:var(--c-muted); background:color-mix(in srgb, var(--c-muted) 14%, transparent); }
.heat-cell{ font-size:13px; }
.heat-channels{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--c-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.heat-channels.bad{ color:var(--c-danger); }
.heat-judges{ font-weight:700; }
.heat-judges.ok{ color:var(--c-good); }
.heat-judges.warn{ color:var(--c-warning); }
.heat-chevron{
  width:10px; height:10px; justify-self:end;
  border-right:2px solid var(--c-muted); border-bottom:2px solid var(--c-muted);
  transform:rotate(45deg); transition:transform .18s;
}
.heat-card.open .heat-chevron{ transform:rotate(-135deg); }

.heat-body{ padding:4px 14px 14px; display:flex; flex-direction:column; gap:10px; }
.heat-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.heat-status-select{ width:auto; min-width:160px; }
.heat-hint{ margin:0; font-size:12px; color:var(--c-warning); }

.heat-pilots{ display:flex; flex-direction:column; gap:8px; }
.heat-pilot{
  position:relative; display:grid; align-items:center; gap:10px 14px;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 230px 260px;
  padding:10px 12px 10px 20px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--pc) 45%, var(--c-line));
  background:color-mix(in srgb, var(--pc) 6%, var(--c-surface));
}
.heat-pilot::before{
  content:""; position:absolute; left:7px; top:8px; bottom:8px; width:5px; border-radius:3px; background:var(--pc);
}
.heat-pilot.female{ background:color-mix(in srgb, #ec4899 8%, var(--c-surface)); }
.heat-pilot.out .heat-pilot-who, .heat-pilot.out .heat-pilot-meta{ opacity:.55; }
.heat-pilot.dsq{ border-color:var(--c-danger); }
.heat-pilot-who{ min-width:0; }
.heat-pilot-who b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.heat-pilot-who small{ display:block; color:var(--c-muted); font-size:11.5px; margin-top:2px; }
.heat-pilot-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.heat-chip{
  padding:3px 8px; border-radius:7px; font-weight:800; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--c-accent); background:color-mix(in srgb, var(--c-accent) 14%, transparent);
}
.heat-time{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
.heat-place{ display:inline-flex; align-items:center; gap:4px; font-weight:800; color:var(--c-accent); }
.icon-mini{
  min-height:0 !important; width:24px; height:24px; padding:0; border-radius:6px;
  border:1px solid var(--c-line); background:transparent; color:var(--c-muted); cursor:pointer; font-size:10px;
}
.icon-mini:disabled{ opacity:.35; cursor:default; }
.heat-pilot-judge select{ width:100%; }
.heat-judge-text{ font-size:12px; color:var(--c-muted); }
.heat-judge-text.warn{ color:var(--c-warning); }
.heat-pilot-acts{ display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.heat-badge{
  padding:3px 8px; border-radius:7px; font-size:11px; font-weight:800; letter-spacing:.04em;
  color:var(--c-danger); background:color-mix(in srgb, var(--c-danger) 15%, transparent);
}
.warn-text{ color:var(--c-warning) !important; }
.danger-btn{
  padding:8px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--c-danger) 70%, black);
  background:var(--c-danger); color:#fff; font-weight:700; cursor:pointer;
}
.danger-btn:hover{ filter:brightness(1.07); }
.heat-dsq-form{
  grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:8px; align-items:center;
  padding-top:8px; border-top:1px dashed var(--c-line);
}

/* планшет: строка вылета переносится, пилот — в две колонки */
@media (max-width:1180px){
  .heat-row{ display:flex; flex-wrap:wrap; column-gap:12px; row-gap:6px; }
  .heat-num{ order:1; } .heat-stage{ order:2; } .heat-status{ order:3; }
  .heat-chevron{ order:4; margin-left:auto; }
  .heat-row .heat-cell{ order:5; }
  .heat-row .heat-cell.heat-channels{ order:6; flex:1 1 100%; }
  .heat-row .heat-cell::before{ content:attr(data-label) ": "; color:var(--c-faint); font-weight:400; }
  .heat-pilot{ grid-template-columns:minmax(0,1fr) auto; }
  .heat-pilot-judge{ grid-column:1 / 2; }
  .heat-pilot-acts{ grid-column:2 / 3; }
}
/* телефон: всё в одну колонку, крупные элементы */
@media (max-width:640px){
  .heats-setup{ grid-template-columns:1fr; }
  .heats-setup-controls{ justify-content:stretch; }
  .heats-setup-controls > button{ flex:1 1 100%; }
  .stepper-field{ flex:1 1 100%; justify-content:space-between; }
  .heat-row{ padding:12px; }
  .heat-pilot{ grid-template-columns:1fr; padding-left:18px; }
  .heat-pilot-judge, .heat-pilot-acts{ grid-column:auto; justify-content:flex-start; }
  .heat-pilot-acts > *{ flex:1 1 auto; }
  .heat-controls > *{ flex:1 1 calc(50% - 8px); }
  .heat-status-select{ flex-basis:100% !important; }
  .heats-leftover-row{ grid-template-columns:1fr; }
  .heat-dsq-form{ grid-template-columns:1fr; }
}

/* ---------- «Мой вылет» (рядовой судья) ---------- */
.my-heat-panel[hidden]{ display:none; }
.my-heat-clock-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; }
.my-heat-clock-row small{ display:block; color:var(--c-muted); font-size:12px; }
#my-heat-clock{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(30px, 3vw + 14px, 48px); letter-spacing:.02em;
}
#my-heat-clock.live{ color:var(--c-accent); }
.my-heat-pilots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.my-heat-pilot{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:12px 12px 12px 20px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--pc) 50%, var(--c-line));
  background:color-mix(in srgb, var(--pc) 7%, var(--c-surface));
}
.my-heat-pilot::before{ content:""; position:absolute; left:7px; top:10px; bottom:10px; width:5px; border-radius:3px; background:var(--pc); }
.my-heat-pilot.out{ opacity:.6; }
.my-heat-pilot .heat-time{ font-size:22px; }
.lap-btn{ min-height:52px; font-size:16px; background:var(--pc) !important; border-color:transparent !important; }
/* судья: крупная кнопка круга, отклик на касание, данные пилота */
.my-heat-pilot .mj-lap{ min-height:76px; font-size:22px; font-weight:800; letter-spacing:.06em; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.my-heat-pilot .mj-lap:active:not(:disabled){ filter:brightness(.85); }
.my-heat-pilot .heat-pilot-who small{ display:block; }
.my-heat-pilot .mj-num{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--pc); color:#fff; font-size:12px; margin-right:4px; }
.mj-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.mj-laps{ font-size:20px; }
.mj-last{ color:var(--c-muted); font-variant-numeric:tabular-nums; min-height:1em; }
.mj-fb{ color:var(--c-good); font-weight:700; min-height:1em; }
.mj-fb.bad, .mj-actions .bad{ color:var(--c-danger); }
.mj-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.mh-keys{ color:var(--c-muted); font-size:12px; }
.my-heat-pilot.mj-flash{ animation:mjFlash .35s ease-out; }
@keyframes mjFlash{ from{ box-shadow:0 0 0 4px var(--pc) inset; } to{ box-shadow:0 0 0 0 transparent inset; } }
@media (max-width:640px){ .my-heat-pilots{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .heat-chevron, .heat-card{ transition:none; }
}

/* шапка вкладки «Вылеты»: мероприятие и обновление в одну строку */
.heats-shell > .panel-head .panel-actions{ display:flex; flex-direction:row; align-items:center; gap:8px; flex-wrap:nowrap; }
.heats-shell > .panel-head .panel-actions select{ flex:1 1 220px; min-width:0; }
.heats-shell > .panel-head .panel-actions .icon-btn{ flex:0 0 auto; }
@media (min-width:641px){ .heats-setup{ grid-template-columns:minmax(280px,1fr) auto; } }
@media (max-width:640px){
  .heats-toolbar > b{ flex:1 1 100%; }
  .heats-toolbar > button{ flex:1 1 0; }
}