/* DARK MODE = DEFAULT → moon visible by default */
.sunmoon{padding:0}
.sunmoon input{display:none}

/* Default = DARK (moon on the right) */
.sunmoon input + label{
    background:#0d0047;
    border:2px solid var(--bs-border-color);
    border-radius:22px;
    box-shadow:0 2px 4px rgba(0,0,0,.15);
    display:block;
    height:44px;
    width:100px;
    position:relative;
    overflow:hidden;
    transition:all .5s ease;
}
.sunmoon input + label:after{
    content:"";
    position:absolute;
    width:36px;height:36px;
    left:calc(100% - 38px);   /* ← knob on moon side */
    top:2px;
    background:hsla(0,0%,100%,.2);
    border-radius:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
    transition:all .5s ease;
    z-index:1;
}
.sunmoon input + label:before{
    content:"";
    position:absolute;
    width:200px;height:100%;
    left:-100px;              /* ← gradient shifted → moon visible */
    background:linear-gradient(90deg,#fcd13f,#fc9b3f 25%,#e30045 50%,#8000ff 70%,#150036);
    border-radius:20px;
    transition:all .5s ease;
    z-index:0;
}
.sunmoon input + label .sun,
.sunmoon input + label .moon{
    position:absolute;
    width:38px;
    text-align:center;
    line-height:40px;
    font-size:34px;
    color:#fff;
    top:0;
    transition:all .5s ease;
    z-index:2;
}
.sunmoon input + label .moon{font-size:24px;left:calc(100% - 40px);opacity:1}
.sunmoon input + label .sun{opacity:0}

/* When clicked → LIGHT MODE */
.sunmoon input:checked + label{background:transparent}
.sunmoon input:checked + label:after{left:2px}
.sunmoon input:checked + label:before{left:0}
.sunmoon input:checked + label .sun{left:0;opacity:1}
.sunmoon input:checked + label .moon{opacity:0}

/* DEFAULT = DARK THEME (exactly like your screenshot) */
body,
html {
    --adminuiux-theme-1: #0049e8;
    --adminuiux-theme-1-hover: #003fc7;
    --adminuiux-theme-1-active: #0037ad;
    --adminuiux-theme-1-rgb: 0,73,232;
    --adminuiux-theme-1-text: #fff;

    --adminuiux-theme-accent-1: #03045e;
    --adminuiux-theme-accent-1-hover: #01024b;
    --adminuiux-theme-accent-1-active: #010235;
    --adminuiux-theme-accent-1-rgb: 3,4,94;
    --adminuiux-theme-accent-1-text: #fff;

    --adminuiux-bg-1: #0a0e1a;
    --adminuiux-bg-2: #121526;
    --bs-body-bg: #0a0e1a;
    --bs-body-color: #e0e0e0;
    color-scheme: dark;
}

/* Only apply light blue when user explicitly switches */
.sunmoon input:checked ~ * {
    --adminuiux-theme-1: #0049e8;
    --adminuiux-theme-1-hover: #003fc7;
    --adminuiux-theme-1-active: #0037ad;
    --adminuiux-theme-1-rgb: 0,73,232;

    --adminuiux-theme-accent-1: #03045e;
    --adminuiux-theme-accent-1-hover: #01024b;
    --adminuiux-theme-accent-1-active: #010235;
    --adminuiux-theme-accent-1-rgb: 3,4,94;

    --adminuiux-bg-1: #e6eef5;
    --adminuiux-bg-2: #badaf0;
    --bs-body-bg: #e6eef5;
    --bs-body-color: #212529;
    --bs-link-color: #657792;
}

#errorMsg { color: #c00; }