/* Dark mode overrides - applied when body has the .dark class */

body.dark {
    background-color: #091a23;
    color: #e5e7eb;
}

body.dark html {
    background-color: #091a23;
}

/* Header */
body.dark header {
    background-color: #091a23 !important;
    color: #e5e7eb !important;
    border-bottom-color: #2d4754 !important;
}

body.dark header .border-\[\#091a23\] {
    border-color: #5c707a !important;
}

/* Footer */
body.dark footer {
    background-color: #091a23;
    border-top-color: #2d4754 !important;
    color: #b9c2c6 !important;
}

body.dark footer a:hover {
    color: #e5e7eb !important;
}

/* Mobile nav menu */
body.dark nav[data-menu] {
    background-color: #091a23 !important;
}

body.dark nav[data-menu] ul {
    background-color: #091a23 !important;
}

/* Header dropdown menus (Products, Resources, etc.) */
body.dark header .bg-white {
    background-color: #163341 !important;
    border-color: #2d4754 !important;
}

body.dark header .bg-redis-neutral-200 {
    background-color: #0d2330 !important;
}

body.dark header .border-redis-pencil-300 {
    border-color: #2d4754 !important;
}

body.dark header .border-redis-pencil-250 {
    border-color: #2d4754 !important;
}

body.dark header .text-gray-400 {
    color: #b9c2c6 !important;
}

body.dark header .text-gray-600 {
    color: #b9c2c6 !important;
}

/* Keep the red CTA button readable on dark surfaces */
body.dark header .bg-redis-red-700 {
    color: #ffffff !important;
}

/* Left sidebar (facets) */
body.dark #facets {
    background-color: #091a23;
    color: #e5e7eb;
}

body.dark .faceted {
    background-color: #163341;
    color: #e5e7eb;
}

/* Main scrollable chat area */
body.dark #scrollableDiv {
    background-color: #091a23;
}

/* Right sidebar (search results) */
body.dark .border-l.border-redis-pen-300 {
    border-left-color: #2d4754 !important;
}

/* Left sidebar (facets) — mirror divider of the right sidebar */
body.dark #facets {
    border-right-color: #2d4754;
}

body.dark #search p {
    color: #b9c2c6;
}

body.dark #search p a {
    color: #ff4438 !important;
    border-color: transparent;
}

body.dark .outcome p {
    color: #b9c2c6 !important;
}

/* Chat bubbles */
body.dark .bubble-left,
body.dark .bubble-right {
    color: #e5e7eb;
}

body.dark .bubble-left {
    background-color: #163341;
}

body.dark .bubble-right {
    background-color: #1f4357;
}

body.dark .bubble-initial {
    background-color: #163341;
}

body.dark .bubble-initial hr {
    background-color: #2d4754 !important;
}

/* Upvote/downvote pills inside chat bubbles. Sit on a darker surface than
   the bubble (.bubble-left is #163341) for a subtle recess, with the thumb
   icon recolored to Redis brand red via mask-image on .thumb-icon. */
body.dark .thumb-btn-small {
    background-color: #0d2530 !important;
    border-color: #2d4754 !important;
}

body.dark .thumb-btn-small:hover {
    background-color: #11303d !important;
    border-color: #2d4754 !important;
}

body.dark .thumb-icon {
    background-color: #ff4438;
}

body.dark .text-redis-pencil-600 {
    color: #b9c2c6 !important;
}

/* Prose / markdown content inside chat */
body.dark .prose,
body.dark .prose p,
body.dark .prose li,
body.dark .prose strong,
body.dark .prose h1,
body.dark .prose h2,
body.dark .prose h3,
body.dark .prose h4 {
    color: #e5e7eb !important;
}

body.dark .prose a {
    color: #ff4438 !important;
}

body.dark .prose code {
    color: #dcff1e;
    background-color: #163341;
}

body.dark .prose pre {
    background-color: #091a23 !important;
}

body.dark .prose pre code {
    background-color: transparent;
    color: inherit;
}

/* Chat input form */
body.dark #chatInput form {
    background-color: #163341 !important;
    border-color: #2d4754 !important;
}

body.dark .footer-search-bar {
    background-color: #163341;
    color: #e5e7eb;
}

body.dark .footer-search-bar::placeholder {
    color: #b9c2c6;
}

body.dark #chatInput .text-redis-pen-600,
body.dark #chatInput span {
    color: #b9c2c6 !important;
}

/* Reference link badges below answers. Mirrors the soft pale-yellow pill
   from light mode: a slightly elevated surface against the bubble bg
   (.bubble-left is #163341) with no harsh outline. */
body.dark .bubble-left a.bg-redis-yellow-100 {
    background-color: #1f4357 !important;
    color: #e5e7eb !important;
    border-color: #2d4754 !important;
}

body.dark .bubble-left a.bg-redis-yellow-100:hover {
    background-color: #2d4754 !important;
    border-color: #2d4754 !important;
}

/* Facet checkbox borders */
body.dark input[type="checkbox"] + label::before {
    border-color: #b9c2c6;
    background-color: #163341;
}

/* Feedback widget */
body.dark .feedback-wrapper {
    border-top-color: #2d4754 !important;
}

body.dark .feedback-widget {
    background-color: #091a23;
    border-color: #2d4754;
}

body.dark .feedback-widget textarea {
    background-color: #163341;
    color: #e5e7eb;
    border-color: #2d4754 !important;
}

body.dark .thumb-btn-small {
    background-color: #163341;
    border-color: #2d4754;
}

body.dark .thumb-btn-small:hover {
    background-color: #1f4357;
}

body.dark .feedback-widget .cancel-btn {
    background-color: #163341 !important;
    color: #e5e7eb !important;
    border-color: #2d4754 !important;
}

/* Smooth full-page theme transition.
   Added to <body> for ~250ms around each click in bot.html so the colour swap
   eases instead of snapping; scoped this way so we don't permanently override
   per-element hover/focus transitions. */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color 300ms ease,
                color 300ms ease,
                border-color 300ms ease,
                fill 300ms ease,
                stroke 300ms ease !important;
}

/* Theme toggle (pill-style switch, matches cloud.redis.io's
   `ThemeModeSwitch` / `Knob` styled-components). Track is the button,
   knob is the sliding circle hosting the sun/moon icon. State driven
   by `data-theme-mode` ("light" | "dark") on both the button and the
   knob. Track dimensions / radius / transparent-border / gray fill are
   sourced from the cloud.redis.io computed styles. */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    padding: 3px;
    background-color: rgb(233, 233, 233);
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    line-height: 0;
    box-sizing: border-box;
}

.theme-toggle-knob {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    background-color: #ffffff;
    color: #091a23;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle-knob[data-theme-mode="dark"] {
    transform: translateX(24px);
}

.theme-toggle:hover {
    border-color: #ff4438;
}

.theme-toggle:hover .theme-toggle-knob {
    color: #ff4438;
}

body.dark .theme-toggle {
    background-color: #163341;
    border-color: rgba(233, 233, 233, 0.25);
}

body.dark .theme-toggle-knob {
    background-color: #091a23;
    color: rgb(233, 233, 233);
}

body.dark .theme-toggle:hover {
    border-color: #ff4438;
}

body.dark .theme-toggle:hover .theme-toggle-knob {
    color: #ff4438;
}

.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }

body.dark .theme-toggle .icon-sun { display: none; }
body.dark .theme-toggle .icon-moon { display: block; }

/* Site-search modal (Cmd/Ctrl+K). The Tailwind template hard-codes bg-white
   and white inputs, so dark mode needs explicit overrides on every surface. */
body.dark #search-container > div {
    background-color: #163341 !important;
}

body.dark #search-input {
    background-color: #091a23 !important;
    color: #e5e7eb !important;
    border-color: #2d4754 !important;
}

body.dark #search-input::placeholder {
    color: #b9c2c6;
}

body.dark .search-magnifier-label {
    color: #b9c2c6;
}

body.dark #search-select {
    background-color: #091a23 !important;
    color: #e5e7eb !important;
    border-color: #2d4754 !important;
    /* The chevron in searchmodal.html uses stroke="currentColor", but data-URI
       background images don't resolve currentColor against CSS, so we re-emit
       the same SVG with an explicit light-gray stroke. */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23e5e7eb"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>') !important;
}

body.dark .search-item {
    background-color: #091a23 !important;
    border-color: #2d4754 !important;
    color: #e5e7eb !important;
}

body.dark .search-item:hover,
body.dark .search-item:not([aria-selected]):focus-within {
    background-color: #1f4357 !important;
    color: #ffffff !important;
}

body.dark .search-item[aria-selected] {
    background-color: #1f4357 !important;
}

body.dark .search-item-path {
    color: #b9c2c6;
}

body.dark .search-term-match {
    color: #ff4438;
    text-decoration-color: #ff4438;
}

/* Search-results pagination arrows. The base .page-link uses a white pill
   which clashes with the dark page bg, so drop the fill to transparent. */
body.dark .page-link {
    background-color: transparent;
}

body.dark .page-item.disabled .page-link {
    background-color: transparent;
    color: #8a99a0;
}