@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* 
#availability-status{
    color: red;
} */



body{
    font-family: "Roboto", sans-serif;
    line-height: 1.4;
    background-color: #000;
    color: #222;;
    padding: 0;
    margin: 0;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

a{
    color: #efeea1;
}




body.status-available #header{
    background-color: #68ba68;
}
body.status-available.inactive #header{
    background-color: #e3c746;
    color: #1a1d2d;
}
body.status-available #availability-status{
    color: green;
}

.divider{
    height: 1px;
    width: 100%;
    background: #2a2e45;
    margin: 20px 0;
}

#container {
    position: relative;
    background: #1a1d2d;
    color: #eee;
    min-height: calc(100dvh - 120px);
    /* box-sizing: border-box; */
    /* position: relative; */
    display: flex;
    flex-direction: column;

}

#tabs{
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* background: yellow; */
    /* position: relative; */
    flex: 1;

}
#tabs .tab{
    flex: 1;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    max-width: 800px;
    margin: 0 auto;
    width: calc(100% - 40px);
    display: none;
}

    /* main tab */
    #tabs #main.tab{
        height: 100%;
        /* background: lightblue; */
        display: flex;
        flex-direction: column;
        padding-bottom: 150px;
    }

    #tabs #main.tab #availability-toggle{
        /* display: none; */
        /* margin-top: auto; */
        background-color: #c0c0c0;
        position: fixed;
        bottom: 80px;
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 8px;
        border: none;
        font-size: 22px;
        font-weight: 600;
        cursor: pointer;

        max-width: 800px;
        margin: 0 auto;
        z-index: 10;

        -webkit-box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 1);
        -moz-box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 1);
        box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 1);

        /* -webkit-box-shadow: 0px 2px 10px 0px rgba(66, 68, 90, 0.5);
        -moz-box-shadow: 0px 2px 10px 0px rgba(66, 68, 90, 0.5);
        box-shadow: 0px 2px 10px 0px rgba(66, 68, 90, 0.5); */
    }

    #tabs #main.tab #availability-toggle.disabled{
        pointer-events: none;
        opacity: 0;
        display: none;
    }
    
    body.status-unavailable #tabs #main.tab #availability-toggle{
        background-color: #68ba68;
        color: #1b2f1b;
    }
    body.status-available #tabs #main.tab #availability-toggle{
        background-color: #c95b5b;
        color: #eee;
    }

    #tabs #main.tab .bg-gradient{
        position: fixed;
        left: 0;
        right: 0;
        /* top: 0; */
        height: 200px;
        bottom: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(42, 46, 69, 0) 100%);
    }



    #tabs #main.tab .availability-last-updated{
        margin-bottom: 14px;
        /* margin-top: -8px; */
    }

    #tabs #main.tab .availability #availability-loader{
        margin: 0 auto;
        height: calc(80vh - 215px);
        /* background: green; */
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #tabs #main.tab .availability #availability-loader .loading-icon{
        display: none;
        background-image: url(/images/icons/loading-bars.svg);
        background-size: contain;
        background-repeat: no-repeat;
        height: 100px;
        width: 100px;
        transform: rotate(90deg);
        margin: 0 auto;
    }
    #tabs #main.tab .availability #availability-loader .error-msg{
        display: none;
        text-align: center;
    }




    #tabs #main.tab #availability-list,
    #tabs #admin.tab #user-profiles{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #tabs #main.tab #availability-list .user,
    #tabs #admin.tab #user-profiles .user{
        background-color: #fff;
        padding: 8px 12px;
        border-radius: 8px;
    }
    #tabs #admin.tab #user-profiles .user{
        cursor: pointer;
    }

    #availability-list .user.status-available.last-available{
        /* margin-bottom: 40px; */
    }


    #tabs #main.tab #availability-list .user .list-info,
    #tabs #admin.tab #user-profiles .user .list-info{
        display: flex;
        gap: 20px;
        justify-content: space-between;
        align-items: center;
    }

    #tabs #main.tab #availability-list .user .additional-info,
    #tabs #admin.tab #user-profiles .user .additional-info{
            display: none;
            padding-top:20px;
            color: #222;
    }


    /* #tabs #main.tab #availability-list .user:hover{
        transform: scale(1.03);
    } */



    #tabs #main.tab #availability-list .user .user-info,
    #tabs #admin.tab #user-profiles .user .user-info{
        display: flex;
        flex-direction: row-reverse;
        gap: 12px;
        align-items: center;
        font-weight: 500;
        justify-content: flex-end;
        width: 100%;
    }
    #tabs #main.tab #availability-list .user .user-info .name,
    #tabs #admin.tab #user-profiles .user .user-info .name{
        margin: 0;
        font-size: 18px;
        color: #121521;
    }
    #tabs #main.tab #availability-list .user .availability-info .status,
    #tabs #admin.tab #user-profiles .user .account-status{
        background: #ddd;
        display: inline-block;
        padding: 6px 8px;
        border-radius: 4px;
        font-size: 12px;
    }

        #tabs #main.tab #availability-list .user.status-available .availability-info .status{
            background: #68ba68;
            color: #1b2f1b;
        }
        #tabs #main.tab #availability-list .user.status-available.inactive .availability-info .status{
            background: #e3c746;
            color: #1b2f1b;
        }

        #tabs #main.tab #availability-list .user.status-available.inactive,
        #tabs #main.tab #availability-list .user.status-unavailable{
            opacity: 0.35;
        }
        #tabs #main.tab #availability-list .user.status-unavailable .availability-info .status{
            background: #c95b5b;
            color: #fff
        }


        #tabs #admin.tab #user-profiles .user.account-status-active .account-info .account-status{
            background: #68ba68;
            color: #1b2f1b;
        }
        #tabs #admin.tab #user-profiles .user.account-status-pending .account-info .account-status{
            background: #3d84b5;
        }
        #tabs #admin.tab #user-profiles .user.account-status-disabled .account-info .account-status{
            background: #c95b5b;
        }


        


    #tabs #main.tab #availability-list .user .availability-info .updated-at,
    #tabs #admin.tab #user-profiles .user .account-info .updated-at{
        display: none;
    }
    #tabs #main.tab #availability-list .user .actions .phone::before{
        margin-right: 5px;
        background-image: url('/images/icons/phone-call.svg');
        background-size: contain;
        background-repeat: no-repeat;
        content: '';
        display: inline-block;
        width: 26px;
        height: 26px;
        opacity: 0.8;
    }
    #tabs #main.tab #availability-list .user .actions .phone:hover::before{
        opacity: 1;
    }


    #tabs #admin.tab #user-profiles .user .actions .caret-down::before{
        margin-right: 5px;
        background-image: url('/images/icons/caret-down.svg');
        background-size: contain;
        background-repeat: no-repeat;
        content: '';
        display: inline-block;
        width: 26px;
        height: 26px;
        opacity: 0.8;
    }



    #tabs #admin.tab #user-profiles .user.expanded .actions .caret-down::before{
        transform: rotate(180deg);
    }












    /* settings tab */
    #tabs #user-settings.tab{
        /* background: orange; */
    }

    #tabs #user-settings.tab .user-account #logout-button{
        border: 0;
        padding: 10px 14px;
        border-radius: 4px;
        background: #3d84b5;
        color: #fff;
        margin-bottom: 20px;
        font-size: 16px;
    }


    /* forms, general styling */
    #tabs .tab label{
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
    }
    #tabs .tab input{
        border: none;
        padding: 8px;
        border-radius: 4px;
        width: 100%;
        background: #eee;
        box-sizing: border-box;
        font-size: 16px;
        margin-bottom: 20px;
    }

    #tabs .tab button[type="submit"],
    #tabs .tab button.delete-user-btn{
        border: 0;
        padding: 10px 14px;
        border-radius: 4px;
        background: #4b4f66;
        color: #fff;
        margin-bottom: 20px;
        font-size: 16px;
    }
    #tabs .tab button.delete-user-btn{
        background: #c95b5b;
    } 

    #tabs .tab select{
        border: none;
        padding: 8px;
        border-radius: 4px;
        width: 100%;
        background: #eee;
        box-sizing: border-box;
        font-size: 16px;
        margin-bottom: 20px;
    }






    /* admin tab */
    #tabs #admin.tab{
        /* background: pink; */
    }


    /* guide tab */
    #tabs #guide.tab .faq-items{
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-bottom: 100px;
    }

    #tabs #guide.tab .faq-item{
        /* background-color: #2c3147;
        padding: 20px; */
        box-sizing: border-box;
        border-bottom: 1px solid #2a2e45;
        margin-bottom: 15px;
    }

    #tabs #guide.tab .faq-item h3 {
        margin-top: 0;
    }

    #tabs #guide.tab .faq-item .links{
        display: flex;
        gap: 15px;
    }
    #tabs #guide.tab .faq-item .links a{
        text-decoration: none;;
        border: 0;
        padding: 10px 14px;
        border-radius: 4px;
        background: #3d84b5;
        color: #fff;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1;
    }



/* toasts */
#toast-container {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 10px;
    z-index: 1000;
    /* padding: 20px; */
    text-align: center;
    /* pointer-events: none; */

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
#toast-container .toast {
    transition: opacity 0.3s ease;
    margin-bottom: 10px;
    background-color: #efeea1;
    color: #222;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    display: inline-block;
    width: fit-content;

    -webkit-box-shadow: 0px 0px 21px -1px rgba(0,0,0,0.5); 
    box-shadow: 0px 0px 21px -1px rgba(0,0,0,0.5);
}
#toast-container .toast.sample{
    display: none;
}


/* header */
#container {
    padding-top: 60px; /* Space for fixed header */
}
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #2a2e45;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    z-index: 999; /* Ensure header is above other content */
}
/* #header:has(:only-child) {
    justify-content: center;
} */
#header > div{
    /* border: 1px solid blue; */
    text-align: center;
    font-weight: 500;
    display: flex;
    padding: 6px;
}
#header .btn-left,
#header .btn-right{
    font-size: 0;
}
#header .btn-left.guide::before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('/images/icons/questionmark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
    body.status-available.inactive #header .btn-left.guide::before{
        background-image: url('/images/icons/questionmark-dark.svg');
    }

#header .btn-right.refresh::before{
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('/images/icons/refresh.svg');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
    body.status-available.inactive #header .btn-right.refresh::before{
        background-image: url('/images/icons/refresh-dark.svg');
    }
    #header .btn-right.refresh::before {
        opacity: 0;
        pointer-events: none;
    }   
    body[data-current-tab="main"] #header .btn-right.refresh::before {
        opacity: 1;
        pointer-events: auto;

    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(720deg); }
    }
    
    #header .btn-right.refresh.spin {
        animation: spin 0.5s ease-out;
    }


/* main navigation */
#container{
    /* Space for fixed nav */
    padding-bottom: 60px; 
}
#main-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #2a2e45;
    color: #fff;
    display: flex;
    align-items: center;
    /* padding: 0 20px; */
    box-sizing: border-box;
    display: flex;
    z-index: 999; /* Ensure nav is above other content */
}
#main-nav > div{
    /* border: 1px solid red; */
    flex: 1;
    text-align: center;
}

#main-nav .nav-btn{
    font-size: 0;

    height: inherit;
    display: flex;
    align-items: center;
}

/* This targets only devices with hover support AND a fine pointer (like desktop). */
/* Used for avoiding unintended hover-states when going back using swipes rather than the nav-btns */
@media (hover: hover) and (pointer: fine) {
    #main-nav .nav-btn:hover{
        background: #1f2234;
        box-shadow: inset 0 0 10px #1a1d2d;
    }
}


#main-nav .nav-btn.active{
    background: #1f2234;
    box-shadow: inset 0 0 10px #1a1d2d;
}


#main-nav .nav-btn::before{
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('/images/icons/questionmark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0 auto;
}

#main-nav .nav-btn.main::before{
    background-image: url('/images/icons/check-in.svg');
}
#main-nav .nav-btn.user-settings::before{
    background-image: url('/images/icons/settings.svg');
}
#main-nav .nav-btn.admin::before{
    background-image: url('/images/icons/users.svg');
}




/* login & signup pages */

body.login-page #header,
body.signup-page #header{
    justify-content: center;
}

body.login-page #container,
body.signup-page #container{
    text-align: center;
    padding-bottom: 0;
    min-height: calc(100dvh - 60px); /* less reduction due to no nav-bar on login page */
}

body.login-page #tabs #main,
body.signup-page #tabs #main{
    justify-content: center;
    padding-bottom: 20px;
}
body.login-page #tabs #main .logo,
body.signup-page #tabs #main .logo{
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 180px;
    max-height: 180px;
    background-image: url(/favicon-512x512.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 40px auto;
    /* border: 10px solid #2a2e45; */
    border-radius: 100%;
    background-color: #000;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(66, 68, 90, 0.8);
    -moz-box-shadow: 0px 0px 40px 0px rgba(66, 68, 90, 0.8);
    box-shadow: 0px 0px 40px 0px rgba(66, 68, 90, 0.8);
}
body.login-page #tabs #main .login-form,
body.signup-page #tabs #main .signup-form {
    margin-bottom: 5px;
}
body.login-page #tabs #main .login-form form,
body.signup-page #tabs #main .signup-form form{

    max-width: 400px;
    margin: 0 auto;
}
body.login-page #tabs #main .login-form input,
body.signup-page #tabs #main .signup-form input{
        text-align: center;
}

body.login-page #tabs #main button[type="submit"],
body.signup-page #tabs #main button[type="submit"]{
        width: 100%;
        cursor: pointer;
}
body.login-page #tabs #main button[type="submit"]:hover,
body.signup-page #tabs #main button[type="submit"]:hover{
        background-color: #68ba68;
        color: #1b2f1b;
}


body.login-page #tabs #main .additional-info,
body.signup-page #tabs #main .additional-info{
        max-width: 400px;
    margin: 0 auto;
}