/*
  Controls & small utilities (extracted from compat/legacy.css)
  NOTE: Keep this file loaded AFTER /theme.css so it can safely override legacy rules.
*/

/* Компактные «пилюли» — плоские */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  white-space: nowrap;
  padding:.45rem .8rem; 
  border-radius: var(--fx-radius-pill, 999px);
  font-weight:600;
  background:var(--surface); border:1px solid var(--line);
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}
.pill:hover{
  background:color-mix(in srgb,var(--surface),var(--primary) 8%);
  border-color:color-mix(in srgb,var(--line),var(--primary) 30%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.pill.is-active{
  background:color-mix(in srgb,var(--primary),white 92%);
  border-color:color-mix(in srgb,var(--primary),white 70%);
  color:var(--bs-body-color);
}

/* компактные служебные пилюли статуса */
.pill--muted{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.62);
}

/* “есть действие” (регистрация кликабельна) */
.pill--success{
  background: rgba(25,135,84,.10);
  border-color: rgba(25,135,84,.22);
  color: rgba(25,135,84,.95);
}
.pill--success:hover{
  background: rgba(25,135,84,.14);
  border-color: rgba(25,135,84,.28);
  color: rgba(25,135,84,1);
}

/* Компактные сумм-чипы */
.sum-chip{
  border:1px solid var(--line);
  background: transparent !important;
  border-radius:999px; padding:.35rem .75rem; font-weight:700;
  color:var(--ink);
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--line);
  border-radius: 18px;
  transition: 0.2s;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--surface);
  border-radius: 50%;
  transition: 0.2s;
}

.switch-input:checked + .switch-slider {
  background-color: var(--primary);
}

/* Focus state for switches (accessibility) */
.switch-input:focus + .switch-slider {
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--focus), transparent 65%);
  outline: none;
}

.switch-input:checked + .switch-slider:before {
  transform: translateX(16px);
}

.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: inherit;
}

.icon-action:hover {
  text-decoration: none;
}

.icon-sm {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: currentColor;
}

.icon-btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--fx-radius); border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:var(--surface);
}
.icon-btn:hover{ background:rgba(255,255,255,.18); }

/* Компактная кнопка для админки (качество/отзывы) */
.sk-small-button {
  height: 24px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* ================================
   Состояния/бейджи
   ================================ */
.statebar{
  position:absolute; right:8px; left:auto; top:8px; font-size:.75rem;
  padding:.15rem .5rem; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); color:var(--muted);
}
.statebar.state-done{
  background:color-mix(in srgb,var(--ok),white 92%);
  color:color-mix(in srgb,var(--ok),black 22%);
}
.statebar.state-prog{
  background:color-mix(in srgb,var(--warn),white 94%);
  color:color-mix(in srgb,var(--warn),black 26%);
}
.statebar.state-new{
  background:color-mix(in srgb,var(--primary),white 92%);
  color:var(--bs-heading-color);
}

/* ================================
   Мелкие элементы
   ================================ */
.brand-badge{
  width:32px; height:32px; border-radius:var(--fx-radius);
  background:var(--primary); display:inline-flex; align-items:center; justify-content:center;
  color:var(--surface); box-shadow:none;
}
.container-narrow{ max-width:960px; }

/* Small utility to allow flex content to shrink inside containers (used on preview table TDs)
   This mirrors the `min-width:0` requirement commonly needed for flex children inside constrained parents. */
.min-w-0{ min-width: 0 !important; }
.badge-dot{
  position:absolute; top:2px; right:18px; width:8px; height:8px; border-radius:50%;
  background:var(--primary);
}
.badge-num{
  position:absolute; top:0; right:12px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--ink); color:var(--surface); font-size:11px; line-height:18px; text-align:center;
}
/* skeleton (empty for step 1) */