/* ============================ Theme toggle switch ============================ */
/* Shared by all pages (auth.html does not load base.css). */

.theme-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.theme-switch .theme-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch .theme-slider {
    position: absolute;
    inset: 0;
    background-color: #d4d4d8;
    border: 1px solid #d4d4d8;
    border-radius: 24px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.theme-switch .theme-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.theme-switch .theme-toggle-input:checked + .theme-slider {
    background-color: #18181b;
    border-color: #52525b;
}

.theme-switch .theme-toggle-input:checked + .theme-slider::before {
    transform: translateX(20px);
    background-color: #fafafa;
}

.theme-switch .theme-toggle-input:focus-visible + .theme-slider {
    outline: 2px solid #71717a;
    outline-offset: 2px;
}

/* Row inside the side nav: label left, switch right */
.theme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Floating switch on the login page */
.theme-toggle-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    background-color: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ----- Dark mode ----- */
[data-theme="dark"] .theme-switch .theme-toggle-input:checked + .theme-slider {
    background-color: #000000;
    border-color: #3f3f46;
}

[data-theme="dark"] .theme-toggle-floating {
    background-color: #27272a;
    border-color: #3f3f46;
    box-shadow: none;
}

/* ----- Login page moon / sun icon ----- */
/* auth.css only ships a few icon glyphs, so define them here */
.theme-toggle-floating .fa-moon:before {
    content: "\f186";
}

.theme-toggle-floating .fa-moon {
    font-size: 14px;
    color: #52525b;
}

[data-theme="dark"] .theme-toggle-floating .fa-moon {
    color: #ffffff;
}

/* Dark mode on: show a sun instead of the moon */
[data-theme="dark"] .theme-toggle-floating .fa-moon:before {
    content: "\f185";
}

/* ============================ Theme transition curtain ============================ */
/* Two identical layers stacked on top of each other:
   - #transition-base-layer shows the CURRENT theme and never moves;
   - .theme-curtain shows the TARGET theme and widens from 0 to 100%.
   The curtain's content is the same size and position as the base layer and
   does not move, so the logo and text appear to change colour exactly where
   the curtain's edge passes over them. */
#theme-transition-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.3s ease;
}

#theme-transition-overlay.is-active {
    display: block;
}

/* Added at 3000ms, once the new theme is applied underneath: fades the
   overlay out instead of removing it in the same frame (avoids a blink) */
#theme-transition-overlay.fade-out {
    opacity: 0;
}

/* While the theme is applied under the curtain, page transitions are paused so
   every colour changes in one frame. Otherwise elements with "transition: all"
   (login form, inputs, header, tab buttons...) fade from light to dark while the
   overlay fades out, which shows up as a blink. The overlay keeps its own fade. */
html.theme-switching *:not(#theme-transition-overlay),
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* Shared geometry of both layers. --theme-overlay-width is the overlay's real
   width, set by theme.js (100vw would include a desktop scrollbar). */
.theme-transition-layer {
    position: absolute;
    top: 0;
    width: var(--theme-overlay-width, 100vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.theme-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    transition: width 3s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Light -> dark sweeps left to right, dark -> light sweeps right to left.
   Both layers are pinned to the side the curtain grows from, so they line up. */
#theme-transition-overlay.sweep-ltr .theme-curtain,
#theme-transition-overlay.sweep-ltr .theme-transition-layer {
    left: 0;
    right: auto;
}

#theme-transition-overlay.sweep-rtl .theme-curtain,
#theme-transition-overlay.sweep-rtl .theme-transition-layer {
    right: 0;
    left: auto;
}

/* Theme colours, applied to the base layer and the curtain */
.layer-light {
    background-color: #ffffff;
}

.layer-dark {
    background-color: #1e1e1e;
}

.layer-light .theme-curtain-text {
    color: #3f3f46;
}

.layer-dark .theme-curtain-text {
    color: #ffffff;
}

.theme-curtain-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.theme-curtain-text {
    position: absolute;
    bottom: max(40px, env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}