/* ═══════════════════════════════════════════════════════
   Aper — Wishlist page styles
   Только токены из shared/theme.css — работают все 10 тем.
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Атрибут hidden должен побеждать display у флекс-контейнеров. */
[hidden] { display: none !important; }

body {
  font-family: var(--body-font, 'DM Sans', system-ui, -apple-system, sans-serif);
  font-size: 15px;
  background: var(--dt-bg, #03091a);
  color: var(--text, #c0d0ff);
  min-height: 100vh;
}

/* ── Main layout ──────────────────────────────────────── */

/* Шире, чем 820px у awards: masonry-лента с фото выигрывает от
   дополнительных колонок; текстовым страницам это не нужно. */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 68px 24px 120px;
}

/* Акцентная кнопка — токены активной кнопки темы.
   html[data-style] уравнивает специфичность с liquid-override .btn-header
   в components.css; наш файл ниже по порядку — выигрываем. */
html[data-style] .btn-primary {
  background: var(--btn-active-bg, var(--nav-active));
  color: var(--btn-active-fg, #fff);
  border-color: transparent;
}

/* ── Centered states (hero, loading, nickname, 404) ──── */

.aper-state {
  text-align: center;
  padding: 60px 0 24px;
}
/* Заголовки состояний — shared .page-title */
.aper-state .panel-desc { margin-bottom: 24px; }
.aper-hero-emoji {
  font-size: 56px;
  display: block;
  margin-bottom: 16px;
}
#auth-hero .btn-primary { font-size: 13px; padding: 10px 20px; }

/* ── Public profile head ──────────────────────────────── */

.aper-owner {
  text-align: center;
  padding: 40px 0;
}
/* Имя владельца — shared .page-title */
.aper-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 12px;
  border: 1px solid var(--panel-sep, var(--div-top));
}

/* ── Toolbar ──────────────────────────────────────────── */

#toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 24px 0 18px;
}
#share-btn { max-width: 100%; }
#share-btn-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}

#view-tabs { margin-bottom: 12px; }
.tab-count {
  opacity: 0.6;
  margin-left: 4px;
  font-weight: 400;
}

#cat-filter { margin-bottom: 18px; }

/* ── Wish cards ───────────────────────────────────────── */

/* Masonry: ряды по 1px, JS ставит каждой карточке grid-row-end: span
   <высота+зазор> (masonryLayout в main.js) — колонки пакуются плотно,
   порядок карточек остаётся слева направо. align-items: start, чтобы
   высота карточки не зависела от span. */
.wish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 14px;
  row-gap: 0;
  grid-auto-rows: 1px;
  align-items: start;
}

.wish-card {
  background: var(--win-bg, var(--panel-bg));
  border: 1px solid var(--panel-sep, var(--div-top));
  border-radius: var(--win-radius, 8px);
  box-shadow: var(--win-shadow, none);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wish-img {
  /* flex: none — иначе flex-shrink внутри карточки (flex-колонки,
     растянутой гридом до высоты ряда) ужимает фото и ломает пропорции.
     max-width + max-height при auto-размерах масштабируют с сохранением
     пропорций; вертикальные фото центрируются, рамка обнимает само фото. */
  flex: none;
  align-self: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  border-radius: calc(var(--win-radius, 8px) / 2);
  border: 1px solid var(--panel-sep, var(--div-top));
  background: var(--hover-bg, transparent);
}

.wish-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
a.wish-title {
  text-decoration: none;
}
a.wish-title:hover { color: var(--nav-active, var(--text)); text-decoration: underline; }
a.wish-title:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
}
.wish-title .lucide { opacity: 0.6; margin-left: 4px; }

.wish-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.wish-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.wish-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.wish-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--panel-sep, var(--div-top));
  color: var(--text-muted);
}
/* 💝 Заветное — акцентный бейдж; слабый огонь приглушён. */
.wish-tag--p6 {
  background: var(--btn-active-bg, var(--nav-active));
  color: var(--btn-active-fg, #fff);
  border-color: transparent;
}
.wish-tag--p1 { opacity: 0.65; }

/* «Кто исполнил» на исполненной карточке */
.wish-by {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.wish-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.wish-action {
  background: var(--header-btn-bg, transparent);
  border: 1px solid var(--panel-sep, var(--div-top));
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wish-action:hover { color: var(--text); border-color: var(--nav-active, var(--text)); }
.wish-action:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
}

/* Ручка перетаскивания и перетаскиваемая карточка */
.wish-handle {
  cursor: grab;
  touch-action: none; /* палец тянет карточку, а не скроллит страницу */
}
.wish-card.dragging {
  opacity: 0.65;
  outline: 2px dashed var(--nav-active);
  outline-offset: 2px;
}

/* Кнопка «Исполнено» — с текстом, шире иконочных. */
.wish-action--text {
  width: auto;
  padding: 0 10px;
  gap: 5px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Исполненные карточки приглушаем. */
.wish-card--done { opacity: 0.75; }
.wish-card--done .wish-title { text-decoration: line-through; text-decoration-thickness: 1px; }

.wish-tag--done {
  color: var(--text);
  border-color: var(--nav-active, var(--text));
}

/* Бронь (публичная страница) */
.wish-tag--reserved {
  color: var(--text);
  border-style: dashed;
}
.reserve-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Hidden album ─────────────────────────────────────── */

#hidden-album {
  margin-top: 32px;
  border-top: 1px solid var(--panel-sep, var(--div-top));
  padding-top: 8px;
}
#hidden-album .side-panel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 4px;
  cursor: pointer;
}
#hidden-album .side-panel-toggle:hover { color: var(--text); }
#hidden-album .side-panel-toggle:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
}
#hidden-album .side-panel-toggle .arrow { margin-left: auto; }
#hidden-album.collapsed .side-panel-body { display: none; }
#hidden-album .side-panel-body { padding: 8px 0 0; }
.hidden-count { opacity: 0.7; font-weight: 400; }

/* Приглушаем карточки скрытых. */
#hidden-list .wish-card { opacity: 0.75; }

/* ── Form fields (drawer + nickname) ──────────────────── */

.fld {
  display: block;
  margin-bottom: 14px;
}
.fld-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.fld input[type="text"],
.fld input[type="url"],
.fld input[type="number"],
.fld input[type="date"],
.fld select,
.fld textarea,
#nick-input {
  width: 100%;
  background: var(--header-btn-bg, transparent);
  border: 1px solid var(--panel-sep, var(--div-top));
  border-radius: calc(var(--win-radius, 8px) / 2);
  color: var(--text);
  font-family: var(--body-font, system-ui, sans-serif);
  font-size: 14px;
  padding: 9px 12px;
}
.fld textarea { resize: vertical; }
.fld input:focus-visible,
.fld select:focus-visible,
.fld textarea:focus-visible,
#nick-input:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 1px;
}
.fld input::placeholder,
.fld textarea::placeholder,
#nick-input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Фото в форме */
.photo-preview {
  position: relative;
  width: 100%;
}
.photo-preview img {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: calc(var(--win-radius, 8px) / 2);
  border: 1px solid var(--panel-sep, var(--div-top));
  display: block;
}
.photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--panel-bg, var(--win-bg));
}
#photo-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.photo-hint {
  font-size: 11px;
  color: var(--text-muted);
}
#photo-add-btn.uploading { opacity: 0.6; pointer-events: none; }

.fld-row { display: flex; gap: 10px; }
.fld-grow { flex: 1; }
.fld-row .fld { margin-bottom: 14px; }

.fld-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.fld-check input { accent-color: var(--nav-active); }

.fld-error {
  font-size: 13px;
  color: var(--nav-active);
  margin: 10px 0;
}

#wish-form .segmented-control { width: 100%; }
#wish-form .segmented-control-btn { flex: 1; }

/* Вертикальный выбор приоритета: 💝 Заветное и огни 5…1 */
.prio-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prio-btn {
  background: var(--header-btn-bg, transparent);
  border: 1px solid var(--panel-sep, var(--div-top));
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  padding: 8px 14px;
  letter-spacing: 1px;
}
.prio-btn:hover { border-color: var(--nav-active, var(--text)); }
.prio-btn:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
}
.prio-btn.active {
  background: var(--btn-active-bg, var(--nav-active));
  color: var(--btn-active-fg, #fff);
  border-color: transparent;
}
#wish-save-btn { width: 100%; justify-content: center; }

/* ── Nickname row ─────────────────────────────────────── */

.nick-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 360px;
  margin: 0 auto;
}
.nick-row #nick-input { flex: 1; }

/* #theme-switcher — позиция и фон в shared/components.css */

/* ── Right sidebar: фильтры (паттерн westeros-sejire) ── */

#aper-sidebar {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 100;
  width: 210px;
}

/* .side-panel — база в shared/components.css */

.filter-section { margin-bottom: 12px; }
.filter-section .side-panel-subhead { display: block; margin: 0 0 6px; }

.fl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fl-chips--col {
  flex-direction: column;
  align-items: stretch;
}
.fl-chip {
  background: var(--header-btn-bg, transparent);
  border: 1px solid var(--panel-sep, var(--div-top));
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  padding: 4px 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-chip:hover { color: var(--text); border-color: var(--nav-active, var(--text)); }
.fl-chip:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 1px;
}
.fl-chip.active {
  background: var(--btn-active-bg, var(--nav-active));
  color: var(--btn-active-fg, #fff);
  border-color: transparent;
}

.fl-group { margin-bottom: 12px; font-size: 12px; }
#fl-clear { width: 100%; justify-content: center; }

/* Скрываем ручки перетаскивания, когда порядок не «ручной». */
.no-drag .wish-handle { display: none; }

/* Группировка по приоритету: секции с заголовками (≈ Notion) */
#wish-list.grouped { display: block; }
.wish-group { margin-bottom: 28px; }
.wish-group:last-child { margin-bottom: 0; }
.wish-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.group-count {
  font-size: 12px;
  color: var(--text-muted);
}

/* Десктоп: сайдбар фиксированный справа, main остаётся по центру. */
@media (min-width: 901px) {
  main { max-width: 1460px; }
  #sidebar-toggle-btn { display: none !important; }
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 900px) {
  #aper-sidebar {
    display: none;
    top: 56px;
    right: 10px;
    width: 240px;
    z-index: 450;
  }
  #aper-sidebar.open:not([hidden]) { display: block; }
}

@media (max-width: 600px) {
  main { padding: 64px 14px 100px; }
  .wish-grid { grid-template-columns: 1fr; }
  #share-btn-text { max-width: 60vw; }
  /* Компактнее, в ногу с .ceremony-header у awards. */
  .aper-owner { padding: 24px 0; }

  /* Вкладки: три подписи со счётчиками не влезают с дефолтными
     отступами shared-сегментов (особенно в моноширинных темах) —
     ужимаем кнопки; в крайнем случае контрол скроллится, а не
     вылезает за экран. */
  #view-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #view-tabs::-webkit-scrollbar { display: none; }
  #view-tabs .segmented-control-btn {
    min-width: 0;
    padding: 8px 6px;
    font-size: 11px;
    white-space: nowrap;
  }
  .tab-count { margin-left: 3px; }
}