/* ===== THEME ===== */
/* === FONT (опционально подключи Inter, см. пункт 2) === */
/* если Inter не подключён, просто останется system-ui */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  transition:background .25s ease, color .25s ease;
}

/* ===== THEME (новая палитра в духе «фиолетовый + графит») ===== */
:root{
  /* Dark */
  --bg:#0b0f18;          /* общий фон */
  --card:#101522;        /* фон карточек/топбара (чуть светлее фона) */
  --border:#20283a;      /* мягкая граница */
  --field:#0d1220;       /* поля ввода */
  --text:#e8eaf2;        /* основной текст */
  --muted:#9aa4b2;       /* подписи */

  --accent:#7c3aed;      /* фиолетовый акцент */
  --accent-weak:#171a2b; /* внутренние блоки (серо-индиговый) */
  --ok:#22c55e;
  --danger:#ef5f66;

  --chip:#171a2b;
  --shadow:0 14px 36px rgba(0,0,0,.45);

  /* доп. тонкости для скроллбаров/ховеров (переиспользуются ниже) */
  --scr-track:transparent;
  --scr-thumb:#2a3145;
  --scr-thumb-hover:#343c56;
}

body.light{
  /* Light */
  --bg:#f7f7fb;
  --card:#ffffff;
  --border:#e6e8ef;
  --field:#f8f9ff;
  --text:#101418;
  --muted:#6b7280;

  --accent:#7c3aed;
  --accent-weak:#ede9fe; /* violet-100 */
  --chip:#f4f0ff;

  --shadow:0 12px 28px rgba(16,24,40,.06);

  --scr-track:transparent;
  --scr-thumb:#cfd5e4;
  --scr-thumb-hover:#bfc7db;
}

/* === Base reset & control sizing ======================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }

/* единая высота контролов */
:root {
  --ctl-h: 38px;        /* базовая высота полей и селектов */
  --radius: 10px;       /* скругление по умолчанию */
}

/* наследуем шрифт для форм и выравниваем размеры */
input, select, textarea, button { font: inherit; }

/* однострочные поля: текстовые инпуты и селекты одинаковой высоты */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select {
  height: var(--ctl-h);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  line-height: calc(var(--ctl-h) - 2px); /* визуально центрирует текст */
}

/* многострочные не фиксируем по высоте */
textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--text);
  min-height: 84px;
  line-height: 1.4;
}

/* поля внутри твоих рядов/сеток тянут на всю ширину колонки */
.row input, .row select,
.grid2 input, .grid2 select {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}


.hidden{display:none}

.container{
  max-width:1050px;
  margin:20px auto;
  padding:0 16px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.subcard{
  border-radius:12px;
  padding:12px;
  background:var(--accent-weak);
  margin-top:10px;
  position:relative;
}

.row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin:8px 0;
}
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.grid-col{
  background:var(--accent-weak);
  border-radius:12px;
  padding:12px;
}

/* выравниваем высоту всех блоков шага 2 */
.grid-col,
.sys-table-wrap,
.sys-form{
  min-height:260px;
}

.grid-col h3{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
}

label{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

/* Заголовки — единый вид */
h2{
  margin:0 0 12px;
  font-weight:700;
  letter-spacing:.01em;
}
h3{
  margin:0 0 8px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--muted);
}


/* ===== topbar ===== */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--card);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:var(--shadow);
}
.brand{
  font-weight:700;
  font-size:15px;
  margin-right:0;
}
.actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.iconbtn{
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s ease,filter .15s ease,transform .05s ease;
}
.iconbtn:hover{
  filter:brightness(1.06);
  transform:translateY(-0.5px);
}
.iconbtn.danger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
.iconbtn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.userbox{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:8px;
  border-left:1px solid var(--border);
}
.userbox img{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
}
.user-meta{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.user-meta .name a{
  color:var(--text);
  text-decoration:none;
}
.user-meta .name a:hover{text-decoration:underline}
.user-meta .role{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* readonly оставляем как было */
input[readonly]{opacity:.9}



input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent) inset; /* внутренняя обводка */
}


/* фикс, чтобы Chrome-автозаполнение не делало белый фон */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--field) inset;
  box-shadow:0 0 0 1000px var(--field) inset;
  -webkit-text-fill-color:var(--text);
}

button{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:background .15s ease,filter .15s ease,transform .05s ease;
}
button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
button.secondary{
  background:rgba(255,255,255,.06);
  border-color:var(--border);
  color:var(--text);
}
button.secondary:hover{
  background:rgba(255,255,255,.10);
}

button.danger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
button:hover{
  filter:brightness(1.05);
  transform:translateY(-0.5px);
}

/* подсветка ошибок */
.field-error{
  border-color:#f97373 !important;
  box-shadow:0 0 0 1px rgba(249,115,115,.35);
}

/* Фиолетовая кнопка у file-input */
input[type=file]{
  width:100%;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--field);
  color:var(--muted);
}
input[type=file]::file-selector-button{
  margin-right:10px;
  border:0;
  border-radius:8px;
  padding:8px 12px;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
input[type=file]::file-selector-button:hover{
  filter:brightness(1.05);
}

/* ===== generic table + scrollbar ===== */
.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.tbl th,.tbl td{
  border-bottom:1px solid var(--border);
  padding:8px;
}

/* План коррекции S2T: избегаем горизонтального скролла (переносим длинные значения) */
#enPlanModal .tbl th,
#enPlanModal .tbl td{
  white-space:normal;
  word-break:break-word;
}
.tbl tr:last-child td{border-bottom:none}

.scrolly{
  overflow:auto;
  border-radius:10px;
}
/* Единые скроллбары */
.scrolly{
  overflow:auto;
  border-radius:10px;
  scrollbar-color: var(--scr-thumb) var(--scr-track); /* Firefox */
  scrollbar-width: thin;                               /* Firefox */
}

/* WebKit */
.scrolly::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.scrolly::-webkit-scrollbar-thumb{
  background: var(--scr-thumb);
  border-radius:10px;
  border:2px solid transparent;
  background-clip:content-box;
}
.scrolly:hover::-webkit-scrollbar-thumb{
  background: var(--scr-thumb-hover);
}
.scrolly::-webkit-scrollbar-track{
  background: var(--scr-track);
}


/* ===== STEP 2: Параметры S2T ===== */

/* флаги SQL / S2T / Поля вне DTO */
.gen-flags label{
  margin-left:8px;
  font-size:13px;
  color:var(--muted);
}
.gen-flags input{
  margin-right:4px;
}
.flag-disabled{
  opacity:.4;
  pointer-events:none;
}

/* сетка системных полей */
.sys-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
  margin-top:16px; /* зазор между блоками "Источник/Таргет" и таблицей/формой */
}

/* ОБЩАЯ обёртка таблицы: рамка по ширине колонки */
.sys-table-wrap{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--accent-weak);
  display:flex;
  flex-direction:column;
}

/* шапка таблицы — фиксирована сверху, без скролла */
.sys-table-head .tbl{
  margin:0;
  border:0;
  border-radius:12px 12px 0 0;
}

/* тело таблицы скроллится, шапка остаётся на месте — старый рабочий фикс */
.sys-table-body{
  flex:1;
  max-height:245px;      /* прокрутка ровно до нижней границы блока */
  margin-bottom:-1px;    /* компенсирует нижний border */
}
.sys-table-body.scrolly{
  border-radius:0 0 12px 12px;
}
.sys-table-body .tbl{
  margin:0;
  border:0;
  border-radius:0 0 12px 12px;
}

.sys-name{
  display:flex;
  align-items:center;
  gap:8px;
}
.sys-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12px;
  opacity:.9;
}
.sys-type-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.sys-type-wrap select{ flex:1; min-width:0; }

.sys-form{
  background:var(--accent-weak);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
}
.sys-form .placeholder{
  margin:auto;
  color:var(--muted);
  font-weight:600;
}

/* Серый и неактивный блок при снятом S2T */
.sys-disabled{
  opacity:.55;
  filter:grayscale(.6);
  pointer-events:none;
}

/* ===== STEP 3: Complex variant ===== */

/* подпись "Внутреннее ветвление" — НЕ жирная */
.variant .split-caption{
  font-weight:400;
  color:var(--muted);
  margin:6px 0 4px;
}

/* новая сетка: слева split-path + кнопка, справа карта значений */
.split-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:10px;
}

/* левая колонка под сплит-путь */
.split-left{
  display:flex;
  flex-direction:column;
}

/* строка: select + AutoSplit на одной линии */
.split-line{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ширина select такая же, как у Ref (вся левая колонка минус место под кнопку) */
.split-line .v-split{
  flex:1;
}

/* правый блок — карта значений, поднимаем так,
   чтобы заголовки были ближе к подписи "Внутреннее ветвление..." */
.split-right{
  margin-top:-36px; /* поднимаем карту значений к уровню "Внутреннее ветвление" */
}


/* AutoSplit — обычная фиолетовая кнопка */
.fill-enum{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  line-height:1;
  box-shadow:var(--shadow);
}

/* Карточка значений */
.map-card {
  background: var(--accent-weak);
  border-radius: 12px;
  padding: 10px;
  margin-top: 0;
  overflow: visible; /* чтобы фиолетовый outline не обрезался */
  position: relative; /* для корректного рендеринга внутри flex */
  isolation: isolate; /* предотвращает «смешивание» тени/обводки */
}

.map-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.map-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow:auto;
}
.map-row{
  display:grid;
  grid-template-columns:1fr 36px 1fr;
  gap:10px;
  align-items:center;
}
.map-row .rm{
  width:36px;
  height:36px;
  border-radius:8px;
}
.map-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.btn-plus{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ok);
  border:1px solid var(--ok);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:0;
}

/* кнопка удаления варианта */
.variant .rm-variant{
  border-radius:10px;
  padding:8px 14px;
  margin-top:8px;
}

/* ===== chips ===== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--chip);
  color:#4c1d95;
  border:1px solid var(--border);
  font-size:12px;
}
body:not(.light) .chip{
  color:#c9c6ff;
}

/* --- header tweaks --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.05) blur(6px);
}
.topbar .brand { color: var(--text); text-decoration: none; font-weight: 700; }
.topbar .navlinks{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:14px;
  margin-right:auto;
}
.chip.active{
  border-color: var(--accent);
  background: var(--accent-weak);
}

.userbox { display: flex; align-items: center; gap: 12px; }
.userbox img { width: 28px; height: 28px; border-radius: 999px; }
.userbox .name a { color: var(--text); text-decoration: none; font-weight: 600; }
.userbox .role { font-size: 12px; color: var(--muted); line-height: 1; }
.hidden { display: none !important; }

/* таблицы — чтобы не ломалась сетка в админке */
.tablewrap { overflow: auto; }
.tbl .chip {
  display:inline-block; padding:4px 8px; border-radius:8px; border:1px solid var(--border);
  text-decoration:none; color:var(--text); margin-right:6px;
}

/* --- Profile layout --- */
.profile-grid{ display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:flex-start; }
.avatar-card{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.avatar-wrap{ width:320px; height:320px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--accent-weak); }
.info-list, .stats{ width:320px; }
.stats{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:8px; }

/* кнопка-карандаш поверх аватарки */
.avatar-edit{
  position:absolute; right:10px; bottom:10px;
  border:1px solid var(--border); background:var(--card);
  border-radius:999px; padding:8px 10px; line-height:1; cursor:pointer;
  box-shadow:var(--shadow);
}
.avatar-wrap{ position:relative; }
.avatar-edit:hover{ transform:scale(1.05); }

/* модалка кроппера (общие стили) */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:100; }
.modal.show{ display:flex; }
.modal-box{ width:min(92vw,720px); background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow); }

/* === Wide modal (Авторелиз) === */
.modal-open{ overflow:hidden; }
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:120; padding:18px; }
.modal-overlay.hidden{ display:none; }
.modal-panel{ background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); width:min(98vw,1280px); max-height:92vh; display:flex; flex-direction:column; }
.modal-wide{ width:min(98vw,1600px); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:14px 14px 10px; border-bottom:1px solid var(--border); }
.modal-title{ font-weight:800; font-size:18px; }
.modal-actions{ display:flex; gap:8px; }
.modal-body{ padding:12px 14px 16px; overflow:auto; }

.pillbar{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.04); font-size:12px; }
.pill.active{ border-color:rgba(168,85,247,.8); box-shadow:0 0 0 3px rgba(168,85,247,.16); }

.table-wide-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; }
.table-wide-wrap .tbl{ min-width:1100px; }

.badge{ display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; font-weight:700; }
.badge.ok{ border-color:rgba(34,197,94,.65); }
.badge.warn{ border-color:rgba(251,191,36,.75); }
.badge.bad{ border-color:rgba(239,68,68,.75); }
.crop-area{ position:relative; width:100%; padding-top:56%; background:#111; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.crop-canvas{ position:absolute; inset:0; touch-action:none; cursor:grab; }
.ctrls{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:10px; }
.range{ width:220px; }

/* унификация вида метрик/блоков на всех страницах */
.stat, .metric {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* ЛК как на «Шагах»: внутренние блоки светлее */
.info-card, .card-tight {
  background: var(--accent-weak);
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* Подправим внутренние отступы в левой инфо-карточке */
.info-card .row{
  padding: 7px 8px;              /* было 6px 0 — чуть больше горизонтальный паддинг */
}
.info-card .row > span:first-child{
  padding-left: 2px;              /* лёгкий визуальный выравниватель */
}


/* ==== STEP 3 — стабилизация верстки ==== */

/* 1) Гарантируем сжатие обеих колонок в гриде варианта */
.variant .grid2,
.variant .split-row{
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: start;
}
.variant .grid2 > div,
.variant .split-left,
.variant .split-right{
  min-width: 0; /* критично, иначе колонки «распирает» */
}

/* 2) Строка split: селект тянется, кнопка не переносится */
.variant .split-line{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.variant .split-line .v-split{
  flex: 1 1 0%;
  min-width: 0; /* разрешаем сжатие селекта внутри grid */
}

/* 3) Карта значений — всегда внутри правой колонки */
.variant .map{ display:block; }
.variant .map-card{
  width: 100%;
  max-width: 100%;
  /* оставлю видимым outline; при желании можно сменить на overflow:auto */
  overflow: visible;
}

/* 4) Радио-кнопки Simple/Complex — аккуратное выравнивание */
section.card .row label{ display:inline-flex; align-items:center; gap:8px; }
input[type="radio"]{ accent-color: var(--accent); }