/* =====================================================
   INLA ERP - Virtual Keyboard
===================================================== */

#btnKeyboard{

    position:fixed;

    right:20px;

    bottom:20px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#0B1730;

    color:white;

    font-size:32px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 6px 20px rgba(0,0,0,.35);

    z-index:99999;

    user-select:none;

    transition:bottom .25s ease;

}

#btnKeyboard:hover{

    transform:scale(1.05);

}

#btnKeyboard:active{

    transform:scale(.95);

}



#virtual-keyboard{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    background:#eceff3;

    border-top:1px solid #cfd4dc;

    padding:12px;

    display:none;

    z-index:99998;

    box-shadow:0 -5px 25px rgba(0,0,0,.20);

}



.vk-row{

    display:flex;

    justify-content:stretch;

    gap:8px;

    width:100%;

}



.vk-key{

    flex:1;

    height:60px;

    height:58px;

    border:none;

    border-radius:10px;

    background:white;

    cursor:pointer;

    font-size:22px;

    font-weight:bold;

    color:#222;

    box-shadow:0 2px 5px rgba(0,0,0,.15);

    transition:.10s;

    user-select:none;

}



.vk-key:hover{

    background:#f5f5f5;

}



.vk-key:active{

    transform:scale(.95);

    background:#d9ecff;

}



.vk-key.space{

    flex:6;


}



.vk-key[data-key="BACK"]{

    background:#ffb74d;

}



.vk-key[data-key="SHIFT"]{

    background:#90caf9;

}



.vk-key[data-key="ENTER"]{

    background:#81c784;

}



.vk-key[data-key="CLOSE"]{

    background:#ef5350;

    color:white;

}



.vk-key[data-key="LEFT"],

.vk-key[data-key="RIGHT"]{

    background:#e1f5fe;

}



/* ==========================================
   Téléphones
========================================== */

@media (max-width: 700px) {

    #virtual-keyboard{

        padding:6px;

    }

    .vk-row{

        display:flex;

        gap:4px;

        margin-bottom:4px;

    }

    .vk-key{

        flex:1;
        min-width:0;

        height:52px;

        font-size:20px;

        border-radius:8px;

        padding:0;

    }

    .vk-key.space{

        flex:4;

    }
    .vk-key.active{

    background:#1976d2;

    color:white;

}
    .vk-key[data-key="ENTER"]{

        flex:2;

    }

    .vk-key[data-key="BACK"]{

        flex:2;

    }

    .vk-key[data-key="SHIFT"]{

        flex:1.5;

    }

    .vk-key[data-key="CLOSE"]{

        flex:2;

    }

}


/* Tablettes */

@media(min-width:701px){

    .vk-key{

        min-width:60px;

        height:60px;

    }

}



/* Ecran tactile caisse */

@media(min-width:1200px){

    #virtual-keyboard{

        padding:18px;

    }

    .vk-key{

        min-width:75px;

        height:75px;

        font-size:26px;

    }

    .vk-key.space{

        width:420px;

    }

}