/* ===================================================================
   web/style-web.css
   Подключать ПОСЛЕ основного style.css (скопированного из miniapp) —
   этот файл только переопределяет/добавляет правила для десктопа.
   =================================================================== */

/* Ограничиваем ширину контента на большом экране, чтобы карточки
   не растягивались во всю ширину монитора */
:root.is-desktop .app,
:root.is-desktop #list {
  max-width: 1000px;
  margin-left: 32px;
  margin-right: auto;
}

/* --- Замена свайпов на hover-кнопки для десктопа ------------------ */

/* На touch-устройствах ничего не меняем — там работает исходная
   свайп-логика из style.css без изменений */

:root.is-desktop .card-hover-actions {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Кнопки действий больше не абсолютно спрятаны за карточкой —
   они статично стоят рядом и скрыты через opacity до hover 
   Порядок во flex-контейнере: сначала карточка, затем обе кнопки —
   независимо от того, что leftAction добавляется в DOM раньше карточки,
   визуально обе кнопки оказываются справа от неё. Заодно убираем
   transform от свайпа (на десктопе карточка не должна "уезжать" при
   клике) и делаем все карточки одинаковой высоты, чтобы список выглядел
   ровно независимо от того, сколько текста в конкретной карточке.*/
:root.is-desktop .card-hover-actions .card-swipeable {
  order: 1;
  flex: 1;
  min-width: 0; /* чтобы длинный текст не распирал flex-контейнер */
  transform: none !important;
  cursor: pointer;
  height: 86px;         /* одинаковая высота для всех карточек */
  box-sizing: border-box;
  overflow: hidden;
}

:root.is-desktop .card-hover-actions .card-swipeable .card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root.is-desktop .card-hover-actions .card-swipeable .card-meta,
:root.is-desktop .card-hover-actions .card-swipeable .card-remind {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root.is-desktop .card-hover-actions .swipe-action-left {
  order: 2;
}
:root.is-desktop .card-hover-actions .swipe-action-right {
  order: 3;
}
 
/* Кнопки действий больше не абсолютно спрятаны за карточкой —
   они статично стоят рядом справа и скрыты через opacity до hover */
:root.is-desktop .card-hover-actions .swipe-action {
  position: static;
  width: 44px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  border-radius: 10px;
  margin: 0 4px;
}
 
:root.is-desktop .card-hover-actions:hover .swipe-action {
  opacity: 1;
  pointer-events: auto;
}
 
/* Убираем transform, который применялся для свайпа — на десктопе
   карточка не должна "уезжать" при клике */
:root.is-desktop .card-hover-actions .card-swipeable {
  transform: none !important;
  cursor: pointer;
}
 
:root.is-desktop .card-hover-actions .card-swipeable:hover {
  background: rgba(255, 255, 255, 0.03);
}
 
/* --- Модалки по центру экрана вместо bottom sheet ------------------ */
 
:root.is-desktop #card-overlay,
:root.is-desktop #form-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
:root.is-desktop #card-sheet,
:root.is-desktop #form-sheet {
  position: static;
  width: 420px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 16px;
  transform: none !important; /* отключаем translateY-логику bottom sheet */
}
 
/* Ручка для свайпа-закрытия на мобильном — на десктопе бессмысленна */
:root.is-desktop .sheet-handle {
  display: none;
}
 
/* --- Табы/subbar: на десктопе можно расположить горизонтально сверху,
   если в исходной вёрстке они были нижней панелью навигации ---------- */
 
:root.is-desktop .tabs {
  position: static;
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
 
/* --- FAB: на десктопе уместнее обычная кнопка в углу списка,
   а не плавающая круглая кнопка снизу справа как на мобильном ------- */
 
:root.is-desktop #fab-add {
  position: sticky;
  top: 16px;
  right: 16px;
  margin-left: auto;
  width: auto;
  height: auto;
  padding: 10px 20px;
  border-radius: 10px;
}