/* Shared dark/light theme toggle (auth + ClientArea + Dashboard) */
:root,
[data-bs-theme="light"] {
    --tt-bg: rgba(248, 250, 255, 0.92);
    --tt-border: rgba(160, 176, 208, 0.4);
    --tt-icon: #A0B0D0;
    --tt-icon-active: #001378;
    --tt-track-bg: #E8EEF7;
    --tt-track-border: rgba(160, 176, 208, 0.4);
    --tt-track-checked: linear-gradient(135deg, #001378, #6b719a);
    --tt-track-checked-border: rgba(0, 19, 120, 0.4);
    --tt-track-checked-shadow: rgba(0, 19, 120, 0.22);
    --tt-icon-glow: rgba(0, 19, 120, 0.22);
    --tt-shadow: 0 4px 16px rgba(10, 20, 40, 0.08);
}

html[data-bs-theme="dark"] {
    --tt-bg: rgba(26, 35, 56, 0.88);
    --tt-border: rgba(192, 208, 240, 0.22);
    --tt-icon: #C0D0F0;
    --tt-icon-active: #00D4FF;
    --tt-track-bg: #1C2A4A;
    --tt-track-border: rgba(192, 208, 240, 0.22);
    --tt-track-checked: linear-gradient(135deg, #00A8FF, #00BFFF);
    --tt-track-checked-border: rgba(0, 212, 255, 0.45);
    --tt-track-checked-shadow: rgba(0, 191, 255, 0.35);
    --tt-icon-glow: rgba(0, 191, 255, 0.35);
    --tt-shadow: 0 4px 16px rgba(10, 20, 40, 0.35);
}

.app-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--tt-bg);
    border: 1px solid var(--tt-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tt-shadow);
}

.top-header .app-theme-toggle {
    padding: 0.35rem 0.65rem;
    gap: 0.45rem;
}

.app-theme-toggle__label {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--tt-icon);
    transition: color 0.25s ease, text-shadow 0.25s ease;
    user-select: none;
}

.top-header .app-theme-toggle__label {
    font-size: 1.05rem;
}

.app-theme-toggle__switch {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.app-theme-toggle__switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.app-theme-toggle__track {
    position: relative;
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--tt-track-bg);
    border: 1px solid var(--tt-track-border);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.app-theme-toggle__switch input:checked + .app-theme-toggle__track {
    background: var(--tt-track-checked);
    border-color: var(--tt-track-checked-border);
    box-shadow: 0 0 14px var(--tt-track-checked-shadow);
}

.app-theme-toggle__thumb {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #F8FAFF;
    box-shadow: 0 2px 6px rgba(10, 20, 40, 0.25);
    transition: transform 0.3s ease;
}

.app-theme-toggle__switch input:checked + .app-theme-toggle__track .app-theme-toggle__thumb {
    transform: translateX(-20px);
}

/* Active icon – ClientArea/Dashboard (data-bs-theme) */
html[data-bs-theme="light"] .app-theme-toggle__label--light,
html[data-bs-theme="dark"] .app-theme-toggle__label--dark {
    color: var(--tt-icon-active);
    text-shadow: 0 0 10px var(--tt-icon-glow);
}

/* Active icon – auth pages (data-auth-theme) */
html[data-auth-theme="light"] .app-theme-toggle__label--light,
html[data-auth-theme="dark"] .app-theme-toggle__label--dark {
    color: var(--tt-icon-active);
    text-shadow: 0 0 10px var(--tt-icon-glow);
}