.btn-primary {
    color: #2f3a3f;
    background: #ffd300;
    border-color: #ffd300
}

.btn-primary:focus {
    background: #1eb6ff;
    border-color: #13b2ff;
    box-shadow: 0 0 0 .2rem rgba(55,190,255,.5)
}

.btn-primary:hover {
    background: #1eb6ff;
    border-color: #13b2ff
}

.btn-primary.disabled,.btn-primary:disabled {
    background: #37beff;
    border-color: #37beff
}

.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active {
    background: #04adff;
    border-color: #00a8f9
}


html.dark-mode .btn-primary {
    background-color: #ffd300;
    color: #231f20
}

.popover-header img {display:none;}
.popover-header, html.dark-mode #layout-menu .popover-header {
        background:url('./logo-small.svg') center center no-repeat !important;
}

/* Target the primary login button specifically on the login page */
#login-form .btn-primary:hover,
#login-form .btn-primary:focus,
#login-form .btn-primary:active {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffd300 !important;
    
    /* Optional: Adds a smooth fade transition instead of an instant color snap */
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Optional: Darken the outline shadow when clicked/focused (Bootstrap default is a blue glow) */
#login-form .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.5) !important;
}