/* ═══════════════════════════════════════════════════════
   Content Factory — Redesign Iteration 4
   Loaded AFTER redesign3.css
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════
   1. МОБИЛЬНАЯ НАВИГАЦИЯ — всегда видна, узкая
══════════════════════════════════ */
@media (max-width: 640px) {
  :root { --sb: 72px !important; }

  /* Сайдбар всегда виден — никакого transform */
  #sidebar {
    transform: none !important;
    width: 72px !important;
    transition: none !important;
  }

  /* Скрыть подписи и секционные заголовки */
  .sbn-l      { display: none !important; }
  .sb-section { display: none !important; }
  #sb-title   { display: none !important; }

  /* Квадратные плитки 72×72 */
  .sbn {
    width: 72px !important;
    height: 72px !important;
  }

  /* Логотип — только иконка */
  #sb-logo {
    width: 72px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Топбар и контент — учитываем узкий сайдбар */
  #topbar {
    left: 72px !important;
    height: 56px !important;
  }
  #main {
    margin-left: 72px !important;
    margin-top: 56px !important;
  }
  #hdr { top: 56px !important; }

  /* Скрыть кнопку-гамбургер на мобильном (не нужна) */
  #tb-menu-btn { display: none !important; }

  /* Бренд-имя в топбаре — скрыть на мобильном */
  #tb-brand-name { display: none !important; }

  /* Кнопки топбара — компактнее */
  .tb-sc-btn { padding: 0 8px !important; min-width: 32px !important; }
  .tb-sc-btn span { display: none !important; }

  .tb-btn span { display: none !important; }
  .tb-btn { min-width: 40px !important; padding: 0 8px !important; }
}

/* ══════════════════════════════════
   2. ПЛИТКИ НАВИГАЦИИ — крупнее
══════════════════════════════════ */
.sbn {
  height: calc(var(--sb) + 4px) !important; /* чуть выше чем ширина */
}

.sbn-ic svg {
  width: 30px !important;
  height: 30px !important;
}

.sbn-l {
  font-size: 10.5px !important;
  letter-spacing: 0.01em !important;
}

/* Секционные заголовки — крупнее, ярче, с рамкой */
.sb-section {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: rgba(212,176,106,0.85) !important;
  padding: 14px 8px 6px !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  margin: 6px 4px 0 !important;
  border-top: 1px solid rgba(212,176,106,0.18) !important;
}

.sb-section:first-child {
  border-top: none !important;
  margin-top: 2px !important;
}

/* ══════════════════════════════════
   3. ТОПБАР — кнопки как квадратные панели
══════════════════════════════════ */

/* Секционные кнопки контекста */
.tb-sc-btn {
  height: 48px !important;
  min-width: 70px !important;
  border-radius: 10px !important;
  background: rgba(212,176,106,0.05) !important;
  border: 1px solid rgba(212,176,106,0.15) !important;
  padding: 0 10px !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.tb-sc-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.tb-sc-btn:hover {
  background: rgba(212,176,106,0.12) !important;
  border-color: rgba(212,176,106,0.28) !important;
}

.tb-sc-btn.active {
  background: rgba(212,176,106,0.18) !important;
  border-color: rgba(212,176,106,0.4) !important;
  color: #D4B06A !important;
  box-shadow: 0 0 12px rgba(212,176,106,0.15) !important;
}

.tb-sc-btn.back {
  min-width: 52px !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #948777 !important;
}

.tb-sc-btn.primary {
  background: rgba(212,176,106,0.22) !important;
  border-color: rgba(212,176,106,0.45) !important;
  color: #F0C86A !important;
}

.tb-sc-btn.danger {
  border-color: rgba(226,74,74,0.25) !important;
}

/* Правые утилитарные кнопки — тоже как панели */
.tb-btn {
  height: 48px !important;
  min-width: 56px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.tb-btn:hover {
  border-color: rgba(212,176,106,0.15) !important;
}

/* ══════════════════════════════════
   4. ШАПКА (HDR) — хлебные крошки + бренд
══════════════════════════════════ */
#hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 28px !important;
  height: 52px !important;
  min-height: 52px !important;
  background: rgba(10,8,6,0.8) !important;
  border-bottom: 1px solid rgba(212,176,106,0.1) !important;
  backdrop-filter: blur(8px) !important;
}

#hdr-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #948777 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}

/* Бренд в правом углу шапки */
#hdr::after {
  content: 'AI CREATIVE LAB';
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: rgba(212,176,106,0.35);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   5. КНОПКИ ПРОЕКТА (ppb) — более красивые
══════════════════════════════════ */
.ppb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(212,176,106,0.2) !important;
  background: rgba(212,176,106,0.06) !important;
  color: #D8CCBA !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}

.ppb:hover {
  background: rgba(212,176,106,0.12) !important;
  border-color: rgba(212,176,106,0.35) !important;
  color: #F8F4EA !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
}

.ppb.primary {
  background: rgba(212,176,106,0.2) !important;
  border-color: rgba(212,176,106,0.45) !important;
  color: #F0C86A !important;
  box-shadow: 0 2px 12px rgba(212,176,106,0.15) !important;
}

.ppb.primary:hover {
  background: rgba(212,176,106,0.3) !important;
  box-shadow: 0 4px 20px rgba(212,176,106,0.25) !important;
}

.ppb.success {
  background: rgba(37,208,125,0.1) !important;
  border-color: rgba(37,208,125,0.35) !important;
  color: #25D07D !important;
}

.ppb.warn {
  background: rgba(240,165,58,0.1) !important;
  border-color: rgba(240,165,58,0.35) !important;
  color: #F0A53A !important;
}

.ppb.danger {
  background: rgba(226,74,74,0.08) !important;
  border-color: rgba(226,74,74,0.28) !important;
  color: #E24A4A !important;
}

.ppb.danger:hover {
  background: rgba(226,74,74,0.15) !important;
  box-shadow: 0 4px 14px rgba(226,74,74,0.15) !important;
  transform: none !important;
}

/* Строка кнопок в pp-stage */
.pp-stage-body > div:last-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

/* Заголовок стадии */
.pp-stage-hdr {
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  cursor: pointer !important;
  border-radius: 12px !important;
  transition: background 0.12s !important;
  gap: 10px !important;
}

.pp-stage-hdr:hover {
  background: rgba(212,176,106,0.05) !important;
}

.pp-stage-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #F8F4EA !important;
  flex: 1 !important;
}

/* Badge статуса */
.pp-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.pp-badge.draft {
  background: rgba(148,135,119,0.15) !important;
  color: #948777 !important;
  border: 1px solid rgba(148,135,119,0.25) !important;
}

.pp-badge.in_review {
  background: rgba(240,165,58,0.12) !important;
  color: #F0A53A !important;
  border: 1px solid rgba(240,165,58,0.3) !important;
}

.pp-badge.approved {
  background: rgba(37,208,125,0.12) !important;
  color: #25D07D !important;
  border: 1px solid rgba(37,208,125,0.3) !important;
}

/* Pipeline кнопки */
.pp-pipe-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
  border: 1px solid rgba(212,176,106,0.1) !important;
}

.pp-pipe-stage:hover {
  background: rgba(212,176,106,0.07) !important;
  border-color: rgba(212,176,106,0.2) !important;
}

.pp-pipe-stage-name {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #948777 !important;
  letter-spacing: 0.03em !important;
}

.pp-pipe-arrow {
  color: rgba(212,176,106,0.3) !important;
  font-size: 18px !important;
  align-self: center !important;
}

/* ══════════════════════════════════
   6. РАЗДЕЛ ГЕНЕРАЦИИ — улучшения
══════════════════════════════════ */

/* Убрать дурацкие иконки через CSS (где невозможно через JS) */
.gen-fullpage .st {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #D4B06A !important;
  letter-spacing: -0.01em !important;
  padding: 28px 28px 8px !important;
}

/* Форма генерации */
.gen-twocol .gen-left-panel {
  background: #0E0B08 !important;
  border-right: 1px solid rgba(212,176,106,0.12) !important;
}

/* Кнопка генерировать в разделе генерации */
button[onclick*="startGeneration"],
button[onclick*="runGeneration"],
.gen-submit-btn {
  background: linear-gradient(135deg, rgba(212,176,106,0.25) 0%, rgba(212,176,106,0.12) 100%) !important;
  border: 1px solid rgba(212,176,106,0.4) !important;
  color: #F0C86A !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  height: 52px !important;
  border-radius: 12px !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s !important;
  box-shadow: 0 4px 20px rgba(212,176,106,0.1) !important;
}

/* ══════════════════════════════════
   7. ОБЩИЕ ПРАВКИ
══════════════════════════════════ */

/* Кнопка удалить проект */
button[onclick*="ppDeleteProject"],
button[onclick*="deleteProject"] {
  background: rgba(226,74,74,0.08) !important;
  border: 1px solid rgba(226,74,74,0.25) !important;
  color: rgba(226,74,74,0.7) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  transition: all 0.15s !important;
}

button[onclick*="ppDeleteProject"]:hover,
button[onclick*="deleteProject"]:hover {
  background: rgba(226,74,74,0.15) !important;
  color: #E24A4A !important;
  border-color: rgba(226,74,74,0.4) !important;
}

/* Заголовок проекта (contenteditable) */
[contenteditable="true"] {
  border-radius: 8px !important;
  padding: 4px 8px !important;
  transition: background 0.12s !important;
}

[contenteditable="true"]:hover {
  background: rgba(212,176,106,0.06) !important;
}

[contenteditable="true"]:focus {
  outline: 1px solid rgba(212,176,106,0.3) !important;
  background: rgba(212,176,106,0.05) !important;
}

/* ══════════════════════════════════
   8. ДАТА В ПРОЕКТЕ — убрать эмодзи-стиль
══════════════════════════════════ */
.pp-date {
  font-size: 12px !important;
  color: #948777 !important;
  letter-spacing: 0.03em !important;
  opacity: 0.8 !important;
}

/* Скрыть эмодзи-иконку календаря рядом с датой */
.pp-date::before {
  content: '' !important;
}

/* ══════════════════════════════════
   TABLET адаптивность
══════════════════════════════════ */
@media (max-width: 900px) {
  .tb-sc-btn span { font-size: 9px !important; }
  .tb-sc-btn { min-width: 52px !important; }
}