.navbar {
    background-color: #a5000a; 
    padding: 0;
    height: 14vmin;
    margin-bottom: 8vmin;
}

.navbar_container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar_container img {
    margin-top: 1%;
    max-width: 20vmin;
    height: auto; 
}
.navbar_container h1 {
    margin-top: 5vmin;
    color: black;
    text-align: center;
    font-size: 4vmin;
}

/* login */
.login_body {
    background-color: #f8f6f6;
    margin: 0;
}
.login_container {
    width: fit-content;
    min-width: 50vmin;
    margin: 5vmin auto;
    text-align: center;
    background-color: white;
    padding: 2vmin;
    border-radius: 5vmin;
    box-shadow: 0 8vmin 8vmin rgba(0, 0, 0, 0.1);
}
.login_container h1 {
    margin: 2vmin auto;
    font-size: 8vmin;
}
.login_container p {
    margin: 5vmin auto;
    font-size: 7vmin;
}
.form_group input {
    box-sizing: border-box;
    width: 70%;
    margin-top: 1vmin;
    margin-bottom: 1vmin;
    font-size: 6vmin;
    padding: 1vmin;
    border: 0.5mm solid #ccc;
    border-radius: 1vmin;
}
.form_group select {
    box-sizing: border-box;
    width: 70%;
    margin-top: 1vmin;
    margin-bottom: 1vmin;
    font-size: 6vmin;
    padding: 1vmin;
    border: 0.5mm solid #ccc;
    border-radius: 1vmin;
}
.form_group input[type="submit"] {
    width: 15vmin;
    display: inline-block;
    padding: 2vmin;
    margin-top: 2vmin;
    color: #fff;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 2vmin;
    background-color: #007bff;
    font-size: 5vmin;
}
.form_group button {
    width: 15vmin;
    display: inline-block;
    padding: 2vmin;
    margin-top: 2vmin;
    color: #fff;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 2vmin;
    background-color: #007bff;
    font-size: 3vmin;
}

/* 遮罩层样式 */
.loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
}
.loadingText {
    color: white;
    font-size: 6vmin;
}

.hidden {
    display: none;
}

.camera-container {
    margin: 0 auto;
    width: 65vmin;
    height: 65vmin;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid transparent;
    transition: border-color 0.5s;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotateY(180deg);
}

/* 按钮容器：支持换行 */
.button-container {
    margin: 0 auto;
    height: fit-content;
    width: fit-content;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6vmin;
}
.button-container button {
    display: block;
    font-size: 4vmin;
    padding: 2vmin;
    margin: 2vmin 0;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 2vmin;
}
.button-container button:disabled {
    display: block;
    font-size: 4vmin;
    padding: 2vmin;
    margin: 2vmin 0;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 2vmin;
    background-color: #bbb;
}
.button-container .material-icons {
    font-size: 6vmin;
}

/* 工號打卡彈窗樣式 */
#codeModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 0 10px #00000060;
    max-width: 80%;
    width: 320px;
}
#codeModal h3 {
    text-align: center;
    font-size: 4vmin;
    margin: 0 0 2vmin 0;
}
#codeModal input {
    font-size: 4vmin;
    padding: 2vmin;
    width: 100%;
    margin: 2vmin 0;
    border-radius: 2vmin;
    border: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
}
/* 上班下班吃饭开始结束按钮组 */
.tcTypeGroup {
    display: flex;
    gap: 3vmin;
    justify-content: center;
    margin: 3vmin 0;
    flex-wrap: wrap;
}
.tcTypeGroup button {
    font-size: 3.5vmin;
    padding: 1.5vmin 3vmin;
    border-radius: 2vmin;
    border: none;
    color: white;
    cursor: pointer;
    flex: 1 0 auto;
    min-width: 70px;
}
.btnCheckIn {
    background: #28a745;
}
.btnCheckOut {
    background: #dc3545;
}
.btnMealStart {
    background: #ffc107;
    color: #333;
}
.btnMealEnd {
    background: #fd7e14;
    color: white;
}
/* 彈窗取消按鈕 */
.codeModalButtons {
    text-align: center;
    margin-top: 2vmin;
}
#btnCloseCode {
    font-size: 4vmin;
    padding: 2vmin 4vmin;
    border-radius: 2vmin;
    border: none;
    background: #666;
    color: white;
    cursor: pointer;
}