:root {
  --brand-blue: #123B76;
  --brand-blue-dark: #0A2750;
  --brand-blue-light: #1B5AAE;
  --brand-yellow: #FFC72C;
  --brand-yellow-dark: #E6AE00;
  --app-bg: #F4F7FB;
  --app-card-bg: #FFFFFF;
  --app-text-muted: #6B7686;
  --app-radius: 14px;
  /* Shape of the profile cover photo band. The Edit profile cropper reads this same
     value, so the region a user selects is exactly what the profile card displays.
     Nothing else may constrain the band's height, or the two shapes diverge and
     object-fit silently crops the image a second time. */
  --app-cover-ratio: 5;
  --font-heading: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-blue-light);
}

html {
  position: relative;
  min-height: 100%;
  /* Matches the navbar so overscroll/safe-area space above the page blends in */
  background-color: var(--brand-blue);
}

body {
  margin-bottom: 60px;
  /* Fill the viewport so short pages (Friends, Groups) don't reveal the blue html
     canvas beneath the page background. Use the *large* viewport unit rather than dvh:
     dvh changes while mobile browser toolbars animate, which leaves short pages out of
     sync with the on-screen viewport right after navigation and makes the fixed bottom
     tab bar float above the bottom of the screen until the user scrolls. */
  min-height: calc(100vh - 60px);
  min-height: calc(100lvh - 60px);
  font-family: var(--font-body);
  background-color: var(--app-bg);
  color: #1F2937;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--brand-blue-dark);
}

/* ===== Navbar ===== */
.app-navbar {
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
  box-shadow: 0 2px 10px rgba(18, 59, 118, 0.25);
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
  padding-bottom: .6rem;
  margin-bottom: 1.5rem;
}

/* The navbar is wrapped in a <header>, so the header itself must be the
   sticky element for it to remain pinned while the page scrolls. */
body > header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.app-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.app-brand-icon {
  color: var(--brand-yellow);
}

.app-brand-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transform: scale(1.6875);
  margin-left: .375rem;
  margin-right: .375rem;
}

.app-nav-tabs .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  border-radius: 999px;
  padding: .45rem 1rem;
  margin: 0 .15rem;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

/* The tabs stay optically centred in the navbar no matter how wide the brand,
   search box or account menu become. */
@media (min-width: 768px) {
  .app-navbar > .container-fluid {
    position: relative;
  }

  .app-nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    flex-grow: 0 !important;
    pointer-events: none;
  }

  .app-nav-center .app-nav-tabs {
    flex-grow: 0 !important;
    pointer-events: auto;
  }
}

.app-nav-tabs .nav-link i {
  margin-right: .35rem;
}

.app-nav-tabs .nav-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.12);
}

.app-nav-tabs .nav-link.active {
  color: var(--brand-blue-dark) !important;
  background-color: var(--brand-yellow);
}

.app-account-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

.app-btn-yellow {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-blue-dark) !important;
  font-weight: 600;
  border-radius: 999px;
  padding: .4rem 1.1rem !important;
}

.app-btn-yellow:hover {
  background-color: var(--brand-yellow-dark) !important;
}

/* ===== Navbar master search ===== */
.app-search {
  position: relative;
  flex: 0 1 260px;
  min-width: 140px;
  margin-left: auto;
}

.app-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 0;
}

.app-search-toggle:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.app-search-form {
  position: relative;
  display: flex;
  align-items: center;
}

.app-search-icon-lead {
  position: absolute;
  left: .75rem;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  font-size: .9rem;
}

.app-search-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: .4rem .9rem .4rem 2.2rem;
  font-size: .9rem;
  outline: none;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.app-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.app-search-input:focus {
  background-color: #fff;
  color: var(--brand-blue-dark);
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 .2rem rgba(255, 199, 44, 0.35);
}

.app-search-input:focus::placeholder {
  color: #6c757d;
}

.app-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.app-search-dropdown {
  /* All navbar dropdowns (search, notifications, account) open from the same fixed point:
     just below the sticky header and .75rem in from the right edge of the window.
     --app-header-height is maintained by site.js. */
  position: fixed;
  top: calc(var(--app-header-height, 3.75rem) + .35rem);
  right: .75rem;
  width: 380px;
  max-width: calc(100vw - 1.5rem);
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(18, 59, 118, 0.25);
  overflow: hidden;
  z-index: 1040;
}

.app-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.app-search-filter {
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15));
  background: transparent;
  color: inherit;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  padding: .2rem .65rem;
  line-height: 1.4;
}

.app-search-filter:hover {
  background-color: rgba(18, 59, 118, 0.08);
}

.app-search-filter.active {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.app-search-results {
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  max-height: 60vh;
  overflow-y: auto;
}

.app-search-results .app-search-item a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .85rem;
  color: inherit;
  text-decoration: none;
}

.app-search-results .app-search-item a:hover,
.app-search-results .app-search-item.active a {
  background-color: rgba(18, 59, 118, 0.08);
}

.app-search-thumb {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: cover;
}

.app-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(18, 59, 118, 0.1);
  color: var(--brand-blue);
  font-size: 1.05rem;
}

.app-search-text {
  flex: 1 1 auto;
  min-width: 0;
}

.app-search-title {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-search-subtitle {
  display: block;
  font-size: .78rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-search-badge {
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bs-secondary-color, #6c757d);
}

.app-search-empty {
  padding: .85rem;
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
  text-align: center;
}

.app-search-all {
  display: block;
  padding: .55rem .85rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  color: var(--brand-blue);
  text-decoration: none;
  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.app-search-all:hover {
  background-color: rgba(18, 59, 118, 0.08);
}

[data-bs-theme="dark"] .app-search-filter:hover,
[data-bs-theme="dark"] .app-search-results .app-search-item a:hover,
[data-bs-theme="dark"] .app-search-results .app-search-item.active a,
[data-bs-theme="dark"] .app-search-all:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .app-search-all,
[data-bs-theme="dark"] .app-search-icon {
  color: var(--brand-yellow);
}

/* Condense the search box first ... */
@media (max-width: 1199.98px) {
  .app-search {
    flex: 0 1 190px;
    min-width: 120px;
  }
}

/* ... then collapse it down to just the magnifying glass when space runs out. */
@media (max-width: 991.98px) {
  .app-search {
    flex: 0 0 auto;
    min-width: 0;
  }

  .app-search-toggle {
    display: inline-flex;
  }

  .app-search .app-search-form {
    display: none;
  }

  .app-search.expanded .app-search-toggle {
    display: none;
  }

  .app-search.expanded .app-search-form {
    display: flex;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: min(60vw, 280px);
    z-index: 5;
  }
}

@media (max-width: 767.98px) {
  /* Keep the expanded search compact on phones so it doesn't spill over the brand. */
  .app-search.expanded .app-search-form {
    width: min(46vw, 200px);
  }

  /* While the search box is open, show only the logo so the input has room. */
  .app-navbar:has(.app-search.expanded) .app-brand-text {
    display: none;
  }

  .app-search-input {
    padding-left: 2rem;
    font-size: .85rem;
  }

  /* On phones the search dropdown becomes a full-width panel pinned directly below the sticky
     header, instead of being anchored to its (tiny) trigger icon where it could skew or
     overflow off-screen. The --app-header-height variable is kept up to date by site.js; the
     fallback approximates the navbar's rendered height. */
  /* The navbar is the positioning context (see .app-navbar below) so all three dropdowns
     share the exact same top edge regardless of their trigger's height. */
  .app-navbar,
  .app-navbar > .container-fluid {
    position: static;
  }

  .app-navbar {
    position: relative;
  }

  .app-avatar-nav-item {
    position: static;
  }

  /* site.js re-parents the search dropdown under .app-navbar (which is position: relative
     here), so all three menus share the identical anchor rule below. */
  .app-search-dropdown {
    position: absolute;
    top: calc(100% + .35rem);
    left: auto;
    right: .75rem;
    width: min(calc(100vw - 1.5rem), 380px);
    max-width: none;
    max-height: calc(100vh - var(--app-header-height, 3.75rem) - 1.5rem);
    overflow-y: auto;
    z-index: 1040;
  }
}

/* ===== Layout ===== */
.app-content {
  max-width: 900px;
}

/* ===== Feed layout: centered feed + Friends card in the right-hand whitespace ===== */
.app-feed-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.app-feed-main {
  min-width: 0;
}

/* On narrower screens the Friends card sits above the feed. */
.app-friends-sidebar {
  order: -1;
}

/* Once there is room beside the 900px content column, pin the card in the
   whitespace to its right so the feed itself stays exactly where it was. */
@media (min-width: 1400px) {
  .app-friends-sidebar {
    order: 0;
    position: fixed;
    width: 280px;
    left: calc(50% + 450px + 1.5rem);
    /* Stay below the sticky navbar. */
    top: calc(84px + env(safe-area-inset-top, 0px) + 1.5rem);
    max-height: calc(100vh - 84px - 3rem);
    overflow-y: auto;
  }
}

.app-friends-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  margin-bottom: .75rem;
}

.app-friends-card-header:hover .app-section-title {
  color: var(--brand-blue-light);
}

.app-friends-requests-pill {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-blue-dark);
  background-color: #FFF4D6;
  border-radius: 999px;
  padding: .35rem .8rem;
  margin-bottom: .75rem;
}

.app-friends-requests-pill i {
  color: var(--brand-yellow-dark);
}

.app-friends-preview .app-person-row-compact {
  padding: .45rem 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}

.app-friends-preview .app-person-row-compact:hover {
  background-color: rgba(18, 59, 118, 0.05);
}

/* ===== People rows (friends list, requests, search results) ===== */
.app-person-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid #EEF1F6;
}

.app-person-row:last-child {
  border-bottom: none;
}

.app-person-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.app-person-name-link {
  color: inherit;
  text-decoration: none;
}

.app-person-name-link:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

.app-person-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.app-person-row-compact .app-person-avatar {
  width: 36px;
  height: 36px;
}

.app-person-online {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #1B8A5A;
  border: 2px solid var(--app-card-bg);
}

.app-person-actions {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}

.app-mutual-link.btn-link {
  font-size: .8rem;
  text-decoration: none;
}

.app-friends-tabs .nav-link {
  color: var(--app-text-muted);
  font-weight: 600;
  border-radius: 999px;
}

.app-friends-tabs .nav-link.active {
  background-color: var(--brand-blue);
  color: #fff;
}

.app-tab-count {
  background-color: rgba(18, 59, 118, 0.12);
  color: inherit;
  font-size: .72rem;
}

.app-friends-tabs .nav-link.active .app-tab-count {
  background-color: rgba(255, 255, 255, 0.25);
}

.app-tab-count-alert {
  background-color: var(--brand-yellow);
  color: var(--brand-blue-dark);
}

.app-loading {
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s ease-in;
}

[data-bs-theme="dark"] .app-person-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .app-friends-requests-pill {
  background-color: rgba(255, 199, 44, 0.15);
  color: #EAF1FC;
}

[data-bs-theme="dark"] .app-friends-preview .app-person-row-compact:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Center Bootstrap grid rows (e.g. the default Identity Manage pages: Email,
   ChangePassword, TwoFactorAuthentication, PersonalData) now that they no
   longer sit beside the removed sidebar column. */
.app-content .row {
  justify-content: center;
}

.app-footer {
  background-color: transparent;
}

/* ===== Cards (shared across Feed, Journey, Groups, Discover) ===== */
.app-card {
  background-color: var(--app-card-bg);
  border: none;
  border-radius: var(--app-radius);
  box-shadow: 0 2px 12px rgba(18, 59, 118, 0.08);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.app-card-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.app-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-badge-category {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .6rem;
  border-radius: 999px;
  background-color: #FFF4D6;
  color: var(--brand-yellow-dark);
}

.app-card-meta {
  font-size: .82rem;
  color: var(--app-text-muted);
}

/* Small color-coded tag under a poster's name showing their CF mutation (patients)
   or their relation to CF (Family, Provider, Friend). Subtle by design. */
.app-cf-tag {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
}

.app-cf-patient {
  color: var(--brand-yellow-dark);
}

.app-cf-family {
  color: #7b5cd6;
}

.app-cf-provider {
  color: #1a6fc4;
}

.app-cf-friend {
  color: #c46a1a;
}

[data-bs-theme="dark"] .app-cf-patient {
  color: var(--brand-yellow);
}

[data-bs-theme="dark"] .app-cf-family {
  color: #b3a0ef;
}

[data-bs-theme="dark"] .app-cf-provider {
  color: #7ab8f0;
}

[data-bs-theme="dark"] .app-cf-friend {
  color: #eda45c;
}

.app-source-label {
  font-style: italic;
  opacity: .85;
}

.app-post-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: .5rem;
  margin: .25rem 0 .6rem;
}

.app-post-video {
  background: #000;
}

/* Wrapper button around each feed attachment; clicking opens the fullscreen viewer. */
.app-post-media-open {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  text-align: left;
}

.app-post-media-open-video {
  cursor: pointer;
}

.app-post-media-open .app-post-image {
  margin: 0;
}

.app-post-media-open video {
  pointer-events: none;
}

.app-post-media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.8rem;
  pointer-events: none;
}

/* Fullscreen viewer for feed photos/videos. */
.app-media-viewer {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .95);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app-media-viewer.is-open {
  display: flex;
}

.app-media-viewer-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.app-media-viewer img,
.app-media-viewer video {
  max-width: 100vw;
  max-height: 100dvh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.app-media-viewer video {
  width: 100%;
  height: 100%;
}

.app-media-viewer-close {
  position: absolute;
  top: calc(.75rem + env(safe-area-inset-top));
  right: calc(.75rem + env(safe-area-inset-right));
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.25rem;
}

body.app-media-viewer-open {
  overflow: hidden;
}

/* Attachments render as square tiles whose size follows the card width, so the layout is
   proportional on phones and desktops alike. Two columns for multiple items; a single item
   is a large square limited to a comfortable size. */
.app-post-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  margin: .25rem 0 .6rem;
}

.app-post-gallery .app-post-media-open {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: .5rem;
}

.app-post-gallery .app-post-image {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

.app-post-gallery-single {
  grid-template-columns: minmax(0, min(100%, 420px));
  justify-content: center;
}

.app-read-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
}

.app-read-more:hover {
  text-decoration: underline;
}

.app-group-link,
.app-shared-post-link {
  color: inherit;
  text-decoration: none;
}

.app-post-openable {
  cursor: pointer;
}

.app-shared-item[data-shared-url]:not([data-shared-url=""]) {
  cursor: pointer;
}

.app-group-link:hover,
.app-shared-post-link:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

.app-card-actions {
  display: flex;
  gap: 1.25rem;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid #EEF1F6;
  color: var(--app-text-muted);
  font-size: .9rem;
}

.app-card-actions i {
  margin-right: .3rem;
  color: var(--brand-blue-light);
}

/* Like / comment / share buttons inside the actions row look like the plain counters. */
.app-card-actions .app-action-btn {
  color: var(--app-text-muted);
  font-size: inherit;
  text-decoration: none;
  border: 0;
  line-height: inherit;
}

.app-card-actions .app-action-btn:hover,
.app-card-actions .app-action-btn:focus-visible {
  color: var(--brand-blue-light);
}

.app-card-actions .app-like-btn.active {
  color: var(--brand-blue-light);
  font-weight: 600;
}

/* Emoji reaction picker: a small popover above the like button. */
.app-card-actions .app-reaction-wrap {
  position: relative;
  display: inline-flex;
}

.app-reaction-picker {
  position: absolute;
  bottom: calc(100% + .4rem);
  left: 0;
  z-index: 1050;
  display: inline-flex;
  gap: .35rem;
  padding: .35rem .5rem;
  background: #fff;
  border: 1px solid #EEF1F6;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  white-space: nowrap;
}

.app-reaction-picker.d-none {
  display: none;
}

.app-reaction-picker .app-reaction-btn {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: .15rem .45rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--app-text-muted);
  cursor: pointer;
  transition: transform .12s ease;
}

.app-reaction-picker .app-reaction-btn:hover,
.app-reaction-picker .app-reaction-btn:focus-visible {
  transform: scale(1.25);
  background: #F4F7FB;
}

.app-reaction-picker .app-reaction-btn.active {
  background: #E9F2FC;
  color: var(--brand-blue-light);
  font-weight: 600;
}

.app-reaction-picker .app-reaction-count {
  font-size: .78rem;
  margin-left: .15rem;
  vertical-align: middle;
}

.app-reaction-emoji {
  margin-right: .2rem;
}

/* Inline comment thread under a post. */
.app-comments {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed #EEF1F6;
}

.app-comment {
  display: flex;
  gap: .6rem;
  padding: .4rem 0;
}

.app-avatar.app-avatar-sm {
  width: 30px;
  height: 30px;
  font-size: .75rem;
  flex-shrink: 0;
}

.app-comment-body {
  flex: 1 1 auto;
  min-width: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: .75rem;
  padding: .45rem .75rem;
}

.app-comment-meta {
  font-size: .8rem;
}

.app-comment-text {
  font-size: .9rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.app-comment-form {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}

/* Notifications bell in the navbar and the inbox rows. */
.app-bell-nav-link,
.app-chat-nav-link {
  position: relative;
  color: inherit;
  font-size: 1.25rem;
}

/* The chat bubble sits beside the bell; it never grows or shrinks so the collapsing search
   box keeps all the flexible space, and it tightens up on phones where room is scarce. */
.app-chat-nav-item {
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .app-chat-nav-item {
    margin-right: .75rem !important;
  }
}

.app-bell-badge {
  position: absolute;
  top: -.2rem;
  right: -.45rem;
  font-size: .65rem;
  padding: .2em .45em;
}

.navbar .navbar-nav .app-notifications-dropdown-menu {
  /* Pinned to the viewport so the panel hugs the right edge of the window (with a small gap)
     rather than hanging off the bell icon. --app-header-height is maintained by site.js.
     The extra .navbar qualifier out-specifies Bootstrap's
     ".navbar-expand-md .navbar-nav .dropdown-menu { position: absolute; }" rule. */
  position: fixed;
  top: calc(var(--app-header-height, 3.75rem) + .35rem);
  right: .75rem;
  left: auto;
  margin: 0;
  width: 20rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0;
}

/* On phones anchor the bell/account menus directly beneath their icon so they drop just below
   the navbar instead of being pinned to a viewport offset that can land on top of the icons. */
@media (max-width: 767.98px) {
  .navbar .navbar-nav .app-notifications-dropdown-menu,
  .navbar .navbar-nav .app-account-dropdown-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: .75rem;
    left: auto;
    margin: 0;
  }
}

.app-notification-row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .85rem;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font-size: .9rem;
}

.app-notification-row:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.app-notification-row.unread {
  background-color: rgba(13, 110, 253, 0.06);
}

.app-notification-row .app-notification-icon {
  color: var(--brand-blue-light);
  margin-left: auto;
  flex-shrink: 0;
}

.app-notification-preview {
  color: var(--app-text-muted);
  font-size: .8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-bs-theme="dark"] .app-comments {
  border-top-color: #2A323D;
}

[data-bs-theme="dark"] .app-comment-body,
[data-bs-theme="dark"] .app-notification-row:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Small, secondary tags shown on a post (below the content). */
.app-post-content {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.app-post-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .6rem;
}

.app-post-tag-chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  padding: .15rem .55rem;
  border-radius: 999px;
  background-color: #EEF3FA;
  color: var(--brand-blue);
}

.app-avatar-img {
  object-fit: cover;
}

/* ===== Create Post composer (Feed / My Profile) ===== */
.app-post-composer {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
}

.app-post-composer-prompt {
  flex-grow: 1;
  text-align: left;
  border: 1px solid #D9E1EC;
  border-radius: 999px;
  background-color: #F4F7FB;
  color: var(--app-text-muted);
  padding: .55rem 1rem;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.app-post-composer-prompt:hover {
  background-color: #EAF0F8;
  border-color: var(--brand-blue-light);
}

/* ===== Create Post modal ===== */
/* Keep the dialog inside the phone's safe area (notch / status bar) and let the body scroll
   instead of the whole dialog growing past the top of the screen once media is attached. */
.app-post-modal .modal-dialog {
  margin-top: max(.5rem, env(safe-area-inset-top));
  margin-bottom: max(.5rem, env(safe-area-inset-bottom));
  max-height: calc(100dvh - max(.5rem, env(safe-area-inset-top)) - max(.5rem, env(safe-area-inset-bottom)));
}

.app-post-modal .modal-dialog-scrollable .modal-content {
  max-height: calc(100dvh - max(.5rem, env(safe-area-inset-top)) - max(.5rem, env(safe-area-inset-bottom)));
}

.app-post-modal .modal-content {
  border: none;
  border-radius: var(--app-radius);
  box-shadow: 0 18px 48px rgba(10, 39, 80, 0.22);
  overflow: hidden;
}

.app-post-modal .modal-header {
  border-bottom: 1px solid #EEF1F6;
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}

.app-post-modal .modal-header .btn-close {
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -.75rem -.75rem -.75rem auto;
}

.app-post-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
}

.app-post-media-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: .5rem;
  overflow: hidden;
  background: #EEF1F6;
  cursor: pointer;
  border: 2px solid transparent;
}

.app-post-media-tile.is-editing {
  border-color: var(--brand-blue);
}

.app-post-media-tile img,
.app-post-media-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-post-media-badge {
  position: absolute;
  left: .35rem;
  bottom: .35rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .9rem;
}

.app-post-media-remove {
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .8rem;
  padding: 0;
}

.app-post-crop-frame {
  max-height: 280px;
  overflow: hidden;
}

.app-post-crop-frame img {
  display: block;
  max-width: 100%;
}

.app-post-video-preview {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: .5rem;
}

/* Video tile whose first frame couldn't be captured: dark square with the play badge. */
.app-post-media-tile-video-fallback {
  background: #1f2937;
}

.app-post-media-tile-video-fallback img {
  visibility: hidden;
}

/* Hidden player used only for fullscreen preview of an attached video. It's kept in the
   DOM (1px) so requestFullscreen/webkitEnterFullscreen work; the is-visible fallback covers
   browsers with no fullscreen API. */
.app-post-video-fullscreen {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: 0;
  top: 0;
}

.app-post-video-fullscreen:fullscreen,
.app-post-video-fullscreen:-webkit-full-screen {
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  object-fit: contain;
  background: #000;
}

.app-post-video-fullscreen.is-visible {
  width: 100vw;
  height: 100dvh;
  opacity: 1;
  pointer-events: auto;
  z-index: 2000;
  background: #000;
  object-fit: contain;
}

.app-post-modal .modal-title {
  font-weight: 600;
  font-size: 1.05rem;
}

.app-post-modal .modal-body {
  padding: 1.1rem 1.25rem .75rem;
}

.app-post-modal .modal-footer {
  border-top: 1px solid #EEF1F6;
  padding: .75rem 1.25rem;
}

.app-post-modal-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
}

.app-post-modal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #EEF1F6;
}

.app-post-modal-audience {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 500;
  padding: .1rem .55rem;
  border-radius: 999px;
  background-color: #EEF3FA;
  color: var(--brand-blue);
}

.app-post-modal-textarea {
  border: none;
  border-radius: 0;
  padding: .25rem 0;
  font-size: 1.05rem;
  line-height: 1.5;
  resize: none;
  min-height: 110px;
  box-shadow: none !important;
  background-color: transparent;
}

.app-post-modal-textarea:focus {
  background-color: transparent;
}

.app-post-modal-textarea::placeholder {
  color: var(--app-text-muted);
}

.app-post-modal-counter {
  text-align: right;
  font-size: .75rem;
  color: var(--app-text-muted);
  margin-bottom: .75rem;
}

.app-post-tags {
  border-top: 1px solid #EEF1F6;
  padding-top: .75rem;
}

.app-post-tags-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-blue-dark);
  margin-bottom: .5rem;
}

.app-post-tags-label i {
  margin-right: .25rem;
  color: var(--brand-blue-light);
}

.app-post-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.app-post-tag-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.app-post-tag {
  cursor: pointer;
  user-select: none;
  font-size: .75rem;
  font-weight: 500;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid #D9E1EC;
  background-color: #fff;
  color: #4B5563;
  margin: 0;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

.app-post-tag:hover {
  border-color: var(--brand-blue-light);
  color: var(--brand-blue);
}

.app-post-tag-input:checked + .app-post-tag {
  background-color: #FFF4D6;
  border-color: var(--brand-yellow);
  color: var(--brand-yellow-dark);
}

.app-post-tag-input:focus-visible + .app-post-tag {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-blue-light);
}

/* ===== Profile card (Journey page) ===== */
/* Height is driven by the cover band plus the body content rather than a fixed
   min-height, so the cover keeps its true aspect ratio at every card width. */
.app-profile-card {
  padding: 0;
  overflow: hidden;
}

/* The band is sized by aspect ratio rather than a fixed height so it always matches the
   shape of the crop the user selects on the Edit profile page (see --app-cover-ratio). */
.app-profile-cover {
  aspect-ratio: var(--app-cover-ratio);
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
}

/* Fills the cover band without distortion, cropping evenly from the center. */
.app-profile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 575.98px) {
  .app-profile-body {
    margin-top: -48px;
  }

  .app-profile-avatar {
    width: 96px;
    height: 96px;
  }
}

.app-profile-body {
  padding: 0 1.25rem 1.25rem;
  margin-top: -60px;
}

.app-profile-avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 3px solid var(--app-card-bg);
  background-color: var(--app-card-bg);
}

.app-profile-name {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  margin-top: .5rem;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-profile-bio {
  overflow-wrap: break-word;
  word-break: break-word;
  color: #000;
}

[data-bs-theme="dark"] .app-profile-bio {
  color: #fff;
}

/* ===== Stat tiles (Journey page) ===== */
.app-stat-tile {
  background-color: var(--app-card-bg);
  border-radius: var(--app-radius);
  box-shadow: 0 2px 12px rgba(18, 59, 118, 0.08);
  padding: 1.1rem;
  height: 100%;
}

.app-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #EAF1FC;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .6rem;
  font-size: 1.1rem;
}

.app-stat-value {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
}

.app-stat-trend-positive {
  color: #1B8A5A;
  font-size: .82rem;
  font-weight: 600;
}

.app-stat-trend-negative {
  color: #C24A4A;
  font-size: .82rem;
  font-weight: 600;
}

/* ===== Health metric tiles (My Journey) ===== */
.app-metric-tile {
  position: relative;
  display: flex;
  flex-direction: column;
}

.app-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}

.app-metric-header .app-stat-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.app-metric-updated {
  font-size: .68rem;
  color: #6c757d;
  text-align: right;
  line-height: 1.1;
}

.app-metric-body {
  margin-top: auto;
  margin-bottom: auto;
}

.app-metric-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: auto;
  padding-top: .7rem;
}

.app-metric-actions .btn {
  font-size: .72rem;
  padding: .18rem .5rem;
}

.app-metric-chart-wrap {
  position: relative;
  height: 320px;
}

/* ===== Section headers ===== */
.app-section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--brand-blue-dark);
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.app-section-title i {
  color: var(--brand-yellow-dark);
}

/* ===== Group / Friend tiles ===== */
.app-group-tile {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.app-group-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: #EAF1FC;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.app-friend-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .35rem;
}

.app-friend-status-dot.online {
  background-color: #1B8A5A;
}

.app-friend-status-dot.offline {
  background-color: #C6CCD6;
}

/* Group rows (Groups tab) and the icon picker in the create-group modal */
.app-group-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.app-icon-option {
  cursor: pointer;
  margin: 0;
}

.app-icon-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.app-icon-option .app-group-icon {
  border: 2px solid transparent;
  transition: border-color .15s ease-in, transform .15s ease-in;
}

.app-icon-option:hover .app-group-icon {
  transform: translateY(-1px);
}

.app-icon-option input:checked + .app-group-icon {
  border-color: var(--brand-yellow);
  background-color: #FFF4D6;
}

.app-icon-option input:focus-visible + .app-group-icon {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* ===== Group profile page, list rows and create/edit form ===== */
.app-group-picture {
  object-fit: cover;
}

.app-group-category {
  color: var(--brand-blue);
  font-weight: 600;
}

/* Icon tile shown in place of the avatar when a group has no picture. */
.app-group-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EAF1FC;
  color: var(--brand-blue);
  font-size: 2.6rem;
}

.app-group-rules {
  white-space: pre-line;
  overflow-wrap: break-word;
  font-size: .92rem;
}

.app-group-profile-card + .row .app-person-row-compact {
  padding: .45rem 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}

.app-group-profile-card + .row .app-person-row-compact:hover {
  background-color: rgba(18, 59, 118, 0.05);
}

/* Feed-tab composer: the target group picker sits beside the Post button. */
.app-group-composer-target {
  width: auto;
  max-width: 100%;
}

.app-group-composer-target .form-select {
  min-width: 10rem;
}

/* Create/edit form: cover banner with the round group picture overlapping its bottom edge. */
.app-group-form-images {
  position: relative;
  padding-bottom: 44px;
}

.app-image-edit {
  cursor: pointer;
}

.app-image-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  border-radius: .5rem;
}

.app-image-edit:hover .app-image-edit-overlay,
.app-image-edit:focus-within .app-image-edit-overlay {
  opacity: 1;
}

.app-cover-preview {
  width: 100%;
  aspect-ratio: var(--app-cover-ratio);
  border-radius: .5rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue));
}

.app-cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-cover-preview-empty img {
  display: none;
}

.app-group-form-picture {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 88px;
  height: 88px;
  transform: translateX(-50%);
  display: block;
}

.app-group-form-picture .app-image-edit-overlay {
  border-radius: 50%;
}

.app-group-picture-preview {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--app-card-bg);
  background-color: var(--app-card-bg);
  position: relative;
}

.app-group-picture-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-group-picture-preview .app-group-icon-lg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 2rem;
}

.app-group-picture-preview-empty img {
  display: none;
}

.app-group-picture-preview-empty .app-group-icon-lg {
  display: flex;
}

/* ===== Friends / Groups summary cards (profile page) ===== */
.app-profile-link-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease-in, box-shadow .15s ease-in;
}

.app-profile-link-card:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(18, 59, 118, 0.14);
}

.app-profile-link-card:hover .app-section-title {
  color: var(--brand-blue-light);
}

.app-profile-link-count {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
  line-height: 1;
}

.app-profile-link-preview {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .75rem;
}

.app-profile-link-preview .app-person-avatar {
  width: 30px;
  height: 30px;
  border: 2px solid var(--app-card-bg);
  margin-left: -10px;
}

.app-profile-link-preview .app-person-avatar:first-child {
  margin-left: 0;
}

.app-profile-link-preview .app-group-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: .85rem;
}

.app-profile-link-cta {
  margin-left: auto;
  color: var(--brand-blue);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ===== Mobile bottom tab bar (mirrors future native app navigation) ===== */
.app-mobile-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: var(--app-card-bg);
  border-top: 1px solid #E7EAF0;
  box-shadow: 0 -2px 12px rgba(18, 59, 118, 0.08);
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom);
  touch-action: manipulation;
}

.app-mobile-tab {
  flex: 1;
  text-align: center;
  padding: .5rem 0 .4rem;
  min-height: 48px;
  color: var(--app-text-muted);
  font-size: .72rem;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.app-mobile-tab:active {
  color: var(--brand-blue);
  opacity: .7;
  transition: none;
}

/* Full-screen loading overlay shown while navigating between mobile tabs */
.app-nav-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease-in;
}

.app-nav-loading-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

[data-bs-theme="dark"] .app-nav-loading-overlay {
  background-color: rgba(16, 21, 28, 0.6);
}

.app-mobile-tab i {
  display: block;
  font-size: 1.25rem;
  margin-bottom: .15rem;
}

.app-mobile-tab.active {
  color: var(--brand-blue);
}

.app-mobile-tab.active i {
  color: var(--brand-yellow-dark);
}

/* Floating labels sit directly on top of the input's placeholder text, so any descriptive
   placeholder renders as unreadable overlapping text until the field is focused. Hiding the
   placeholder while the label is resting keeps a single readable string at all times, and it
   reappears on focus once the label has floated up out of the way. */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  color: var(--bs-secondary-color);
  text-align: start;
}

/* textarea in a floating label has the same overlap problem but is not covered by the
   .form-control placeholder rules above in every browser, so it is handled explicitly. */
.form-floating > textarea.form-control::placeholder {
  color: transparent;
}

.form-floating > textarea.form-control:focus::placeholder {
  color: var(--bs-secondary-color);
  text-align: start;
}

/* ===== Dark mode ===== */
[data-bs-theme="dark"] {
  --app-bg: #10151C;
  --app-card-bg: #1B222C;
  --app-text-muted: #9AA5B1;
  color-scheme: dark;
}

[data-bs-theme="dark"] body {
  background-color: var(--app-bg);
  color: #E6E9EF;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: #EAF1FC;
}

[data-bs-theme="dark"] .app-card,
[data-bs-theme="dark"] .app-stat-tile {
  background-color: var(--app-card-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .app-card-actions {
  border-top-color: #2A323D;
}

[data-bs-theme="dark"] .app-mobile-tabbar {
  background-color: var(--app-card-bg);
  border-top-color: #2A323D;
}

[data-bs-theme="dark"] .app-mobile-tab {
  color: var(--app-text-muted);
}

[data-bs-theme="dark"] .app-badge-category {
  background-color: #3A3320;
  color: var(--brand-yellow);
}

[data-bs-theme="dark"] .app-post-tag-chip,
[data-bs-theme="dark"] .app-post-modal-audience {
  background-color: #22324A;
  color: #BCD3F2;
}

[data-bs-theme="dark"] .app-post-modal .modal-header,
[data-bs-theme="dark"] .app-post-modal .modal-footer,
[data-bs-theme="dark"] .app-post-tags {
  border-color: #2A323D;
}

[data-bs-theme="dark"] .app-post-modal-avatar {
  border-color: #2A323D;
}

[data-bs-theme="dark"] .app-post-composer-prompt {
  background-color: #10151C;
  border-color: #3A4452;
  color: var(--app-text-muted);
}

[data-bs-theme="dark"] .app-post-composer-prompt:hover {
  background-color: #22324A;
  border-color: var(--brand-blue-light);
}

[data-bs-theme="dark"] .app-post-tags-label {
  color: #EAF1FC;
}

[data-bs-theme="dark"] .app-post-tag {
  background-color: transparent;
  border-color: #3A4452;
  color: #C5CDD8;
}

[data-bs-theme="dark"] .app-post-tag-input:checked + .app-post-tag {
  background-color: #3A3320;
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

[data-bs-theme="dark"] .app-stat-icon,
[data-bs-theme="dark"] .app-group-icon,
[data-bs-theme="dark"] .app-group-avatar-fallback {
  background-color: #22324A;
}

[data-bs-theme="dark"] .app-group-profile-card + .row .app-person-row-compact:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .app-icon-option input:checked + .app-group-icon {
  background-color: #3A3320;
  color: var(--brand-yellow);
}

[data-bs-theme="dark"] .app-profile-link-count {
  color: #EAF1FC;
}

[data-bs-theme="dark"] .app-profile-link-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .app-metric-tile .app-stat-icon {
  background-color: #3A3320;
  color: var(--brand-yellow);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #232B36;
  border-color: #333D4A;
  color: #E6E9EF;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: #6B7684;
}

.form-select:required:invalid {
  color: var(--bs-secondary-color);
}

.form-select:required:invalid option:not([disabled]) {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-select:required:invalid {
  color: #6B7684;
}

[data-bs-theme="dark"] .list-group-item {
  background-color: transparent;
  color: #E6E9EF;
  border-color: #2A323D;
}

[data-bs-theme="dark"] .app-section-title {
  color: #FFFFFF;
}

[data-bs-theme="dark"] .app-stat-value {
  color: var(--brand-blue-light);
}

/* ---------- Auth (login / register) screen ---------- */
.app-auth-body {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--app-bg) 0%, #E4ECF7 100%);
}

.app-auth-page {
  /* Center within the viewport space remaining below the top navbar. */
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 2rem 1rem;
}

.app-auth-hero {
  max-width: 440px;
  align-items: center;
}

.app-auth-hero-inner {
  text-align: center;
}

.app-auth-hero-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 6px 18px rgba(18, 59, 118, 0.25));
}

.app-auth-hero-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.75rem;
  color: var(--brand-blue);
  margin-bottom: 0.75rem;
}

.app-auth-hero-tagline {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--brand-blue-dark);
  opacity: 0.85;
}

.app-auth-panel {
  width: 100%;
  max-width: 400px;
}

.app-auth-card {
  padding: 1.75rem;
  animation: app-auth-fade-in 0.45s ease-out;
}

.app-auth-card + .app-auth-card {
  margin-top: 0.85rem;
}

.app-auth-switch {
  padding: 1rem 1.5rem;
  text-align: center;
}

.app-auth-heading {
  text-align: center;
  margin-bottom: 1.25rem;
  font-family: "Poppins", sans-serif;
}

.app-auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--app-text-muted);
  font-size: .85rem;
}

.app-auth-divider::before,
.app-auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #E5EAF2;
}

.app-external-login {
  border: 1px solid #D8DEE8;
  border-radius: 999px;
  color: #1F2937;
  background-color: #FFFFFF;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}

.app-external-login:hover {
  border-color: var(--brand-blue-light);
  color: var(--brand-blue-dark);
  background-color: #F8FAFD;
}

.app-external-login-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1;
}

.app-external-login-google .app-external-login-icon {
  color: #4285F4;
  background-color: #F1F6FF;
}

.app-external-login-apple .app-external-login-icon {
  color: #FFFFFF;
  background-color: #111111;
}

/* ===== Shiny login buttons (visual only; no size changes) ===== */
#login-submit.app-btn-yellow,
#registerSubmit.app-btn-yellow,
a.app-btn-yellow[href*="/Account/Login"] {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-yellow) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(0, 0, 0, 0.04) 52%, rgba(0, 0, 0, 0.1) 100%) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: box-shadow .2s ease, filter .2s ease, transform .1s ease;
}

#login-submit.app-btn-yellow::after,
#registerSubmit.app-btn-yellow::after,
a.app-btn-yellow[href*="/Account/Login"]::after,
.app-external-login::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left .6s ease;
}

#login-submit.app-btn-yellow:hover::after,
#registerSubmit.app-btn-yellow:hover::after,
a.app-btn-yellow[href*="/Account/Login"]:hover::after,
.app-external-login:hover::after {
  left: 125%;
}

#login-submit.app-btn-yellow:hover,
#registerSubmit.app-btn-yellow:hover,
a.app-btn-yellow[href*="/Account/Login"]:hover {
  background-color: var(--brand-yellow-dark) !important;
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 16px rgba(0, 0, 0, 0.2);
}

#login-submit.app-btn-yellow:active,
#registerSubmit.app-btn-yellow:active,
a.app-btn-yellow[href*="/Account/Login"]:active,
.app-external-login:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

a.app-btn-yellow.nav-link[href*="/Account/Login"],
a.app-btn-yellow.nav-link[href*="/Account/Login"]:hover,
a.app-btn-yellow.nav-link[href*="/Account/Login"]:focus {
  color: var(--brand-blue-dark) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  letter-spacing: .01em;
}

.app-external-login {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F3F6FB 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: box-shadow .2s ease, border-color .2s ease, transform .1s ease;
}

.app-external-login:hover {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EAF0FA 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(15, 23, 42, 0.14);
}

.app-external-login-apple {
  background-color: #111111;
  background-image: linear-gradient(180deg, #3A3A3A 0%, #111111 55%, #000000 100%);
  border-color: #000000;
  color: #FFFFFF;
}

.app-external-login-apple:hover {
  background-image: linear-gradient(180deg, #4A4A4A 0%, #1A1A1A 55%, #000000 100%);
  border-color: #000000;
  color: #FFFFFF;
}

.app-external-login-apple::after {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
}

.app-auth-card-brand {
  text-align: center;
  margin-bottom: 1rem;
}

.app-auth-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.5rem;
}

.app-auth-card-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--brand-blue);
}

.app-auth-card-tagline {
  margin-bottom: 0;
  line-height: 1.5;
}

.app-auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

@keyframes app-auth-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-bs-theme="dark"] .app-auth-body {
  background: linear-gradient(160deg, #141922 0%, #101722 100%);
}

[data-bs-theme="dark"] .app-auth-hero-brand,
[data-bs-theme="dark"] .app-auth-card-title {
  color: var(--brand-blue-light);
}

[data-bs-theme="dark"] .app-auth-hero-tagline {
  color: #C7D4E8;
}

/* ---------- Guest "explore mode" ---------- */
.app-guest-banner {
  border-left: 4px solid var(--brand-yellow);
}

.app-guest-banner-icon {
  font-size: 1.6rem;
  color: var(--brand-blue);
}

.app-guest-endcap {
  padding: 1.75rem;
}

.app-guest-endcap .bi-lock-fill {
  font-size: 1.5rem;
  color: var(--brand-blue-light);
}

.app-auth-explore a {
  text-decoration: none;
}

.app-auth-explore a:hover {
  text-decoration: underline;
  color: var(--brand-blue) !important;
}

/* ---------- App toast (inline status notifications) ---------- */
.app-toast-container {
  position: fixed;
  top: calc(84px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(400px, calc(100% - 2rem));
  pointer-events: none;
}

.app-toast {
  width: 100%;
  background-color: var(--app-card-bg);
  border: none;
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--app-radius);
  box-shadow: 0 6px 20px rgba(18, 59, 118, 0.18);
  pointer-events: auto;
}

.app-toast-body {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  font-size: .9rem;
  color: var(--brand-blue-dark);
}

.app-toast-icon {
  color: var(--brand-yellow-dark);
  font-size: 1.1rem;
}

/* Success variant - used by _SuccessToast.cshtml for every success notification. */
.app-toast-success {
  border-left-color: #2E9E5B;
}

.app-toast-success .app-toast-icon {
  color: #2E9E5B;
}

[data-bs-theme="dark"] .app-toast {
  background-color: var(--app-card-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .app-toast-body {
  color: #EAF1FC;
}

[data-bs-theme="dark"] .app-guest-banner-icon {
  color: var(--brand-blue-light);
}

[data-bs-theme="dark"] .app-auth-explore a:hover {
  color: var(--brand-blue-light) !important;
}

/* Center all modals on mobile so they don't intrude into the OS top bar */
@media (max-width: 575.98px) {
  .modal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
  }
}

/* ===== Direct messages (chat) ===== */
.app-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 992px) {
  .app-chat-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

.app-chat-sidebar {
  max-height: calc(100vh - var(--app-header-height, 3.75rem) - 3rem);
  overflow-y: auto;
}

.app-chat-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.app-chat-list-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
  transition: background-color .15s ease-in-out;
}

.app-chat-list-item:hover,
.app-chat-list-item.active {
  background-color: rgba(18, 59, 118, 0.08);
}

.app-chat-list-text {
  flex: 1 1 auto;
  min-width: 0;
}

.app-chat-list-name,
.app-chat-list-preview {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-chat-list-name {
  font-weight: 600;
  font-size: .92rem;
}

.app-chat-list-preview {
  font-size: .82rem;
  color: var(--bs-secondary-color, #6c757d);
}

.app-chat-list-item.unread .app-chat-list-preview {
  color: var(--bs-body-color);
  font-weight: 600;
}

.app-chat-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  font-size: .72rem;
  color: var(--bs-secondary-color, #6c757d);
}

.app-chat-window {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--app-header-height, 3.75rem) - 3rem);
  height: calc(100dvh - var(--app-header-height, 3.75rem) - 3rem);
  min-height: 360px;
}

/* On mobile the chat window must fit between the header and the fixed tab bar using the
   dynamic viewport. If the page overflows the visible viewport, mobile browsers resize their
   toolbars while the page scrolls and the fixed tab bar appears to float above the bottom. */
@media (max-width: 767.98px) {
  body:has(.app-chat-window) {
    margin-bottom: 0;
    min-height: 100vh;
    min-height: 100lvh;
  }

  body:has(.app-chat-window) main {
    padding-bottom: 0 !important;
  }

  .app-chat-window {
    height: calc(100dvh - var(--app-header-height, 3.75rem) - 1.5rem - 48px - .75rem - env(safe-area-inset-bottom));
    min-height: 240px;
  }
}

.app-chat-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.app-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem .9rem;
  background: linear-gradient(180deg, rgba(18, 59, 118, 0.03), rgba(18, 59, 118, 0.07));
}

.app-chat-empty {
  margin: auto;
}

.app-chat-bubble-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.app-chat-bubble-row.mine {
  align-items: flex-end;
}

.app-chat-bubble {
  max-width: min(75%, 520px);
  padding: .5rem .8rem .35rem;
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  animation: app-chat-pop .18s ease-out;
}

.app-chat-bubble-row.theirs .app-chat-bubble {
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color);
  border-bottom-left-radius: .3rem;
}

.app-chat-bubble-row.mine .app-chat-bubble {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  color: #fff;
  border-bottom-right-radius: .3rem;
}

.app-chat-bubble-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .93rem;
}

.app-chat-bubble-time {
  display: block;
  margin-top: .1rem;
  font-size: .68rem;
  opacity: .7;
  text-align: right;
}

.app-chat-bubble-status {
  margin: .15rem .4rem 0;
  font-size: .68rem;
  font-style: italic;
  color: var(--bs-secondary-color, #6c757d);
}

.app-chat-bubble-row.sending .app-chat-bubble {
  opacity: .75;
}

@keyframes app-chat-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.app-chat-compose {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .65rem .75rem;
  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.app-chat-input {
  resize: none;
  border-radius: 1.25rem;
  padding: .5rem 1rem;
  max-height: 140px;
}

.app-chat-send {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-yellow);
  color: var(--brand-blue-dark);
}

.app-chat-send:hover {
  background-color: var(--brand-yellow-dark);
  color: var(--brand-blue-dark);
}

[data-bs-theme="dark"] .app-chat-list-item:hover,
[data-bs-theme="dark"] .app-chat-list-item.active {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .app-chat-messages {
  background: rgba(255, 255, 255, 0.03);
}

@media (prefers-reduced-motion: reduce) {
  .app-chat-bubble {
    animation: none;
  }
}

/* Prevent iOS/Android auto-zoom on focus: form fields must be >= 16px on small screens */
@media (max-width: 991.98px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }
}