/* ============================================================
   previews.css — партиал экранов «Превью артефактов» и «Админка».
   Дополняет design-system.css (Corporate Blue). Только локальные стили,
   которых нет в базовой системе. Без внешних зависимостей / CDN.
   ============================================================ */

/* ---------- встроенный SVG-превью промежуточного представления ---------- */
.preview-svg{
  position:relative;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  /* «миллиметровка» — тонкая сетка из чистого CSS, чтобы передать масштаб */
  background-color:var(--bg-soft);
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size:24px 24px;
  padding:16px;
  overflow:auto;
  /* адаптивная высота: вписать развёртку фасада без обрезки на десктопе */
  max-height:min(72vh, 720px);
  text-align:center;
}
.preview-svg svg{
  max-width:100%;
  height:auto;
  display:inline-block;
  vertical-align:middle;
  /* масштаб задаём переменной — кнопки тулбара её меняют */
  width:calc(100% * var(--pv-zoom, 1));
  transition:width .15s ease;
  filter:drop-shadow(0 1px 3px rgba(11,30,61,.10));
}
.preview-svg.fit svg{width:auto;max-width:100%}

/* мини-тулбар над превью (зум / вписать) */
.preview-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:12px;
}
.preview-toolbar .pv-zoom-val{
  min-width:46px;text-align:center;
  font-family:var(--font-mono);font-size:12px;color:var(--text-sec);
}
.preview-toolbar .spacer{flex:1}

/* легенда режима под превью */
.preview-legend{
  display:flex;gap:18px;flex-wrap:wrap;
  margin-top:12px;font-size:12px;color:var(--text-mute);
}
.preview-legend .lg{display:inline-flex;align-items:center;gap:7px}
.preview-legend .sw{
  width:14px;height:14px;border-radius:3px;border:1px solid var(--border);flex-shrink:0;
}

/* ---------- details/summary внутри карточек ---------- */
.card-body details{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-soft);
  padding:0;
  overflow:hidden;
}
.card-body details > summary{
  list-style:none;cursor:pointer;
  padding:10px 14px;
  font-size:11px;color:var(--text-mute);
  text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);
  user-select:none;
}
.card-body details > summary:hover{color:var(--primary);background:var(--bg-tinted)}
.card-body details > summary::-webkit-details-marker{display:none}
.card-body details > summary::before{content:'▸ ';color:var(--text-mute)}
.card-body details[open] > summary::before{content:'▾ ';color:var(--primary)}
.card-body details > .textarea{
  margin:0;border:none;border-top:1px solid var(--border);border-radius:0;
}

/* ---------- audit trail: подсветка ключевых идентификаторов ---------- */
.audit-row.audit-key .audit-v code{
  background:var(--primary-soft);border-color:var(--primary);font-weight:600;
}
.audit-copy{
  margin-left:8px;cursor:pointer;border:none;background:transparent;
  color:var(--text-mute);font-size:11px;font-family:var(--font-mono);
  padding:1px 6px;border-radius:var(--radius-xs);
}
.audit-copy:hover{color:var(--primary);background:var(--primary-soft)}

/* ---------- админка: формы / таблицы ---------- */
/* липкая панель сохранения, всегда под рукой при длинной форме */
.admin-savebar{
  position:sticky;bottom:0;z-index:5;
  margin-top:24px;
  padding:14px 16px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.admin-savebar .spacer{flex:1}
.admin-savebar .save-hint{font-size:12px;color:var(--text-mute)}

/* вкладки админки как сегментированный контрол */
.admin-tabs{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius);
}
.admin-tabs .tab{
  padding:7px 16px;border:none;background:transparent;
  border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;color:var(--text-sec);
  font-family:inherit;cursor:pointer;transition:.15s;
}
.admin-tabs .tab:hover{color:var(--primary)}
.admin-tabs .tab.active{
  background:white;color:var(--primary);font-weight:600;
  box-shadow:var(--shadow);
}

/* числовые инпуты внутри таблиц админки — компактные и выровненные */
.admin-num{
  width:100%;max-width:130px;text-align:right;
  font-family:var(--font-mono);
}
.admin-num.bad,.input.bad{
  border-color:var(--danger);
  box-shadow:0 0 0 3px var(--danger-soft);
}
/* суффикс единиц измерения у инпута (₽/м² и т.п.) */
.input-suffix{
  display:inline-flex;align-items:center;gap:0;width:100%;max-width:160px;
}
.input-suffix > .input{border-top-right-radius:0;border-bottom-right-radius:0}
.input-suffix > .unit{
  padding:9px 10px;border:1px solid var(--border);border-left:none;
  border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);
  background:var(--bg-soft);color:var(--text-mute);
  font-family:var(--font-mono);font-size:12px;white-space:nowrap;
}
.admin-tablecard .card-body{padding:0}
.admin-tablecard .table-wrap{border:none;box-shadow:none;border-radius:0}
.admin-rowerr td{background:var(--danger-soft) !important}

/* строка-валидатор коридора floor/ceiling */
.corridor-warn{
  font-size:12px;color:var(--danger);
  display:flex;align-items:center;gap:6px;
}

@media (max-width:900px){
  .audit-row{grid-template-columns:1fr;gap:4px}
  .admin-num,.input-suffix{max-width:none}
}