/* ==========================================================
   LOGIN SCREEN
   ========================================================== */

#login-screen{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:
        linear-gradient(
            135deg,
            #1565C0,
            #42A5F5
        );

}

/* ==========================================================
   LOGIN CARD
   ========================================================== */

.login-card{

    width:100%;

    max-width:380px;

    background:white;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:28px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.app-logo{

    font-size:56px;

    text-align:center;

}

.login-card h1{

    text-align:center;

    font-size:24px;

    font-weight:600;

}

#route-select,
#pin-input{

    width:100%;

    height:48px;

    padding:0 14px;

    border-radius:10px;

}

#login-button{

    height:48px;

    border-radius:10px;

    background:var(--primary);

    color:white;

    font-weight:600;

    transition:var(--transition);

}

#login-button:hover{

    background:var(--primary-dark);

}

#login-message{

    min-height:20px;

    text-align:center;

    color:var(--danger);

    font-size:14px;

}

/* ==========================================================
   APP SCREEN
   ========================================================== */

#app-screen{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:white;

}

/* ==========================================================
   TOP TOOLBAR
   ========================================================== */

#toolbar{

    flex:0 0 var(--toolbar-height);

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 8px;

    background:white;

    box-shadow:0 2px 8px rgba(0,0,0,.12);

    z-index:100;

}


#toolbar-title{

    flex:1;

    min-width:0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



#date-picker{

    flex:0 0 145px;

}


#save-button{

    width:auto;

    padding:0 16px;

}

/* ==========================================================
   MAIN CONTENT
   ========================================================== */

.table-wrapper{

    flex:1;

    overflow:auto;

    -webkit-overflow-scrolling:touch;

    background:white;

}


/* ==========================================================
   MAIN CONTENT
   ========================================================== */

#content{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

    overflow:hidden;

}

/* ==========================================================
   TABLE AREA
   ========================================================== */


/* ==========================================================
   FLOATING BUTTON
   ========================================================== */

#floating-customer-name{

    position:absolute;

    z-index:3000;

    padding:6px 12px;

    border-radius:20px;

    background:var(--primary);

    color:white;

    font-size:13px;

    font-weight:600;

    pointer-events:none;

}