/* ============================================================
   Telecom-SD — дизайн-токены для конфигуратора Aura
   Светлая тема, основной акцент #1496ff, шрифт Grandis Extended.
   Подключается ПОСЛЕ styles.css / configurator-route.css / configurator-layout.css.
   ============================================================ */

@font-face{
  font-family:'Grandis Extended';
  src:url('/local/templates/telecom/fonts/GrandisExtended-Regular.woff2') format('woff2'),
      url('/local/templates/telecom/fonts/GrandisExtended-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Grandis Extended';
  src:url('/local/templates/telecom/fonts/GrandisExtended-Medium.woff2') format('woff2'),
      url('/local/templates/telecom/fonts/GrandisExtended-Medium.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Grandis Extended';
  src:url('/local/templates/telecom/fonts/GrandisExtended-Bold.woff2') format('woff2'),
      url('/local/templates/telecom/fonts/GrandisExtended-Bold.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}

/* Переопределение переменных Aura → палитра Telecom-SD.
   Целимся и в :root (тёмные дефолты), и в body[data-theme="light"]. */
:root,
body[data-theme="light"]{
  --bg:#ffffff;
  --bg-soft:#f5f5f5;
  --bg-elevated:#ffffff;
  --bg-elevated-strong:#ffffff;
  --line:rgba(0,0,0,0.10);
  --line-strong:rgba(0,0,0,0.18);
  --text:#353535;
  --muted:#7a7f86;
  --red:#1496ff;      /* главный акцент Aura (красный) → синий Telecom */
  --red-dark:#0f79d6;
  --panel-shadow:0 16px 40px rgba(53,53,53,0.10);
  --radius-xl:16px;
  --radius-lg:14px;
  --radius-md:10px;
  --container:1500px;
  --font:'Grandis Extended',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'Grandis Extended',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---- Адаптив по ширине экрана ----
   Десктопная раскладка конфигуратора — 3 колонки (редактор/состав/сводка).
   На планшетах и узких окнах (≤1100px, но выше мобильного режима 760px)
   складываем панели в одну колонку, чтобы ничего не сплющивалось и не обрезалось. */
@media (max-width:1100px){
  .configurator-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .configurator-grid > .editor-panel,
  .configurator-grid > .structure-panel,
  .configurator-grid > .summary-panel{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  /* Верхняя панель с переключателем режима и кнопками — переносим по строкам */
  .configurator-topbar{flex-wrap:wrap !important;height:auto !important;row-gap:10px;}
  .configurator-mode-switch{flex-wrap:wrap;}
}
/* На любой ширине запрещаем горизонтальный вылет рабочей области */
.configurator-page,.configurator-shell,.configurator-grid{max-width:100%;min-width:0;}
.configurator-grid > *{min-width:0;}

/* Конфигуратор растёт по высоте контента, а не заперт в высоту вьюпорта.
   Иначе нижние элементы «Сводки» (в т.ч. кнопка «Скачать КП») обрезались, а сам
   конфигуратор был тесным. В iframe высоту подстраивает configurator-embed.js. */
.configurator-page{ height:auto !important; min-height:0 !important; }
.configurator-page > .container{ height:auto !important; min-height:0 !important; }
.configurator-grid{ max-height:none !important; overflow:visible !important; }
.configurator-grid > aside,
.configurator-grid > section{ max-height:none !important; overflow:visible !important; }

/* Цены и суммы не должны переноситься посреди числа (напр. «42 6 09 ₽»). */
[data-cfg-quote-total],[data-cfg-quote-equipment],[data-cfg-quote-works],
.cfg-quote-total-line strong,.cfg-price-line strong,.cfg-summary-kpi strong{
  white-space:nowrap;
}

/* «Итого, ориентировочно с НДС» + сумма — в столбик, чтобы цена не отрывалась
   от переносящейся подписи и не «уезжала» вправо. */
.cfg-quote-total-line{ display:block !important; }
.cfg-quote-total-line > span{ display:block; color:#5c6169; }
.cfg-quote-total-line > strong{ display:block; margin-top:3px; font-size:22px; line-height:1.2; color:#353535; white-space:nowrap; }

/* Выпадающие списки: тёмный текст на белом фоне (убираем «белое на белом» и
   красную/розовую подсветку опций, оставшуюся от тёмной темы Aura). */
.configurator-page select option,
.cfg-layout-overlay select option{
  background:#ffffff !important;
  color:#353535 !important;
}
.configurator-page select option:checked,
.configurator-page select option:hover,
.cfg-layout-overlay select option:checked{
  background:#1496ff !important;
  color:#ffffff !important;
}

/* Акцент чекбоксов/радио и выделение текста — синие, а не красные. */
.configurator-page, .cfg-layout-overlay{ accent-color:#1496ff; }
.configurator-page ::selection, .cfg-layout-overlay ::selection{ background:rgba(20,150,255,0.25); }

/* «Подсветка / Аналитика» и другие пары полей зоны — в столбик, чтобы длинные
   подписи («Без аналитики») не обрезались в узких ячейках. */
.cfg-param-grid--zone{ grid-template-columns:1fr !important; }

/* Кнопки «Оставить заявку / Скачать КП (PDF)» — каждая на всю ширину в столбик,
   чтобы обе всегда были видны и не обрезались внизу панели. */
.cfg-valid-actions{ flex-direction:column !important; align-items:stretch !important; }
.cfg-valid-actions > .button,
.cfg-valid-actions > .button-secondary,
.cfg-valid-actions > a{ width:100% !important; box-sizing:border-box; text-align:center; }