/* GreenLeaf — модерация каталога. Дополняет cabinet.css. */

.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- вкладки разделов ---------- */
.mod-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mod-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; cursor: pointer;
  padding: 10px 14px; margin-bottom: -1px;
  font-size: .9rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.mod-tab:hover { color: var(--text); background: var(--green-tint); }
.mod-tab.is-active { color: var(--green-dark); border-bottom-color: var(--green); }
.mod-tab svg { flex-shrink: 0; }
.mod-tab-count {
  font-size: .7rem; font-weight: 700; line-height: 1;
  background: var(--green); color: #fff;
  border-radius: 999px; padding: 3px 7px; min-width: 18px; text-align: center;
}
.mod-tab:not(.is-active) .mod-tab-count { background: var(--muted); }

/* ---------- панели ---------- */
.mod-panel { display: none; }
.mod-panel.is-active { display: block; animation: mod-fade .18s ease-out; }
@keyframes mod-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- тулбар ---------- */
.mod-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.mod-title { margin: 0; }
.mod-toolbar .btn { flex-shrink: 0; }
.mod-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* фильтр-чипы по типу предложения */
.mod-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mod-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  padding: 6px 11px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  transition: all .15s;
}
.mod-chip:hover { border-color: var(--green); color: var(--text); }
.mod-chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.mod-chip-count {
  font-size: .68rem; font-weight: 700;
  background: var(--green-tint); color: var(--green-dark);
  border-radius: 999px; padding: 1px 6px; min-width: 16px; text-align: center;
}
.mod-chip.is-active .mod-chip-count { background: rgba(255,255,255,.25); color: #fff; }

/* поиск */
.mod-search {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; background: #fff; color: var(--muted);
}
.mod-search:focus-within { border-color: var(--green); box-shadow: var(--focus); }
.mod-search svg { flex-shrink: 0; }
.mod-search input {
  border: none; outline: none; background: transparent;
  font-size: .85rem; color: var(--text); width: 180px; min-width: 120px;
}

/* ---------- карточка предложения ---------- */
.mod-card { text-align: left; }
.prod-card-kind {
  position: absolute; top: 6px; left: 6px;
  font-size: .64rem; padding: 2px 8px;
  backdrop-filter: blur(2px); background: rgba(255,255,255,.94);
}
.prod-card-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
}
.prod-card-play svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)); }
.prod-card-meta { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.prod-card-meta code { font-size: .95em; }
.prod-card-partner {
  font-size: .72rem; color: var(--green-dark); font-weight: 600; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* пустые состояния */
.mod-empty {
  text-align: center; color: var(--muted); font-size: .9rem;
  padding: 34px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mod-empty-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green-tint); color: var(--green-dark); font-size: 1.3rem;
}

/* ---------- детальная модалка ---------- */
.prop-detail { margin-bottom: 4px; }
.mod-media-note {
  font-size: .86rem; line-height: 1.45;
  background: var(--green-tint); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px;
  word-break: break-word;
}
.mod-media-note a { color: var(--green-dark); font-weight: 600; }
.mod-media-preview { margin-top: 6px; }
.mod-media-preview img, .mod-media-preview video {
  width: 100%; max-height: 340px; object-fit: contain;
  border-radius: var(--radius-sm); background: #000; display: block;
}
.mod-video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm); overflow: hidden; background: #000; margin-top: 6px;
}
.mod-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- элемент вопроса/модератора ---------- */
.mod-item .prop-head { margin-bottom: 6px; }
.mod-partner { font-size: .84rem; margin: 2px 0 8px; }
.mod-partner strong { color: var(--text); }
.mod-partner .muted { color: var(--muted); }

.mod-actions {
  border-top: 1px solid var(--border);
  margin-top: 12px; padding-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.mod-actions .field { margin-bottom: 0; }
.mod-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.mod-buttons .btn { flex: 1; min-width: 130px; }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #a01a15; }

@media (max-width: 480px) {
  .mod-search input { width: 130px; }
  .mod-buttons .btn { flex-basis: 100%; }
}

/* ===== Модерация обучающих видео ===== */
.vid-mod-item { display: flex; flex-direction: column; gap: 10px; }
.vid-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 10px; overflow: hidden;
}
.vid-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-embed .video-js { position: absolute; inset: 0; width: 100%; height: 100%; }
.vid-file-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; color: #dfeee3; font-size: 13px; line-height: 1.5;
  background: linear-gradient(135deg, #14251a, #1c3a26);
}
.vm-fields { display: flex; flex-direction: column; gap: 4px; }
.vm-label { font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); margin-top: 6px; }
.vm-fields input, .vm-fields textarea, .vm-fields select,
.vm-chap-row input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border, #d9dee4);
  border-radius: 8px; font: inherit; font-size: 14px; background: #fff; color: inherit;
}
.vm-fields textarea { resize: vertical; }
.vm-chapters { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.vm-chap-list { display: flex; flex-direction: column; gap: 6px; }
.vm-chap-row { display: grid; grid-template-columns: 78px 1fr 1fr auto; gap: 6px; align-items: center; }
.vm-chap-t { text-align: center; }
.vm-chap-del {
  border: 1px solid var(--border, #d9dee4); background: #fff; color: #b42318;
  width: 30px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1;
}
.vm-chap-del:hover { background: #fef2f2; }
.vm-chap-add { align-self: flex-start; }
@media (max-width: 560px) {
  .vm-chap-row { grid-template-columns: 64px 1fr auto; }
  .vm-chap-note { grid-column: 1 / -1; }
}

/* ===== Курсы (плейлисты) — конструктор ===== */
.pl-card { display: flex; flex-direction: column; gap: 10px; }
.pl-head { display: flex; align-items: center; gap: 10px; }
.pl-title { flex: 1; padding: 8px 10px; border: 1px solid var(--border, #d9dee4); border-radius: 8px; font: inherit; font-size: 15px; font-weight: 600; }
.pl-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pl-pub { background: #e6f4ea; color: #1b7a3d; }
.pl-draft { background: #f0f0f0; color: #666; }
.pl-desc { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #d9dee4); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.pl-items { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fafbfa; border: 1px solid var(--border, #d9dee4); border-radius: 8px; }
.pl-item-pos { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #e6f4ea; color: #1b7a3d; }
.pl-item-title { flex: 1; font-size: 14px; }
.pl-warn { color: #9c7a12; font-size: 12px; }
.pl-item-ctrls { display: flex; gap: 4px; }
.pl-item-ctrls button { width: 28px; height: 28px; border: 1px solid var(--border, #d9dee4); background: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; }
.pl-item-ctrls button:disabled { opacity: .4; cursor: default; }
.pl-item-ctrls .pl-remove { color: #b42318; }
.pl-empty { padding: 8px; }
.pl-add { display: flex; flex-direction: column; gap: 6px; }
.pl-search { padding: 8px 10px; border: 1px solid var(--border, #d9dee4); border-radius: 8px; font: inherit; font-size: 14px; }
.pl-search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-res { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border, #d9dee4); border-radius: 8px; font-size: 14px; }
.pl-res-add { margin-left: auto; border: 1px solid #1b7a3d; background: #fff; color: #1b7a3d; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.pl-res-added { margin-left: auto; font-size: 12px; color: #1b7a3d; }

/* История прямых правок модератора */
.hist-item { display: flex; flex-direction: column; gap: 8px; }
.hist-item.is-reverted { opacity: .6; }
.hist-actions { display: flex; justify-content: flex-end; }

/* карта + список точек и правка (вкладка «Точки») */
.pts-workspace {
  display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 12px;
  margin-top: 12px; align-items: stretch;
}
.pts-map {
  position: relative; min-height: 520px; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; background: #eef2ee;
}
.pts-map-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.pts-list {
  list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
}
.pts-row { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pts-row:last-child { border-bottom: none; }
.pts-row:hover { background: rgba(31,122,84,.06); }
.pts-row-top { display: flex; align-items: center; gap: 8px; }
.pts-row-top b { font-size: 14px; }
.pts-row-addr { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pts-row-meta { font-size: 12px; margin-top: 2px; }
.pts-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9ccc9; flex-shrink: 0; margin-left: auto; }
.pts-dot.ok { background: var(--green, #1f7a54); }
.loc-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.loc-edit-grid .le-wide { grid-column: 1 / -1; }
.loc-edit-grid label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.loc-edit-grid .org-field { width: 100%; min-width: 0; }
.loc-edit-links { display: flex; gap: 8px; margin-top: 6px; }
@media (max-width: 900px) {
  .pts-workspace { grid-template-columns: 1fr; }
  .pts-map { min-height: 320px; }
  .pts-list { max-height: 360px; }
  .loc-edit-grid { grid-template-columns: 1fr; }
}

/* поля ручной привязки карточек Яндекса (вкладка «Точки») */
.org-field {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; background: #fff; color: inherit;
  font: inherit; min-width: 220px;
}
.org-field:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }