/* ============================================
   EXM Tweaks – ThriveDesk Dark Theme v2
   ============================================ */

/* ---------- Base / Background ---------- */
body,
html {
  background: #08080f !important;
  color: #e0e0e0 !important;
}

main,
#top,
.relative {
  background: transparent !important;
}

/* Purple/pink radial glows to match mockup */
body::before {
  content: "";
  position: fixed;
  bottom: -15%;
  right: -5%;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 40, 220, 0.12) 0%,
    rgba(220, 50, 160, 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  bottom: 5%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 60, 140, 0.08) 0%,
    rgba(200, 40, 180, 0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Pink glow on left side */
html::before {
  content: "";
  position: fixed;
  bottom: 0%;
  left: -8%;
  width: 550px;
  height: 550px;
  background: radial-gradient(
    ellipse at center,
    rgba(220, 50, 140, 0.09) 0%,
    rgba(180, 40, 200, 0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ---------- Text Globals ---------- */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

p, span, label, li, td, th {
  color: #c8c8d4 !important;
}

/* ---------- Search Bar ---------- */
input[type="text"],
input[type="search"],
[class*="search"] input,
[class*="search-bar"],
[class*="search-input"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e0e0e0 !important;
  border-radius: 12px !important;
}

input::placeholder {
  color: #555570 !important;
}

/* ---------- Category / Article Cards ---------- */
[class*="card"],
[class*="Card"],
[class*="article-item"],
[class*="category-item"] {
  background: linear-gradient(
    135deg,
    rgba(25, 25, 55, 0.5) 0%,
    rgba(18, 18, 40, 0.35) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

[class*="card"]:hover,
[class*="Card"]:hover,
[class*="article-item"]:hover,
[class*="category-item"]:hover {
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 40px rgba(160, 50, 200, 0.06) !important;
  transform: translateY(-3px) !important;
}

/* Card text */
[class*="card"] h3,
[class*="card"] h4,
[class*="card"] a,
[class*="Card"] h3,
[class*="Card"] a {
  color: #f0f0f0 !important;
}

[class*="card"] p,
[class*="card"] span,
[class*="Card"] p,
[class*="Card"] span {
  color: #9090a8 !important;
}

/* ---------- Sidebar / Article Pages ---------- */
[class*="sidebar"],
[class*="aside"],
aside {
  background: rgba(12, 12, 24, 0.5) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[class*="sidebar"] a,
aside a {
  color: #b0b0c8 !important;
}

[class*="sidebar"] a:hover,
aside a:hover {
  color: #d4a0f0 !important;
}

/* Article content area */
article,
[class*="article-content"],
[class*="content-body"],
[class*="prose"] {
  background: transparent !important;
  color: #d0d0e0 !important;
}

/* Code blocks in articles */
pre, code {
  background: rgba(16, 16, 35, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #c8d0e8 !important;
  border-radius: 8px !important;
}

/* ---------- Breadcrumbs ---------- */
[class*="breadcrumb"] {
  color: #606080 !important;
}

[class*="breadcrumb"] a {
  color: #8080a0 !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #08080f;
}

::-webkit-scrollbar-thumb {
  background: #222240;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #333358;
}

/* ---------- Misc ---------- */
hr {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

table, tr, td, th {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

th {
  background: rgba(16, 16, 35, 0.5) !important;
}

/* ---------- Article Page Bottom ---------- */

/* "Was this article helpful?" row — center the whole row */
.reaction-card {
  justify-content: center !important;
  gap: 16px !important;
}

/* The parent row with helpful + date — center and stack */
.reaction-card + .text-muted-foreground {
  text-align: center !important;
}

/* "Can't find what you're looking for?" + "Send us an email" row */
.next-previous-link {
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}