/* CRM templates library: categories, layout cards and modal forms. */

.templates-hero {
  position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-5); margin-bottom:var(--s-5); padding:var(--s-5);
  overflow:visible; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.templates-hero::before {
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--accent); box-shadow:var(--glow);
}
.templates-hero h2 { margin-top:var(--s-1); font-size:clamp(1.25rem,2.2vw,1.7rem); }
.templates-kicker,.dialog-eyebrow,.question-card__eyebrow {
  color:var(--accent-label); font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.templates-hero__actions { position:relative; display:flex; flex-wrap:wrap; gap:var(--s-2); }

.category-create { position:relative; }
.category-create > summary { list-style:none; }
.category-create > summary::-webkit-details-marker { display:none; }
.category-create__form {
  position:absolute; z-index:6; top:calc(100% + var(--s-2)); right:0;
  width:min(340px,calc(100vw - 2 * var(--s-4))); padding:var(--s-4);
  display:grid; gap:var(--s-3); background:var(--surface-raised);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-2);
}
.field-hint { color:var(--text-muted); font-size:.78rem; font-weight:400; }

.category-list,.templates-list { display:grid; gap:var(--s-3); }
.category-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-1); overflow:hidden;
}
.category-section__summary,.template-card__summary {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); min-height:64px; padding:var(--s-3) var(--s-5);
  cursor:pointer; list-style:none;
}
.category-section__summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
}
.category-section__summary::-webkit-details-marker,
.template-card__summary::-webkit-details-marker { display:none; }
.category-section__summary::after,.template-card__summary::after {
  content:""; width:9px; height:9px; flex:0 0 auto;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease);
}
.category-section[open] > .category-section__summary::after,
.template-card[open] > .template-card__summary::after { transform:rotate(225deg); }
.category-section[open] > .category-section__summary {
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.category-section__identity {
  display:flex; min-width:0; align-items:center; flex-wrap:wrap; gap:var(--s-2);
}
.category-section__action {
  grid-column:2;
  justify-self:center;
  text-align:center;
}
.category-section__summary::after {
  grid-column:3;
  justify-self:end;
}
.category-section__name { font-size:1rem; font-weight:700; }
.category-section__body { padding:var(--s-4); }
.category-section__actions {
  display:flex; justify-content:flex-end; margin-bottom:var(--s-3);
}

.template-card {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.template-card[open] { border-color:var(--accent-border); }
.template-card[open] > .template-card__summary {
  border-bottom:1px solid var(--border); background:var(--accent-weak);
}
.template-card__summary { min-height:58px; padding:var(--s-3) var(--s-4); }
.template-card__summary::after { order:3; }
.template-card__title,.template-card__meta {
  display:flex; min-width:0; align-items:center; flex-wrap:wrap; gap:var(--s-2);
}
.template-card__title { flex:1 1 280px; }
.template-card__meta { justify-content:flex-end; }

.template-body {
  display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr);
  gap:var(--s-5); padding:var(--s-4); background:var(--surface);
}
.template-preview { min-width:0; }
.template-media {
  display:grid; min-height:180px; overflow:hidden; place-items:center;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.template-image { width:100%; max-height:340px; object-fit:contain; }
.template-image[hidden] { display:none; }
.template-placeholder {
  min-height:180px; padding:var(--s-4); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--s-2); text-align:center;
  color:var(--text-muted);
}
.template-placeholder[hidden] { display:none; }
.template-placeholder strong { color:var(--text); }
.template-product { margin-top:var(--s-3); color:var(--text-muted); font-size:.86rem; }
.template-description {
  margin-top:var(--s-2); color:var(--text-muted); font-size:.86rem;
  line-height:1.5; white-space:pre-line; overflow-wrap:anywhere;
}
.template-card__controls {
  display:grid; grid-template-columns:1fr; gap:var(--s-2); margin-top:var(--s-3);
}
.template-card__controls .btn,.template-card__controls form { width:100%; }
.section-heading { margin-bottom:var(--s-3); }
.section-heading h3 { font-size:1rem; }
.template-zones-panel { min-width:0; }
.template-questions-panel { grid-column:2; min-width:0; }
.question-preview-list { display:grid; gap:var(--s-2); }
.question-preview {
  overflow:hidden; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.question-preview > summary {
  display:flex; min-height:44px; align-items:center; gap:var(--s-3);
  padding:var(--s-3); cursor:pointer; list-style:none;
}
.question-preview > summary::-webkit-details-marker { display:none; }
.question-preview > summary::after {
  content:""; width:8px; height:8px; flex:0 0 auto; margin-left:auto;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);
}
.question-preview[open] > summary::after { transform:rotate(225deg); }
.question-preview__text { min-width:0; font-weight:400; overflow-wrap:anywhere; }
.question-preview__body { padding:0 var(--s-3) var(--s-3); }
.question-preview__options { display:grid; gap:var(--s-2); margin-top:var(--s-3); }
.question-preview__options li {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:var(--s-3);
  padding:var(--s-2); background:var(--surface); border-radius:var(--radius-sm);
}
.question-preview__options li > span:first-child {
  min-width:0; overflow-wrap:anywhere;
}
.question-preview__option-media {
  display:grid; width:96px; height:72px; place-items:center; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.question-preview__thumb {
  display:block; width:100%; height:100%; object-fit:contain;
}
.template-zones input { min-width:160px; }
.template-actions { display:flex; justify-content:flex-end; margin-top:var(--s-3); }
.template-empty { min-height:120px; padding:var(--s-5); }
/* Modal form */
.template-dialog {
  width:min(860px,calc(100vw - 2 * var(--s-5))); max-height:calc(100dvh - 2 * var(--s-5));
  padding:0; color:var(--text); background:transparent; border:0;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-2);
}
.template-dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(3px); }
.template-dialog__panel {
  display:flex; max-height:inherit; flex-direction:column;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius); overflow:hidden;
}
.template-dialog__header,.template-dialog__footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:var(--s-4) var(--s-5); background:var(--surface-2);
}
.template-dialog__header { border-bottom:1px solid var(--border); }
.template-dialog__header h2 { margin-top:var(--s-1); font-size:1.2rem; }
.template-dialog__footer {
  justify-content:flex-end; border-top:1px solid var(--border);
}
.template-dialog__body {
  display:flex; min-height:0; flex-direction:column; gap:var(--s-4);
  padding:var(--s-5); overflow-y:auto; overscroll-behavior:contain;
}
.dialog-close { flex:0 0 auto; }
.upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.file-field {
  padding:var(--s-3); background:var(--surface-2);
  border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
}
input[type="file"] { padding:var(--s-1); }
input[type="file"]::file-selector-button {
  min-height:34px; margin-right:var(--s-3); padding:var(--s-2) var(--s-3);
  color:var(--text); background:var(--control-hover);
  border:1px solid var(--control-border); border-radius:var(--radius-sm);
  font:inherit; font-weight:600; cursor:pointer;
}

.template-mode,.question-type,.hybrid-fields,.zone-requirements {
  min-width:0; margin:0; padding:0; border:0;
}
.template-mode > legend,.question-type > legend,.hybrid-fields > legend,
.zone-requirements > legend {
  margin-bottom:var(--s-2); font-size:.9rem; font-weight:600;
}
.segmented-control {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:44px;
  padding:3px; background:var(--surface-2); border:1px solid var(--control-border);
  border-radius:var(--radius-sm);
}
.segmented-control label { position:relative; display:block; cursor:pointer; }
.segmented-control input {
  position:absolute; width:1px; height:1px; min-height:0; opacity:0;
}
.segmented-control span {
  display:flex; min-height:36px; align-items:center; justify-content:center;
  padding:var(--s-1) var(--s-3); border:1px solid transparent;
  border-radius:calc(var(--radius-sm) - 2px); color:var(--text-muted);
  font-size:.86rem; font-weight:500; text-align:center;
}
.segmented-control input:checked + span {
  color:var(--accent-label); background:var(--accent-weak);
  border-color:var(--accent-border);
}
.segmented-control input:focus-visible + span { box-shadow:var(--ring); }
.template-mode .field-hint { margin-top:var(--s-2); }
.zone-requirements > .field-hint { margin-bottom:var(--s-3); }
.zone-requirements__list {
  display:grid; gap:var(--s-2); padding:var(--s-3);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.zone-requirement {
  display:grid; grid-template-columns:minmax(150px,1fr) minmax(260px,1fr);
  align-items:center; gap:var(--s-3);
}
.zone-requirement + .zone-requirement {
  padding-top:var(--s-2); border-top:1px solid var(--border);
}
.zone-requirement__name {
  display:flex; min-width:0; align-items:center; flex-wrap:wrap; gap:var(--s-2);
}
.zone-requirement__name span { color:var(--text-muted); overflow-wrap:anywhere; }
.check-control {
  display:flex; min-height:44px; align-items:center; gap:var(--s-2);
  width:max-content; max-width:100%; cursor:pointer;
}
.check-control input { width:20px; min-height:20px; margin:0; accent-color:var(--accent); }

.hybrid-fields {
  padding-top:var(--s-4); border-top:1px solid var(--border);
}
.hybrid-fields[hidden],
.template-mode[hidden] { display:none; }
.hybrid-fields__heading,.question-options__heading {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-3); margin-bottom:var(--s-3);
}
.hybrid-fields__heading strong { font-size:.95rem; }
.question-list,.option-list { display:grid; gap:var(--s-3); }
.question-card {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden;
}
.question-card__header {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); padding:var(--s-3) var(--s-4);
}
.question-card__header > div { min-width:0; }
.question-card__title { display:block; font-weight:400; overflow-wrap:anywhere; }
.question-card__edit[hidden] { display:none; }
.question-card__content {
  display:grid; gap:var(--s-3); padding:0 var(--s-4) var(--s-4);
}
.question-card.is-collapsed .question-card__content { display:none; }
.question-card.is-collapsed .question-card__edit { display:inline-flex; }
.question-options {
  padding:var(--s-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.question-options[hidden] { display:none; }
.option-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-3); align-items:start; padding:var(--s-3);
  background:var(--surface-2); border-radius:var(--radius-sm);
}
.option-row__label { grid-column:1; grid-row:1; }
.option-row__file { grid-column:1 / -1; grid-row:2; }
.option-row__existing {
  display:flex; grid-column:1 / -1; grid-row:3; flex-direction:column;
  align-items:flex-end; text-align:right;
}
.option-remove { grid-column:2; grid-row:1; align-self:end; margin-bottom:3px; }
.question-card__actions {
  display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--s-2);
}

body.has-template-dialog { overflow:hidden; }

@media (max-width:820px) {
  .templates-hero { align-items:stretch; flex-direction:column; }
  .templates-hero__actions { width:100%; }
  .templates-hero__actions > * { flex:1 1 180px; }
  .templates-hero__actions .btn { width:100%; }
  .template-body { grid-template-columns:minmax(0,1fr); }
  .template-questions-panel { grid-column:auto; }
  .template-preview { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr);
    gap:var(--s-3); align-items:start; }
  .template-product,.template-card__controls { grid-column:2; }
  .template-product { margin-top:0; }
}

@media (max-width:640px) {
  .templates-hero { padding:var(--s-4); }
  .category-create { position:static; }
  .category-create__form { position:static; width:100%; margin-top:var(--s-2); }
  .category-section__summary,.template-card__summary {
    align-items:flex-start; padding:var(--s-3); gap:var(--s-2);
  }
  .category-section__summary { grid-template-columns:minmax(0,1fr) auto; }
  .category-section__summary > .muted { display:none; }
  .category-section__summary::after { grid-column:2; }
  .template-card__summary { flex-wrap:wrap; }
  .template-card__meta { width:100%; justify-content:flex-start; }
  .template-body { padding:var(--s-3); }
  .template-preview { display:block; }
  .template-product { margin-top:var(--s-3); }
  .template-card__controls { grid-column:auto; }
  .template-actions .btn,.category-section__actions .btn { width:100%; }
  .category-section__actions form { width:100%; }

  .template-dialog {
    width:100vw; max-width:none; height:100dvh; max-height:100dvh;
    margin:0; border-radius:0;
  }
  .template-dialog__panel { height:100%; border:0; border-radius:0; }
  .template-dialog__header,.template-dialog__footer {
    padding:var(--s-3); padding-left:max(var(--s-3),env(safe-area-inset-left));
    padding-right:max(var(--s-3),env(safe-area-inset-right));
  }
  .template-dialog__header { padding-top:max(var(--s-3),env(safe-area-inset-top)); }
  .template-dialog__footer {
    padding-bottom:max(var(--s-3),env(safe-area-inset-bottom));
  }
  .template-dialog__body { padding:var(--s-4) var(--s-3); }
  .template-dialog__footer .btn { flex:1 1 0; }
  .upload-grid { grid-template-columns:1fr; }
  .zone-requirement { grid-template-columns:1fr; }
  .hybrid-fields__heading,.question-options__heading {
    align-items:stretch; flex-direction:column;
  }
  .hybrid-fields__heading .btn,.question-options__heading .btn,
  .question-card__actions .btn { width:100%; }
  .question-card__actions { flex-direction:column-reverse; }
  .question-preview__option-media { width:72px; height:54px; }
}

@media (max-width:360px) {
  .segmented-control { grid-template-columns:1fr; }
  .template-dialog__footer { flex-direction:column-reverse; }
  .template-dialog__footer .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .category-section__summary::after,.template-card__summary::after { transition:none; }
}

/* Миниатюра сохранённого примера варианта (гибрид-вопрос) — просто «чтобы видно». */
.option-thumb {
  display:block;
  margin:0 0 var(--s-2) auto;
  max-width:120px;
  max-height:90px;
  width:auto;
  height:auto;
  border-radius:var(--radius-sm,6px);
  border:1px solid var(--border,rgba(255,255,255,.12));
  object-fit:contain;
  background:var(--surface-2,rgba(255,255,255,.04));
}