/* ────────────────────────────────────────────── */
/* What's New Modal - Release Notes Styling       */
/* ────────────────────────────────────────────── */

/* Hero Title & Text Styling */
#whatsnew-title {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}

#whatsnew .whats-new-version {
  font-weight: 400;
}

#whatsnew .tracking-wide {
  letter-spacing: 0.08em;
}

#whatsnew .welcome-to {
  color: #fff;
  opacity: 0.6;
}

/* ────────────────────────────────────────────── */
/* Release Notes Content                          */
/* ────────────────────────────────────────────── */
#whatsnew .whatsnew-content {
  padding: 1.5rem 2rem;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.6;
}

/* Section headers (## in markdown) */
#whatsnew .rn-section {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--lm-text-color, #333);
}

#whatsnew .rn-section:first-child {
  margin-top: 0;
}

.dark-mode #whatsnew .rn-section {
  color: var(--dm-text-color, #e8e8e8);
  border-color: rgba(255, 255, 255, 0.1);
}

/* List styling */
#whatsnew .rn-list {
  margin: 0 0 1rem 0;
  padding-left: 2.4rem;
  list-style-type: disc;
}

#whatsnew .rn-list li {
  margin-bottom: 0.5rem;
  color: var(--lm-text-muted-color, #555);
  line-height: 1.25;
}

/* Rotating bullet colors */
#whatsnew .rn-list li::marker {
  font-weight: 700;
}

#whatsnew .rn-list li:nth-child(5n+1)::marker { color: #e53935; } /* red */
#whatsnew .rn-list li:nth-child(5n+2)::marker { color: #43a047; } /* green */
#whatsnew .rn-list li:nth-child(5n+3)::marker { color: #8e24aa; } /* purple */
#whatsnew .rn-list li:nth-child(5n+4)::marker { color: #fbc02d; } /* yellow */
#whatsnew .rn-list li:nth-child(5n+5)::marker { color: #1e88e5; } /* blue */

.dark-mode #whatsnew .rn-list li {
  color: var(--dm-text-muted-color, #adb5bd);
}

#whatsnew .rn-list li strong {
  color: var(--lm-text-color, #333);
  font-weight: 600;
}

.dark-mode #whatsnew .rn-list li strong {
  color: var(--dm-text-color, #e8e8e8);
}

/* Paragraph text */
#whatsnew .rn-text {
  margin: 0.75rem 0;
  color: var(--lm-text-muted-color, #555);
}

.dark-mode #whatsnew .rn-text {
  color: var(--dm-text-muted-color, #adb5bd);
}

/* Inline code */
#whatsnew .whatsnew-content code {
  background: var(--lm-base-bg-color, #f0f0f0);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
}

.dark-mode #whatsnew .whatsnew-content code {
  background: var(--dm-base-bg-color, #2a2d31);
}

/* ────────────────────────────────────────────── */
/* Actions (Buttons)                              */
/* ────────────────────────────────────────────── */
#whatsnew .whatsnew-actions {
  padding: calc(1rem + 4px) 2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  border-top: 1px solid var(--lm-dropdown-menu-border-color, #e9ecef);
}

.dark-mode #whatsnew .whatsnew-actions {
  border-color: var(--dm-dropdown-menu-border-color, #444);
}

/* ────────────────────────────────────────────── */
/* App-specific Hero Gradients                    */
/* ────────────────────────────────────────────── */

/* minimarks (blue hues) */
#whatsnew.minimarks .whatsnew-hero {
  background: linear-gradient(
    135deg,
    #001f4d 0%,
    #002c71 25%,
    #004ebc 50%,
    #0065ca 75%,
    #2d8ae8 100%
  );
  position: relative;
  color: #fff;
}

#whatsnew.minimarks .whatsnew-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px, 30px 30px;
  background-position: 10px 10px, 5px 15px;
  pointer-events: none;
}

/* kanbase (purple hues) */
#whatsnew.kanbase .whatsnew-hero {
  background: linear-gradient(
    135deg,
    #2a003f 0%,
    #4b0082 25%,
    #6a0dad 50%,
    #8a2be2 75%,
    #b266ff 100%
  );
  position: relative;
  color: #fff;
}

#whatsnew.kanbase .whatsnew-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px, 30px 30px;
  background-position: 10px 10px, 5px 15px;
  pointer-events: none;
}

/* tid (dusk gradient - magenta to blue) */
#whatsnew.tid .whatsnew-hero {
  background: linear-gradient(
    135deg,
    #5a1a32 0%,
    #7d2840 20%,
    #6e3452 40%,
    #4a4a7a 60%,
    #1a5a96 80%,
    #0373b4 100%
  );
  position: relative;
  color: #fff;
}

#whatsnew.tid .whatsnew-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px, 30px 30px;
  background-position: 10px 10px, 5px 15px;
  pointer-events: none;
}

/* ────────────────────────────────────────────── */
/* Scrollbar styling for content area             */
/* ────────────────────────────────────────────── */
#whatsnew .whatsnew-content::-webkit-scrollbar {
  width: 6px;
}

#whatsnew .whatsnew-content::-webkit-scrollbar-track {
  background: transparent;
}

#whatsnew .whatsnew-content::-webkit-scrollbar-thumb {
  background: var(--lm-dropdown-menu-border-color, #dee2e6);
  border-radius: 3px;
}

.dark-mode #whatsnew .whatsnew-content::-webkit-scrollbar-thumb {
  background: var(--dm-dropdown-menu-border-color, #555);
}