/**
 * App shell – toppstripe med app launcher (Microsoft 365-stil).
 * Laddas tillsammans med header-app.php (t.ex. på BetterDocs / Biblioteket).
 * Design tokens från global.css.
 */

/* Dölj eventuell BuddyBoss/theme header om den skulle injiceras – app-shell ska vara enda toppen */
body.app-shell-header #masthead,
body.app-shell-header .site-header {
  display: none !important;
}

/* Mega-nav: samma sidbakgrund som övriga sidor (cctrl-core: --bg + radialer), inte platt lav-500 */
body.app-shell-header {
  --cctrl-mega-nav-bar-height: 92px;
  --bar-height: var(--cctrl-mega-nav-bar-height, 92px);
}

body.app-shell-header .cctrl-app-shell-header {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.app-shell-header .cctrl-app-shell-nav-spacer {
  display: block;
  width: 100%;
  height: var(--cctrl-mega-nav-bar-height, 92px);
  min-height: 0;
  flex-shrink: 0;
  /* Ingen transition: undvik desync/darr mot mega-nav transform vid scroll */
  transition: none;
  pointer-events: none;
}

/* Dölj BuddyBoss sidopanel (buddypanel) helt på app-shell – ingen lila sidebar */
body.app-shell-header .buddypanel,
body.app-shell-header #buddypanel {
  display: none !important;
}
body.app-shell-header #content,
body.app-shell-header #page,
body.app-shell-header .site,
body.app-shell-header .site-content,
body.app-shell-header.buddypanel-open #page {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  /* overflow: visible krävs för att position:sticky ska fungera på barn */
  overflow: visible !important;
}

/* Ta bort mellanrum under app-band – ingen extra padding, alla appar */
body.app-shell-header .app-shell-content {
  padding-top: 0;
}
body.app-shell-header #content .container {
  padding-top: 0;
}

/*
 * #primary ska inte flex-växa (tom ruta under innehåll); min-height 60vh m.m. nollas i cctrl-layout för app-shell.
 */
body.app-shell-header #primary.cctrl-main,
body.app-shell-header main.cctrl-main {
  flex-grow: 0 !important;
  flex-basis: auto !important;
}

/* Sidomeny: ta bort onödig min-höjd som kan skapa tom radyta i grid-raden */
body.app-shell-header .ffn--with-sidebar .ffn__sidebar {
  min-height: 0;
}

/* App-bar ska ligga överst och synas – klistrad vid scroll (äldre app-topbar; mega-nav är fixed) */
.app-topbar-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible; /* så användardropdown (cctrl-user-dropdown) syns under toppen */
}

/* WP admin-bar är 32px (desktop) / 46px (mobil) fixed vid top.
   body.admin-bar får html { margin-top: 32px } av WP, men position:sticky
   räknar top: 0 från scroll-containerns kant – inte från skärmens kant.
   Utan kompensation glider topbaren in BAKOM admin-baren vid scroll.  */
body.admin-bar .app-topbar-wrap {
  top: 32px;
}
body.admin-bar .app-band {
  top: calc(32px + var(--bar-height, 48px));
}
body.admin-bar .app-sidebar {
  top: calc(32px + var(--bar-height, 48px) + var(--appband-height, 52px));
  max-height: calc(100vh - 32px - var(--bar-height, 48px) - var(--appband-height, 52px));
}
body.admin-bar .ffn__sidebar {
  top: calc(32px + var(--bar-height, 48px) + var(--appband-height, 52px));
  max-height: calc(100vh - 32px - var(--bar-height, 48px) - var(--appband-height, 52px));
}
@media screen and (max-width: 782px) {
  body.admin-bar .app-topbar-wrap { top: 46px; }
  body.admin-bar .app-band        { top: calc(46px + var(--bar-height, 48px)); }
  body.admin-bar .app-sidebar     { top: calc(46px + var(--bar-height, 48px) + var(--appband-height, 52px)); max-height: calc(100vh - 46px - var(--bar-height, 48px) - var(--appband-height, 52px)); }
  body.admin-bar .ffn__sidebar    { top: calc(46px + var(--bar-height, 48px) + var(--appband-height, 52px)); max-height: calc(100vh - 46px - var(--bar-height, 48px) - var(--appband-height, 52px)); }
}

/* Topbar – mörkaste lila (lav-900) så det matchar bandet */
.app-topbar-wrap {
  --bar-bg: var(--lav-900, #3d3e66);
  --bar-text: #ffffff;
  --bar-height: 48px;
}

/* Lila band – mörkaste lila enligt style guide (lav-900) */
.app-topbar-wrap {
  background: var(--lav-900, #3d3e66);
  padding: 0 0 0 12px;
  border-radius: 0;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-height);
  min-height: var(--bar-height);
  background: var(--bar-bg);
  color: var(--bar-text);
  padding: 0 16px 0 12px;
  border-radius: 0;
  flex-shrink: 0;
  gap: 24px;
  overflow: visible; /* så användardropdown syns under toppen */
}

.app-topbar-left,
.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.app-topbar-left {
  gap: 12px;
}

/* App-launcher: logobild (nio prickar + text i bilden). Ingen hover/animation – bara klick öppnar menyn. */
.app-launcher-trigger {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  margin: 0 -4px;
  background: transparent !important;
  border: none !important;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: none;
}

/* Logotyp: topbaren är alltid mörk – visa Dark.png (ljus text) så logon syns */
.app-logo {
  display: inline-flex;
  align-items: center;
}
.app-logo img {
  max-height: 32px;
  height: auto;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.app-logo .app-logo-light {
  display: none;
}
.app-logo .app-logo-dark {
  display: inline-block;
}

.app-topbar-right {
  margin-left: auto;
}

.user-menu-btn,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 36px;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

/* Ingen bakgrund på användarmenyn */
.user-menu-btn {
  background: transparent !important;
}

.user-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.user-menu-btn .avatar,
.app-topbar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terracotta-500, #e57a55);
  flex-shrink: 0;
  object-fit: cover;
}

.app-launcher-trigger {
  transition: none;
}

/* Dark/light som toggle – ingen bakgrund, bara ikon */
.theme-toggle {
  background: transparent !important;
  border: none !important;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.theme-toggle .theme-icon {
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.2s ease;
}

.theme-toggle .theme-icon.moon {
  margin-left: 2px;
}

/* Visa sol i ljust läge, måne i mörkt */
.theme-toggle .theme-icon.moon {
  display: none;
}

.theme-toggle .theme-icon.sun {
  display: inline-block;
}

body.app-theme-dark .theme-toggle .theme-icon.sun {
  display: none;
}

body.app-theme-dark .theme-toggle .theme-icon.moon {
  display: inline-block;
}

/* Launcher panel – under äldre topbar: absolut; under mega-nav: fixed höger */
.launcher {
  position: absolute;
  top: 100%;
  left: 12px;
  margin: 0;
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 48px rgba(20,20,60,.2);
  overflow: hidden;
  z-index: 1001;
  transition: opacity 0.2s ease;
}

/* App-launcher-panel: position: absolute inuti .cctrl-launcher-wrap (position: relative)
   Samma mönster som .cctrl-user-dropdown – ingen JS-positionsberäkning behövs. */
.cctrl-launcher-wrap {
  position: relative;
}

.cctrl-launcher-wrap .launcher {
  position: absolute;
  top: calc(100% + var(--cctrl-popunder-gap, 12px));
  right: 0;
  left: auto;
  width: var(--cctrl-mega-popunder-width, min(320px, calc(100vw - 24px)));
  max-width: var(--cctrl-mega-popunder-width, min(320px, calc(100vw - 24px)));
  box-sizing: border-box;
  z-index: 10200;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 255, 0.98) 100%);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--outline, #e8e6f5), transparent 30%);
  box-shadow: 0 8px 32px rgba(61, 62, 102, 0.15), 0 2px 8px rgba(61, 62, 102, 0.08);
  overflow: hidden;
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cctrl-launcher-wrap .launcher:not(.is-open) {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.cctrl-launcher-wrap .launcher.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cctrl-launcher-wrap .launcher--minimal .launcher__grid:not(.launcher__grid--admin) {
  padding: 4px 4px 12px;
}

html[data-theme="dark"] .cctrl-launcher-wrap .launcher {
  background: linear-gradient(180deg, rgba(70, 71, 112, 0.98) 0%, rgba(61, 62, 102, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Fast rad under admin bar när mega-nav är dold och sidan saknar app-band */
.cctrl-app-chrome-fallback {
  display: none;
  position: fixed;
  z-index: 150;
  left: 0;
  right: 0;
  top: var(--cctrl-admin-bar-h, 0px);
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: var(--cctrl-chrome-fallback-h, 52px);
  padding: 8px clamp(16px, 4vw, 24px);
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #e8e6f5;
  box-shadow: 0 2px 12px rgba(61, 62, 102, 0.06);
  pointer-events: auto;
}

.cctrl-app-chrome-fallback:not([hidden]) {
  display: flex;
}

body.admin-bar .cctrl-app-chrome-fallback {
  --cctrl-admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .cctrl-app-chrome-fallback {
    --cctrl-admin-bar-h: 46px;
  }
}

html[data-theme="dark"] .cctrl-app-chrome-fallback {
  background: var(--bg-card, var(--bg, #151726));
  border-bottom-color: var(--outline, #333854);
}

.cctrl-launcher-wrap .launcher__grid:not(.launcher__grid--admin) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.launcher[hidden] {
  display: none !important;
}

.launcher.is-open {
  display: block;
}

.launcher__header {
  background: var(--lav-900);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.launcher__title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: white;
}
.launcher__close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.launcher__close:hover {
  background: rgba(255,255,255,0.2);
}
.launcher__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 20px 6px;
}
.launcher__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 16px 16px;
}
.launcher__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
  color: var(--ink);
}
.launcher__item:hover { background: var(--lav-100); }
.launcher__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm, 6px);
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--lav-50);
  border: 1.5px solid var(--lav-200);
  color: var(--lav-700);
  transition: all .12s;
}
.launcher__item:hover .launcher__icon:not(.launcher__icon--brand) {
  background: var(--lav-200);
  border-color: var(--lav-400);
}
.launcher__icon svg {
  width: 20px;
  height: 20px;
}
.launcher__icon svg path,
.launcher__icon svg polygon,
.launcher__icon svg circle,
.launcher__icon svg rect {
  stroke: currentColor;
  fill: none;
}
.launcher__icon--active {
  background: var(--lav-700);
  border-color: var(--lav-700);
  color: white;
}
.launcher__item:hover .launcher__icon--active {
  background: var(--lav-900);
  border-color: var(--lav-900);
}
.launcher__label {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
}
.launcher__divider {
  height: 1px;
  background: var(--outline);
  margin: 4px 20px;
}
.launcher__grid--admin {
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: 20px;
}
.launcher__grid--admin .launcher__icon {
  background: transparent;
  border: 1.5px dashed var(--lav-200);
  color: var(--muted);
}
.launcher__grid--admin .launcher__item:hover .launcher__icon {
  background: var(--lav-50);
  border-style: solid;
  border-color: var(--lav-400);
  color: var(--lav-700);
}

.launcher__item--inactive {
  cursor: not-allowed;
  opacity: 0.6;
}
.launcher__item--inactive:hover {
  background: transparent;
}
.launcher__item--inactive:hover .launcher__icon:not(.launcher__icon--brand) {
  background: var(--lav-50);
  border-color: var(--lav-200);
}

/* App-rutnät: gradientikoner (tokens från cctrl-core – lav / terra / ocean m.m.) */
.launcher__icon.launcher__icon--brand {
  border: none;
  color: #fff;
  box-shadow: 0 2px 10px rgba(61, 62, 102, 0.22);
}
.launcher__item:hover .launcher__icon.launcher__icon--brand {
  filter: brightness(1.07);
  box-shadow: 0 4px 14px rgba(61, 62, 102, 0.28);
}
.launcher__item--inactive .launcher__icon.launcher__icon--brand {
  filter: saturate(0.7) brightness(0.94);
  opacity: 0.88;
}
.launcher__item--inactive:hover .launcher__icon.launcher__icon--brand {
  filter: saturate(0.75) brightness(0.96);
}

.launcher__icon--app-gemenskap {
  background: linear-gradient(135deg, var(--lav-800, #464770) 0%, var(--lav-500, #6264a7) 100%);
}
.launcher__icon--app-akademi {
  background: linear-gradient(135deg, var(--ocean-poetry-900, #1f4f8f) 0%, var(--ocean-poetry-500, #2b88d8) 100%);
}
.launcher__icon--app-bibliotek {
  background: linear-gradient(135deg, var(--terra-600, #d66a45) 0%, var(--terra-400, #ea8f6e) 100%);
}
.launcher__icon--app-tips {
  background: linear-gradient(135deg, var(--timeless-lilac-900, #5b3a8e) 0%, var(--lav-500, #6264a7) 100%);
}
.launcher__icon--app-uppgifter {
  background: linear-gradient(135deg, #2d8a5c 0%, var(--green-500, #3fa370) 100%);
}
.launcher__icon--app-vision {
  background: linear-gradient(135deg, var(--lav-600, #55578f) 0%, var(--lav-400, #aeb3da) 100%);
}
.launcher__icon--app-events {
  background: linear-gradient(135deg, var(--terra-900, #a94c2d) 0%, var(--terra-500, #e57a55) 100%);
}
.launcher__icon--app-nyheter {
  background: linear-gradient(135deg, var(--lav-900, #3d3e66) 0%, var(--lav-500, #6264a7) 100%);
}
.launcher__icon--app-aipia {
  background: linear-gradient(135deg, var(--timeless-lilac-900, #5b3a8e) 0%, #7c5cbf 100%);
}
.launcher__icon--app-coach {
  background: linear-gradient(135deg, var(--terra-900, #a94c2d) 0%, var(--golden-morning-500, #f2c94c) 100%);
  color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(169, 76, 45, 0.35);
}
.launcher__icon--app-coach svg {
  color: rgba(255, 255, 255, 0.98);
}

/* =======================================================================
   App-band – gemensam rad under app launcher för alla appar (AKADEMI, NEWS, TIPS, …)
   ======================================================================= */
.app-band {
  position: -webkit-sticky;
  position: sticky;
  /* Klistra precis under topbaren (--bar-height: 48px) */
  top: var(--bar-height, 48px);
  z-index: 100;
  background: var(--app-bg, #f5f5f5);
  border-bottom: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  padding: 8px clamp(16px, 4vw, 24px) 8px 24px;
  min-height: 36px;
  display: flex;
  align-items: center;
  /* app-band-höjd: 36px + 16px padding = 52px; används av sidofältets top-offset */
  --appband-height: 52px;
}

/* Ligga visuellt närmare mega-nav-kortet (samma kolumnbredd som nav-baren) */
body.app-shell-header .app-band {
  /* Klister precis under mega-nav; JS håller --cctrl-mega-nav-bar-height uppdaterat (92px → 0px vid scroll) */
  top: var(--cctrl-mega-nav-bar-height, 92px);
  margin-top: -10px;
  padding-top: 10px;
  border-top: 1px solid #e8e6f5;
  background: #ffffff;
  /* 10 + 36 min + 8 ≈ 54px (sidofält offset) */
  --appband-height: 54px;
}
body.admin-bar.app-shell-header .app-band {
  top: calc(32px + var(--cctrl-mega-nav-bar-height, 92px));
}
@media screen and (max-width: 782px) {
  body.admin-bar.app-shell-header .app-band {
    top: calc(46px + var(--cctrl-mega-nav-bar-height, 92px));
  }
}

body.app-shell-header .app-band-inner {
  max-width: min(1600px, calc(100vw - 80px));
  margin-left: auto;
  margin-right: auto;
}

.app-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  max-width: 1400px;
  margin: 0;
  width: 100%;
}

/* App-länkar först, tema / launcher / användare sist (höger) */
body.app-shell-header .app-band-inner--with-chrome {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

body.app-shell-header .app-band-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

body.app-shell-header.logged-in .app-band-chrome {
  display: none;
  flex-shrink: 0;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 120;
}

body.app-shell-header.logged-in.cctrl-mega-nav-collapsed .app-band-chrome {
  display: inline-flex;
}

body.app-shell-header .app-band-chrome .cctrl-mega-nav__user-menu {
  position: relative;
}

@media screen and (max-width: 768px) {
  body.app-shell-header .app-band-main {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  body.app-shell-header .app-band-inner:not(.app-band-inner--with-chrome) {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
}
.app-band-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
}
.app-band-inner .app-band-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lav-600, #5557a0);
  text-decoration: none;
}
.app-band-inner .app-band-link:hover {
  color: var(--lav-700, #4b4d7a);
  text-decoration: underline;
}
.app-band-inner .app-band-sep {
  color: var(--muted, #6b7280);
  font-weight: 300;
  user-select: none;
}

/* Biblioteket m.fl.: .akademi-nav i app-band (samma mönster som tutor.css .akademi-nav-wrap) */
html[data-theme="dark"] .app-band {
  background: var(--bg, #151726);
  border-bottom-color: var(--outline, #333854);
}

html[data-theme="dark"] body.app-shell-header .app-band {
  /* --bg-card saknar dark-override i cctrl-core; använd --bg-elev direkt */
  background: var(--bg-elev, #1e2132);
  border-top-color: var(--outline, #333854);
}

html[data-theme="dark"] .app-band-inner .app-band-link {
  color: var(--lav-300, #cfd3ec);
}
html[data-theme="dark"] .app-band-inner .app-band-link:hover {
  color: var(--lav-200, #e6e8f6);
}
html[data-theme="dark"] .app-band-inner .app-band-sep {
  color: var(--muted, #a3a8c2);
}
html[data-theme="dark"] .app-band-inner .akademi-nav-context,
html[data-theme="dark"] .app-band-inner .akademi-nav-sep {
  color: var(--muted, #a3a8c2);
}
html[data-theme="dark"] .app-band-inner .akademi-nav-link {
  color: var(--lav-300, #cfd3ec);
}
html[data-theme="dark"] .app-band-inner .akademi-nav-link:hover {
  color: var(--lav-200, #e6e8f6);
}
html[data-theme="dark"] .app-band-inner .akademi-nav-link[aria-current="page"] {
  color: var(--primary, #6264a7);
  border-bottom-color: var(--primary, #6264a7);
}

/* =======================================================================
   App-shell body: valfri sidopanel (WordPress-meny) + innehållsarea
   Sidopanelen visas endast om en meny är tilldelad aktuell app-plats.
   ======================================================================= */

.app-shell-has-sidebar #content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* overflow: visible krävs för att position:sticky ska fungera i barn-element */
  overflow: visible;
}

.app-shell-body {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: visible;
  /* align-items: start krävs för position:sticky på barn att fungera i flex-kontext */
  align-items: start;
  /* Vertikal separator-linje ritas på containern – sträcker sig från
     allra överst (appbarens underkant) till sidans botten.
     220px = bredden på .app-sidebar */
  position: relative;
}

.app-shell-has-sidebar .app-shell-body::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 220px;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

.app-sidebar {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  /* Transparent – BuddyBoss kan sätta bakgrund på <aside>, slå över allt */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-3, 16px) 0 !important;
  margin: 0 !important;
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--bar-height, 48px) + var(--appband-height, 52px));
  align-self: start;
  max-height: calc(100vh - var(--bar-height, 48px) - var(--appband-height, 52px));
  overflow-y: auto;
}

.app-sidebar-nav {
  padding: 0;
}

/* =======================================================================
   VYER-sidebar – gemensam standard för strukturerade innehållssidor
   (Tips, Initiativ, e-böcker, tredjepartsappar …)

   Klassen app-sidebar-nav--views sätts automatiskt av header-app.php
   när innehållstypen har registrerat sig via filtret:
     add_filter('cctrl_is_views_sidebar_location', fn($v,$l) => $v || $l === 'cctrl_app_sidebar_xxx', 10, 2)

   Matchas med .ffn__sidebar { padding: 16px 8px } i news-feed.css
   (Nyheter använder ffn__sidebar inuti sin shortcode-layout).
   ======================================================================= */
.app-sidebar-nav--views {
  padding: 16px 8px;
}

.app-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-sidebar-menu li {
  margin: 0;
}

.app-sidebar-menu a {
  display: block;
  padding: 10px 24px;
  color: var(--brand-ink, #635d5b);
  text-decoration: none;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
}

.app-sidebar-menu a:hover,
.app-sidebar-menu .current-menu-item > a {
  background: rgba(98, 100, 167, 0.08);
  border-left-color: var(--brand-lavender, #6264a7);
  color: var(--brand-twilight, #3d3e66);
}

.app-sidebar-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1em;
}

.app-sidebar-menu .sub-menu a {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.app-shell-content {
  flex: 1;
  min-width: 0;
  /* Luft under innehållet när det inte finns paginering (samma känsla som under paginering + sidfot). */
  padding-bottom: var(--space-6, 48px);
}

/* =======================================================================
   Nyheter (Flavor Feed) – app-sida: fullbredd, ingen container-begränsning.
   BuddyBoss lägger padding: 0 10px på .site-content och max-width: 1200px
   + padding: 10px på .container. Allt nollställs här så .ffn styr sin layout.
   ======================================================================= */
body.app-shell-header.app-page-nyheter #content {
  padding: 0 !important;
}
body.app-shell-header.app-page-nyheter #content .container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

body.app-shell-header.app-page-nyheter .site-content-grid {
  max-width: 100%;
  padding: 0;
}

/* .ffn--with-sidebar hanterar sin egen layout (grid 240px + 1fr) och padding internt */
body.app-shell-header.app-page-nyheter .ffn {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Dölj sidtitel – kontext visas i NEWS-bandet under app launcher */
body.app-shell-header.app-page-nyheter .entry-header,
body.app-shell-header.app-page-nyheter .page-header {
  display: none;
}

body.app-shell-header.app-page-nyheter .entry-title,
body.app-shell-header.app-page-nyheter .page-title {
  font-size: var(--h2-size, 1.5rem);
  font-weight: 600;
  color: var(--ink, #2a2f36);
  margin: 0;
}

/* =======================================================================
   Tips – fullbredd + appshell-anpassning (spegel av Nyheter ovan)
   OBS: padding: 0 sätts INTE på .ffn – Tips shortcode matar ut ett enda
   element (.ffn.ffn--tips.ffn__main). Paddingen i news-feed.css för
   .ffn__main (8px 16px) ska gälla direkt.
   ======================================================================= */
body.app-shell-header.app-page-tips #content,
body.app-shell-header.app-page-tips-single #content,
body.app-shell-header.app-page-attgora #content,
body.app-shell-header.app-page-visionsmakaren #content,
body.app-shell-header.app-page-vision-gallery #content {
  padding: 0 !important;
}
body.app-shell-header.app-page-tips #content .container,
body.app-shell-header.app-page-tips-single #content .container,
body.app-shell-header.app-page-attgora #content .container,
body.app-shell-header.app-page-visionsmakaren #content .container,
body.app-shell-header.app-page-vision-gallery #content .container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}
body.app-shell-header.app-page-tips .site-content-grid,
body.app-shell-header.app-page-tips-single .site-content-grid,
body.app-shell-header.app-page-attgora .site-content-grid,
body.app-shell-header.app-page-visionsmakaren .site-content-grid,
body.app-shell-header.app-page-vision-gallery .site-content-grid {
  max-width: 100%;
  padding: 0;
}
body.app-shell-header.app-page-tips .ffn,
body.app-shell-header.app-page-tips-single .ffn,
body.app-shell-header.app-page-attgora .ffn,
body.app-shell-header.app-page-visionsmakaren .cctrl-vision-main,
body.app-shell-header.app-page-vision-gallery .cctrl-vision-gallery {
  max-width: 100%;
  margin: 0;
}
body.app-shell-header.app-page-tips .entry-header,
body.app-shell-header.app-page-tips .page-header,
body.app-shell-header.app-page-tips-single .entry-header {
  display: none;
}

/* Nyheter single-post: samma layout-reset som listsidan + tips-single */
body.app-shell-header.app-page-nyheter-article #content {
  padding: 0 !important;
}
body.app-shell-header.app-page-nyheter-article #content .container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}
body.app-shell-header.app-page-nyheter-article .site-content-grid {
  max-width: 100%;
  padding: 0;
}

/* Responsiv sidebar: dölj app-sidebar + separator på tablet/mobil */
@media screen and (max-width: 1023px) {
  body.app-page-tips .app-sidebar,
  body.app-page-tips-single .app-sidebar,
  body.app-page-nyheter-article .app-sidebar,
  body.app-page-attgora .app-sidebar,
  body.app-page-visionsmakaren .app-sidebar,
  body.app-page-vision-gallery .app-sidebar {
    display: none !important;
  }
  /* Separator-linjen (::before på containern) döljs när sidebar döljs */
  body.app-page-tips .app-shell-body::before,
  body.app-page-tips-single .app-shell-body::before,
  body.app-page-nyheter-article .app-shell-body::before,
  body.app-page-attgora .app-shell-body::before,
  body.app-page-visionsmakaren .app-shell-body::before,
  body.app-page-vision-gallery .app-shell-body::before {
    display: none;
  }
  body.app-page-tips .app-shell-body,
  body.app-page-tips-single .app-shell-body,
  body.app-page-nyheter-article .app-shell-body,
  body.app-page-attgora .app-shell-body,
  body.app-page-visionsmakaren .app-shell-body,
  body.app-page-vision-gallery .app-shell-body {
    display: block;
  }
}

/* =======================================================================
   Mörkt läge (body.app-theme-dark) – launcher behåller vit/lilac om önskat
   Övre delen kan få mörkare bakgrund i dark mode om ni vill – justera här.
   ======================================================================= */

body.app-theme-dark .launcher-panel {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* =======================================================================
   App-footer – fluid sidfotsrad (Akademi, Biblioteket, etc.)
   Copyright centrerat, språk + tillgänglighet höger. Mer luft (som under paginering).
   ======================================================================= */
.app-footer {
  margin-top: auto;
  padding: var(--space-5, 32px) var(--space-4, 24px);
  background: var(--brand-lilac, #f3f4fb);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0 12px 0 0;
}

.app-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.app-footer__left {
  min-width: 0;
}

.app-footer__center {
  text-align: center;
}

.app-footer__copyright {
  font-size: var(--text-small, 0.875rem);
  color: var(--brand-ink, #635d5b);
}

.app-footer__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.app-footer__right > *:not(:last-child) {
  margin-right: 0;
}

/* =======================================================================
   DELADE KORTKOMPONENTER – App Shell (Nyheter, Tips, Events m.fl.)
   Ägare: app-shell.css (se docs/architecture/APP-SHELL-CSS-ARCHITECTURE.md)
   Ändra INTE dessa klasser i news-feed.css, tips.css eller events.css.
   ======================================================================= */

/* Kort-bas */
.ffn__card { position: relative; }
.news-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Stäng av cctrl-components.css .card:hover { transform: translateY(-2px) }
   på App Shell-kort. Den animationen ser ut som att hjärtat rör sig nedåt. */
.ffn__card:hover,
.news-card:hover { transform: none; }

/* Kortbanner */
.news-card__banner {
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  min-height: 64px;
  position: relative;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  overflow: hidden;
}
.news-card__banner--lav       { background: linear-gradient(135deg, var(--lav-700, #4a4c7a) 0%, var(--lav-500, #6264a7) 100%); }
.news-card__banner--terra     { background: linear-gradient(135deg, #c2410c 0%, #ea8f6e 100%); }
.news-card__banner--lav-light { background: linear-gradient(135deg, var(--lav-300, #cfd3ec) 0%, var(--lav-100, #f3f4fb) 100%); }

/* Pills i banner: tar all bredd minus hjärtat */
.news-card__banner .ffn__pills {
  flex: 1;
  margin-bottom: 0;
  padding-right: 44px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

/* Hjärtat i bannern: ABSOLUT i övre HÖGRA hörnet – ej flex-item */
.news-card__banner .ffn__favorite-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Mörk banner (lav / terra): vita pills */
.news-card__banner--lav .ffn__audience-pill,
.news-card__banner--lav .ffn__app-omrade-pill,
.news-card__banner--terra .ffn__audience-pill,
.news-card__banner--terra .ffn__app-omrade-pill {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
}

/* Ljus banner (lav-light): mörka pills */
.news-card__banner--lav-light .ffn__audience-pill,
.news-card__banner--lav-light .ffn__app-omrade-pill {
  color: var(--lav-900, #28285a);
  border-color: var(--lav-300, #cfd3ec);
}

/* Mörk gradient (lav + terra): vit hjärta.
   ALDRIG röd hover – röd/rosa smälter ihop med orange/lav-bakgrund. */
.news-card__banner--lav .ffn__favorite-btn,
.news-card__banner--terra .ffn__favorite-btn { color: rgba(255,255,255,0.75); }
.news-card__banner--lav .ffn__favorite-btn:hover,
.news-card__banner--terra .ffn__favorite-btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.18) !important;
  opacity: 1;
}
.news-card__banner--lav .ffn__favorite-btn--active,
.news-card__banner--terra .ffn__favorite-btn--active { color: #ff8888; opacity: 1; }
.news-card__banner--lav .ffn__favorite-btn--active:hover,
.news-card__banner--terra .ffn__favorite-btn--active:hover {
  color: #ffaaaa !important;
  background: rgba(255,255,255,0.18) !important;
  opacity: 1;
}

/* Ljus gradient (lav-light): mörkt hjärta */
.news-card__banner--lav-light .ffn__favorite-btn { color: var(--lav-700, #4a4c7a); }
.news-card__banner--lav-light .ffn__favorite-btn:hover {
  color: var(--lav-900, #3d3e66) !important;
  background: rgba(75,77,122,0.1) !important;
  opacity: 1;
}
.news-card__banner--lav-light .ffn__favorite-btn--active,
.news-card__banner--lav-light .ffn__favorite-btn--active:hover { color: var(--red-500, #d64545); opacity: 1; }

/* Kortkropp och kortfot */
.news-card__body  { padding: 14px 16px 16px; flex: 1; }
.news-card__footer { border-top: 1px solid var(--lav-50); padding: 10px 16px 14px; margin-top: auto; display: flex; justify-content: space-between; align-items: center; }

/* Cirkulär knapp-reset (favorit m.fl.) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

/* BuddyBoss .card__body padding override */
.ffn__card .card__body { padding: var(--space-3, 16px); flex: 1; }

/* Pill-container */
.ffn__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-1, 8px);
}

/* App-och-område-pill */
.ffn__app-omrade-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: transparent;
  color: var(--muted, #667085);
  border: 1px solid var(--outline, #d5d7e3);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Målgrupps-pill */
.ffn__audience-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: transparent;
  color: var(--muted, #667085);
  border: 1px solid var(--outline, #d5d7e3);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Titelrad */
.ffn__title-row { margin-bottom: var(--space-1, 8px); }
.ffn__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body, 'Source Sans Pro', sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lav-900, #3d3e66);
  margin: 0;
}
.ffn__title a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.ffn__title a:hover { color: var(--lav-500, #6264a7); }
.ffn__title a:focus-visible {
  outline: 3px solid rgba(98, 100, 167, 0.3);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Utdrag */
.ffn__summary { font-size: var(--bb-font-size-sm, 13px); line-height: 1.5; color: var(--ink, #2a2f36); margin-bottom: 0; }
.ffn__summary p { margin: 0; }

/* Kortfot: datum + källa */
.ffn__card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1, 8px);
  padding: var(--space-1, 8px) var(--space-2, 16px);
  font-size: var(--bb-font-size-sm, 13px);
  color: var(--muted, #667085);
  border-top: 1px solid var(--outline, rgba(0, 0, 0, 0.06));
}
.ffn__card-footer .ffn__date { white-space: nowrap; }

/* Favorit-knapp (hjärta) */
.ffn__favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent !important;
  color: var(--muted, #9ca3af);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s ease, opacity 0.18s ease, background 0.18s ease;
  flex-shrink: 0;
  isolation: isolate;
}
/* Hover/active: ENBART color – ingen transform, filter eller background
   på basnivå. Banner-varianter sätter egna hover-bakgrunder via egna regler. */
.ffn__favorite-btn:hover { color: var(--red-400, #f87171); }
.ffn__favorite-btn:active { opacity: 0.7; }
.ffn__favorite-btn:focus { outline: none; background: transparent !important; }
.ffn__favorite-btn:focus-visible {
  outline: 1.5px solid var(--lav-400, #8587c7);
  outline-offset: 3px;
  background: transparent !important;
}
.ffn__favorite-btn--active { color: var(--red-500, #ef4444); }
.ffn__favorite-btn--active:hover { color: var(--red-600, #dc2626); background: transparent !important; }

/* Crossfade-animation för hjärtikon (outline ↔ filled).
   VIKTIG REGEL: spring-transition (cubic-bezier) läggs ENBART på de
   klick-animeringsklasserna (--popping / --unpopping) via JS.
   Grundregeln har BARA opacity-transition – aldrig transform-transition –
   annars studsar ikonen vid varje hover-händelse. */
.ffn__favorite-icon {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transition: opacity 0.22s ease;
}
/* Spring-övershoot ENBART vid faktisk klick-animering: */
.ffn__favorite-btn--popping   .ffn__favorite-icon,
.ffn__favorite-btn--unpopping .ffn__favorite-icon {
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ffn__favorite-icon--outline { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ffn__favorite-icon--filled  { opacity: 0; transform: translate(-50%, -50%) scale(0.55); color: var(--red-500, #ef4444); }
.ffn__favorite-btn--active .ffn__favorite-icon--outline { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
.ffn__favorite-btn--active .ffn__favorite-icon--filled  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Hover: enbart lätt opacity-fade – ingen transform */
.ffn__favorite-btn:not(.ffn__favorite-btn--active):hover .ffn__favorite-icon--outline {
  opacity: 0.65;
}
.ffn__favorite-btn[aria-disabled="true"] .ffn__favorite-icon { animation: fav-wait 0.7s ease-in-out infinite alternate; }
@keyframes fav-wait { from { opacity: 0.35; } to { opacity: 0.9; } }

/* =======================================================================
   DARK MODE – App shell (Akademi, Biblioteket, inloggade sidor)
   ======================================================================= */

/* App launcher-panel – hela menyn mörk */
html[data-theme="dark"] .launcher {
  background: var(--bg-elev, #1e2132) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Tiles – ljus text (Gemenskap, Akademi, etc.) */
html[data-theme="dark"] .launcher__item {
  color: var(--text, #f7f7ff) !important;
}
html[data-theme="dark"] .launcher__item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .launcher__icon:not(.launcher__icon--brand) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] .launcher__item:hover .launcher__icon:not(.launcher__icon--brand) {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--lav-200, #d0d1e8) !important;
}

html[data-theme="dark"] .launcher__icon.launcher__icon--brand {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .launcher__item:hover .launcher__icon.launcher__icon--brand {
  filter: brightness(1.12);
}

html[data-theme="dark"] .launcher__item--inactive {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .launcher__item--inactive .launcher__icon:not(.launcher__icon--brand) {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .launcher__divider {
  background: var(--outline, #333854) !important;
}

html[data-theme="dark"] .launcher__grid--admin .launcher__icon {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .launcher__grid--admin .launcher__item:hover .launcher__icon {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] .app-footer__copyright {
  color: var(--muted, #a3a8c2);
}

html[data-theme="dark"] .app-footer {
  background: var(--bg-base, #13152a) !important;
  border-top-color: var(--outline, #333854) !important;
}

/* BuddyBoss sidfot (footer.footer-bottom.bb-footer) – BB --bb-footer-* är ljusa i app dark */
html[data-theme="dark"] .bb-footer {
  background: var(--bg-base, #13152a) !important;
  background-color: var(--bg-base, #13152a) !important;
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .bb-footer.footer-widget-area {
  background-color: var(--bg-base, #13152a) !important;
}

html[data-theme="dark"] .bb-footer .copyright,
html[data-theme="dark"] .bb-footer .footer-desc,
html[data-theme="dark"] .bb-footer span.footer-tagline {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .bb-footer li a,
html[data-theme="dark"] .bb-footer .footer-menu a,
html[data-theme="dark"] .bb-footer .widget ul li a,
html[data-theme="dark"] .footer-copyright-wrap .footer-menu a {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] .bb-footer li a:hover,
html[data-theme="dark"] .bb-footer .footer-menu a:hover,
html[data-theme="dark"] .bb-footer .widget ul li a:hover,
html[data-theme="dark"] .footer-copyright-wrap .footer-menu a:hover {
  color: var(--lav-300, #cfd3ec) !important;
}

html[data-theme="dark"] .bb-footer .footer-menu .current-menu-item a,
html[data-theme="dark"] .footer-copyright-wrap .footer-menu .current-menu-item a {
  color: var(--lav-200, #d0d1e8) !important;
  border-bottom-color: var(--lav-500, #6264a7) !important;
}

html[data-theme="dark"] .bb-footer .footer-socials a {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .bb-footer .footer-socials a:hover {
  color: var(--lav-300, #cfd3ec) !important;
}

html[data-theme="dark"] .bb-footer .footer-widget-area + .footer-bottom {
  border-top-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] .bb-footer .widget-title {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] .bb-footer .widget_nav_menu .sub-menu a {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .bb-footer .widget_nav_menu .sub-menu a:hover {
  color: var(--lav-300, #cfd3ec) !important;
}

html[data-theme="dark"] span.bb-separator.vertical,
html[data-theme="dark"] span.bb-separator.horizontal {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* =======================================================================
   DARK MODE – Nyheter / Flavor Feed
   Täcker: sidebar, filter-toolbar, nyhets-kort (.card + .ffn__card),
   form-kontroller, text och pills.
   ======================================================================= */

/* Sidopanel (Min vy, Alla, MINA VYER) – transparent, linjen sköts av ::before på containern */
html[data-theme="dark"] .ffn__sidebar {
  background: transparent !important;
  border-right: none !important;
}

html[data-theme="dark"] .ffn__sidebar-title {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .ffn__view-link {
  color: var(--text, #f7f7ff);
}

html[data-theme="dark"] .ffn__view-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--lav-200, #d0d1e8);
}

html[data-theme="dark"] .ffn__view-link--active {
  background: rgba(98, 100, 167, 0.22) !important;
  color: var(--lav-200, #d0d1e8) !important;
}

html[data-theme="dark"] .ffn__sidebar-section {
  border-bottom-color: var(--outline, #333854);
}

/* Filter-toolbar (Publicerad, Prioritet, App, Område, Sortera) */
html[data-theme="dark"] .ffn__toolbar,
html[data-theme="dark"] .ffn__filters {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854);
}

html[data-theme="dark"] .ffn__toolbar-label,
html[data-theme="dark"] .ffn__filter-label {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .ffn__toolbar-search,
html[data-theme="dark"] .ffn__toolbar-select,
html[data-theme="dark"] .ffn__select {
  background: var(--bg-base, #13152a) !important;
  color: var(--text, #f7f7ff) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] .ffn__toolbar-search::placeholder {
  color: var(--muted, #a3a8c2);
}

html[data-theme="dark"] .ffn__toolbar-btn {
  background: var(--lav-700, #4b4d7a) !important;
  color: #fff !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] .ffn__toolbar-save {
  background: var(--lav-600, #55578f) !important;
  color: #fff !important;
}

/* Nyhets-kort (.card är bas, .ffn__card ärver) */
html[data-theme="dark"] body.app-shell-header.app-page-nyheter .card,
html[data-theme="dark"] .ffn__card.card,
html[data-theme="dark"] .ffn__card {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] body.app-shell-header.app-page-nyheter .card:hover,
html[data-theme="dark"] .ffn__card.card:hover,
html[data-theme="dark"] .ffn__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--lav-600, #55578f) !important;
}

/* Korttitel */
html[data-theme="dark"] .ffn__title {
  color: var(--text, #f7f7ff) !important;
}

/* Sammanfattning/brödtext */
html[data-theme="dark"] .ffn__summary,
html[data-theme="dark"] .ffn__card .entry-content,
html[data-theme="dark"] .ffn__card p {
  color: var(--text-muted, #c5c8df) !important;
}

/* Datum, källa – BuddyBoss .card sätter ofta background:#fff på barnelement */
html[data-theme="dark"] .ffn__card-footer,
html[data-theme="dark"] .ffn__date,
html[data-theme="dark"] .ffn__source {
  background: transparent !important;
  color: var(--muted, #a3a8c2) !important;
  border-top-color: var(--outline, #333854) !important;
}

/* BuddyBoss .card__body / .card__footer kan sätta ljus bakgrund – slå över */
html[data-theme="dark"] .ffn__card .card__body,
html[data-theme="dark"] .ffn__card .card__footer,
html[data-theme="dark"] .ffn__card .card-body,
html[data-theme="dark"] .ffn__card .card-footer,
html[data-theme="dark"] .ffn__card [class*="card__"],
html[data-theme="dark"] .ffn__card [class*="card-"] {
  background: transparent !important;
  border-color: var(--outline, #333854) !important;
}

/* Favorit-knapp */
html[data-theme="dark"] .ffn__favorite-btn {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .ffn__favorite-btn:hover,
html[data-theme="dark"] .ffn__favorite-btn.is-favorited {
  color: var(--lav-300, #b8b9d9) !important;
}

/* Pills – mörkt läge */
html[data-theme="dark"] .ffn__audience-pill {
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.12);
}

html[data-theme="dark"] .ffn__app-omrade-pill {
  background: rgba(30, 92, 168, 0.25) !important;
  color: var(--lav-200, #d0d1e8) !important;
}

/* Paginering */
html[data-theme="dark"] .ffn__pagination-member-hint {
  color: var(--muted, #a3a8c2);
}

html[data-theme="dark"] .ffn__pagination-member-hint a {
  color: var(--lav-300, #b8b9d9);
}

/* Member smakprov (guest banner) */
html[data-theme="dark"] .ffn__member-smakprov {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

/* Gate (inlogg-prompt) */
html[data-theme="dark"] .ffn-gate {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
  color: var(--text, #f7f7ff);
}

/* =======================================================================
   DARK MODE – BuddyBoss (Gemenskap: Aktivitetsflöde, Grupper, Forum, Profil)
   ======================================================================= */

/* Nav under topbar – läsbar text */
html[data-theme="dark"] .bb-primary-nav .main-navigation a,
html[data-theme="dark"] .bb-primary-nav .sub-menu a,
html[data-theme="dark"] #site-navigation .menu-item a,
html[data-theme="dark"] .primary-menu > li > a,
html[data-theme="dark"] .bb-tab-bar .menu-item a {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] .bb-primary-nav .main-navigation a:hover,
html[data-theme="dark"] #site-navigation .menu-item a:hover,
html[data-theme="dark"] .primary-menu > li > a:hover {
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] .bb-primary-nav .current-menu-item > a,
html[data-theme="dark"] .bb-primary-nav .current_page_item > a,
html[data-theme="dark"] #site-navigation .current-menu-item > a,
html[data-theme="dark"] .bb-tab-bar .current-menu-item > a {
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] .bb-tab-bar,
html[data-theme="dark"] .site-header .primary-menu {
  border-bottom-color: var(--outline, #333854);
}

/* Sidofält och kort (Recent Posts, Groups, Complete your profile, etc.) */
html[data-theme="dark"] #buddypress .widget,
html[data-theme="dark"] #secondary .widget,
html[data-theme="dark"] .buddypress-wrap .widget,
html[data-theme="dark"] .bb-card,
html[data-theme="dark"] .bs-card,
html[data-theme="dark"] [class*="bb-card"],
html[data-theme="dark"] [class*="bs-card"] {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
  color: var(--text, #f7f7ff);
}

html[data-theme="dark"] #buddypress .widget .widget-title,
html[data-theme="dark"] #secondary .widget .widget-title,
html[data-theme="dark"] .buddypress-wrap .widget-title {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .widget a,
html[data-theme="dark"] #secondary .widget a {
  color: var(--lav-300, #b8b9d9);
}

html[data-theme="dark"] #buddypress .widget a:hover,
html[data-theme="dark"] #secondary .widget a:hover {
  color: var(--lav-200, #d0d1e8);
}

/* BuddyBoss Recent posts m.fl. – "SE ALLA" (.count-more): kit ger ofta mörk text / fel bakgrund på mörk widget */
html[data-theme="dark"] #secondary .widget .more-block a.count-more,
html[data-theme="dark"] #secondary aside[id^="boss-recent-posts"] a.count-more,
html[data-theme="dark"] .bb-sticky-sidebar .widget .more-block a.count-more {
  color: #fff !important;
  background: var(--lav-600, #55578f) !important;
  border: 1px solid var(--outline, #333854) !important;
}

html[data-theme="dark"] #secondary .widget .more-block a.count-more:hover,
html[data-theme="dark"] #secondary aside[id^="boss-recent-posts"] a.count-more:hover,
html[data-theme="dark"] .bb-sticky-sidebar .widget .more-block a.count-more:hover {
  color: #fff !important;
  background: var(--lav-500, #6264a7) !important;
  border-color: var(--lav-400, #7a7cb5) !important;
}

/*
 * (BB) Latest Activities i sidofält: namn + händelse + grupp som en sammanhängande textrad (samma storlek/färg);
 * tidsangivelse (a.activity-time-since) på egen rad, diskret färg.
 */
body.logged-in #secondary .bp-latest-activities .bp-activity-info,
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text, #1a1a2e);
  min-width: 0; /* flex-barn: undvik hårda radbrytningar i smalt sidofält */
}

body.logged-in #secondary .bp-latest-activities .bp-activity-info p,
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info p {
  margin: 0 0 0.35em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Sekundär avatar (grupplogga) i action-texten – dold i widget */
body.logged-in #secondary .bp-latest-activities .bp-activity-info p a:has(img.avatar),
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info p a:has(img.avatar) {
  display: none !important;
}

body.logged-in #secondary .bp-latest-activities .bp-activity-info p a,
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info p a {
  display: inline !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-decoration: none;
  vertical-align: baseline;
}

body.logged-in #secondary .bp-latest-activities .bp-activity-info p a:hover,
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info p a:hover {
  text-decoration: underline;
}

body.logged-in #secondary .bp-latest-activities .bp-activity-info a.activity-time-since,
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info a.activity-time-since {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem !important;
  line-height: 1.35;
  font-weight: 400 !important;
  text-decoration: none !important;
}

body.logged-in #secondary .bp-latest-activities .bp-activity-info a.activity-time-since .time-since,
body.logged-in #secondary-right .bp-latest-activities .bp-activity-info a.activity-time-since .time-since {
  color: var(--muted, #6b6b85) !important;
}

html[data-theme="dark"] body.logged-in #secondary .bp-latest-activities .bp-activity-info,
html[data-theme="dark"] body.logged-in #secondary-right .bp-latest-activities .bp-activity-info {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] body.logged-in #secondary .bp-latest-activities .bp-activity-info p a,
html[data-theme="dark"] body.logged-in #secondary-right .bp-latest-activities .bp-activity-info p a {
  color: inherit !important;
}

html[data-theme="dark"] body.logged-in #secondary .bp-latest-activities .bp-activity-info a.activity-time-since,
html[data-theme="dark"] body.logged-in #secondary-right .bp-latest-activities .bp-activity-info a.activity-time-since,
html[data-theme="dark"] body.logged-in #secondary .bp-latest-activities .bp-activity-info a.activity-time-since .time-since,
html[data-theme="dark"] body.logged-in #secondary-right .bp-latest-activities .bp-activity-info a.activity-time-since .time-since {
  color: var(--muted, #a3a8c2) !important;
}

/* Activity Feed – rubrik och filtertext */
html[data-theme="dark"] #buddypress .bp-feedback,
html[data-theme="dark"] #buddypress .bp-nav h2,
html[data-theme="dark"] .buddypress-wrap .activity-title,
html[data-theme="dark"] .buddypress-wrap .bp-screen-reader-text,
html[data-theme="dark"] .activity-list .activity-header p {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] .activity-list .activity-content,
html[data-theme="dark"] .activity-list .activity-inner {
  color: var(--text, #f7f7ff);
}

/*
 * Aktivitetsinnehåll (.activity-inner): inklistrat från BetterDocs/Gutenberg har inline/mörka färger;
 * betterdocs.css laddas inte på BuddyPress-sidor → tvinga läsbar dark mode här.
 */
html[data-theme="dark"] #buddypress .activity-list .activity-inner,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner h1,
html[data-theme="dark"] #buddypress .activity-list .activity-inner h2,
html[data-theme="dark"] #buddypress .activity-list .activity-inner h3,
html[data-theme="dark"] #buddypress .activity-list .activity-inner h4,
html[data-theme="dark"] #buddypress .activity-list .activity-inner h5,
html[data-theme="dark"] #buddypress .activity-list .activity-inner h6,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner h1,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner h2,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner h3,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner h4,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner h5,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner h6 {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner p,
html[data-theme="dark"] #buddypress .activity-list .activity-inner li,
html[data-theme="dark"] #buddypress .activity-list .activity-inner td,
html[data-theme="dark"] #buddypress .activity-list .activity-inner th,
html[data-theme="dark"] #buddypress .activity-list .activity-inner dd,
html[data-theme="dark"] #buddypress .activity-list .activity-inner dt,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner p,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner li,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner td,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner th,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner dd,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner dt {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner a,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner a {
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner .betterdocs-content,
html[data-theme="dark"] #buddypress .activity-list .activity-inner .betterdocs-entry-content,
html[data-theme="dark"] #buddypress .activity-list .activity-inner .betterdocs-entry-body,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner .betterdocs-content,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner .betterdocs-entry-content,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner .betterdocs-entry-body {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner .has-background,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner .has-background {
  background-color: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner blockquote,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner blockquote {
  border-left-color: var(--outline, #333854) !important;
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-inner pre,
html[data-theme="dark"] #buddypress .activity-list .activity-inner code:not([class*="activity-"]),
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner pre,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-inner code:not([class*="activity-"]) {
  background: var(--bg, #151726) !important;
  color: var(--text, #f7f7ff) !important;
  border-color: var(--outline, #333854) !important;
}

/*
 * Blog-/forum-aktiviteter (li.blogs m.fl.): BuddyBoss sätter #333 på .bb-post-title och länkar –
 * det slår arv från .activity-inner (t.ex. delade blogginlägg i flödet).
 */
html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner {
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-post-title,
html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-post-title,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-post-title .bb-reply-lable,
html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap .bb-reply-lable,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title .bb-reply-lable,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap .bb-reply-lable,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title .bb-reply-lable,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap .bb-reply-lable,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-post-title .bb-reply-lable,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap .bb-reply-lable,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title .bb-reply-lable,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap .bb-reply-lable,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title .bb-reply-lable,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap .bb-reply-lable {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-post-title a,
html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap a,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title a,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap a,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title a,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap a,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-post-title a,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap a,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title a,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap a,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title a,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap a {
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-post-title a:hover,
html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap a:hover,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title a:hover,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap a:hover,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title a:hover,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-post-title a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap a:hover {
  color: var(--lav-200, #e6e8f6) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-content-inr-wrap > .bb-icon-corner-down-right,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-content-inr-wrap > .bb-icon-corner-down-right,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-content-inr-wrap > .bb-icon-corner-down-right,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-content-inr-wrap > .bb-icon-corner-down-right,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-content-inr-wrap > .bb-icon-corner-down-right,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-content-inr-wrap > .bb-icon-corner-down-right {
  color: var(--muted, #a3a8c2) !important;
}

/*
 * Blogginlägg i flödet: .bb-content-wrp har #fafafa i BuddyBoss → med vår ljusa text på p blir det oläsbart.
 * Rubriken ligger i <a class="bb-post-title-link"><span class="bb-post-title"> (inte .bb-post-title a).
 */
html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-content-wrp,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-content-wrp {
  background-color: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-post-title-link,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-post-title-link {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.blogs .activity-content .activity-inner .bb-post-title-link:hover,
html[data-theme="dark"] .buddypress-wrap .activity-list li.blogs .activity-content .activity-inner .bb-post-title-link:hover {
  color: var(--lav-200, #e6e8f6) !important;
}

html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-content-inr-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-content-inr-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .activity-content .activity-inner .bb-content-inr-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .activity-content .activity-inner .bb-content-inr-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_topic_create .bb-content-inr-wrap,
html[data-theme="dark"] #buddypress .activity-list li.bbp_reply_create .bb-content-inr-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_topic_create .bb-content-inr-wrap,
html[data-theme="dark"] .buddypress-wrap .activity-list li.bbp_reply_create .bb-content-inr-wrap {
  background-color: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
}

/* "Share what's on your mind" – inmatningsfält */
html[data-theme="dark"] #buddypress .activity-update-form textarea,
html[data-theme="dark"] #buddypress .activity-update-form input[type="text"],
html[data-theme="dark"] .buddypress-wrap .activity-update-form textarea,
html[data-theme="dark"] .buddypress-wrap .activity-update-form input[type="text"],
html[data-theme="dark"] #whats-new-form textarea,
html[data-theme="dark"] #whats-new-form input {
  background: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
  border-color: var(--outline, #333854);
}

html[data-theme="dark"] #whats-new-form textarea::placeholder,
html[data-theme="dark"] #whats-new-form input::placeholder {
  color: var(--muted, #a3a8c2);
}

/* Activity-feedobjekt (rutor med innehåll) */
html[data-theme="dark"] #buddypress .activity-list.bp-list,
html[data-theme="dark"] .buddypress-wrap .activity-list.bp-list,
html[data-theme="dark"] #activity-stream .activity-list.bp-list {
  background: transparent !important;
  border: 1px solid var(--outline, #333854) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .activity-list > li.activity-item,
html[data-theme="dark"] .activity-list.bp-list > li.activity-item,
html[data-theme="dark"] .activity-list > li,
html[data-theme="dark"] .activity-item {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid var(--outline, #333854) !important;
  box-shadow: none !important;
  color: var(--text, #f7f7ff);
}

/* Länk-/URL-förhandsvisning i inlägg: vit ruta från BB → samma ton som övriga kort */
html[data-theme="dark"] #buddypress .activity-list .activity-link-preview-container,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-link-preview-container {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-link-preview-container .activity-link-preview-title,
html[data-theme="dark"] #buddypress .activity-list .activity-link-preview-container .activity-link-preview-title a,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-link-preview-container .activity-link-preview-title,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-link-preview-container .activity-link-preview-title a {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-list .activity-link-preview-container .activity-link-preview-excerpt p,
html[data-theme="dark"] .buddypress-wrap .activity-list .activity-link-preview-container .activity-link-preview-excerpt p {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .activity-list .activity-content a {
  color: var(--lav-300, #b8b9d9);
}

/* Activity header / group meta: författarnamn (t.ex. span.activity-post-author a) – annars mörk länk på mörk kortbakgrund */
html[data-theme="dark"] #buddypress .activity-post-author a,
html[data-theme="dark"] #buddypress .activity-group-post-meta a,
html[data-theme="dark"] #buddypress .activity-header--group a,
html[data-theme="dark"] #buddypress .bp-activity-head a[data-bb-hp-profile],
html[data-theme="dark"] .buddypress-wrap .activity-post-author a,
html[data-theme="dark"] .buddypress-wrap .activity-group-post-meta a,
html[data-theme="dark"] .buddypress-wrap .activity-header--group a {
  color: var(--lav-300, #b8b9d9) !important;
}

html[data-theme="dark"] #buddypress .activity-post-author a:hover,
html[data-theme="dark"] #buddypress .activity-group-post-meta a:hover,
html[data-theme="dark"] #buddypress .activity-header--group a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-post-author a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-group-post-meta a:hover,
html[data-theme="dark"] .buddypress-wrap .activity-header--group a:hover {
  color: var(--lav-200, #d0d1e8) !important;
}

/* Sök och filter (Show all updates by new posts) */
html[data-theme="dark"] #buddypress .activity-filter select,
html[data-theme="dark"] #buddypress .activity-filter a,
html[data-theme="dark"] .buddypress-wrap .activity-filter select,
html[data-theme="dark"] .buddypress-wrap .activity-filter a {
  color: var(--text, #f7f7ff);
}

/* Aktivitetskatalog: .activity-head-bar (sökfilter-knapp + Visa … / by …) – mörk text på mörk bakgrund */
html[data-theme="dark"] #buddypress .flex.activity-head-bar,
html[data-theme="dark"] .buddypress-wrap .flex.activity-head-bar {
  color: var(--text, #f7f7ff);
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-label,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-label {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .subnav-filters-opener,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .subnav-filters-opener {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .subnav-filters-opener .selected,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .subnav-filters-opener .selected {
  color: inherit !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .subnav-filters-opener i[class*="bb-icon"],
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .subnav-filters-opener i[class*="bb-icon"] {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar [class*="bb-icon-"]::before,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar [class*="bb-icon-"]::before {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .subnav-filters-modal,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .subnav-filters-modal {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .subnav-filters-modal a,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .subnav-filters-modal a {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .subnav-filters-modal li.selected a,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .subnav-filters-modal li.selected a {
  color: var(--lav-200, #d0d1e8) !important;
}

/* Sökfilter-knapp (förstoringsglas): BB sätter ljus knapp + #5a5a5a ikon – måste överstyras explicit */
html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid var(--outline, #333854) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener:hover,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener:hover,
html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener:focus-visible,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener:focus-visible {
  background: var(--lav-900, #3d3e66) !important;
  border-color: var(--lav-600, #55578f) !important;
  color: #fff !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener > i,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener > i {
  color: inherit !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener [class*="bb-icon"]::before,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener [class*="bb-icon"]::before {
  color: inherit !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener .screen-reader-text,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener .screen-reader-text {
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-modal,
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-modal {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #buddypress .activity-head-bar .bb-subnav-filters-search .subnav-filters-modal input[type="search"],
html[data-theme="dark"] .buddypress-wrap .activity-head-bar .bb-subnav-filters-search .subnav-filters-modal input[type="search"] {
  background: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
  border-color: var(--outline, #333854) !important;
}

/*
 * BuddyBoss directory (grupper, medlemmar m.m.): BB använder #333/#fff-rutor och #eee-kanter
 * som blir oläsbara mot app-shell mörk bakgrund.
 */
html[data-theme="dark"] #buddypress .main-navs.dir-navs ul li > a,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs ul li > a {
  color: var(--muted, #a3a8c2) !important;
  background: transparent !important;
}

html[data-theme="dark"] #buddypress .main-navs.dir-navs ul li.selected > a,
html[data-theme="dark"] #buddypress .main-navs.dir-navs ul li.current > a,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs ul li.selected > a,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs ul li.current > a {
  color: var(--text, #f7f7ff) !important;
  background: var(--bg-elev, #1e2132) !important;
  font-weight: 600;
}

html[data-theme="dark"] #buddypress .main-navs.dir-navs ul li:not(.current):not(.selected) > a:hover,
html[data-theme="dark"] #buddypress .main-navs.dir-navs ul li:not(.current):not(.selected) > a:focus,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs ul li:not(.current):not(.selected) > a:hover,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs ul li:not(.current):not(.selected) > a:focus {
  background: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .main-navs.dir-navs .bp-navs li a .count,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs .bp-navs li a .count {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress .main-navs.dir-navs .bp-navs li.selected a .count,
html[data-theme="dark"] #buddypress .main-navs.dir-navs .bp-navs li.current a .count,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs .bp-navs li.selected a .count,
html[data-theme="dark"] .buddypress-wrap .main-navs.dir-navs .bp-navs li.current a .count {
  background: var(--lav-800, #464770) !important;
  border-color: transparent !important;
  color: var(--text, #f7f7ff) !important;
}

@media screen and (max-width: 46.8em) {
  html[data-theme="dark"] .buddypress-wrap:not(.bp-single-vert-nav) .main-navs.dir-navs .bp-navs > ul > li,
  html[data-theme="dark"] #buddypress .main-navs.dir-navs .bp-navs > ul > li {
    background: var(--bg-elev, #1e2132) !important;
  }
}

html[data-theme="dark"] .buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav {
  border-bottom: 1px solid var(--outline, #333854) !important;
  border-top: 1px solid var(--outline, #333854) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #buddypress .screen-content > .bb-item-count,
html[data-theme="dark"] .buddypress-wrap .screen-content > .bb-item-count,
html[data-theme="dark"] body.directory #buddypress .bb-item-count,
html[data-theme="dark"] body.directory .buddypress-wrap .bb-item-count {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] .bb-item-count .bb-count {
  color: var(--lav-300, #cfd3ec) !important;
}

html[data-theme="dark"] #buddypress form.bp-dir-search-form,
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #buddypress form.bp-dir-search-form input[type="search"],
html[data-theme="dark"] #buddypress form.bp-dir-search-form input[type="text"],
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form input[type="search"],
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form input[type="text"] {
  background: transparent !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #buddypress form.bp-dir-search-form input::placeholder,
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form input::placeholder {
  color: var(--muted, #a3a8c2) !important;
  opacity: 1;
}

html[data-theme="dark"] #buddypress form.bp-dir-search-form button.nouveau-search-submit,
html[data-theme="dark"] #buddypress form.bp-dir-search-form button.search-form_submit,
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form button.nouveau-search-submit,
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form button.search-form_submit,
html[data-theme="dark"] #buddypress form.bp-dir-search-form button.search-form_reset,
html[data-theme="dark"] .buddypress-wrap form.bp-dir-search-form button.search-form_reset {
  color: var(--muted, #a3a8c2) !important;
  background: transparent !important;
}

html[data-theme="dark"] .buddypress-wrap .bp-search form.bp-dir-search-form:focus,
html[data-theme="dark"] .buddypress-wrap .bp-search form.bp-dir-search-form:hover,
html[data-theme="dark"] #buddypress .bp-search form.bp-dir-search-form:focus,
html[data-theme="dark"] #buddypress .bp-search form.bp-dir-search-form:hover {
  border-color: var(--lav-600, #55578f) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .buddypress-wrap .subnav-filters .select-wrap,
html[data-theme="dark"] #buddypress .subnav-filters .select-wrap {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] .buddypress-wrap .subnav-filters .select-wrap select,
html[data-theme="dark"] #buddypress .subnav-filters .select-wrap select {
  color: var(--text, #f7f7ff) !important;
  background: transparent !important;
}

html[data-theme="dark"] .buddypress-wrap .subnav-filters .select-wrap:focus,
html[data-theme="dark"] .buddypress-wrap .subnav-filters .select-wrap:hover,
html[data-theme="dark"] #buddypress .subnav-filters .select-wrap:focus,
html[data-theme="dark"] #buddypress .subnav-filters .select-wrap:hover {
  border-color: var(--lav-600, #55578f) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .buddypress-wrap .subnav-filters .select-wrap span.select-arrow::before,
html[data-theme="dark"] #buddypress .subnav-filters .select-wrap span.select-arrow::before {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .buddypress-wrap .grid-filters,
html[data-theme="dark"] #buddypress .grid-filters {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] .buddypress-wrap .grid-filters a,
html[data-theme="dark"] #buddypress .grid-filters a {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] .buddypress-wrap .grid-filters a.active,
html[data-theme="dark"] #buddypress .grid-filters a.active {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] .buddypress-wrap .grid-filters a.layout-grid-view,
html[data-theme="dark"] #buddypress .grid-filters a.layout-grid-view {
  border-right-color: var(--outline, #333854) !important;
}

/* bbPress-forumsök (entry-header #forums-dir-search, .bs-search-form – BB-variabler ljusa i app shell dark) */
html[data-theme="dark"] #forums-dir-search .bs-search-form,
html[data-theme="dark"] #primary form#bbp-search-form.bs-search-form,
html[data-theme="dark"] .bbp-search-form form#bbp-search-form.bs-search-form,
html[data-theme="dark"] #bbpress-forums .bbp-search-form form#bbp-search-form {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid var(--outline, #333854) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbp-search-form #bbp_search,
html[data-theme="dark"] #forums-dir-search #bbp_search,
html[data-theme="dark"] #bbpress-forums form#bbp-search-form input[name="bbp_search"] {
  background: transparent !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbp-search-form #bbp_search::placeholder,
html[data-theme="dark"] #forums-dir-search #bbp_search::placeholder,
html[data-theme="dark"] #bbpress-forums form#bbp-search-form input[name="bbp_search"]::placeholder {
  color: var(--muted, #a3a8c2) !important;
  opacity: 1;
}

html[data-theme="dark"] .bs-search-form:focus-within,
html[data-theme="dark"] form#bbp-search-form.bs-search-form:focus-within {
  border-color: var(--lav-600, #55578f) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #forums-dir-search .bs-search-form:before,
html[data-theme="dark"] form#bbp-search-form.bs-search-form:before {
  color: var(--muted, #a3a8c2) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #bbp-search-form #bbp_search_submit {
  filter: brightness(0) invert(1);
  opacity: 0.75 !important;
}

html[data-theme="dark"] #bbp-search-form #bbp_search_submit:hover {
  opacity: 1 !important;
}

html[data-theme="dark"] #bbpress-forums form#bbp-search-form:not(.bs-search-form) input#bbp_search,
html[data-theme="dark"] #primary form#bbp-search-form:not(.bs-search-form) input#bbp_search {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid var(--outline, #333854) !important;
  color: var(--text, #f7f7ff) !important;
}

/* bbPress forumkort (grid .bs-card-list .bb-cover-list-item – BB --bb-content-background-color ljus i app shell dark) */
html[data-theme="dark"] #bbpress-forums .bs-card-list .bb-cover-list-item {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-card-list .bb-cover-list-item:hover {
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] #bbpress-forums .bs-card-list .forums-meta span {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-card-forum-details,
html[data-theme="dark"] #bbpress-forums .bs-card-forum-details h3,
html[data-theme="dark"] #bbpress-forums .bs-card-forum-details h3 a {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-card-forum-details h3 a:hover {
  color: var(--lav-400, #8b8fd4) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-card-forum-details .bb-forum-content,
html[data-theme="dark"] #bbpress-forums .bs-card-forum-details .bb-forum-content p {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-card-list .bs-timestamp,
html[data-theme="dark"] #bbpress-forums .bs-card-list .bs-timestamp a {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-card-list .bs-timestamp a:hover {
  color: var(--lav-300, #cfd3ec) !important;
}

/* bbPress diskussionslista (loop-topics: .bs-item-list.list-view .bs-item-wrap – vit BB-panel i dark) */
html[data-theme="dark"] #bbpress-forums .bs-item-list.list-view .bs-item-wrap {
  background: var(--bg-elev, #1e2132) !important;
  border-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-item-list.list-view.bs-forums-items:not(.bs-single-forum-list) li:last-of-type .bs-item-wrap {
  border-bottom-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-item-list.list-view li.bs-item-wrap:not(.no-hover-effect):hover {
  border-left-color: var(--outline, #333854) !important;
  border-right-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .bs-section-title {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-title,
html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-title a {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-title a:hover {
  color: var(--lav-400, #8b8fd4) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-item-list.list-view .item-meta,
html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items.list-view .item-meta {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-meta a,
html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .bs-replied a {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-meta a:hover {
  color: var(--lav-300, #cfd3ec) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items.list-view li.dropdown-open > .bs-reply-list-item,
html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items.list-view li .bs-reply-list-item:hover,
html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items.list-view:not(.bb-single) li .bs-reply-list-item.in-focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-item-list.list-view .bs-dropdown-link {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbpress-forums .bs-dropdown {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid var(--outline, #333854) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-tags ul li a {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-tags ul li a:hover {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] #bbpress-forums#bbpress-forums .bs-forums-items .item-tags .bb-icon-tag {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums .bbp-pagination-count {
  color: var(--muted, #a3a8c2) !important;
}

html[data-theme="dark"] #bbpress-forums .forums-header {
  border-bottom-color: var(--outline, #333854) !important;
}

html[data-theme="dark"] #buddypress select,
html[data-theme="dark"] .buddypress-wrap select {
  background: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff) !important;
  border-color: var(--outline, #333854);
}

/* Knappar (SEE ALL, tabbar NEWEST/ACTIVE/POPULAR) */
html[data-theme="dark"] #buddypress .button,
html[data-theme="dark"] #buddypress .bp-generic-button a,
html[data-theme="dark"] .buddypress-wrap .button {
  background: var(--lav-600, #55578f);
  color: #fff;
  border-color: var(--outline, #333854);
}

html[data-theme="dark"] #buddypress .button:hover,
html[data-theme="dark"] .buddypress-wrap .button:hover {
  background: var(--lav-500, #6264a7);
  color: #fff;
}

/* Profil-/progress-kort (Complete your profile) */
html[data-theme="dark"] #buddypress .profile-completion,
html[data-theme="dark"] .buddypress-wrap .profile-completion,
html[data-theme="dark"] [class*="profile-completion"] {
  background: var(--bg-elev, #1e2132) !important;
  color: var(--text, #f7f7ff);
}

html[data-theme="dark"] #buddypress label,
html[data-theme="dark"] .buddypress-wrap label {
  color: var(--text, #f7f7ff);
}

/* ============================================================
   ARTIKEL-MODAL – DELAD KOMPONENT (Nyheter + Tips + framtida)
   Ägare: app-shell.css (se APP-SHELL-CSS-ARCHITECTURE.md)
   position:fixed säkerställs här så att modalen alltid
   fungerar oavsett vilket plugin-CSS som laddas.
   ============================================================ */
.ffn__article-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ffn__article-modal[hidden] { display: none; }

.ffn__article-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    animation: ffn-backdrop-in 0.22s ease forwards;
}

.ffn__article-modal__panel {
    position: relative;
    width: min(680px, 94vw);
    max-height: 90vh;
    background: var(--bg-card, #ffffff);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: ffn-modal-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    overflow: hidden;
}

.ffn__article-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 14px 20px;
    background: var(--lav-900, #28285a);
    flex-shrink: 0;
}

.ffn__article-modal__header-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.ffn__modal-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ffn__article-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ffn__article-modal__header-heart .ffn__favorite-btn,
.ffn__modal-heart {
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.ffn__article-modal__header-heart .ffn__favorite-btn:hover,
.ffn__modal-heart:hover { color: #ffffff; }
.ffn__article-modal__header-heart .ffn__favorite-btn--active,
.ffn__modal-heart.ffn__favorite-btn--active { color: #ff8888; }

/* Hjärtat i modal-headern: flex-item, relativ för att hålla ikonerna,
   INTE absolut (top/right gäller ej här). */
.ffn__article-modal__header-heart .ffn__favorite-btn {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  width: 36px;
  height: 36px;
}

.ffn__article-modal__close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ffn__article-modal__close:hover { background: rgba(255, 255, 255, 0.28); }

.ffn__article-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 36px;
    -webkit-overflow-scrolling: touch;
}

.ffn__modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink, #1a1a2e);
    line-height: 1.3;
    margin: 0 0 16px;
}

.ffn__modal-body-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink, #1a1a2e);
}
.ffn__modal-body-text p { margin-bottom: 14px; }
.ffn__modal-body-text p:last-child { margin-bottom: 0; }

.ffn__modal-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--outline, #e8eaf8);
    flex-wrap: wrap;
}

.ffn__modal-footer-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ffn__modal-footer-pill {
    font-size: 0.72rem;
    color: var(--muted, #667085);
    background: var(--lav-50, #f8f9ff);
    border-radius: 100px;
    padding: 2px 8px;
}
.ffn__modal-footer-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.ffn__article-modal__loader { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.ffn__spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--lav-100, #e8eaf8);
    border-top-color: var(--lav-500, #5c5ea8);
    border-radius: 50%;
    animation: ffn-spin 0.7s linear infinite;
}
.ffn__article-modal__error { color: var(--muted, #667085); padding: 32px 0; text-align: center; }

body.ffn-modal-open { overflow: hidden; }

@keyframes ffn-modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ffn-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ffn-spin { to { transform: rotate(360deg); } }

@media screen and (max-width: 600px) {
    .ffn__article-modal__panel {
        width: 100vw;
        max-height: 95vh;
        border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
        align-self: flex-end;
    }
    .ffn__article-modal__body { padding: 20px 16px 32px; }
}

/* ============================================================
   DELADE LAYOUT-KOMPONENTER – App Shell (Nyheter + Tips + framtida)
   Ägare: app-shell.css (se APP-SHELL-CSS-ARCHITECTURE.md)
   Flytt från: news-feed.css (plugin) och tips.css (tema)
   ============================================================ */

/* Container */
.ffn {
  max-width: var(--content-max, 900px);
  margin-inline: auto;
  padding: 0 var(--space-2, 16px);
}

/* Sidebar layout */
.ffn--with-sidebar {
  max-width: none;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  align-items: start;
  padding: 0;
  min-height: 0;
  position: relative;
}
.ffn--with-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 240px;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

.ffn__sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--bar-height, 48px) + var(--appband-height, 52px));
  align-self: start;
  max-height: calc(100vh - var(--bar-height, 48px) - var(--appband-height, 52px));
  overflow-y: auto;
  background: transparent;
  border-right: none;
  padding: var(--space-2, 16px) var(--space-1, 8px);
  min-height: 40vh;
}
html[data-theme="dark"] .ffn__sidebar { background: transparent; }

.ffn__sidebar-section { margin-bottom: var(--space-4, 32px); }
.ffn__sidebar-section:last-child { margin-bottom: 0; }

.ffn__sidebar-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted, #667085);
  text-transform: uppercase;
  margin: 0 0 var(--space-2, 8px);
}

/* View list (vänster meny) */
.ffn__view-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ffn__view-list li { margin: 0; }

.ffn__view-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9375rem;
  color: var(--lav-900, #3d3e66);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.ffn__view-link:hover {
  background: rgba(98, 100, 167, 0.08);
  color: var(--lav-700, #4b4d7a);
}
.ffn__view-link--active {
  background: var(--lav-100, #e8e9f2);
  color: var(--lav-700, #4b4d7a);
  font-weight: 600;
}
.ffn__view-link--locked {
  color: var(--muted, #667085);
  cursor: default;
}
.ffn__view-link--locked:hover { background: transparent; }

.ffn__view-lock { flex-shrink: 0; opacity: 0.7; }

.ffn__view-upgrade {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lav-500, #6264a7);
  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; }

.ffn__view-link--create {
  font-weight: 600;
  color: var(--lav-500, #6264a7);
}

/* Huvud innehållsyta */
.ffn__main {
  padding: var(--space-1, 8px) var(--space-2, 16px);
  min-width: 0;
}

/* Toolbar */
.ffn__toolbar {
  margin-bottom: var(--space-1, 8px);
  padding: var(--space-1, 8px) var(--space-2, 16px);
  background: var(--bg-elev, #fff);
  border: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 16px);
}
.ffn__toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ffn__toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--outline, #d5d7e3);
  margin: 0 4px;
}
.ffn__toolbar-label {
  display: block;
  font-size: var(--bb-font-size-sm, 13px);
  font-weight: 600;
  color: var(--lav-900, #3d3e66);
  margin-bottom: 4px;
}
.ffn__toolbar-label.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.ffn__toolbar-search {
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--outline, #d5d7e3);
  border-radius: var(--radius-sm, 8px);
  font-size: var(--bb-font-size-base, 14px);
  color: var(--lav-900, #3d3e66);
  background: #fff;
}
.ffn__toolbar-search:focus {
  outline: none;
  border-color: var(--lav-500, #6264a7);
  box-shadow: 0 0 0 3px rgba(98, 100, 167, 0.15);
}
.ffn__toolbar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ffn__toolbar-select {
  min-width: 140px;
  padding: 4px 12px;
  height: 34px;
  border: 1px solid var(--outline, #d5d7e3);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  font-size: var(--bb-font-size-base, 14px);
  color: var(--lav-900, #3d3e66);
  cursor: pointer;
}
.ffn__toolbar-select--multi {
  min-width: 180px;
  max-width: 240px;
  min-height: 44px;
  padding: 10px 14px;
}
.ffn__toolbar-group--megamenu .ffn__toolbar-select--multi {
  min-height: 48px;
  padding: 12px 14px;
}
.ffn__toolbar-select:focus {
  outline: none;
  border-color: var(--lav-500, #6264a7);
}
.ffn__toolbar-btn { min-height: 38px; }
.ffn__toolbar-save {
  margin-left: auto;
  background: transparent;
  border: 1.5px dashed var(--lav-400, #8587c7);
  color: var(--lav-700, #4f46e5);
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ffn__toolbar-save:hover {
  background: rgba(79, 70, 229, 0.05);
  border-color: var(--lav-700, #4f46e5);
}

/* Gate (inloggningsprompt) */
.ffn-gate {
  text-align: center;
  padding: var(--space-6, 48px) var(--space-4, 32px);
  background: var(--bg-elev, #fff);
  border: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1);
  max-width: 520px;
  margin: var(--space-4, 32px) auto;
}
.ffn-gate__icon {
  color: var(--lav-400, #aeb3da);
  margin-bottom: var(--space-2, 16px);
}
.ffn-gate__title {
  font-family: var(--font-body, 'Source Sans Pro', sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--lav-900, #3d3e66);
  margin: 0 0 var(--space-1, 8px);
}
.ffn-gate__text {
  color: var(--muted, #667085);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 var(--space-3, 24px);
}

/* Filters */
.ffn__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2, 16px);
  margin-bottom: var(--space-3, 24px);
  padding: var(--space-2, 16px) var(--space-3, 24px);
  background: var(--bg-elev, #fff);
  border: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 16px);
}
.ffn__filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ffn__filter-label {
  font-size: var(--bb-font-size-sm, 13px);
  font-weight: 600;
  color: var(--lav-900, #3d3e66);
}
.ffn__select {
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--outline, #d5d7e3);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  font-family: inherit;
  font-size: var(--bb-font-size-base, 14px);
  color: var(--lav-900, #3d3e66);
  transition: border-color 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}
.ffn__select:focus {
  outline: none;
  border-color: var(--lav-500, #6264a7);
  box-shadow: 0 0 0 3px rgba(98, 100, 167, 0.15);
}
.ffn__filter-btn { min-height: 38px; }
.ffn__filter-reset { min-height: 38px; }

/* Kortlista */
.ffn__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 16px);
}
.ffn__list--masonry {
  display: block;
  column-count: 3;
  column-gap: var(--space-3, 24px);
}
.ffn__list--masonry .ffn__card {
  break-inside: avoid;
  margin-bottom: var(--space-3, 24px);
  page-break-inside: avoid;
}

/* Tom lista */
.ffn__empty {
  text-align: center;
  padding: var(--space-6, 48px) var(--space-4, 32px);
  color: var(--muted, #667085);
  font-style: italic;
}

/* Mobil vy-väljare (tablet/mobil – desktop visar sidebar) */
.ffn__mobile-view {
  display: none !important;
  margin-bottom: var(--space-2, 16px);
}
.ffn__mobile-view-label {
  font-size: var(--bb-font-size-sm, 13px);
  font-weight: 600;
  color: var(--lav-900, #3d3e66);
  margin-bottom: 4px;
  display: block;
}
.ffn__mobile-view-select {
  width: 100%;
  max-width: 280px;
  padding: 10px 12px;
  border: 1px solid var(--outline, #d5d7e3);
  border-radius: var(--radius-sm, 8px);
  font-size: var(--bb-font-size-base, 14px);
  color: var(--lav-900, #3d3e66);
  background: #fff;
  cursor: pointer;
}
.ffn__mobile-view-select:focus {
  outline: none;
  border-color: var(--lav-500, #6264a7);
  box-shadow: 0 0 0 3px rgba(98, 100, 167, 0.15);
}

/* Paginering */
.ffn__pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-4, 32px) 0 var(--space-2, 16px);
}
.ffn__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-sm, 8px);
  font-size: var(--bb-font-size-sm, 13px);
  color: var(--lav-700, #4b4d7a);
  background: var(--bg-elev, #fff);
  border: 1px solid var(--outline, #d5d7e3);
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.ffn__pagination .page-numbers:hover,
.ffn__pagination .page-numbers.current {
  background: var(--lav-100, #e8e9f2);
  color: var(--lav-700, #4b4d7a);
  border-color: var(--lav-300, #c8cae0);
}
.ffn__pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

/* Inställningar – sparade vyer */
.ffn__settings-content { padding: var(--space-4, 32px) 0; }
.ffn__settings-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 var(--space-2, 8px);
  color: var(--lav-900, #3d3e66);
  letter-spacing: -0.02em;
}
.ffn__settings-desc {
  margin: 0 0 var(--space-2, 8px);
  color: var(--muted, #667085);
  font-size: var(--bb-font-size-sm, 0.875rem);
  line-height: 1.45;
}
.ffn__settings-back { margin: 0 0 var(--space-4, 32px); }
.ffn__settings-back-link {
  font-size: var(--bb-font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--lav-600, #5557a0);
  text-decoration: none;
}
.ffn__settings-back-link:hover {
  color: var(--lav-700, #4b4d7a);
  text-decoration: underline;
}
.ffn__settings-empty {
  margin: 0;
  padding: var(--space-6, 48px) var(--space-4, 32px);
  background: var(--bg-elev, #fff);
  border: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 16px);
  color: var(--muted, #667085);
  font-size: var(--bb-font-size-base, 14px);
  text-align: center;
}
.ffn__settings-table-wrap {
  overflow-x: auto;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 16px);
}
.ffn__settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bb-font-size-base, 14px);
}
.ffn__settings-table thead {
  background: var(--app-bg, #f5f5f5);
  border-bottom: 2px solid var(--outline, rgba(0, 0, 0, 0.08));
}
.ffn__settings-table th {
  text-align: left;
  padding: var(--space-2, 16px);
  font-weight: 600;
  color: var(--lav-900, #3d3e66);
  white-space: nowrap;
}
.ffn__settings-table td {
  padding: var(--space-2, 16px);
  border-bottom: 1px solid var(--outline, rgba(0, 0, 0, 0.06));
  vertical-align: middle;
  color: var(--lav-800, #3d3e66);
}
.ffn__settings-table tbody tr.ffn__view-row:hover td {
  background: rgba(98, 100, 167, 0.03);
}
.ffn__view-row-name {
  font-weight: 600;
  color: var(--lav-700, #4b4d7a);
  text-decoration: none;
}
.ffn__view-row-name:hover {
  color: var(--lav-500, #6264a7);
  text-decoration: underline;
}
.ffn__view-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 16px);
}
.ffn__settings-content .ffn__view-edit,
.ffn__settings-content .ffn__view-delete,
.ffn__settings-content .ffn__view-edit-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1, 8px) var(--space-2, 16px);
  min-height: 36px;
  font-size: var(--bb-font-size-sm, 0.875rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--lav-600, #5557a0);
  background: transparent;
  border: 1px solid var(--lav-300, #c8cae0);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ffn__settings-content .ffn__view-edit:hover,
.ffn__settings-content .ffn__view-delete:hover,
.ffn__settings-content .ffn__view-edit-cancel:hover {
  background: var(--lav-100, #e8e9f2);
  color: var(--lav-700, #4b4d7a);
  border-color: var(--lav-400, #aeb3da);
}
.ffn__settings-content .ffn__view-delete:hover {
  color: var(--red-600, #b83838);
  border-color: var(--red-300, #e8a0a0);
  background: rgba(214, 69, 69, 0.08);
}
.ffn__settings-content .ffn__view-edit:focus-visible,
.ffn__settings-content .ffn__view-delete:focus-visible,
.ffn__settings-content .ffn__view-edit-cancel:focus-visible {
  outline: 2px solid var(--lav-500, #6264a7);
  outline-offset: 2px;
}
.ffn__settings-content .ffn__toolbar--edit button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1, 8px) var(--space-2, 16px);
  min-height: 36px;
  font-size: var(--bb-font-size-sm, 0.875rem);
  font-weight: 600;
  color: #fff;
  background: var(--lav-600, #5557a0);
  border: none;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background 160ms ease, transform 0.1s ease;
}
.ffn__settings-content .ffn__toolbar--edit button[type="submit"]:hover {
  background: var(--lav-700, #4b4d7a);
}
.ffn__settings-content .ffn__toolbar--edit button[type="submit"]:focus-visible {
  outline: 2px solid var(--lav-500, #6264a7);
  outline-offset: 2px;
}
.ffn__view-row-actions .ffn__view-edit,
.ffn__view-row-actions .ffn__view-delete {
  font-size: var(--bb-font-size-sm, 0.875rem);
  padding: var(--space-1, 8px) var(--space-2, 16px);
  min-height: 32px;
}
.ffn__view-edit-cell {
  background: var(--app-bg, #f5f5f5);
  padding: var(--space-3, 24px);
  border-bottom: 1px solid var(--outline, rgba(0, 0, 0, 0.08));
  vertical-align: top;
}
.ffn__toolbar--edit .ffn__toolbar-row { align-items: flex-end; }
.ffn__toolbar--edit .ffn__toolbar-group--name { min-width: 180px; }
.ffn__toolbar--edit .ffn__toolbar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-end;
}
.ffn__toolbar--edit .ffn__toolbar-actions .btn { white-space: nowrap; }
.ffn__view-row-edit[hidden] { display: none !important; }
tr.ffn__view-row-edit:not([hidden]) { display: table-row; }

/* Inställningar dark mode */
html[data-theme="dark"] .ffn__settings-content .ffn__view-edit,
html[data-theme="dark"] .ffn__settings-content .ffn__view-delete,
html[data-theme="dark"] .ffn__settings-content .ffn__view-edit-cancel {
  color: var(--lav-200, #c8cae0);
  border-color: var(--lav-600, rgba(255, 255, 255, 0.2));
  background: transparent;
}
html[data-theme="dark"] .ffn__settings-content .ffn__view-edit:hover,
html[data-theme="dark"] .ffn__settings-content .ffn__view-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--lav-100, #e8e9f2);
  border-color: var(--lav-500, rgba(255, 255, 255, 0.3));
}
html[data-theme="dark"] .ffn__settings-content .ffn__view-delete:hover {
  color: var(--red-300, #f2a0a0);
  border-color: var(--red-600, rgba(214, 69, 69, 0.5));
  background: rgba(214, 69, 69, 0.12);
}
html[data-theme="dark"] .ffn__settings-content .ffn__toolbar--edit button[type="submit"] {
  background: var(--lav-500, #6264a7);
  color: #fff;
}
html[data-theme="dark"] .ffn__settings-content .ffn__toolbar--edit button[type="submit"]:hover {
  background: var(--lav-400, #7a7cb8);
}

/* Responsivt layout */
@media screen and (min-width: 1024px) {
  .ffn__sidebar { display: block; }
}
@media screen and (max-width: 1023px) {
  .ffn--with-sidebar { grid-template-columns: 1fr; }
  .ffn--with-sidebar::before { display: none; }
  .ffn__sidebar { display: none !important; }
  .ffn__mobile-view { display: block !important; }
  .ffn__list--masonry { column-count: 2; }
}
@media screen and (max-width: 768px) {
  .ffn__toolbar { padding: var(--space-2, 16px); }
  .ffn__toolbar-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3, 24px);
  }
  .ffn__toolbar-search,
  .ffn__toolbar-select,
  .ffn__toolbar-select--multi {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  .ffn__toolbar-save { margin-left: 0; }
  .ffn__mobile-view-select { max-width: none; }
}
@media screen and (max-width: 600px) {
  .ffn { padding: 0 var(--space-1, 8px); }
  .ffn__main { padding: var(--space-2, 16px); }
  .ffn__list--masonry { column-count: 1; }
  .ffn__filters,
  .ffn__toolbar-row { flex-direction: column; align-items: stretch; }
  .ffn__toolbar { padding: var(--space-2, 16px); }
  .ffn__toolbar-search { min-width: 0; width: 100%; }
  .ffn__toolbar-select,
  .ffn__toolbar-select--multi { min-width: 0; max-width: none; }
  .ffn__toolbar-save { margin-left: 0; }
  .ffn__filters {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2, 16px);
  }
  .ffn__select { min-width: 0; width: 100%; }
  .ffn__filter-btn,
  .ffn__filter-reset { width: 100%; justify-content: center; }
}

/* Favorit-animering (glow – påverkar INTE layout/transform) */
@keyframes ffn-fav-pop {
  0%   { filter: drop-shadow(0 0 0px rgba(239, 68, 68, 0)); }
  45%  { filter: drop-shadow(0 0 7px rgba(239, 68, 68, 0.75)); }
  100% { filter: drop-shadow(0 0 0px rgba(239, 68, 68, 0)); }
}
@keyframes ffn-fav-unpop {
  0%   { filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3)); }
  100% { filter: drop-shadow(0 0 0px rgba(239, 68, 68, 0)); }
}
.ffn__favorite-btn--popping   { animation: ffn-fav-pop   0.4s ease forwards; }
.ffn__favorite-btn--unpopping { animation: ffn-fav-unpop 0.3s ease forwards; }
.ffn__favorite-btn[aria-disabled="true"] { pointer-events: none; cursor: default; }

/* ================================================================
   Progress bar – delad komponent (Uppgifter, Resor, m.fl.)
   ================================================================ */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--lav-200, #d6d8f0);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar__fill {
  height: 100%;
  background: var(--lav-500, #6264a7);
  border-radius: 4px;
  transition: width 400ms ease;
}

.progress-bar__fill--success {
  background: var(--green-500, #22c55e);
}

html[data-theme="dark"] .progress-bar {
  background: var(--lav-700, #4a4b7c);
}

html[data-theme="dark"] .progress-bar__fill {
  background: var(--lav-400, #aeb3da);
}

/* ─── Article modal – dark mode ───────────────────────────────── */
html[data-theme="dark"] .ffn__article-modal__panel {
  background: var(--bg-elev, #1e2132);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .ffn__article-modal__backdrop {
  background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .ffn__modal-title {
  color: var(--lav-100, #e6e8f6);
}

html[data-theme="dark"] .ffn__modal-body-text {
  color: var(--lav-200, #d0d4ee);
}

html[data-theme="dark"] .ffn__modal-body-text a {
  color: var(--lav-300, #cfd3ec);
}

html[data-theme="dark"] .ffn__modal-body-text a:hover {
  color: var(--lav-100, #e6e8f6);
}

html[data-theme="dark"] .ffn__modal-footer {
  border-top-color: var(--outline, #333854);
}

html[data-theme="dark"] .ffn__modal-footer-pill {
  background: var(--bg, #151726);
  color: var(--muted, #a3a8c2);
  border: 1px solid var(--outline, #333854);
}

html[data-theme="dark"] .ffn__modal-footer-meta {
  color: var(--muted, #a3a8c2);
}

html[data-theme="dark"] .ffn__modal-footer-meta a {
  color: var(--lav-300, #cfd3ec);
}

html[data-theme="dark"] .ffn__spinner {
  border-color: var(--lav-700, #4a4b7c);
  border-top-color: var(--lav-400, #9899c8);
}

html[data-theme="dark"] .ffn__article-modal__error {
  color: var(--muted, #a3a8c2);
}