/**
 * Tips – tips-SPECIFIKA regler.
 *
 * Delade layout-komponenter (ffn container, sidebar, toolbar, filters,
 * pagination, settings, animation m.m.) finns i app-shell.css.
 *
 * Den här filen innehåller ENBART:
 *   – App-band-etikett (.app-band-label)
 *   – Hänglås-badge (.tips__lock-badge) och låst-kort (.ffn__card--locked)
 *   – Tips-specifika fav-knapp-färger (.tips__fav-btn)
 *   – Spara-vy-modal (.tips__modal*) – Tips-specifik klass
 *   – Inställnings-rader (.tips-settings__*)
 *   – Toolbar-komprimering (.ffn--tips .ffn__toolbar-*) för tätare layout
 *   – Tagg-pills (.ffn__tag-pill) på kortfoten
 *   – Responsiv: masonry-kolumner + vertikal toolbar på mobil
 *
 * Body-klasser: .app-page-tips | .app-page-tips-single
 * Prefix: .tips__ (tips-specifikt), .ffn--tips (modifierare på ffn-elementen)
 *
 * @package Cctrl\Theme
 */

/* ================================================================
   App-band: TIPS-etikett
   ================================================================ */
.app-band-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lav-600, #7c3aed);
}

/* ================================================================
   Hänglås-badge på låsta Tips-kort
   ================================================================ */
.tips__lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}

.ffn__card--locked {
  opacity: 0.8;
}
.ffn__card--locked .ffn__title a,
.ffn__card--locked .ffn__title {
  color: var(--muted, #6b7280);
}

/* ================================================================
   Favorit-knapp – .tips__fav-btn
   Hjärtat är absolut positionerat i bannern (via app-shell.css).
   Nedan: bara banner-specifika färgoverrides för .tips__fav-btn.
   ================================================================ */

/* Mörk gradient (lav / terra): vit hjärta */
.news-card__banner--lav .tips__fav-btn,
.news-card__banner--terra .tips__fav-btn {
  color: #ffffff;
}
.news-card__banner--lav .tips__fav-btn:hover,
.news-card__banner--terra .tips__fav-btn:hover {
  color: #ffffff;
  opacity: 0.85;
}
.news-card__banner--lav .tips__fav-btn.ffn__favorite-btn--active,
.news-card__banner--terra .tips__fav-btn.ffn__favorite-btn--active,
.news-card__banner--lav .tips__fav-btn.ffn__favorite-btn--active:hover,
.news-card__banner--terra .tips__fav-btn.ffn__favorite-btn--active:hover {
  color: #ff8888;
  opacity: 1;
}

/* Ljus gradient (lav-light): mörk hjärta */
.news-card__banner--lav-light .tips__fav-btn {
  color: var(--lav-700, #4a4c7a);
}
.news-card__banner--lav-light .tips__fav-btn:hover {
  color: var(--lav-900, #3d3e66);
  opacity: 1;
}
.news-card__banner--lav-light .tips__fav-btn.ffn__favorite-btn--active,
.news-card__banner--lav-light .tips__fav-btn.ffn__favorite-btn--active:hover {
  color: var(--red-500, #d64545);
  opacity: 1;
}

/* Single-tip-favorit: inline med text, inte absolut */
.tips-single-fav.app-fav-btn {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  gap: var(--space-2, 8px);
  border-radius: var(--radius-sm, 8px);
  isolation: auto;
}

.tips-single-fav.app-fav-btn .app-fav-icon {
  position: static;
  transform: none;
}

/* Uppgradera-länk på låsta kort */
.tips__upgrade-link {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lav-600, #5557a0);
  margin-top: 6px;
  text-decoration: none;
}
.tips__upgrade-link:hover {
  text-decoration: underline;
}

/* ================================================================
   Spara-vy-modal – .tips__modal
   tips-specifik klass; ffn__modal används av Nyheter.
   ================================================================ */
.tips__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tips__modal[hidden] {
  display: none;
}
.tips__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.tips__modal-content {
  position: relative;
  background: var(--bg, #fff);
  border-radius: 12px;
  padding: clamp(24px, 5vw, 40px);
  width: min(460px, 92vw);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.tips__modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink, #111);
}
.tips__modal-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink, #111);
}
.tips__modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--outline, rgba(0, 0, 0, 0.14));
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--ink, #111);
  background: var(--bg, #fff);
  box-sizing: border-box;
  margin-bottom: 20px;
  outline: none;
  transition: border-color 0.15s;
}
.tips__modal-input:focus {
  border-color: var(--accent, #7c3aed);
}
.tips__modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

html[data-theme="dark"] .tips__modal-content {
  background: var(--bg, #1a1a2e);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .tips__modal-input {
  background: var(--bg-elevated, #23233a);
  color: var(--text, #e5e7eb);
  border-color: var(--outline, rgba(255, 255, 255, 0.12));
}

/* ================================================================
   Inställnings-sida – sparade vyer
   ================================================================ */
.ffn__settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.tips-settings__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elevated, #f9f9ff);
  border-radius: 8px;
  border: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
}
.tips-settings__row-main {
  flex: 1;
  min-width: 0;
}
.tips-settings__view-name {
  font-weight: 600;
  color: var(--ink, #111);
  text-decoration: none;
}
.tips-settings__view-name:hover {
  color: var(--accent, #7c3aed);
  text-decoration: underline;
}
.tips-settings__row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

html[data-theme="dark"] .tips-settings__row {
  background: var(--bg-elevated, #1e1e30);
  border-color: var(--outline, rgba(255, 255, 255, 0.08));
}
html[data-theme="dark"] .tips-settings__view-name {
  color: var(--text, #e5e7eb);
}

/* Paginering → app-shell.css */

/* ================================================================
   Toolbar-komprimering: Tips har fler filter → tätare layout
   Scoped till .ffn--tips för att inte påverka Nyheter
   ================================================================ */
/* Toolbar-fälten är identiskt stora i Tips och Nyheter.
   Enda skillnad: Nyheter har ett extra Prioritet-fält (finns inte i Tips). */
.ffn--tips .ffn__toolbar-row {
  flex-wrap: wrap;
  gap: var(--space-2, 16px);
}
.ffn--tips .ffn__toolbar-search {
  min-width: 180px;
}
.ffn--tips .ffn__toolbar-group {
  flex-shrink: 0;
}
.ffn--tips .ffn__toolbar-select {
  min-width: 140px;
}
.ffn--tips .ffn__toolbar-select--multi {
  min-width: 180px;
  max-width: 240px;
  min-height: 44px;
}
.ffn--tips .ffn__toolbar-btn,
.ffn--tips .ffn__toolbar-save {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ================================================================
   Tagg-pills i kortfoten
   ================================================================ */
.ffn__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin-bottom: 4px;
}
.ffn__tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--lav-100, #f3f4fb);
  color: var(--lav-700, #515289);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid var(--lav-200, #d4d5e8);
}

/* ================================================================
   Responsiv – Tips-specifika breakpoints
   Sidebar-hide hanteras av app-shell.css (≤1023px).
   ================================================================ */

/* Tablet (≤1023px): mobil vy-dropdown + 2 kolumner masonry */
@media screen and (max-width: 1023px) {
  body.app-page-tips .ffn__mobile-view,
  body.app-page-tips-single .ffn__mobile-view {
    display: block !important;
  }
  body.app-page-tips .ffn__list--masonry,
  body.app-page-tips-single .ffn__list--masonry {
    column-count: 2;
  }
  .ffn--tips .ffn__toolbar-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Mobil (≤768px): toolbar vertikal, alla fält fullbredd */
@media screen and (max-width: 768px) {
  .ffn--tips .ffn__toolbar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ffn--tips .ffn__toolbar-search,
  .ffn--tips .ffn__toolbar-select,
  .ffn--tips .ffn__toolbar-select--multi {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  .ffn--tips .ffn__toolbar-save {
    margin-left: 0;
  }
}

/* ============================================================
   Member-teaser – samma mönster som Nyheter
   ============================================================ */
.ffn--tips .ffn__card--teaser {
  position: relative;
  overflow: hidden;
}

.ffn--tips .ffn__card--teaser .ffn__summary,
.ffn--tips .ffn__card--teaser .ffn__tags {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
  opacity: 0.7;
}

.ffn--tips .ffn__card--teaser::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-card, #fff) 85%);
  pointer-events: none;
}

html[data-theme="dark"] .ffn--tips .ffn__card--teaser::after {
  background: linear-gradient(to bottom, transparent 0%, var(--bg-card-dark, #1e2030) 85%);
}

/* ============================================================
   Sidebar – Uppgradera visas bara vid hover
   ============================================================ */
.ffn__view-upgrade {
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ffn__view-link--locked:hover .ffn__view-upgrade,
.ffn__view-link--locked:focus-within .ffn__view-upgrade {
  opacity: 1;
}

/* ============================================================
   Favorit-knapp – animation (paritet med news-feed.css)
   ============================================================ */
.tips__fav-btn--popping  { animation: ffn-fav-pop   0.3s ease forwards; }
.tips__fav-btn--unpopping { animation: ffn-fav-unpop 0.25s ease forwards; }
.tips__fav-btn[aria-disabled="true"] { pointer-events: none; cursor: default; }

/* Liten mobil (≤600px): 1 kolumn */
@media screen and (max-width: 600px) {
  body.app-page-tips .ffn__list--masonry,
  body.app-page-tips-single .ffn__list--masonry {
    column-count: 1;
  }
  body.app-page-tips .ffn__main,
  body.app-page-tips-single .ffn__main {
    padding: 8px;
  }
}