/* IO Login Modal Styles */
#io-login-modal-overlay {
    position: fixed;
    top: 0;
    left: 160px; /* Start after WordPress sidebar */
    width: calc(100% - 160px); /* Exclude sidebar width */
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 999999;
    display: block;
    pointer-events: auto;
}

/* Adjust for folded/collapsed WordPress sidebar */
.folded #io-login-modal-overlay {
    left: 36px;
    width: calc(100% - 36px);
}

/* Adjust for mobile/small screens where sidebar is hidden */
@media only screen and (max-width: 960px) {
    #io-login-modal-overlay {
        left: 0;
        width: 100%;
    }
}

#io-login-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 90%;
    z-index: 1000000;
}

#io-login-modal h2 {
    margin: 0 0 15px 0;
    font-size: 22px;
}

#io-login-modal p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

#io-login-modal .io-modal-instruction {
    margin: 10px 0 0 0;
    font-size: 13px;
    color: #646970;
}

#io-login-modal .io-modal-pointer {
    text-align: center;
    padding: 15px;
    border-radius: 3px;
}

.io-modal-pointer.InflatableOffice {
    background: #5d7975;
    border-left: 4px solid #8adc66;
}

.header-brand-InflatableOffice{
    color: #8adc66;
}

.io-modal-pointer.GolfCartOffice {
    background: #171212;
    border-left: 4px solid #750303;
}

.header-brand-GolfCartOffice{
    color: #750303;
}

.io-modal-pointer.PowerWashOffice {
    background: #23254c;
    border-left: 4px solid #2d7bfc;
}

.header-brand-PowerWashOffice{
    color: #2d7bfc;
}

.io-modal-pointer.EventOffice {
    background: #7C7979;
    border-left: 4px solid #f89734;
}
.header-brand-EventOffice{
    color: #f89734;
}

.io-login-modal-header{
    display: flex;
    justify-content: space-between;
}
.io-login-modal-header img{
    height: 45px;
}

/* Block page content when modal is active, but not the sidebar */
#io-login-modal-overlay ~ * {
    opacity: 0.5;
}

/* Keep sidebar interactive */
#adminmenuwrap,
#adminmenuback {
    pointer-events: auto !important;
    opacity: 1 !important;
}

#io-login-form,
#io-page-select-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#io-login-form input,
#io-page-select-form input{
    width: 150px;
}

#io-login-form button,
#io-page-select-form button{
    width: auto;
}

#io-login-form select,
#io-page-select-form select{
    width: 320px;
}

#io_connection_info{
    display: flex;
    flex-direction: column;
}
#io_connection_info p{
    margin-top: 0;
    margin-bottom: 0;
}

/* Loading state for buttons */
.io-loading-ellipsis::after {
    content: '.';
    animation: io-ellipsis 1.2s infinite;
    display: inline-block;
    width: 1.5em;
    text-align: left;
}

@keyframes io-ellipsis {
    0%, 24% {
        content: '.';
    }
    25%, 49% {
        content: '..';
    }
    50%, 74% {
        content: '...';
    }
    75%, 100% {
        content: '.';
    }
}

#io-login-error{
    color: white;
}

