/* ============================================
   SMART DARK MODE — Toggle Button (circular)
============================================ */

@keyframes sdm-slide-down {
    0%   { opacity: 1; transform: translateY(0);    }
    100% { opacity: 0; transform: translateY(120px); }
}

#sdm-toggle-wrap {
    position: fixed;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#sdm-toggle-wrap.sdm-visible {
    opacity: 1;
    pointer-events: auto;
}
#sdm-toggle-wrap.sdm-sliding-down {
    animation: sdm-slide-down 0.8s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

/* Circular button matching the go-to-top/bottom style */
#sdm-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent !important;
    border: 2px solid #008080 !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}

.sdm-icon {
    width: 100%;
    height: 100%;
    font-size: 20px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
}

/* Mobile: button and icon scale to exactly 85% of desktop size */
@media (max-width: 768px) {
    #sdm-toggle {
        width: 37px;   /* 44px × 0.85 */
        height: 37px;
    }
    #sdm-toggle .sdm-icon {
        width: 100%;
        height: 100%;
        font-size: 17px;  /* 20px × 0.85 */
    }
}

/* Light mode: show sun */
.sdm-sun { display: inline-flex; }
.sdm-moon { display: none; }

/* Dark mode: show moon */
[data-sdm="dark"] .sdm-sun { display: none; }
[data-sdm="dark"] .sdm-moon { display: inline-flex; }

/* ============================================
   DARK MODE STYLES
   Philosophy: the JS computed-style scanner
   handles ALL background and text colour changes
   surgically. CSS here only handles things JS
   cannot reach: pseudo-elements, form inputs,
   scrollbars, and the html/body base.
============================================ */

/* Base: html and body only — NOT divs, NOT footer, NOT any structural tag */
[data-sdm="dark"] html,
[data-sdm="dark"] body {
    background-color: var(--sdm-bg, #0a0a0a) !important;
    color: var(--sdm-text, #e8e6e3) !important;
}

/* Lighten dark blue links (#0730ff) in dark mode — too dark to read on dark bg.
   Shift to a bright readable blue without changing any other link colours. */
[data-sdm="dark"] a[style*="color:#0730ff"],
[data-sdm="dark"] a[style*="color: #0730ff"],
[data-sdm="dark"] a[style*="color:rgb(7,48,255)"],
[data-sdm="dark"] a[style*="color: rgb(7, 48, 255)"] {
    color: #6b93ff !important;
}
[data-sdm="dark"] a {
    --sdm-link-check: 1;
}

/* color-scheme tells browser chrome (scrollbars, inputs) to go dark */
[data-sdm="dark"] {
    color-scheme: dark;
}

/* Forms — JS cannot easily reach input internals */
[data-sdm="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-sdm="dark"] textarea,
[data-sdm="dark"] select {
    background-color: #1e1e1e !important;
    color: var(--sdm-text, #e8e6e3) !important;
    border-color: #333 !important;
}

/* Code blocks */
[data-sdm="dark"] pre,
[data-sdm="dark"] code,
[data-sdm="dark"] kbd {
    background-color: #1e1e1e !important;
    color: #d4d0c8 !important;
    border-color: #333 !important;
}

/* Images: subtle dim */
[data-sdm="dark"] img {
    filter: brightness(0.88) contrast(1.02) !important;
    transition: filter 0.3s !important;
}
[data-sdm="dark"] img:hover {
    filter: brightness(1) contrast(1) !important;
}

/* Scrollbar — fixed width always so switching modes never shifts the layout.
   Same 15px width in both light and dark mode. */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 8px; border: 3px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
[data-sdm="dark"] ::-webkit-scrollbar-track { background: #1a1a1a; }
[data-sdm="dark"] ::-webkit-scrollbar-thumb { background: #555; border-color: #1a1a1a; }
[data-sdm="dark"] ::-webkit-scrollbar-thumb:hover { background: #777; }

/* No transitions on body — switching is handled atomically in JS
   to prevent layout shift and jitter during mode change. */

/* Prevent layout shift when scrollbar appears/disappears during mode switch.
   scrollbar-gutter reserves the scrollbar space permanently so page width
   never changes. overflow-y: scroll is the fallback for older browsers. */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

/* ============================================
   PROTECT toggle widget from dark overrides
============================================ */
#sdm-toggle-wrap,
#sdm-toggle-wrap * {
    filter: none !important;
    color: unset !important;
}
/* Keep the circular border visible in both modes */
#sdm-toggle {
    border: 2px solid #008080 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    flex-shrink: 0;
}

/* ============================================
   INLINE FOOTER MODE
============================================ */
#sdm-footer-inline {
    display: block;
    margin-top: 12px;
}
#sdm-footer-inline #sdm-toggle-wrap {
    position: static !important;
    display: inline-flex !important;
}