/**
 * Grid Theme — Black / white / grey shiny glassmorphism
 * Loaded after style.min.css + grid-theme.css to kill blue-grey Sngine palette.
 */

/* ---- Neutral palette override (beats style.min :root) ---- */
body.theme-grid {
  --body-bg-color-dark: #050505;
  --body-color-dark: #e5e7eb;
  --link-color: #d1d5db;
  --header-bg-color-dark: #000000;
  --card-dark-color: rgba(12, 12, 12, 0.72);
  --card-dark-divider: rgba(255, 255, 255, 0.1);
  --card-dark-hover: rgba(255, 255, 255, 0.08);
  --card-dark-input: rgba(255, 255, 255, 0.05);
  --card-dark-input-color: #e5e7eb;
  --plyr-color-main: #ffffff;
}

body.theme-grid.night-mode {
  background-color: #050505 !important;
  color: #e5e7eb;
}

/* ---- Shared glass surface mixin pattern ---- */
body.theme-grid .card,
body.theme-grid .post,
body.theme-grid .publisher,
body.theme-grid .main-side-nav-card,
body.theme-grid .alert:not(.alert-danger):not(.alert-success):not(.alert-warning),
body.theme-grid .posts-filter,
body.theme-grid .dropdown-menu,
body.theme-grid .ui-widget-content {
  background: rgba(10, 10, 10, 0.72) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #e5e7eb;
}

body.theme-grid .card::before,
body.theme-grid .post::before {
  display: none !important;
}

body.theme-grid .card-header,
body.theme-grid .post .post-header,
body.theme-grid .post .post-footer {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e5e7eb !important;
}

body.theme-grid .card-body {
  color: rgba(229, 231, 235, 0.92);
}

/* ---- Feed post media (kills blue-grey image wells) ---- */
body.theme-grid .post-media,
body.theme-grid .post-media.module,
body.theme-grid.night-mode .post-media,
body.theme-grid.night-mode .post-media.module,
body.theme-grid.night-mode .post-media.list {
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

body.theme-grid .post-media-image-wrapper,
body.theme-grid .post-media-image-meta {
  background: transparent !important;
}

body.theme-grid .post-actions,
body.theme-grid .post-stats {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Links & accents — white/grey not blue ---- */
body.theme-grid a:not(.btn):not(.dropdown-item):not(.user-box):not(.grid-header-nav__link) {
  color: #d1d5db;
}

body.theme-grid a:not(.btn):not(.dropdown-item):not(.user-box):hover {
  color: #ffffff;
}

body.theme-grid .text-link,
body.theme-grid .text-primary {
  color: #f3f4f6 !important;
}

body.theme-grid .text-muted {
  color: #9ca3af !important;
}

body.theme-grid .btn-primary {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  color: #000000 !important;
  font-weight: 700;
}

body.theme-grid .btn-primary:hover {
  background: #e5e7eb !important;
}

body.theme-grid .btn-outline-secondary,
body.theme-grid .btn-outline-primary {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #e5e7eb !important;
}

body.theme-grid .btn-outline-secondary.active,
body.theme-grid .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* ---- Sidebar widgets / sponsored ---- */
body.theme-grid .card.bg-indigo,
body.theme-grid .card.bg-teal,
body.theme-grid .card.widget {
  background: rgba(10, 10, 10, 0.78) !important;
}

body.theme-grid .trending-item,
body.theme-grid .ads-card {
  background: transparent !important;
}

/* ---- Profile page ---- */
body.theme-grid.page-profile .main-wrapper,
body.theme-grid.page-profile .container,
body.theme-grid.page-profile .container-fluid {
  background: transparent !important;
}

body.theme-grid.page-profile .profile-header {
  background: rgba(8, 8, 8, 0.55) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  overflow: hidden;
  margin-bottom: 24px;
}

body.theme-grid.page-profile .profile-cover-wrapper {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border-radius: 20px 20px 0 0 !important;
  min-height: 220px;
}

body.theme-grid.page-profile .profile-cover-wrapper:after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.85) 100%) !important;
}

body.theme-grid.page-profile .profile-name-wrapper {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 14px !important;
}

@media (min-width: 992px) {
  body.theme-grid.page-profile .profile-name-wrapper {
    background: rgba(0, 0, 0, 0.35) !important;
    padding: 10px 16px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  }
}

body.theme-grid.page-profile .profile-name-wrapper a {
  color: #ffffff !important;
}

body.theme-grid.page-profile .profile-name-wrapper .verified-badge svg,
body.theme-grid.page-profile .profile-name-wrapper a svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

body.theme-grid.page-profile .profile-tabs-wrapper {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 14px !important;
  margin: 12px 16px 16px !important;
}

body.theme-grid.page-profile .profile-tabs-wrapper a {
  color: #9ca3af !important;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.theme-grid.page-profile .profile-tabs-wrapper a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body.theme-grid.page-profile .profile-tabs-wrapper a.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.theme-grid.page-profile .profile-page .card {
  background: rgba(8, 8, 8, 0.68) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-grid.page-profile .profile-page .card-header {
  color: #f3f4f6 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

body.theme-grid.page-profile .about-list-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
}

body.theme-grid.page-profile .about-list-item .details {
  color: #9ca3af !important;
}

body.theme-grid.page-profile .profile-header .x_page_mini_info,
body.theme-grid.page-profile .profile-header .about-bio {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
}

/* MySpace-style page background shows between glass panels */
body.theme-grid.page-profile.has-profile-background .profile-page .card,
body.theme-grid.page-profile.has-profile-background .profile-header {
  background: rgba(6, 6, 6, 0.62) !important;
}

body.theme-grid.page-profile.has-profile-background {
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ---- Forms / inputs ---- */
body.theme-grid .form-control,
body.theme-grid .form-select,
body.theme-grid .publisher textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f3f4f6 !important;
}

body.theme-grid .form-control:focus,
body.theme-grid .form-select:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* ---- Progress bars / badges ---- */
body.theme-grid .progress {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.theme-grid .progress-bar,
body.theme-grid .progress-bar-info {
  background: #ffffff !important;
}

body.theme-grid .badge.bg-light,
body.theme-grid .badge.text-primary {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* ---- Suggested People row ---- */
body.theme-grid .dg-feed-people.card {
  background: rgba(8, 8, 8, 0.65) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-grid .dg-feed-people__action {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f3f4f6 !important;
}

body.theme-grid .dg-feed-people__action:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

body.theme-grid .dg-feed-people__nearby-link {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Profile / page video grids (TikTok-style tiles) ---- */
body.theme-grid .panel-videos .row {
  --bs-gutter-x: 8px;
  --bs-gutter-y: 8px;
}

body.theme-grid .panel-videos .pg_video {
  aspect-ratio: 9 / 16;
  padding-bottom: 0 !important;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

body.theme-grid .panel-videos .pg_video:hover {
  transform: scale(1.02);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body.theme-grid .panel-videos .pg_video .play-button {
  width: 44px;
  height: 44px;
  padding-top: 10px;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.theme-grid .panel-videos .pg_video:hover .play-button {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

body.theme-grid .panel-videos .nav-pills .nav-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #9ca3af !important;
  border-radius: 999px !important;
  margin-right: 6px;
}

body.theme-grid .panel-videos .nav-pills .nav-link.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

/* ---- Search on profile ---- */
body.theme-grid.page-profile .btn-danger,
body.theme-grid.page-profile .btn.btn-sm.btn-danger {
  background: #ffffff !important;
  border-color: #fff !important;
  color: #000 !important;
}