/* ═══════════════════════════════════════════════════════════════════════════
   ОБЩИЕ ЭЛЕМЕНТЫ СТРАНИЦЫ — правки по заметкам 10.09.2026
   Выпадающий список, выбор периода, свой календарь, окно загрузки файла,
   палитра графиков. Только токены дизайн-системы; теней нет; радиусы 6/7/6;
   контролы 29 px. Подключён после dash2.css — стили разделов (v-*.css)
   идут после и могут уточнять.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Палитра графиков с несколькими рядами (ui/chart.js → chartPalette) ──
   Порядок постоянный: акцент стиля → латунь → графит → серый. Бордо и изумруд
   не входят (только для смысла), синего и фиолетового нет. Ступени подобраны
   валидатором различимости: соседние пары ΔE ≥ 15 и при обычном, и при
   цветослабом зрении, контраст к фону карточки ≥ 3:1. */
html[data-style="pro"][data-theme="light"]{
  --chart-c1:var(--accent); --chart-c2:var(--mid); --chart-c3:var(--chart-line); --chart-c4:#8E8E93;
}
html[data-style="pro"][data-theme="dark"]{
  --chart-c1:var(--accent); --chart-c2:var(--mid); --chart-c3:#E6E6E8; --chart-c4:#7C7C81;
}
html[data-style="store"][data-theme="light"]{
  --chart-c1:var(--accent); --chart-c2:#96701A; --chart-c3:var(--chart-line); --chart-c4:#8E9099;
}
html[data-style="store"][data-theme="dark"]{
  --chart-c1:var(--accent); --chart-c2:#B8893A; --chart-c3:var(--chart-line); --chart-c4:#737884;
}

/* ── Свой выпадающий список (ui/select.js) ─────────────────────────────── */
/* Шрифт кнопки — шрифт сайта. В components.css стояло «font:12.5px/1 inherit»:
   такую запись браузер выбрасывает целиком, и кнопка брала Arial 13,3 px. */
.xsel-btn{
  font-family:inherit;font-size:12.5px;line-height:1;font-weight:400;letter-spacing:0;
}
.xsel-btn:focus-visible{outline:1px solid var(--accent);outline-offset:0;border-color:var(--accent)}
/* Меню: без тени, рамка как у карточки, не выше ~12 строк, прокрутка внутри
   меню не уходит на страницу (иначе страница поедет и закроет меню). */
.xsel-pop{
  box-shadow:none;border-color:var(--edge,var(--hair-2));
  max-height:340px;overscroll-behavior:contain;font-family:inherit;
  /* Меню не наследует жирность обёртки (у «.pbar-sel.on» она 600). */
  font-weight:400;
}
.xsel-opt.kb{background:var(--surface-3)}
/* Граница года в списке месяцев — тонкая линия над первым месяцем нового года. */
.xsel-opt.sep{margin-top:7px}
.xsel-opt.sep::after{
  content:"";position:absolute;left:6px;right:6px;top:-4px;border-top:1px solid var(--hair-2);
  pointer-events:none;
}

/* ── Выбор периода «Месяц ▾ │ Период ▾ — ▾» (ui/period.js) ───────────────── */
/* Кнопка месяца одной ширины и при «—», и при «Сентябрь 2026»: ряд не прыгает. */
.mrpick .xsel-btn{min-width:128px}
.mrpick .xsel.mrpick-month .xsel-btn{min-width:136px}
/* Внутри панели Показателей компонент встаёт в строку без своего отступа. */
.pbar .mrpick,.pbar-row > .mrpick{margin:0}
.pbar-pick{gap:8px}
.pbar-presets{display:inline-flex;gap:6px;flex-wrap:wrap;margin-right:6px}
.btn.pbar-go{height:29px}

/* ── Свой календарь (ui/calendar.js) ───────────────────────────────────── */
.xdate{position:relative;display:inline-flex;vertical-align:middle;max-width:100%}
.xdate.block{display:flex;width:100%}
/* Родное поле остаётся в разметке и хранит значение, но его не видно.
   !important — чтобы не перебили правила форм («.modal .form-field input»). */
.xdate > input{
  position:absolute !important;left:0 !important;top:0 !important;
  width:1px !important;height:1px !important;min-width:0 !important;
  opacity:0 !important;pointer-events:none !important;
  margin:0 !important;padding:0 !important;border:0 !important;
}
.xdate-btn{
  height:29px;padding:0 30px 0 10px;box-sizing:border-box;
  font-family:inherit;font-size:12.5px;line-height:1;font-weight:400;letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--text-1);
  background:var(--surface-2);border:1px solid var(--hair-2);border-radius:var(--radius-ctrl);
  cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;position:relative;
  max-width:100%;min-width:112px;
}
.xdate.block .xdate-btn{width:100%}
.xdate.with-time .xdate-btn{min-width:150px}
.xdate-btn.empty .xdate-txt{color:var(--text-3)}
.xdate-btn svg{
  position:absolute;right:9px;top:50%;width:14px;height:14px;transform:translateY(-50%);
  fill:none;stroke:var(--text-3);stroke-width:1.6;stroke-linecap:round;
}
.xdate-btn:hover{border-color:var(--text-3)}
.xdate-btn:disabled{opacity:.55;cursor:default}
.xdate-btn:focus-visible{outline:1px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.xdate.open .xdate-btn{border-color:var(--accent);outline:1px solid var(--accent);outline-offset:0}

.xdate-pop{
  position:fixed;z-index:2400;width:248px;box-sizing:border-box;padding:8px;
  background:var(--surface-2);border:1px solid var(--edge,var(--hair-2));
  border-radius:var(--radius-card);box-shadow:none;
  font-family:inherit;color:var(--text-1);cursor:default;
}
.xdate-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px}
.xdate-title{font-size:12.5px;font-weight:600;color:var(--text-1)}
.xdate-nav{
  width:29px;height:29px;flex:none;display:grid;place-items:center;
  font-family:inherit;font-size:17px;line-height:1;color:var(--text-2);
  background:transparent;border:1px solid transparent;border-radius:var(--radius-ctrl);cursor:pointer;
}
.xdate-nav:hover{background:var(--surface-3);color:var(--text-1)}
.xdate-nav:focus-visible{outline:1px solid var(--accent);outline-offset:0}
.xdate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.xdate-wd{
  height:22px;line-height:22px;text-align:center;
  font-size:10.5px;font-weight:600;color:var(--text-3);
}
.xdate-day{
  height:29px;padding:0;font-family:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--text-1);background:transparent;border:1px solid transparent;
  border-radius:var(--radius-chip);cursor:pointer;
}
.xdate-day:hover{background:var(--surface-3)}
.xdate-day.out{color:var(--text-3)}
.xdate-day.today{border-color:var(--accent)}
.xdate-day.on,.xdate-day.on:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.xdate-day.kb{outline:1px solid var(--accent);outline-offset:-3px}
.xdate-day:disabled{color:var(--text-3);opacity:.45;cursor:default;background:transparent}
.xdate-day:focus-visible{outline:1px solid var(--accent);outline-offset:-3px}
.xdate-time{
  display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--hair);font-size:12px;color:var(--text-2);
}
.xdate-time input,
.modal .form-field .xdate-time input{
  width:72px;height:29px;box-sizing:border-box;padding:0 8px;
  font-family:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text-1);
  background:var(--surface-2);border:1px solid var(--hair-2);border-radius:var(--radius-ctrl);outline:none;
}
.xdate-time input:focus{border-color:var(--accent)}
.xdate-time input.bad{border-color:var(--loss)}
.xdate-foot{
  display:flex;justify-content:space-between;gap:6px;margin-top:8px;padding-top:8px;
  border-top:1px solid var(--hair);
}
.xdate-link{
  height:26px;padding:0 9px;font-family:inherit;font-size:12px;color:var(--text-1);
  background:var(--surface-2);border:1px solid var(--hair-2);border-radius:var(--radius-ctrl);cursor:pointer;
}
.xdate-link:hover{background:var(--surface-3)}
.xdate-link:disabled{opacity:.5;cursor:default}

/* ── Окно загрузки файла (ui/upload.js) ────────────────────────────────── */
.modal.modal-upload{max-width:min(460px,94vw)}
.xup .modal-head{padding:12px 14px 12px 18px}
.xup .modal-head h2{font-size:15px;font-weight:600}
.xup .modal-body.xup-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.xup .modal-foot{padding:12px 18px;margin-top:0}
.xup button.modal-close{padding:0;font-family:inherit}

/* Рамка выбора файла — и в общем окне, и в окнах разделов (наблюдатель
   подменяет их поля выбора файла сам). */
.xup-drop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:128px;box-sizing:border-box;padding:18px 16px;
  border:1px dashed var(--hair-2);border-radius:var(--radius-card);
  background:var(--surface-1);text-align:center;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.xup-drop:hover{border-color:var(--text-3)}
.xup-drop.drag{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.xup-drop.has-file{border-style:solid;border-color:var(--hair-2)}
.xup-lead{font-size:12.5px;line-height:1.45;color:var(--text-2);max-width:100%}
.xup-drop .btn.xup-pick{height:29px}
.xup-drop .btn.xup-pick:focus-visible{outline:1px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.xup-name{
  display:flex;align-items:baseline;justify-content:center;gap:8px;max-width:100%;min-width:0;
  font-size:12.5px;line-height:1.3;
}
.xup-fname{font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.xup-fmeta{flex:none;color:var(--text-3);font-variant-numeric:tabular-nums}
.xup-drop > input.xup-native,
.modal .form-field .xup-drop > input.xup-native{
  position:absolute !important;left:0 !important;top:0 !important;
  width:1px !important;height:1px !important;min-width:0 !important;
  opacity:0 !important;pointer-events:none !important;overflow:hidden;
  margin:0 !important;padding:0 !important;border:0 !important;
}
.modal .form-field .xup-drop{min-height:112px;width:100%}

.xup-fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.xup-field{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.xup-field .inp{height:29px;box-sizing:border-box;font-size:12.5px}
.xup-check{font-size:12.5px;color:var(--text-1)}
.xup-note{font-size:12px;line-height:1.4;color:var(--text-3);margin-top:-4px}
.xup-err{font-size:12.5px}
.xup-memo{font-size:12px;line-height:1.45;color:var(--text-2);margin-top:-4px}

/* ── Раздел «Загрузка склада» (app.js → renderStockLoadPage) ───────────── */
.stockload-bar{justify-content:flex-end;margin-bottom:12px}
/* Кнопка загрузки остатков — в шапке первого блока, справа. */
.tblock-head .btn.stockload-up{flex:0 0 auto;margin-left:12px;height:24px;padding:0 11px;font-size:12px}

/* Атрибут hidden должен прятать и кнопку: у .btn свой display:inline-flex,
   и без этого правила скрытая «Всё равно загрузить» оставалась на экране. */
.btn[hidden],.xup [hidden],.xup-drop [hidden],.xdate [hidden]{display:none !important}
/* Окна разделов с выбором файла (свои окна Показателей, остатков, Документов)
   — той же ширины, что общее окно загрузки. */
.modal:has(.xup-drop){max-width:min(460px,94vw)}

/* Кнопка-действие прямо в шапке блока (Продажи → Загрузки, Поддоны):
   компактная, по центру шапки и прижата вправо. Полные 29 px «висели» на
   верхней линии шапки высотой 30 px, а после снятия приписки кнопка
   вставала сразу за заголовком. 11.09.2026. */
.tblock-head > .btn{flex:0 0 auto;height:24px;min-height:24px;padding:0 11px;font-size:12px;line-height:1;margin-left:auto}
.tblock-head > .th-note ~ .btn{margin-left:10px}