/* ============================================================
   estimates.css — «Сметы v2» (views/estimates.js, Фаза 2 мастер-плана
   ESTIMATES_V2_MASTER_PLAN.md). Здесь только НОВАЯ раскладка (est-*):
   таблицы/ячейки/модалки/тосты/карточки итогов реюзят le-* классы из
   los_estimate.css (файл остаётся подключённым).
   ============================================================ */

/* Донор использует .le-muted, но в los_estimate.css класс не определён */
.le-muted { color: var(--muted, #8a919a); }

/* ── Страница редактора: grid с панелью шаблонов ─────────────────────────── */
/* Вертикальный экран / узкое окно: чипы шаблонов под шапкой, над сметой */
.est-page {
  display: grid;
  gap: 14px;
  padding: 16px 20px 24px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "tplchips" "banners" "tables";
}
.est-header-area { grid-area: header; min-width: 0; }
.est-banners-area { grid-area: banners; min-width: 0; }
.est-tables-area { grid-area: tables; min-width: 0; }
.est-tpl-chips {
  grid-area: tplchips;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.est-tpl-panel { display: none; }

/* Горизонтальный экран: панель шаблонов справа от сметы, sticky */
@media (min-width: 1024px) and (orientation: landscape) {
  .est-page {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "header  header"
      "banners panel"
      "tables  panel";
  }
  .est-tpl-panel {
    display: block;
    grid-area: panel;
    position: sticky;
    top: 16px;
    align-self: start;
  }
  .est-tpl-chips { display: none; }
}

/* ── Карточки шаблонов (панель) ──────────────────────────────────────────── */
.est-tpl-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #8a919a);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.est-tpl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--card, var(--surface, #fff));
  border: 1px solid var(--border, #dde3e8);
  border-left: 4px solid var(--tpl-color, var(--accent, #01696f));
  border-radius: var(--radius, 10px);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text, #1c2733);
  transition: box-shadow .15s ease, transform .15s ease;
}
.est-tpl-card:hover { box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.08)); transform: translateY(-1px); }
.est-tpl-card-body { min-width: 0; flex: 1; }
.est-tpl-card-name { font-weight: 600; font-size: 14px; }
.est-tpl-count { font-size: 12px; color: var(--muted, #8a919a); margin-top: 2px; }
.est-tpl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border, #dde3e8);
  background: transparent;
}
.est-tpl-dot--filled {
  background: var(--green, #16a34a);
  border-color: var(--green, #16a34a);
}

/* Чипы (вертикальный экран) */
.est-tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--card, var(--surface, #fff));
  border: 1px solid var(--border, #dde3e8);
  border-left: 4px solid var(--tpl-color, var(--accent, #01696f));
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1c2733);
  flex-shrink: 0;
}
.est-tpl-chip .est-tpl-count { margin: 0; }

/* ── Шапка редактора ─────────────────────────────────────────────────────── */
.est-header-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.est-name-input {
  flex: 1 1 260px;
  min-width: 200px;
  font-size: 17px;
  font-weight: 700;
  padding: 8px 12px;
}
.est-actual-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1c2733);
  cursor: pointer;
  white-space: nowrap;
  padding-top: 10px;
}
.est-actual-wrap input { width: 16px; height: 16px; cursor: pointer; }

.est-client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 160px;
  gap: 8px;
  margin-bottom: 10px;
}
.est-client-grid .form-control { width: 100%; }
.est-km-wrap { position: relative; }
.est-km-wrap .form-control { padding-right: 34px; }
.est-km-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted, #8a919a);
  font-size: 12px;
  pointer-events: none;
}
.est-field-label {
  display: block;
  font-size: 11px;
  color: var(--muted, #8a919a);
  margin-bottom: 3px;
}
@media (max-width: 760px) {
  .est-client-grid { grid-template-columns: 1fr; }
}

/* Индикатор несохранённых правок на кнопке «Сохранить смету» */
.est-dirty-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Список смет ─────────────────────────────────────────────────────────── */
.est-list-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}
.est-list-wrap h3 { text-align: center; margin: 8px 0 6px; }
.est-list-note { color: var(--muted, #8a919a); text-align: center; font-size: 13px; margin-bottom: 12px; }
.est-list-scroll { overflow-x: auto; }
.est-list-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.est-list-table th {
  text-align: left;
  font-size: 12px;
  color: var(--muted, #8a919a);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border, #dde3e8);
  white-space: nowrap;
}
.est-list-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border, #dde3e8);
  vertical-align: middle;
}
.est-list-table tbody tr:hover { background: rgba(0, 0, 0, .025); }
[data-theme="dark"] .est-list-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
.est-list-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted, #8a919a);
  white-space: nowrap;
}
.est-list-name { cursor: pointer; font-weight: 600; }
.est-list-name:hover { color: var(--accent, #01696f); text-decoration: underline; }
.est-copy-id-btn {
  border: 1px solid var(--border, #dde3e8);
  background: transparent;
  border-radius: 6px;
  padding: 3px 7px;
  margin-left: 6px;
  cursor: pointer;
  color: var(--muted, #8a919a);
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
}
.est-copy-id-btn:hover { color: var(--accent, #01696f); border-color: var(--accent, #01696f); }
.est-row-del-btn {
  border: none;
  background: transparent;
  color: var(--muted, #8a919a);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.est-row-del-btn:hover { color: #fff; background: var(--red, #dc2626); }
.est-badge-legacy {
  display: inline-block;
  font-size: 11px;
  color: var(--muted, #8a919a);
  border: 1px solid var(--border, #dde3e8);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  white-space: nowrap;
}
.est-list-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.est-tpl-color-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Бланки в v2-режиме: сетка без дыр от скрытых блоков ─────────────────── */
/* Легаси-раскладки бланков используют именованные grid-области (los/ws/wi
   *_blank.css) — скрытые в v2 блоки («Клиент», «Документы», км) оставляли бы
   пустые ячейки. В v2 области отключаются, блоки текут автопотоком по тем же
   колонкам (3/2/1 из медиазапросов легаси-CSS), широкие блоки — на всю строку. */
.lb-blocks-grid.lb-grid-v2 {
  grid-template-areas: none !important;
  grid-auto-flow: row dense;
}
.lb-blocks-grid.lb-grid-v2 .lb-block { grid-area: auto !important; }
.lb-blocks-grid.lb-grid-v2 .lb-block[data-group="station"],
.lb-blocks-grid.lb-grid-v2 .lb-block[data-group="oborudovanie"],
.lb-blocks-grid.lb-grid-v2 .lb-block[data-group="polypropilen"] {
  grid-column: 1 / -1;
}

/* ── Мобильная ширина: шапка в колонку (как le-header @900) ──────────────── */
@media (max-width: 900px) {
  .est-page { padding: 12px 10px 20px; }
}

/* ── «Шаблоны смет» (Фаза 2, ESTIMATE_TEMPLATES_MASTER_PLAN): секции панели ───── */
.est-tpl-section { margin-bottom: 10px; }
.est-tpl-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border, #dde3e8);
  padding: 6px 2px 6px 0;
  margin: 0 0 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #8a919a);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.est-tpl-sec-head:hover { color: var(--text, #1c2733); }
.est-tpl-section--collapsed .est-tpl-sec-body { display: none; }
.est-tpl-section--collapsed .est-tpl-sec-head { margin-bottom: 0; }

/* Пункт шаблона: [название · N стр.] [✎] [✕] */
.est-tpl-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 6px;
}
.est-tpl-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  background: var(--card, var(--surface, #fff));
  border: 1px solid var(--border, #dde3e8);
  border-left: 4px solid var(--accent, #01696f);
  border-radius: var(--radius, 10px);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--text, #1c2733);
  transition: box-shadow .15s ease, transform .15s ease;
}
.est-tpl-item-main:hover { box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,.08)); transform: translateY(-1px); }
.est-tpl-item-name {
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.est-tpl-item-meta { font-size: 12px; color: var(--muted, #8a919a); white-space: nowrap; flex-shrink: 0; }
.est-tpl-item-act {
  flex-shrink: 0;
  width: 26px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted, #8a919a);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.est-tpl-item-act:hover { color: var(--accent, #01696f); border-color: var(--border, #dde3e8); }
.est-tpl-item-act--del:hover { color: var(--red, #a12c2c); }
.est-tpl-empty { font-size: 12px; color: var(--muted, #8a919a); padding: 4px 2px 8px; line-height: 1.4; }
.est-tpl-empty span { opacity: .85; }

/* Чипы-секции (портрет) */
.est-tpl-chip--sec { gap: 6px; border-left-color: var(--accent, #01696f); }
.est-tpl-chip--sec .est-tpl-count { margin: 0; }

/* Поповер секции: fixed поверх всего (чипы лежат в overflow-x:auto) */
.est-tpl-popover {
  position: fixed;
  z-index: 1000;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dde3e8);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
  padding: 10px 12px 6px;
}
.est-tpl-popover .est-tpl-card { margin-bottom: 6px; }

/* Кнопка «В шаблоны» в списке смет — по образцу .est-copy-id-btn */
.est-tpl-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted, #8a919a);
  cursor: pointer;
  padding: 0;
}
.est-tpl-save-btn:hover { color: var(--accent, #01696f); border-color: var(--border, #dde3e8); }

/* Ошибка поля в модалке имени шаблона */
.est-input-error { border-color: var(--red, #a12c2c) !important; }