/* Night sky theme — toggled via html.mn-night */

.mn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(to bottom, #ffffff, #e8e8e8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  color: #334155;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Anchored after collapse / toggler — always the rightmost control in the navbar */
.mn-theme-toggle--navbar-end {
  flex-shrink: 0;
  margin-left: 0.65rem;
  order: 99;
  position: relative;
  z-index: 2;
}

.mn-theme-toggle:hover,
.mn-theme-toggle:focus-visible {
  border-color: rgba(138, 171, 62, 0.55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
  outline: none;
}

.mn-theme-toggle__icon {
  display: none;
  font-size: 0.95rem;
}

html:not(.mn-night) .mn-theme-toggle__moon {
  display: inline-block;
}

html.mn-night .mn-theme-toggle__sun {
  display: inline-block;
}

html.mn-night .mn-theme-toggle {
  background: linear-gradient(145deg, #2a3550, #1a2238);
  border-color: rgba(212, 227, 160, 0.35);
  color: #f5e6a8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Decorative sky layer */
.mn-night-sky {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

html.mn-night .mn-night-sky {
  display: block;
}

html.mn-night body::before {
  background-color: #070b16 !important;
  background-image: none !important;
}

html.mn-night body.home-page::before,
html.mn-night body.mn-hub-canvas::before,
html.mn-night body.mn-main-hub::before {
  background-color: #070b16 !important;
  background-image: none !important;
}

.mn-night-sky__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, #1a2744 0%, transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(60, 80, 130, 0.35) 0%, transparent 42%),
    linear-gradient(180deg, #0a1020 0%, #070b16 55%, #050810 100%);
}

.mn-night-sky__stars,
.mn-night-sky__stars-2 {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 320px 280px;
}

/* White pixel-dot stars */
.mn-night-sky__stars {
  opacity: 0.9;
  background-image:
    radial-gradient(1px 1px at 12px 18px, #fff, transparent),
    radial-gradient(1px 1px at 48px 72px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 96px 40px, #fff, transparent),
    radial-gradient(1px 1px at 140px 110px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 180px 28px, #fff, transparent),
    radial-gradient(1px 1px at 220px 160px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 268px 88px, #fff, transparent),
    radial-gradient(1px 1px at 300px 200px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 64px 210px, #fff, transparent),
    radial-gradient(1px 1px at 160px 240px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 250px 250px, #fff, transparent),
    radial-gradient(1px 1px at 30px 140px, rgba(255, 255, 255, 0.6), transparent);
  animation: mn-star-twinkle 3.6s ease-in-out infinite alternate;
}

.mn-night-sky__stars-2 {
  opacity: 0.55;
  background-size: 420px 360px;
  background-image:
    radial-gradient(1px 1px at 24px 50px, #fff, transparent),
    radial-gradient(1px 1px at 88px 20px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 130px 180px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 200px 90px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 260px 40px, #fff, transparent),
    radial-gradient(1px 1px at 310px 220px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 360px 140px, #fff, transparent),
    radial-gradient(1px 1px at 50px 300px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 170px 320px, #fff, transparent),
    radial-gradient(1px 1px at 390px 300px, rgba(255, 255, 255, 0.7), transparent);
  animation: mn-star-twinkle 4.8s ease-in-out infinite alternate-reverse;
}

@keyframes mn-star-twinkle {
  from { opacity: 0.45; }
  to { opacity: 0.95; }
}

/* Small crescent moon — below sticky navbar (logo ~128px) */
.mn-night-sky__moon {
  position: absolute;
  top: calc(var(--mn-navbar-sticky-offset, 0px) + 11.5rem);
  right: 2.25rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -0.7rem 0 0 0.12rem #f3e7b0;
  filter: drop-shadow(0 0 10px rgba(243, 231, 176, 0.35));
  opacity: 0.92;
}

@media (max-width: 576px) {
  .mn-night-sky__moon {
    top: calc(var(--mn-navbar-sticky-offset, 0px) + 10rem);
    right: 1rem;
    width: 2.1rem;
    height: 2.1rem;
    box-shadow: inset -0.55rem 0 0 0.1rem #f3e7b0;
  }
}

/* Readable surfaces over the night sky */
html.mn-night .navbar-main {
  background-color: rgba(18, 24, 40, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.mn-night .navbar-main .navbar-brand,
html.mn-night .navbar-toggler {
  color: #e8edf5 !important;
}

/* Light pill buttons keep dark text (do not wash out labels) */
html.mn-night .navbar-main .nav-link-main,
html.mn-night .navbar-main .nav-pill,
html.mn-night .navbar-main .nav-pill-item,
html.mn-night .navbar-main .auth-btn {
  color: #1a1a1a !important;
}

html.mn-night .navbar-main .nav-link-main:hover,
html.mn-night .navbar-main .nav-link-main:focus,
html.mn-night .navbar-main .nav-link-main.active,
html.mn-night .navbar-main .nav-pill:hover,
html.mn-night .navbar-main .nav-pill:focus,
html.mn-night .navbar-main .nav-pill-item:hover,
html.mn-night .navbar-main .nav-pill-item:focus,
html.mn-night .navbar-main .auth-btn:hover,
html.mn-night .navbar-main .auth-btn:focus {
  color: #1a1a1a !important;
}

html.mn-night .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
}

html.mn-night .navbar-toggler-icon {
  filter: invert(1);
}

html.mn-night .footer {
  background-color: rgba(12, 16, 28, 0.9);
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #b8c0d0 !important;
}

html.mn-night .footer a {
  color: #d5dce8;
}

html.mn-night .card {
  background-color: rgba(22, 28, 44, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8edf5;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Hub landing cards — more see-through so stars show through */
html.mn-night .hub-card {
  background: rgba(18, 26, 44, 0.42) !important;
  border-color: rgba(212, 227, 160, 0.22) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  color: #e8edf5 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html.mn-night .hub-card:hover,
html.mn-night .hub-card:focus-visible {
  background: rgba(24, 34, 56, 0.55) !important;
  border-color: rgba(138, 171, 62, 0.55) !important;
  color: #f0f3f8 !important;
}

html.mn-night .hub-card__title,
html.mn-night .hub-card h2 {
  color: #d5e4a8 !important;
}

html.mn-night .hub-card__tagline {
  color: rgba(220, 228, 240, 0.88) !important;
}

html.mn-night .hub-page__title {
  color: #f0f3f8 !important;
}

html.mn-night .hub-page__lead {
  color: rgba(210, 220, 235, 0.85) !important;
}

/* Charity / Housing / Travel / KME category chips — same glass look as hub cards */
html.mn-night .charity-chip,
html.mn-night .housing-chip,
html.mn-night .travel-chip,
html.mn-night .kme-chip {
  background: rgba(18, 26, 44, 0.42) !important;
  border-color: rgba(212, 227, 160, 0.22) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  color: #e8edf5 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html.mn-night .charity-chip:hover,
html.mn-night .charity-chip:focus-visible,
html.mn-night .housing-chip:hover,
html.mn-night .housing-chip:focus-visible,
html.mn-night .housing-chip--active,
html.mn-night .travel-chip:hover,
html.mn-night .travel-chip:focus-visible,
html.mn-night .kme-chip:hover,
html.mn-night .kme-chip:focus-visible {
  background: rgba(24, 34, 56, 0.55) !important;
  border-color: rgba(138, 171, 62, 0.55) !important;
  color: #f0f3f8 !important;
}

html.mn-night .charity-chip--waqf {
  background: linear-gradient(135deg, rgba(18, 26, 44, 0.5), rgba(40, 55, 40, 0.45)) !important;
  border-color: rgba(138, 171, 62, 0.4) !important;
}

html.mn-night .charity-chip .fw-semibold,
html.mn-night .housing-chip .fw-semibold,
html.mn-night .travel-chip .fw-semibold,
html.mn-night .kme-chip .fw-semibold {
  color: #d5e4a8 !important;
}

html.mn-night .charity-chip .text-muted,
html.mn-night .housing-chip .text-muted,
html.mn-night .travel-chip .text-muted,
html.mn-night .kme-chip .text-muted,
html.mn-night .charity-chip .small,
html.mn-night .housing-chip .small,
html.mn-night .travel-chip .small,
html.mn-night .kme-chip .small {
  color: rgba(220, 228, 240, 0.88) !important;
}

html.mn-night .charity-action-chip,
html.mn-night .housing-action-chip,
html.mn-night .travel-action-chip,
html.mn-night .kme-action-chip {
  background: rgba(18, 26, 44, 0.45) !important;
  border-color: rgba(138, 171, 62, 0.4) !important;
  color: #d5e4a8 !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

html.mn-night .charity-action-chip:hover,
html.mn-night .charity-action-chip:focus-visible,
html.mn-night .housing-action-chip:hover,
html.mn-night .housing-action-chip:focus-visible,
html.mn-night .travel-action-chip:hover,
html.mn-night .travel-action-chip:focus-visible,
html.mn-night .kme-action-chip:hover,
html.mn-night .kme-action-chip:focus-visible {
  background: rgba(24, 34, 56, 0.65) !important;
  border-color: var(--mn-olive, #8aab3e) !important;
  color: #eef5d4 !important;
}

html.mn-night .charity-action-chip i,
html.mn-night .housing-action-chip i,
html.mn-night .travel-action-chip i,
html.mn-night .kme-action-chip i {
  color: var(--mn-olive, #8aab3e) !important;
}

html.mn-night .charity-card,
html.mn-night .housing-card,
html.mn-night .travel-card,
html.mn-night .kme-card,
html.mn-night .travel-panel,
html.mn-night .kme-panel,
html.mn-night .housing-guest-preview__card {
  background: rgba(18, 26, 44, 0.48) !important;
  border-color: rgba(212, 227, 160, 0.18) !important;
  color: #e8edf5 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html.mn-night .charity-card .card-title,
html.mn-night .housing-card .card-title,
html.mn-night .travel-card .card-title,
html.mn-night .kme-card .card-title {
  color: #d5e4a8 !important;
}

html.mn-night .kme-badge {
  background: rgba(138, 171, 62, 0.22) !important;
  color: #d5e4a8 !important;
}

html.mn-night .kme-badge--muted {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(220, 228, 240, 0.85) !important;
}

html.mn-night .travel-subchip {
  background: rgba(18, 26, 44, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #c8d2e4 !important;
}

html.mn-night .travel-subchip:hover,
html.mn-night .travel-subchip:focus-visible,
html.mn-night .travel-subchip--active {
  background: rgba(40, 55, 40, 0.55) !important;
  border-color: rgba(138, 171, 62, 0.55) !important;
  color: #d5e4a8 !important;
}

html.mn-night .card .text-muted,
html.mn-night .text-muted {
  color: #9aa6bc !important;
}

html.mn-night h1,
html.mn-night h2,
html.mn-night h3,
html.mn-night h4,
html.mn-night h5,
html.mn-night h6,
html.mn-night .h1,
html.mn-night .h2,
html.mn-night .h3,
html.mn-night .h4,
html.mn-night .h5,
html.mn-night .h6 {
  color: #f0f3f8;
}

html.mn-night .list-group-item {
  background-color: transparent;
  color: #e8edf5;
  border-color: rgba(255, 255, 255, 0.08);
}

html.mn-night .dropdown-menu {
  background-color: #1a2236;
  border-color: rgba(255, 255, 255, 0.1);
}

html.mn-night .dropdown-item {
  color: #e8edf5;
}

html.mn-night .dropdown-item:hover,
html.mn-night .dropdown-item:focus {
  background-color: rgba(138, 171, 62, 0.2);
  color: #fff;
}

html.mn-night .form-control,
html.mn-night .form-select {
  background-color: #141b2c;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e8edf5;
}

html.mn-night .form-control:focus,
html.mn-night .form-select:focus {
  background-color: #141b2c;
  color: #e8edf5;
}

html.mn-night .alert-light,
html.mn-night .bg-light,
html.mn-night .bg-white {
  background-color: rgba(22, 28, 44, 0.92) !important;
  color: #e8edf5;
}

@media (prefers-reduced-motion: reduce) {
  .mn-night-sky__stars,
  .mn-night-sky__stars-2 {
    animation: none;
    opacity: 0.75;
  }
}