/* PP Fields ONE-2.6
   База 2.5 (превью = тема) + layout рядом с #profilenav
   + ширина превью из темы (--ppf-prev или auto)
*/

#pp-fields-app {
  /* fallback; JS подставит ширину .post-author из темы */
  --ppf-prev: auto;
  --ppf-line: rgba(0, 0, 0, 0.08);
  --ppf-soft: rgba(0, 0, 0, 0.04);
  --ppf-accent: rgba(139, 177, 172, 0.55);
  --ppf-accent2: rgba(139, 177, 172, 0.22);
  --ppf-radius: 14px;

  display: block;
  margin: 0 0 16px;
  padding: 0;
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  /* НЕ clear:both — иначе уезжаем под float #profilenav */
  clear: none;
  vertical-align: top;
}

#pp-fields-app *,
#pp-fields-app *::before,
#pp-fields-app *::after {
  box-sizing: border-box;
}

/* ===== оболочка ===== */

#pp-fields-app .ppf-shell {
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--ppf-line);
  border-radius: var(--ppf-radius);
  background: rgba(255, 255, 255, 0.5);
}

#pp-fields-app h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

#pp-fields-app #ppf-status {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ppf-soft);
  font-size: 13px;
  line-height: 1.35;
}
#pp-fields-app #ppf-status:empty {
  display: none !important;
}

#pp-fields-app #ppf-error {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(160, 0, 0, 0.08);
  color: #8a1010;
  font-size: 13px;
  white-space: pre-wrap;
}
#pp-fields-app #ppf-error:empty {
  display: none !important;
}

#pp-fields-app .ppf-tabs,
#pp-fields-app .ppf-subtabs,
#pp-fields-app .ppf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 7px 0 12px;
  align-items: center;
}

#pp-fields-app .ppf-save-row {
  margin-top: 12px;
  margin-bottom: 0;
}

#pp-fields-app [data-ppf-tab].is-active,
#pp-fields-app [data-ppf-sub].is-active {
  font-weight: 700;
}

#pp-fields-app .ppf-layout {
  display: grid !important;
  /* auto = ширина превью из темы; если JS задал --ppf-prev — используем */
  grid-template-columns: var(--ppf-prev, auto) minmax(0, 1fr);
  gap: 16px 22px;
  align-items: start;
}

#pp-fields-app .ppf-preview-col,
#pp-fields-app .ppf-main {
  min-width: 0;
}

#pp-fields-app .ppf-preview-col {
  width: var(--ppf-prev, auto);
  max-width: 100%;
}

/* обёртка-пост: без своих рамок; гасим лишние margin темы у превью */
#pp-fields-app .ppf-as-post,
#pp-fields-app .ppf-as-post .postleft {
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: none;
  width: auto;
  max-width: 100%;
  float: none;
  min-height: 0;
}

#pp-fields-app #ppf-preview,
#pp-fields-app #ppf-preview.post-author {
      margin-top: 20px;
    margin-bottom: 0;
  float: none;
  max-width: 100%;
}

#pp-fields-app #ppf-preview a {
  pointer-events: none;
  cursor: default;
}

/* мусор из поста */
#pp-fields-app #ppf-preview #tuser,
#pp-fields-app #ppf-preview .indOnline,
#pp-fields-app #ppf-preview .pp-ams-profile-edit-btn,
#pp-fields-app #ppf-preview .icons-search,
#pp-fields-app #ppf-preview .pa-posts,
#pp-fields-app #ppf-preview .pa-respect,
#pp-fields-app #ppf-preview .pa-fld2,
#pp-fields-app #ppf-preview .pa-fld3,
#pp-fields-app #ppf-preview .fld-name,
#pp-fields-app #ppf-preview .pa-online,
#pp-fields-app #ppf-preview .pa-ip {
  display: none !important;
}

/*
  Только снять hide темы на section=fields.
  Без height / position / background / padding.
*/
#pp-fields-app #ppf-preview .pa-fld5,
#pp-fields-app #ppf-preview .pa-fld4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: inherit !important;
}

#pp-fields-app #ppf-preview .pa-fld5 > a,
#pp-fields-app #ppf-preview .pa-fld5 img,
#pp-fields-app #ppf-preview .fon_icon,
#pp-fields-app #ppf-preview .fon_icon img,
#pp-fields-app #ppf-preview .pa-fld4 > a,
#pp-fields-app #ppf-preview .plashka,
#pp-fields-app #ppf-preview .plashka pltwo {
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  clip: auto !important;
}

#pp-fields-app #ppf-preview .fon_icon {
  display: block !important;
}
#pp-fields-app #ppf-preview .plashka {
  display: block !important;
}
#pp-fields-app #ppf-preview .pa-fld5 img {
  display: inline-block !important;
}

/* ===== каталог / форма ===== */

#pp-fields-app .ppf-grid {
  display: grid !important;
  gap: 8px;
  max-height: 380px;
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  background: var(--ppf-soft);
}

#pp-fields-app .ppf-grid[hidden],
#pp-fields-app #ppf-panel-style[hidden],
#pp-fields-app #ppf-panel-lz[hidden],
#pp-fields-app #ppf-debug[hidden] {
  display: none !important;
}

#pp-fields-app #ppf-grid-pl {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
#pp-fields-app #ppf-grid-ic {
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
#pp-fields-app #ppf-grid-fo {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

#pp-fields-app .ppf-item,
#pp-fields-app [data-ppf-item] {
  appearance: none;
  margin: 0;
  padding: 8px;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  background: var(--container-transparent) !important;
  color: inherit;
  line-height: normal;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

#pp-fields-app [data-ppf-item]:hover,
#pp-fields-app [data-ppf-item].is-on {
  border-color: var(--ppf-accent);
  box-shadow: 0 0 0 2px var(--ppf-accent2);
}

/* плашки только в каталоге */
#pp-fields-app [data-ppf-item] .plashka {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: 1.25;
  background: var(--bg, #888);
  word-break: break-word;
  pointer-events: none;
}
#pp-fields-app [data-ppf-item] .plashka pltwo {
  display: block;
  margin-top: 2px;
  opacity: 0.92;
}

#pp-fields-app [data-ppf-item="ic"] img,
#pp-fields-app [data-ppf-item="fo"] img {
  display: block;
  width: 100%;
  height: 50px;
  object-fit: cover;
  margin: 0 auto;
  pointer-events: none;
}
#pp-fields-app [data-ppf-item="ic"] img {
  object-fit: contain;
  height: auto;
  max-height: 64px;
}

#pp-fields-app .ppf-empty {
  grid-column: 1 / -1;
  padding: 14px;
  text-align: center;
  opacity: 0.65;
  font-size: 13px;
}

#pp-fields-app .ppf-note {
  margin: 0 0 8px;
  font-size: 13px;
  opacity: 0.88;
}

#pp-fields-app .ppf-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--ppf-line);
  border-radius: 15px 15px 0 0;
  background: var(--ppf-soft);
}
#pp-fields-app .ppf-tools .button {
  padding: 4px 8px;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

#pp-fields-app #ppf-lz,
#pp-fields-app textarea#ppf-lz {
  width: 100%;
  min-height: 120px;
  margin: 0;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  border: 1px solid var(--ppf-line);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: var(--input-bg, #fff);
}

#pp-fields-app #ppf-lzerr {
  margin: 8px 0 0;
  color: darkred;
  font-size: 12px;
}
#pp-fields-app #ppf-lzerr:empty {
  display: none;
}

#pp-fields-app #ppf-debug {
  margin-top: 10px;
  padding: 8px;
  border-radius: 10px;
  background: var(--ppf-soft);
  font: 11px/1.35 ui-monospace, monospace;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}

#pp-fields-app [data-ppf-act="save"] {
  font-weight: 700;
}
#pp-fields-app .memory_button {
  cursor: pointer;
}

#profile8[data-ppf-hid="1"] > fieldset[style*="opacity"] {
  margin-top: 12px;
  border-style: dashed;
}

@media (max-width: 540px) {
  #pp-fields-app {
    margin-left: 0 !important;
  }
  #pp-fields-app .ppf-layout {
    grid-template-columns: 1fr !important;
  }
  #pp-fields-app .ppf-preview-col {
    order: 2;
    width: auto;
    max-width: 100%;
  }
  #pp-fields-app .ppf-main {
    order: 1;
  }
  #pp-fields-app .ppf-grid {
    max-height: 280px;
  }
}

/* ===== ONE-2.7: LZ toolbar как lz-only ===== */

#pp-fields-app .ppf-lz-editor {
  margin: 0 0 8px;
}

#pp-fields-app .ppf-lz-tools.lz-tools,
#pp-fields-app #ppf-lz-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--ppf-line);
  border-radius: 15px 15px 0 0;
  background: var(--ppf-soft);
  position: relative;
  z-index: 5;
}

#pp-fields-app #ppf-lz-tools > button,
#pp-fields-app #ppf-lz-tools .pp-dd-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

#pp-fields-app #ppf-lz-tools > button:hover,
#pp-fields-app #ppf-lz-tools .pp-dd-btn:hover,
#pp-fields-app #ppf-lz-tools .pp-dd.open > .pp-dd-btn {
  background: rgba(0, 0, 0, 0.06);
}

#pp-fields-app #ppf-lz-tools svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

#pp-fields-app #ppf-lz-tools .pp-dd {
  position: relative;
  display: inline-flex;
}

#pp-fields-app #ppf-lz-tools .pp-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 52px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--ppf-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#pp-fields-app #ppf-lz-tools .pp-dd.open .pp-dd-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* панель шрифтов шире */
#pp-fields-app #ppf-fonts-panel {
  min-width: 220px;
  max-width: min(320px, 70vw);
  max-height: 320px;
}

#pp-fields-app #ppf-lz-tools .pp-dd-panel > button {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

#pp-fields-app #ppf-lz-tools .pp-dd-panel > button:hover {
  background: rgba(139, 177, 172, 0.22);
}

#pp-fields-app #ppf-lz-tools .pp-dd-title {
  padding: 4px 8px;
  opacity: 0.65;
  font-size: 11px;
  line-height: 1.3;
  user-select: none;
}

#pp-fields-app #ppf-lz-tools .ppf-dd-msg {
  padding: 6px 8px;
  opacity: 0.7;
  font-size: 12px;
}

/* textarea под тулбаром — склеить с панелью */
#pp-fields-app .ppf-lz-editor #ppf-lz,
#pp-fields-app .ppf-lz-editor textarea#ppf-lz {
  width: 100%;
  min-height: 120px;
  margin: 0;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  border: 1px solid var(--ppf-line);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: var(--input-bg, #fff);
}

#pp-fields-app .ppf-lz-editor #ppf-lzerr {
  margin: 8px 0 0;
  color: darkred;
  font-size: 12px;
}
#pp-fields-app .ppf-lz-editor #ppf-lzerr:empty {
  display: none;
}

/* старый .ppf-tools больше не используем на ЛЗ */
#pp-fields-app #ppf-panel-lz > .ppf-tools {
  display: none !important;
}