/* ====== Design tokens (light=default, dark override) ====== */
:root{
  /* LIGHT (по умолчанию) */
  --bg:#f5f7fb; --bg-2:#eef1f7;
  --surface:#ffffff; --elev:#f2f4f8;
  --text:#0b1220; --muted:#6b7280;
  --ring:#0a84ff;
  --ok:#22c55e; --warn:#c98a18; --danger:#ef4444;

  /* универсальные линии (бордеры) для светлой темы */
  --line-weak: rgba(0,0,0,.06);
  --line:      rgba(0,0,0,.12);
  --line-strong:rgba(0,0,0,.18);

  --radius:14px; --radius-pill:18px;
  --shadow:0 10px 24px -16px rgba(0,0,0,.25);
  --control-h:44px; --px:14px;
}

/* DARK — полностью переопределяем фон, текст и линии */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0e1116; --bg-2:#0b0f1a;
    --surface:#111827; --elev:#141b2a;
    --text:#e5e7eb; --muted:#9ca3af;

    /* линии для тёмной темы */
    --line-weak: rgba(255,255,255,.06);
    --line:      rgba(255,255,255,.12);
    --line-strong:rgba(255,255,255,.18);

    --ring:#0a84ff;
    --shadow:0 10px 22px -16px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Segoe UI,Roboto,Inter,Arial;
  -webkit-font-smoothing:antialiased;
}

/* ====== Top bar (frosted) ====== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px;
  background:color-mix(in srgb, #ffffff 4%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line-weak);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}

.brand-logo{
  /* всегда квадрат, чуть больше текста */
  inline-size: 1.9em;
  block-size: 1.9em;

  /* белый фон внутри квадрата */
  background: #ffffff;

  /* лёгкие скругления по-яблочному (если хочешь строго квадрат — поставь 0) */
  border-radius: 8px;

  /* чтобы внутри логотип не обрезался и имел «воздух» */
  padding: 0px;
  box-sizing: border-box;

  /* сам пиктограммы подгоняем по краям, без деформации */
  object-fit: contain;

  /* тонкая рамка, чтобы квадрат читался и на светлой теме */
  border: 1px solid var(--line);

  /* не даём блоку тянуться/сжиматься в флексе */
  flex: 0 0 auto;

  /* сглаживание */
  image-rendering: auto;
}

.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.select{display:flex; align-items:center; gap:10px}

/* ====== Unify controls ====== */
select{
  height:var(--control-h);
  padding:0 calc(var(--px) + 18px) 0 var(--px); /* место под стрелку справа */
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
  outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 0 transparent;
  transition:border-color .2s, box-shadow .2s, transform .08s ease-out;
}
select:focus-visible{
  border-color:color-mix(in srgb, var(--ring) 50%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

/* ====== Buttons (Apple-like minimal) ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:var(--control-h);
  padding:0 var(--px);
  border-radius:var(--radius-pill);
  border:1px solid var(--line);        /* <-- тема-зависимая рамка */
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  transition:transform .08s ease, box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover{
  background:var(--elev);
  border-color:var(--line-strong);
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn:focus-visible{
  outline:none;
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

/* header button exact same size as select */
.topbar .btn{ height:var(--control-h); }

/* Variants — контуры и цвет текста */
.btn.primary{ background:var(--surface); color:var(--text); }
.btn.success{
  color:var(--ok);
  border-color:color-mix(in srgb, var(--ok) 55%, transparent);
}
.btn.warn{
  color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 55%, transparent);
}
.btn.danger{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 55%, transparent);
}

/* ====== Board / columns ====== */
.board{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:18px;
  padding:18px; max-width:1200px; margin:0 auto;
}
.column{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--line-weak);
  border-radius:16px; box-shadow:var(--shadow);
  padding:12px;
}
.column h2{margin:4px 8px 10px; font-size:18px}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; min-height:52px}

.item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; border-radius:12px; background:var(--surface); border:1px solid var(--line-weak);
}
.item .left{display:flex; gap:12px; align-items:center; min-width:0}
.item .title{font-weight:600; word-break:break-word}
.item .meta{font-size:12px; color:var(--muted); margin-top:2px}

/* ====== Pretty checkbox (single, refined) ====== */
/* ====== Pretty checkbox (square, non-shrink) ====== */
.item .check{
  -webkit-appearance:none;
  appearance:none;

  /* фиксируем размер в флексе */
  flex: 0 0 20px;            /* flex-grow:0; flex-shrink:0; flex-basis:20px */
  inline-size:20px;          /* логическая ширина */
  block-size:20px;           /* логическая высота */
  min-inline-size:20px;
  min-block-size:20px;
  aspect-ratio:1 / 1;        /* гарантирует квадратность */
  box-sizing:border-box;

  border-radius:6px;
  margin:0;
  border:1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  background:var(--surface);
  display:inline-grid;       /* не даём занять лишнее */
  place-content:center;
  transition:border-color .18s, background .18s, box-shadow .18s, transform .08s ease;
}

/* аккуратная галочка как маска SVG */
.item .check::after{
  content:"";
  inline-size:10px;          /* было 12 — делаем чуть изящнее */
  block-size:10px;
  background:#fff;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M20 7 L10 17 L4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M20 7 L10 17 L4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") center/contain no-repeat;
  transform:scale(0);
  transition:transform .16s ease;
}

.item .check:checked{
  background:linear-gradient(180deg, color-mix(in srgb, var(--ok) 92%, #fff 8%), var(--ok));
  border-color:color-mix(in srgb, var(--ok) 80%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 20%, transparent);
}
.item .check:checked::after{ transform:scale(1); }

.item .check:hover{ box-shadow:0 2px 8px -6px rgba(0,0,0,.25); }
.item .check:active{ transform:translateY(1px) }
.item .check:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
  border-color:color-mix(in srgb, var(--ring) 50%, transparent);
}

/* Кнопка "ещё" — всегда квадратная, без влияния шрифта */
/* Кнопка "ещё" — всегда квадрат и идеально по центру */
.item .more{
  -webkit-appearance:none;
  appearance:none;

  /* фиксируем размер */
  flex: 0 0 36px;
  inline-size:36px;
  block-size:36px;
  min-inline-size:36px;
  min-block-size:36px;
  aspect-ratio:1 / 1;
  box-sizing:border-box;

  padding:0;
  border-radius:12px;
  border:1px solid var(--line-weak);
  background:transparent;
  color:var(--text);
  cursor:pointer;

  /* идеальное центрирование */
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;          /* не тянуть по базовой линии */
  font-size:0;            /* скрываем текст символа, используем иконку */

  transition:background .15s, transform .08s, border-color .2s, box-shadow .2s;
}
.item .more:hover{ background:rgba(0,0,0,.03); border-color:var(--line); }
.item .more:active{ transform:translateY(1px); }

/* Иконка "три точки" */
.item .more::before{
  content:"";
  inline-size:16px;
  block-size:16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <circle cx='5' cy='12' r='2'/>\
  <circle cx='12' cy='12' r='2'/>\
  <circle cx='19' cy='12' r='2'/>\
</svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <circle cx='5' cy='12' r='2'/>\
  <circle cx='12' cy='12' r='2'/>\
  <circle cx='19' cy='12' r='2'/>\
</svg>") center/contain no-repeat;

  /* если оптически чуть выше — смени на 0.5px */
  transform: translateY(0.25px);
}

/* ====== Dialogs ====== */
dialog{
  border:none; border-radius:18px; background:var(--surface); color:var(--text);
  padding:20px; width:min(520px,92vw); box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
dialog::backdrop{background:rgba(0,0,0,.55)}
.field input{
  height:var(--control-h);
  padding:0 var(--px);
  border-radius:var(--radius-pill);
  background:var(--elev);
  border:1px solid var(--line);
  color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus-visible{
  border-color:color-mix(in srgb, var(--ring) 50%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

/* Dialog menus */
menu{display:flex; gap:10px; justify-content:flex-end; padding:0; margin-top:16px}
.menu-vertical{display:flex; flex-direction:column; align-items:stretch; gap:12px}
.menu-vertical .btn{ width:100%; }

/* ====== Footer ====== */
.footer{padding:14px 18px; color:var(--muted); text-align:center; border-top:1px solid var(--line-weak)}
a{color:#0ea5a4}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *{transition:none !important}
}

/* === Add Dialog (compact, airy, no duplicates) === */

/* техническое: контейнер автокомплита */
.autocomplete{ position: relative; }

/* общий вид модалки и «воздух» */
#addDialog{
  width: min(700px, 94vw);
  padding-block: 36px 34px;   /* верх / низ — побольше воздуха */
  padding-inline: 28px;       /* боковые отступы умеренные */
  overflow: visible;          /* чтобы дропдаун не обрезался */
}

/* блок поля — нормальный зазор сверху */
#addDialog .field{
  margin: 16px 0 0;
  gap: 10px;
}

/* подписи над полями: "Товар" и "Кол-во" */
#addDialog .field .row-head{
  display:grid;
  grid-template-columns: 1fr 92px; /* ширины точно как у полей: товар = 1fr, qty = 92px */
  gap:12px;
  align-items:end;
  margin:0 0 4px;
}
#addDialog .field .row-head label{
  font-size:14px;
  color:var(--muted);
  padding:0 2px;
  text-align:center;
  width:100%; 
}

/* ИНПУТ — нормальный размер, как "нравилось" */
#addDialog .field .autocomplete{ display:block; width:100%; }
#addDialog .field .autocomplete input{
  width: 100%;
  height: 56px;         /* ← ключ: вернуть удобную высоту */
  font-size: 16px;
}

/* ПОДСКАЗКИ: показываем ровно 3 позиции, скроллится только список */
:root { --suggest-item-h: 56px; }  /* высота одной строки списка */

#addDialog .suggestions{
  position:absolute; z-index:9999; left:0; right:0;
  top: calc(100% + 8px);
  list-style:none; margin:0; padding:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 32px -18px rgba(0,0,0,.35);

  max-height: calc(var(--suggest-item-h) * 3); /* ровно 3 строки */
  overflow-y: auto;
  overscroll-behavior: contain; /* колесо/свайп не прокручивает модалку */
  display:none;
}
#addDialog .suggestions.show{ display:block; }

#addDialog .suggestions li{
  min-height: var(--suggest-item-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  font-size:15px; line-height:1.3;
  border-radius:10px; cursor:pointer;
}
#addDialog .suggestions li:hover,
#addDialog .suggestions li[aria-selected="true"]{
  background:var(--elev);
}
#addDialog .suggestions .small{
  font-size:12px; color:var(--muted);
}

#addDialog .suggestions{
  -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
}

/* правая часть растягивается и прижимается вправо */
.topbar .controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  min-width:0;                /* чтобы select не выталкивал кнопку */
}

/* лейбл "Магазин" + select компактно и в одну строку */
.topbar .select{
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  flex:1 1 auto;
}
.topbar .select select{
  flex:0 1 52vw;              /* может сжиматься на узких экранах */
  max-width:52vw;
  min-width:120px;
}

/* кнопка "Добавить" не даёт перенестись и остаётся читабельной */
#addBtn{
  flex:0 0 auto;
  padding:0 14px;             /* компактнее на мобиле */
}

/* — Мобайл-тюнинг — */
@media (max-width: 480px){
  .topbar{ padding:10px 12px; gap:10px; }
  .brand-logo{ inline-size:26px; block-size:26px; }
  .topbar .select select{ max-width: 48vw; }
  #addBtn{ padding:0 12px; }
}

/* Если где-то осталось .brand span — скрыть на всякий случай */
.brand span{ display:none !important; }

/* ===== Quantity badge near item title ===== */
.badge-qty {
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  color:var(--text);
  background:color-mix(in srgb, var(--ring) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--ring) 50%, transparent);
  border-radius:8px;
  vertical-align:middle;
  min-width: 28px;
  text-align:center;
}

/* ——— Поле "товар + количество" в одной строке ——— */
#addDialog .field .row{
  display:grid;
  grid-template-columns: 1fr auto;  /* товар растягивается, qty — компактно */
  gap:12px;
  align-items:center;
}

/* высота qty как у поля товара в модалке */
#addDialog .qty-input{
  height:56px;       /* у поля товара тоже 56px */
  width:92px;
  text-align:center;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--elev);
  color:var(--text);
  font-size:16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#addDialog .qty-input:focus-visible{
  border-color: color-mix(in srgb, var(--ring) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

#addDialog .qty-input::-webkit-outer-spin-button,
#addDialog .qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#addDialog .qty-input{ -moz-appearance: textfield; }

/* Кнопки по центру под полем */
#addDialog menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

/* выравниваем высоту поля товара на всякий */
#addDialog .autocomplete > input{
  height:56px;
}

/* ——— Мобилка/узкие экраны: лейблы и поля в колонку ——— */
@media (max-width: 700px) {
  /* лейблы: каждая подпись над своим полем */
  #addDialog .field .row-head{
    grid-template-columns: 1fr;     /* один столбец: "Товар" сверху, потом "Кол-во" */
    grid-auto-rows: auto;
    gap: 6px;
  }
  #addDialog .field .row-head label{
    display:block;
    text-align:left;
    justify-self:start;
  }

  /* поля: тоже в одну колонку — сначала поле товара, ниже поле количества */
  #addDialog .field .row{
    grid-template-columns: 1fr;     /* один столбец */
    gap: 10px;
  }

  #addDialog .qty-input{
    width: 100%;
    max-width: 100%;
    justify-self: stretch;          /* растянуть по сетке */
  }
}

/* —— Мобилка/узкие экраны: лейблы сидят над своими полями — */
@media (max-width: 700px) {
  /* превращаем .field в единую сетку из 4 строк */
  #addDialog .field{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "labelTitle"
      "inputTitle"
      "labelQty"
      "inputQty";
    row-gap: 8px;
    margin-top: 16px;
  }

  /* разворачиваем внутренние контейнеры в "сквозной" поток */
  #addDialog .field .row-head,
  #addDialog .field .row{
    display: contents; /* дети примут области сетки field */
  }

  /* назначаем области */
  #addDialog .field .row-head label:first-child { grid-area: labelTitle; }
  #addDialog .field .row-head label:last-child  { grid-area: labelQty;  }
  #addDialog .field .autocomplete               { grid-area: inputTitle; }
  #addDialog .field .qty-input                  { grid-area: inputQty;   }

  /* ширина элементов на мобилке */
  #addDialog .field .autocomplete input { width: 100%; height: 56px; }
  #addDialog .qty-input{
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    height: 56px;
  }
}