/*
 * Цены (docs/design/admin/Adm_Prices.dc.html): группы-панели (.grp-h), строки (.row-ed), поле цены (.money),
 * «+ Добавить строку» (.add-row), метка изменённой строки (.row-ed.changed). Правки живут в снимке PriceList.
 * Раскладка строки зависит от ширины панели группы, а не окна: широкая — всё в одну линию, узкая (и телефон) —
 * ручка, название и цена, остальное под кнопкой «⋯». Порог 700px — по ширине панели.
 */
@layer pages {
  .admin-price-hint { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
  .admin-price-groups__list { display: flex; flex-direction: column; gap: 20px; }
  .admin-price-add-group-form { align-self: flex-start; }
  .admin-price-add-row { display: block; margin: 0; }

  /* Шапка: «N неопубликованных изменений», кнопки */
  .admin-prices-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
  .admin-prices-actions form { display: contents; }
  .admin-saved__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

  /* Метка изменённой строки или группы: сама строка подсвечивается через :has */
  .admin-price-mark-slot { display: contents; }
  .admin-price-mark { display: none; }

  .admin-price-group { container-type: inline-size; }
  .admin-price-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
  }
  .admin-price-group__head:has(.admin-price-mark) { background: var(--soft-2); }
  /* Название — textarea без рамки, как .grp-h input: длинные названия переносятся */
  .admin-price-group__title {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 600 19px/1.3 var(--font);
    resize: none;
    field-sizing: content;
  }
  .admin-price-group__title:focus-visible { outline: none; box-shadow: 0 2px 0 0 var(--accent); }
  .admin-price-group__moves { display: flex; }
  .admin-price-group__body { padding: 8px 20px 12px; }
  .admin-price-group__body[hidden] { display: none; }
  .admin-icon-button--danger { color: var(--danger-ink); }

  /* .row-ed — ручка | название | «=/от» | цена | кнопки */
  .admin-price-rows { display: flex; flex-direction: column; min-height: 8px; }
  .admin-price-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 72px 132px auto;
    grid-template-areas: "drag name kind money tools";
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }
  .admin-price-rows > .admin-price-row:first-child { border-top: 0; }
  .admin-price-row:has(.admin-price-mark) {
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: 12px;
    border-top-color: transparent;
    background: var(--soft-2);
  }
  .admin-price-row > .admin-drag { grid-area: drag; }
  .admin-price-row__name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
  /* «=/от» и цена тянутся на высоту названия, когда оно переносится на вторую строку */
  .admin-price-row__kind { grid-area: kind; align-self: stretch; cursor: pointer; }
  .admin-price-row > .admin-money { grid-area: money; align-self: stretch; }
  .admin-price-row__tools { grid-area: tools; display: flex; align-items: center; gap: 2px; }
  .admin-price-row__moves { display: flex; }
  .admin-price-row__more { grid-area: more; display: none; }
  .admin-price-row .admin-icon-button { width: 40px; height: 40px; }

  .admin-input-sm { min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 16px; }
  /* Название услуги — textarea, растёт по тексту (длинные названия не обрезаются) */
  textarea.admin-input-sm { padding: 10px 12px; line-height: 1.35; resize: none; field-sizing: content; }
  select.admin-input-sm { padding-right: 30px; background-position: right 8px center; }

  .admin-money {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1.5px solid var(--ctl);
    border-radius: 10px;
    background: var(--surface);
  }
  .admin-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-soft); }
  .admin-money input {
    width: 100%;
    min-width: 0;
    min-height: 41px;
    padding: 0 4px 0 12px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 500 16px var(--font);
    font-variant-numeric: tabular-nums;
  }
  .admin-money input:focus { outline: none; }
  .admin-money span { padding: 0 12px 0 2px; color: var(--ink-3); }

  /* Скрытая строка: название перечёркнуто, глаз перечёркнут */
  .admin-price-row__eye-off { display: none; }
  .admin-price-row__eye[aria-pressed="true"] { color: var(--ink-3); }
  .admin-price-row__eye[aria-pressed="true"] .admin-price-row__eye-on { display: none; }
  .admin-price-row__eye[aria-pressed="true"] .admin-price-row__eye-off { display: block; }
  .admin-price-row[data-hidden-row="true"] .admin-price-row__input { color: var(--ink-3); text-decoration: line-through; }

  /* .add-row — .admin-add-row в components.css */

  /* Узкая панель (и телефон): ручка, название, «⋯»; цена под названием; «=/от» и кнопки — ещё ниже, когда нажата «⋯»
     (названия услуг длинные, в одну строку с ценой им тесно) */
  @container (max-width: 700px) {
    .admin-price-row {
      grid-template-columns: 20px minmax(0, 1fr) 44px;
      grid-template-areas: "drag name more" ". money money" ". kind tools";
      row-gap: 8px;
    }
    .admin-price-row > .admin-money { max-width: 200px; }
    .admin-price-row__more { display: grid; }
    .admin-price-row__kind, .admin-price-row__tools { display: none; }
    .admin-price-row[data-open] .admin-price-row__kind { display: block; max-width: 96px; }
    .admin-price-row[data-open] .admin-price-row__tools { display: flex; justify-content: flex-end; }
    .admin-price-row[data-open] { padding-bottom: 12px; }
    .admin-price-row .admin-icon-button { width: 44px; height: 44px; }

    .admin-price-group__head {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
      grid-template-areas: "drag title title title title" ". count toggle moves delete";
      gap: 2px 8px;
      padding: 10px 12px;
    }
    .admin-price-group__head > .admin-drag { grid-area: drag; align-self: start; padding-top: 14px; }
    .admin-price-group__title { grid-area: title; }
    .admin-price-group__count { grid-area: count; }
    .admin-price-group__toggle { grid-area: toggle; }
    .admin-price-group__moves { grid-area: moves; }
    .admin-price-group__delete { grid-area: delete; }
    .admin-price-mark-slot { display: none; }
    .admin-price-group__body { padding: 4px 12px 8px; }
  }

  /* Справа */
  .admin-price-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .admin-price-settings { display: flex; flex-direction: column; gap: 16px; }
  .admin-price-note { color: var(--ink-2); }
  .admin-price-preview { max-height: 60vh; overflow-y: auto; gap: 14px; }
  .admin-price-preview__group { display: flex; flex-direction: column; gap: 4px; }
  .admin-price-preview__title { font-size: 18px; }
  .admin-price-preview__row { font-size: 16px; }
  .admin-price-preview__caption { margin: 0; }

  @media (max-width: 820px) {
    .admin-price-side { position: static; max-height: none; overflow: visible; }
    .admin-prices-actions { width: 100%; justify-content: flex-start; }
    .admin-prices-actions .admin-saved { flex-basis: 100%; }
    .admin-prices-actions form { display: block; flex: 1; }
    .admin-prices-actions form .btn { width: 100%; }
    .admin-prices-actions > .btn { flex: 1; }
  }
}