html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 170px;
}


body {
    padding-right: 0px !important;
    font-size: 17px;
    font-family: 'Inter', '微軟正黑體', sans-serif;
}

/* ----basic setting ----- */

:root {
    --website-color: #1b78da;
    --main-color: #1b78da;
    --vice-color: #696C72;
    --dark-color: #383D44;
    --darkgray-color: #54575B;
    --gray-color: #CCCCCC;
    --lightgray-color: #E4E4E4;
    --green-color: #168939;
    --orange-color: #F08548;
    --red-color: #dc6e6e;
    --yellow-color: #F5B50F;
    --robinblue-color: #6cbdc2;
    --lightgreen-color: #A2CE5A;
    /* light series */
    --main-color-l: rgba(27, 119, 218, 0.1);
    --green-color-l: rgba(131, 175, 120, 0.1);
    --red-color-l: rgba(224, 72, 72, 0.08);
    --yellow-color-l: rgba(245, 180, 15, 0.08);
}

a {
    color: var(--main-color);
    cursor: pointer;
    text-decoration: none;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

a:focus,
a:hover {
    text-decoration: none;
    outline: 0;
    color: var(--main-color);
    cursor: pointer;
}

img {
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
label {
    margin: 0;
    padding: 0;
    list-style: none;
}

.divide-dashed {
    border-top: 1px dashed #ccc;
    margin: 5px 0;
}


.fw-500 {
    font-weight: 500;
}

/* ----basic setting end ----- */


/* ---- sidenav & main-ct ----- */
.os-flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
    min-height: calc(100vh - 60px);
}


.side-nav {
    transition: .3s ease;
    width: 240px;
    max-height: calc(100vh - 60px);
    position: fixed;
    background-color: rgba(24, 130, 243, 0.15);
    z-index: 1;
}

.side-sticky {
    height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
}


.main-ct {
    transition: .3s ease;
    position: sticky;
    margin-left: 240px;
    top: 60px;
    min-height: calc(100vh - 60px);
    width: calc(100% - 240px);
    padding: 20px 20px 50px;
    background-color: #f0f7fe;
}

.content.off {
    display: none;
    opacity: 0;
    /* transition: opacity .7s ease; */
}

.content.on {
    animation: showOff .5s cubic-bezier(.69, .14, .83, .67) 0s 1 both;
}

@keyframes showOff {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 1440px) {
    .main-ct {
        padding: 30px 50px;
    }
}

@media (max-width: 992px) {
    .main-ct {
        margin-left: 0;
        width: 100%;
        padding: 30px 15px;
    }
}

@media (max-width: 576px) {
    .main-ct {
        padding: 30px 15px 80px;
    }
}

.content {
    padding: 30px 20px;
    background-color: #fff;
    transition: .3s ease;
    border-radius: 5px;
    margin-bottom: 15px;
    border-top: 3px solid rgba(27, 119, 218, 0.2);
}

@media (max-width: 768px) {
    .content {
        padding: 20px 15px;
    }
}

/* ---- sidenav & main-ct end ----- */

/* ----- header ----- */

header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #0065d0;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

header .logo {
    width: 240px;
    max-height: calc(100vh - 60px);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s ease;
}

header .logo a {
    width: 100%;
}

header .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .3s ease;
}

@media (max-width: 576px) {
    header .logo {
        width: 290px;
    }
}

header .logout {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    font-size: 20px;
}

header .logout .admin {
    color: var(--lightgray-color);
    width: 100%;
    text-align: center;
}

header .logout a span {
    display: inline-block;
}

header .logout a {
    text-align: center;
    display: block;
    width: 110px;
    min-width: 110px;
    font-weight: 800;
}

header .logout a i {
    font-size: 20px;
}

header .logout .dropdown .dropdown-toggle {
    width: auto;
    min-width: auto;
    white-space: nowrap;
    cursor: pointer;
}

header .logout .dropdown .dropdown-toggle::after {
    margin-left: 6px;
}

header .logout .dropdown-menu {
    font-size: 16px;
    min-width: 160px;
}

header .logout .dropdown-item:hover,
header .logout .dropdown-item:focus {
    background-color: transparent;
    color: #276eb9
}

header .logout .dropdown-item i {
    width: 20px;
    text-align: center;
}


.nav-menu {
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    height: 100%;
}


.nav-menu::-webkit-scrollbar {
    width: 7px;
}

.nav-menu::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
}

.nav-menu::-webkit-scrollbar-track-piece {
    background: transparent;
}

.nav-menu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(102, 102, 102, 0.2);
}

.nav-menu::-webkit-scrollbar-track {
    box-shadow: transparent;
}

.nav-menu ul {
    padding: 0;
    margin: 0;
}

.nav-menu>ul>li {
    position: relative;
    list-style: none;
}


.nav-menu>ul>li>a {
    display: flex;
    position: relative;
    height: 50px;
    padding: 10px 20px;
    transition: 0.3s;
    font-size: 18px;
    text-align: left;
    letter-spacing: 3px;
    color: #276eb9;
    border-bottom: 1px solid rgba(27, 119, 218, 0.1)
}

.nav-menu>ul>li>a>i {
    display: inline-block;
    margin-right: 3px;
    text-align: center;
    width: 30px;
}

.nav-menu>ul>.active>a,
.nav-menu .drop-down.on>a,
.nav-menu>ul>li:hover>a {
    color: rgba(255, 255, 255, .8);
    background-color: #258af4;
}

.nav-menu>ul>.active>a {
    font-weight: 900;
    color: #fff;
}

.nav-menu .drop-down>a {
    display: flex;
    align-items: center;
    position: relative;
}


.nav-menu .drop-down>a::after {
    display: block;
    content: '\f078';
    font-size: 16px;
    font-family: 'Font Awesome 6 Pro';
    transition: .3s ease;
    color: var(--website-color);
    position: absolute;
    right: 15px;
}

.nav-menu .drop-down .drop-down>a::after {
    color: #aaa;
}

.nav-menu .drop-down:hover>a::after {
    color: rgba(255, 255, 255, 0.5);
}

.nav-menu,
.drop-down .drop-down:hover>a::after {
    color: var(--main-color);
}

.nav-menu .drop-down.active>a::after,
.nav-menu .drop-down.on>a::after {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.5);
}

.nav-menu .drop-down .drop-down.active>a::after,
.nav-menu .drop-down .drop-down.on>a::after {
    color: var(--main-color);
}

.nav-menu .drop-down>ul {
    background-color: rgba(255, 255, 255, 0.5);
}



.nav-menu .drop-down>ul li {
    list-style: none;
    display: block;
}

.nav-menu .drop-down>ul>li a {
    display: flex;
    position: relative;
    padding: 8px 20px 8px 25px;
    word-break: break-all;
    transition: 0.3s ease;
    font-size: 17px;
    text-align: left;
    letter-spacing: 2px;
    color: #888;
}

.nav-menu .drop-down>ul>li>a::before {
    content: '-';
    display: block;
    margin-right: 5px;
}

.nav-menu .drop-down>ul>li.on>a,
.nav-menu .drop-down>ul>li:hover>a {
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.45);
}

.nav-menu .drop-down>ul>li.active>a {
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.45);
    font-weight: 900;
}

.nav-menu .drop-down .drop-down>a {
    transition: .3s ease;
}


.nav-menu .drop-down .drop-down ul a {
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #aaa;
    margin-left: 10px
}

.nav-menu .drop-down .drop-down ul a::before {
    content: '';
    display: block;
    margin-right: 10px;
    width: 5px;
    height: 5px;
    background-color: #a3a3a3;
}

.nav-menu .drop-down .drop-down.active ul .active a {
    font-weight: 500;
}

.nav-menu .drop-down .drop-down.active ul .active a::before {
    background-color: rgba(27, 119, 218, 1);
}

/* ----- header end----- */



/* ----- mobile nav ----- */
.mobile-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    left: -260px;
    width: 260px;
    background: #fafafa;
    transition: 0.4s;
}

.mobile-nav * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav a {
    display: block;
    position: relative;
    color: var(--darkgray-color);
    padding: 10px 20px;
    transition: 0.3s;
    border-bottom: 1px solid #eee;
}

.mobile-nav a i {
    margin-right: 10px;
}


.mobile-nav>ul>.active>a,
.mobile-nav>ul>li:hover>a {
    color: var(--website-color);
    text-decoration: none;
    background-color: var(--main-color-l);
}



.mobile-nav .drop-down>a:after {
    content: "\ea99";
    font-family: IcoFont;
    padding-left: 10px;
    position: absolute;
    right: 15px;
}

.mobile-nav .drop-down.active>a:after,
.mobile-nav .drop-down.on>a:after {
    content: "\eaa0";
}



/* 子選單預設收合：以 .on 作為唯一展開狀態，setup 時把 .active 同步加 .on */
.nav-menu .drop-down:not(.on) > ul,
.mobile-nav .drop-down:not(.on) > ul {
    display: none;
}

.mobile-nav .drop-down ul {
    overflow: hidden;
    background-color: #fff;
}

.mobile-nav .drop-down li {
    padding-left: 20px;
}

.mobile-nav .drop-down li a {
    font-size: 15px;
    transition: .3s ease;
}

/* 父選單 active */
.mobile-nav > li.drop-down.active > a {
    color: var(--main-color);
    font-weight: 900;
}

/* 子選單 active */
.mobile-nav .drop-down ul li.active > a {
    color: var(--main-color);
    background-color: rgba(255,255,255,0.45);
    font-weight: 900;
}

/* hover */
.mobile-nav .drop-down ul li:hover > a {
    color: var(--main-color);
    background-color: rgba(255,255,255,0.45);
}

.mobile-nav-toggle {
    position: fixed;
    left: 15px;
    top: 17px;
    z-index: 1020;
    border: 0;
    background: none;
    font-size: 25px;
    transition: all 0.3s;
    outline: none !important;
    line-height: 1;
    padding: 0;
}

.mobile-nav-toggle i {
    color: var(--lightgray-color);
}

.mobile-nav-toggle:hover {
    cursor: pointer;
}

.nav-toggle {
    width: 20px;
    height: 80px;
    color: #686666;
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 80px;
    text-align: center;
    border-radius: 0 5px 5px 0;
    box-shadow: 3px 0 5px rgb(23 23 54 / 20%);
}

.mobile-nav-overly {
    width: 100%;
    height: 100%;
    z-index: 1010;
    top: 0;
    left: 0;
    position: fixed;
    background: var(--website-color);
    opacity: .8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    display: none;
}

.mobile-nav-active {
    overflow: hidden;
}

.mobile-nav-active .mobile-nav {
    left: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
    color: var(--lightgray-color);
}

.mb-admin {
    font-weight: 800;
    color: var(--website-color);
    text-align: center;
    font-size: 20px;
}

.mb-admin i {
    margin-right: 5px !important;
}

.mobile-nav .mb-admin {
    font-weight: 800;
    color: var(--website-color);
    padding: 10px 20px;
}

/* ----- mobile-nav end ----- */


/* ----- component ----- */

h1 {
    font-weight: bold;
    color: var(--dark-color);
    font-size: 30px;
    letter-spacing: 1px;
    transition: .3s ease;
}

h2 {
    font-weight: bold;
    color: var(--darkgray-color);
    font-size: 25px;
    letter-spacing: 1px;
    transition: .3s ease;
}

h3 {
    font-weight: bold;
    color: var(--main-color);
    font-size: 20px;
    letter-spacing: 1px;
    transition: .3s ease;
}

h3.dark {
    color: var(--darkgray-color);
}

@media (max-width: 768px) {
    h1 {
        font-size: 25px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }
}

a.main-link {
    font-size: 15px;
}

.status {
    background-color: #fff;
    padding: 7px 30px;
    font-size: 15px;
    color: var(--main-color);
    margin-bottom: 15px;
    border-radius: 5px;
}

.status span {
    color: var(--red-color);
}

.nav-tabs {
    border-bottom: none;
    overflow-x: auto;
}

.nav-tabs .nav-link {
    white-space: nowrap;
    /* 不換行 */
    min-width: auto;
    /* 或指定如 100px */
    width: auto;
    /* 撐開寬度 */
    text-align: center;
    /* 讓文字置中 */
}


.nav-tabs .nav-link {
    padding: 6px 20px 5px;
    border: none;
    border-radius: 0;
    color: var(--darkgray-color);
    background-color: #e7ecf0
}

@media (max-width: 576px) {
    .nav-tabs .nav-link {
        padding: 6px 12px;
        font-size: 15px;
    }
}

.nav-tabs .nav-link:not(:last-of-type) {
    border-right: 1px solid #ddd;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-right: none;
    background-color: var(--main-color);
    color: #fff;
}

.section-page {
    padding: 30px 0;
}

@media (max-width: 992px) {
    .section-page {
        padding: 20px 0;
    }
}


.breadcrumb {
    background-color: transparent;
    padding: 0;
    justify-content: end;
    margin: 5px 0 10px;
    font-size: 14px;
    letter-spacing: 1px;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "|";
    color: var(--gray-color);
}

.breadcrumb-item {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: fit-content;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 200px;
}

.breadcrumb-item.active {
    max-width: unset;
}

.breadcrumb-item a {
    color: #aaaaaa;
}

.breadcrumb-item.active a {
    color: var(--main-color);
}

.modal-open {
    padding-right: 0px !important;
}

.modal-open .modal {
    padding-right: 0 !important;
}

.modal {
    padding-right: 0px !important;
    backdrop-filter: blur(4px);
}


@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px !important;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        max-width: 600px !important;
        margin: 0 auto;
    }
}

.modal-content {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}

.modal-content .modal-header {
    background-color: var(--dark-color);
    color: #fff;
}

.modal-content .modal-header .close {
    position: absolute;
    color: #fff;
    top: 17px;
    right: 17px;
}

.modal-backdrop {
    background-color: var(--main-color);
}



.modal label,
.modal input,
.modal select,
.modal textarea {
    width: 100%;
}



textarea {
    outline: none;
}

input {
    outline: none;
}

select {
    outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: .7;
    background-color: #ebebeb;
    color: var(--darkgray-color);
}

input[type='checkbox'] {
    position: relative;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
}

input[type='checkbox']::before {
    display: block;
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    border: 1px solid #8f8f8f;
    background-color: #fff;
    border-radius: 3px;
    z-index: 1;
}

input[type='checkbox']::after {
    display: flex;
    justify-content: center;
    align-items: center;
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    color: var(--red-color);
    transition: .3s ease;
    transform: scale(0);
    z-index: 2;
    font-size: 14px;
}

input[type='checkbox']:checked::after {
    transform: scale(1);
}

.togglebox {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    min-height: 35px;
}

.editbox .togglebox {
    justify-content: flex-start;
}

input[type='checkbox'].toggleBtn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0 !important;
    border-radius: 50px;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    flex: 0 0 50px;
    width: 50px !important;
    height: 20px !important;
    margin: 0;
    padding: 0 !important;
    vertical-align: middle;
}

input[type='checkbox'].toggleBtn::before {
    width: 50px;
    border-radius: 50px;
    background-color: #e6e6e6;
    transition: .3s ease;
    top: 0px;
    left: 0px;
}

input[type='checkbox'].toggleBtn::after {
    transform: none;
    content: '';
    border: 1px solid #e6e6e6;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    top: 0px;
    left: 0px;
}

input[type='checkbox'].toggleBtn:checked::before {
    background-color: var(--main-color);
}

input[type='checkbox'].toggleBtn:checked::after {
    border: 1px solid var(--main-color);
    left: 30px;
}


input[type='radio'] {
    position: relative;
    width: unset !important;
    height: unset !important;
}

input[type='radio']::after {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    content: '';
    top: -3px;
    left: 0px;
    border: 1px solid #8f8f8f;
    background-color: #fff;
    border-radius: 3px;
    z-index: 1;
}

input[type='radio']::before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro';
    top: -3px;
    left: 0px;
    z-index: 2;
    transform: scale(0);
    transition: .3s ease;
    color: var(--red-color);

}

input[type='radio']:checked::before {
    transform: scale(1);
}

.check-box {
    width: fit-content;
    margin-right: 25px;
    align-items: center;
    display: inline-flex;
    margin: 4px 25px 4px 0;
}

.radio-box {
    width: fit-content;
    margin-right: 25px;
    align-items: center;
    display: inline-flex;
    margin: 4px 25px 4px 0;
}

.radio-box label,
.check-box label {
    width: fit-content !important;
    min-width: unset !important;
}

.radio-box input,
.check-box input {
    margin-right: 15px;
}

.radio-box input:checked~label,
.check-box input:checked~label {
    color: var(--red-color);
}

input[type=file] {
    height: 40px !important;
    font-size: 15px;
    color: var(--main-color);
    letter-spacing: 1px;
}

input[type=file]::file-selector-button {
    margin-right: 10px;
    border: none;
    background: var(--main-color);
    padding: 2px 20px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: opacity .2s ease;
}

input[type=file]::file-selector-button:hover {
    opacity: .85;
}

.address-box {
    width: 100%;
    display: flex;
}

.address-box>div {
    width: 100% !important;
}

@media (max-width: 576px) {
    .address-box {
        flex-wrap: wrap;
    }
}

.address-box>div .select2-container {
    width: 100% !important;
}

.fm-group .select2-container,
.editbox .select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px 10px;
    height: 35px;
    width: 100%;
}


.fm-group {
    width: 100%;
}

.fm-group label {
    display: block;
    color: #333;
}

.fm-group input,
.fm-group textarea {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px 10px;
    height: 35px;
    width: 100%;
}

.fm-group2 textarea {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px 10px;
    height: 35px;
    width: 100%;
    display: flex;
}

.fm-group textarea {
    height: auto;
}

.fm-group select {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px 10px;
    height: 35px;
    width: 100%;
}

.fm-button {
    height: 100%;
    display: flex;
    align-items: end;
}

.num-counter {
    display: flex;
    width: 100%;
    align-items: center;
}

.num-counter input {
    width: 80px;
    text-align: center;
    border: 1px solid rgba(27, 119, 218, 0.3);
}

.num-counter input[type=number]::-webkit-outer-spin-button,
.num-counter input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-counter input[type=number] {
    -moz-appearance: textfield;
}

.num-counter i {
    display: block;
    width: 35px;
    line-height: 35px;
    text-align: center;
    height: 35px;
    color: var(--dark-color);
    background-color: rgba(27, 119, 218, 0.1);
    border-radius: 3px;
    margin: 0 3px;
}

.num-counter i:hover {
    cursor: pointer;
}

.btn-list {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
    justify-content: end;
}

/* .btn-list .dropdown, */
.btn-list button {
    margin: 2px 0px 2px 5px;
}

button {
    /* height: 35px; */
    color: #fff;
    padding: 4.8px 15px;
    border-radius: 5px;
    outline: none;
    border: none;
    letter-spacing: 1.5px;
    transition: .3s ease;
}

@media (max-width: 576px) {
    button {
        font-size: 15px;
    }

    button.small {
        margin-right: 5px;
    }
}

@media (max-width: 768px) {
    button.small {
        margin-right: 5px;
    }
}

@media (max-width: 1024px) {
    button.small {
        margin-right: 5px;
    }
}

button:hover {
    opacity: .85;
}

button:focus {
    outline: none;
}

button.small {
    /* height: 28px; */
    padding: 3px 5px;
    margin: 1spx 2px;
    line-height: 15px;
}

button.main {
    background-color: var(--main-color);
}

button.main-light {
    background-color: rgba(87, 147, 216, 0.6);
}

button.back {
    background-color: #d7e1ea;
    color: var(--vice-color);
}

button.success {
    background-color: var(--green-color);
}

button.print {
    background-color: var(--green-color);
}

button.print:hover {
    color: #fff;
    opacity: .85;
}

.swal2-container button {
    height: unset !important;
}

.dropdown {
    display: inline-block;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--main-color-l);
    color: var(--dark-color);
}

.dropdown-menu {
    border: 1px solid #eee;
}

button.edit {
    background-color: var(--orange-color);
}

button.record {
    background-color: #555;
}

button.delete {
    background-color: var(--red-color);
}

button.stop {
    background-color: var(--red-color);
}

button.view {
    background-color: #868A90;
}

button.file {
    background-color: var(--yellow-color);
}

button.setting {
    background-color: var(--robinblue-color);
}

button.mail {
    background-color: var(--lightgreen-color);
}

button.main-border {
    background-color: #fff;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

button.red-border {
    background-color: #fff;
    color: var(--red-color);
    border: 1px solid var(--red-color);
}

button.ex-dl {
    background-color: #fff;
    color: var(--green-color);
    border: 1px solid var(--green-color);
}

button.cancel {
    background-color: var(--gray-color);
}

button.addLesson.active {
    background-color: #aaa;
}

button:disabled {
    background-color: #ccc;
    color: #eee;
    border: none;
}

button.trace {
    background-color: #fff;
    border: 1px solid #96d1c4;
    color: #96d1c4;
}

button.trace-finish,
button.trace.active {
    background-color: #96d1c4;
    color: #fff;
}

button.trace.off {
    background-color: #bbb;
    border-color: #bbb;
    color: #eee;
}

/* mark state */

.mark-state {
    padding: 2px 5px;
    min-width: 70px;
    width: auto;
    text-align: center;
    font-size: 15px;
    background-color: #fff9d8;
    margin: 0 10px 0 0;
    transition: .3s ease;
}

.mark-state-no {
    width: 70px;
    margin: 0 10px 0 0;
}

.mark-red {
    background-color: rgb(255, 236, 236);
}

.mark-blue {
    background-color: rgb(214, 238, 252);
}

.mark-lightblue {
    background-color: rgb(234, 246, 253);
}

.mark-green {
    background-color: rgb(236, 255, 242);
}

.mark-gray {
    background-color: rgb(236, 236, 236);
}

.mark-darkgray {
    background-color: rgb(177, 177, 177);
    color: #fff;
}

.mark-orange {
    background-color: rgb(255, 229, 211);
}

@media (min-width: 1200px) {

    .main-table.border-all td,
    .main-table.border-all th {
        border: none;
        border-bottom: 1px solid #eee;
    }
}


/* mark state end */


.main-table {
    width: 100%;
}

.main-table tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
    /* 單數列 */
}

.main-table tbody tr:nth-child(even) {
    background-color: #ffffff;
    /* 雙數列 */
}

.main-table tr {
    line-height: 26.5px;
}

.main-table th,
.main-table td {
    vertical-align: middle;
    padding: 5px 10px;
    font-weight: normal;
    font-size: 14px;
    word-break: break-all;
    box-sizing: content-box;
}

.main-table td .select2-container {
    width: 100% !important;
}

.main-table thead {
    background-color: var(--dark-color);
    color: #fff;
}

.main-table tbody tr {
    border-bottom: 1px solid #eee;
    /*transition: .3s ease;*/
}

.main-table tbody tr:hover {
    background-color: #FFF5E6 !important;
}

@media (min-width: 1200px) {
    .main-table tbody tr:hover {
        /*        background-color: var(--main-color-l) !important;*/
    }
}

@media (max-width: 576px) {
    .table-bordered {
        border: none
    }
}

@media (max-width: 768px) {
    .table-bordered {
        border: none;
    }
}

@media (max-width: 1024px) {
    .table-bordered {
        border: none;
    }
}

.main-table tbody tr.lightgray-bg {
    background-color: #f7f7f7;
}


.main-table.light thead {
    font-weight: 800;
    color: var(--main-color);
    background-color: var(--main-color-l);
}

.main-table.light tbody tr:hover {
    background-color: transparent;
}

.main-table.light th,
.main-table.light td {
    text-align: center;
}

.main-table .total td,
.main-table .total th {
    font-weight: 800;
    font-size: 15px;
    background-color: #fff;
}

.main-table .abs-total td,
.main-table .abs-total th {
    background-color: var(--main-color-l);
}

.main-table .table-img {
    width: 100px;
    margin: 0 2px;
    display: inline-block;
    /*    border: 1px solid #eee;*/
}

.main-table .red-mark {
    color: var(--red-color);
}

.main-table .func-btn-t {
    text-align: left;
}

.main-table .tract-state.timeout {
    color: var(--red-color)
}

.main-table .func-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

.main-table .func-btn button {
    margin: 2px 2px;
}


@media (max-width: 1200px) {
    .main-table:not(.scroll) .func-btn {
        width: 100%;
        justify-content: end;
    }

    .main-table:not(.scroll) thead {
        display: none;
    }

    .main-table:not(.scroll) tbody tr {
        /*        border-bottom: 1px solid #c2e0ff;*/
        display: block;
        margin-bottom: 15px;
    }

    .main-table:not(.scroll) tbody tr.total {
        border-bottom-color: transparent;
    }

    .main-table:not(.scroll) tbody tr:hover {
        background-color: transparent;
        cursor: pointer;
    }

    .main-table:not(.scroll) td {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        transition: .3s ease;
    }

    .main-table:not(.scroll) td[data-first-title] {
        font-size: 18px;
        font-weight: 700;
        color: var(--darkgray-color);
        justify-content: space-between;
    }

    .main-table:not(.scroll) td[data-first-title].active::after {
        transform: rotate(180deg);
    }

    .main-table:not(.scroll) td[data-title] {
        display: flex;
        transform-origin: top;
        animation: tdCtShow .3s ease 0ms 1 both;
        text-align: left !important;
    }


    .main-table:not(.scroll) td[data-title].active {
        display: flex;
        animation: tdCtShow .3s ease 0ms 1 both;
    }

    @keyframes tdCtShow {
        from {
            opacity: 0;
            transform: scaleY(0);
        }

        to {
            opacity: 1;
            transform: scaleY(1);
        }
    }

    .main-table:not(.scroll) td.num {
        font-size: 17px;
        font-weight: 700;
    }

    .main-table:not(.scroll) td.func-btn {
        justify-content: end;
    }

    .main-table:not(.scroll) td.selectbox {
        padding: 15px;
    }

    .main-table:not(.scroll) td[data-title]::before {
        display: block;
        width: 100px;
        font-size: 15px;
        min-width: 100px;
        content: attr(data-title);
        color: var(--main-color);
        white-space: normal; /* 允許換行 */
        word-break: break-word; /* 單字過長時強制斷行 */
    }

    .main-table:not(.scroll) td.selectbox::before,
    .main-table:not(.scroll) td.num::before,
    .main-table:not(.scroll) td.func-btn::before {
        display: none;
    }

    .main-table:not(.scroll) td.selectbox.gift::before {
        display: block;
    }


    .main-table:not(.scroll).light th,
    .main-table:not(.scroll).light td {
        text-align: unset;
    }
}

.scroll-table-wrap {
    height: fit-content;
    max-height: 100%;
}

.scroll-table-wrap::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

@media (max-width: 768px) {
    .scroll-table-wrap::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
}

.scroll-table-wrap::-webkit-scrollbar-button {
    display: none;
}

.scroll-table-wrap::-webkit-scrollbar-track-piece {
    background: transparent;
}

.scroll-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}

.scroll-table-wrap::-webkit-scrollbar-track {
    box-shadow: transparent;
}

.main-table.scroll {
    table-layout: fixed;
    width: 100%;
}

.main-table.scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /*background-color: var(--dark-color);*/
}

.main-table.scroll tbody td {
    z-index: 1;
}

@media (max-width: 1600px) {
    .scroll-table-wrap.long {
        overflow-x: scroll;
    }

    .main-table.scroll.long {
        min-width: 1500px;
    }
}

@media (max-width: 1440px) {
    .scroll-table-wrap {
        overflow-x: scroll;
    }

    .main-table.scroll {
        min-width: 1020px;
    }
}

@media (min-width: 1440px) and (max-width: 1600px) {
    .main-table.scroll {
        min-width: 90%;
        /* 或其他合適的值 */
    }
}

.scroll-table.long {
    min-width: 2200px;
}

.infobox {
    display: flex;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
}

.infobox .info-t {
    width: 150px;
    min-width: 150px;
    color: var(--main-color);
}

.infobox .info-ct {
    word-break: break-all;
    color: var(--darkgray-color);
}



.infobox-img {
    padding: 20px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    width: 100%;
}

.infobox-img-t {
    text-align: center;
    margin-bottom: 10px;
    color: var(--main-color);
}

.infobox-img img {
    display: block;
    margin: 0 auto;
    width: 85%;
    height: 200px;
    object-fit: contain;
    transition: .3s ease;
}

@media (max-width: 576px) {
    .infobox {
        flex-wrap: wrap;
    }

    .infobox .info-t {
        font-size: 15px;
    }

    .infobox-img img {
        width: 100%;
    }
}


.editbox {
    display: flex;
    align-items: center;
}

@media (max-width: 576px) {}


.editbox label {
    display: block;
    width: 150px;
    min-width: 150px;
    color: var(--darkgray-color);
    font-size: 16px;
}

.editbox input,
.editbox textarea {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px 10px;
    height: 35px;
    width: 100%;
    transition: .3s ease;
}

.editbox textarea {
    height: auto;
}

.editbox input:focus,
.editbox textarea:focus {
    border-color: var(--main-color);
}

.editbox select {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 5px 10px;
    height: 35px;
    width: 100%;
}

@media (max-width: 480px) {
    .editbox {
        flex-wrap: wrap;
    }

    .editbox label {
        width: 100%;
        min-width: 100%;
        margin-bottom: 3px;
    }
}


.editbox-img {
    padding: 20px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    width: 100%;
    height: 200px;
}

.editbox-img img {
    display: block;
    margin: 0 auto;
    width: 85%;
    height: 100%;
    object-fit: contain;
    transition: .3s ease;
}

@media (max-width: 576px) {
    .editbox-img img {
        width: 100%;
    }
}

.linkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--main-color-l);
    padding: 20px;
    height: 140px;
    border-radius: 5px;
    transition: .3s ease;
}

.linkbox .box-ct {
    text-align: center;
    letter-spacing: 1.5px;
}

.linkbox h3 {
    color: var(--main-color);
    font-size: 18px;
    margin-bottom: 5px;
}

.linkbox h6 {
    font-size: 15px;
    color: var(--darkgray-color);
}

.linkbox h6 span {
    color: var(--red-color);
}

.linkbox.green {
    background-color: var(--green-color-l);
}

.linkbox.green h3 {
    color: var(--green-color);
}

.linkbox.red {
    background-color: var(--red-color-l);
}

.linkbox.red h3 {
    color: var(--red-color);
}

.linkbox.yellow {
    background-color: var(--yellow-color-l);
}

.linkbox.yellow h3 {
    color: var(--yellow-color);
}

.dashboard-list {}

.dashboard {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 0 30px 0 0;
}

.dashboard h3 {
    text-align: left;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.dashboard h6 {
    text-align: right;
    color: #666;
}

.dashboard h6 span {
    color: var(--red-color);
}

.notice-text {
    color: var(--red-color);
    font-size: 15px;
}





.pagination {
    justify-content: center;
    margin: 25px 0 0;
    flex-wrap: wrap !important;
}

.pagination li {
    display: block;
    padding: 2px 10px;
    margin: 0 5px;
    text-align: center;
    border-bottom: 1px solid #eee;
    transition: .3s ease;
}

.pagination li:hover,
.pagination li.active {
    border-bottom-color: var(--main-color);
}

.pagination li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #aaa;
}

.pagination li.active a,
.pagination li:hover a {
    color: var(--main-color)
}


.process-step {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    counter-reset: step-counter;
    padding: 0 0 25px;
}

.process-step li {
    counter-increment: step-counter;
    display: flex;
    align-items: center;
    margin: 0 20px;
}

.process-step li span {
    color: #999;
    font-size: 18px;
    letter-spacing: 2px;
}

.process-step li.active span {
    font-weight: 900;
    color: var(--main-color)
}

.process-step li.inactive span {
    color: rgba(27, 119, 218, 0.6);
}

.process-step li.cancelled span {
    font-weight: 900;
    color: #dc3545;
}

.process-step li::before {
    content: counter(step-counter);
    display: block;
    font-size: 20px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 27px;
    border-radius: 10px;
    margin-right: 10px;
    border: 2px solid #eee;
    color: #ccc;
}

.process-step li.active::before {
    border-color: rgba(27, 119, 218, 0.3);
    color: rgba(27, 119, 218, 0.6);
}

.process-step li.inactive::before {
    border-color: rgba(27, 119, 218, 0.2);
    color: rgba(27, 119, 218, 0.3);
}

.process-step li.cancelled::before {
    border-color: rgba(220, 53, 69, 0.5);
    color: rgba(220, 53, 69, 0.8);
}

.process-step li:not(:last-of-type):after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-color: #ccc;
    transform: rotate(45deg) translateY(-2px);
}

.process-step li:not(:last-of-type).active:after {
    border-color: rgba(66, 125, 189, 0.6);
}

.process-step li:not(:last-of-type).inactive:after {
    border-color: rgba(66, 125, 189, 0.3);
}


@media (max-width: 992px) {
    .process-step {
        align-items: start;
    }

    .process-step li {
        flex-wrap: wrap;
        justify-content: center;
    }

    .process-step li a {
        width: 100%;
        text-align: center;
    }

    .process-step li::before {
        margin-right: 0;
    }

    .process-step li:not(:last-of-type):after {
        display: none;
    }
}

@media (max-width: 768px) {
    .process-step li {
        margin: 0 10px;
    }

    .process-step li a {
        width: 100%;
        font-size: 15px;
        margin-top: 5px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .process-step li::before {
        font-size: 15px;
    }

    .process-step li a {
        font-size: 14px;
        letter-spacing: -.5px;
    }
}

.item-desc {
    margin-right: 5px;
}

.item-desc .item-desc-t {
    padding: 3px 15px;
    justify-content: center;
    display: flex;
    align-items: center;
    color: #aaa;
}

.item-desc .item-desc-t:hover {
    cursor: pointer;
}

.item-desc .item-desc-t i {
    transition: .3s ease;
    display: block;
    margin: 0 10px;
}

.item-desc .item-desc-t.active i.fa-chevron-down {
    transform: rotate(180deg);
}

.item-desc .item-desc-ct {
    font-size: 15px;
}

.drag-control {
    color: #aaa;
    display: block;
}

.drag-control:hover {
    cursor: pointer;
}

.monthLedgersChart,
.monthLedgersChart2 {
    height: 100% !important;
    max-height: 350px;
    margin-bottom: 20px;
}

#orderReport {
    height: 100% !important;
    max-height: 450px;
}

#income-chart {
    height: 100% !important;
    min-height: 250px;
}

#expenditure-chart {
    height: 100% !important;
    min-height: 250px;
}

#expenditure-month-chart {
    height: 100% !important;
    min-height: 250px;
}

#income-month-chart {
    height: 100% !important;
    min-height: 250px;
}

#incomeOverviewChart,
#expOverviewChart,
#ledgersOverviewChart {
    height: 100% !important;
    max-height: 350px;
    margin-bottom: 20px;
}

#abs-chart {
    height: 100% !important;
    min-height: 350px;
}

@media (max-width: 992px) {
    #abs-chart {
        min-height: 300px;
    }
}

.order-itemList {
    font-size: 15px;
    color: var(--dark-color);
}

.order-itemList .fa-solide,
.order-itemList .fa-light {
    color: #ccc;
}

.order-itemList .fa-circle-check {
    color: var(--main-color);
}

.progress {
    flex-wrap: wrap;
    height: auto;
    min-height: 30px;
    background-color: #fff;
}

.progress-bar {
    height: 30px;
    width: auto;
    padding: 0 25px;
    background-color: #f8f8f8;
    color: #aaa;
}

.progress-bar:not(:last-of-type) {
    border-right: 1px solid #ccc;
}

@media (max-width: 768px) {
    .progress-bar {
        width: 100%;
    }

    .progress-bar:not(:last-of-type) {
        border-right: none;
    }
}

.progress-bar.inactive {
    background-color: var(--main-color-l);
    color: var(--main-color);
    border-right-color: rgba(27, 119, 218, 0.2);
}

.progress-bar.active {
    color: #fff;
    border-right-color: var(--main-color);
    background-color: var(--main-color);
}

.scorll-block {
    background-color: #f8f8f8;
    padding: 30px 20px;
    height: 450px;
    overflow-y: scroll;
}

@media (max-width: 768px) {
    .scorll-block {
        padding: 30px 15px;
    }
}

.scorll-block::-webkit-scrollbar {
    width: 7px;
}

@media (max-width: 768px) {
    .scorll-block::-webkit-scrollbar {
        width: 5px;
    }
}

.scorll-block::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
    display: none;
}

.scorll-block::-webkit-scrollbar-track-piece {
    background: transparent;
}

.scorll-block::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(102, 102, 102, 0.1);
}

.scorll-block::-webkit-scrollbar-track {
    box-shadow: transparent;
}


.timeline {
    display: block;
}

.timeline li {
    padding: 10px;
    border-radius: 0px;
    background-color: #fff;
    display: flex;
    position: relative;
    margin-bottom: 20px;
}

.timeline li:not(:last-of-type):after {
    display: block;
    content: '';
    width: 5px;
    height: 50px;
    position: absolute;
    bottom: -50px;
    left: calc(50% - 2.5px);
    background-color: #eee;
}

.timeline li.timeline-mark {
    background-color: #f8f8f8;
    justify-content: center;
}

.timeline li.timeline-mark .mark-text {
    font-size: 18px;
    color: #888;
    font-weight: 900;
}

.timeline .timeline-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    font-size: 14px;
    border-radius: 5px;
    background-color: var(--gray-color);
    color: #fff;
    margin-right: 10px;
}

.timeline .timeline-icon.reply {
    background-color: var(--main-color);
}

.timeline .timeline-icon.manager {
    background-color: var(--red-color);
}

.timeline .timeline-ct {
    font-size: 15px;
    width: 100%;
}

.timeline .timeline-ct .timeline-t {
    font-size: 16px;
    font-weight: 900;
    margin: 0px 0px 5px;
}

.timeline .timeline-ct .timeline-text {
    line-height: 26px;
    letter-spacing: .6px;
    color: #666;
}

.timeline .timeline-time {
    position: absolute;
    right: 10px;
    color: #ddd;
    top: 10px;
    font-size: 14px;
}

@media (max-width: 768px) {
    .timeline li:not(.timeline-mark) {
        padding-bottom: 40px;
    }

    .timeline .timeline-time {
        top: unset;
        bottom: 10px;
    }
}

/* ----- component end ----- */

/* ----- login ----- */




.login-flex {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/login-bg.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}


.login-box {
    width: 420px;
    height: auto;
    border: 1px solid #fff;
    box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.6);
    padding: 15px 20px;
    border-radius: 15px;
}

@media (max-width: 992px) {
    .login-box {
        width: 400px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 5px;
        backdrop-filter: blur(4px);
        padding: 20px 15px 40px;
    }
}

@media (max-width: 420px) {
    .login-box {
        width: 100%;
        margin: 0 15px;
    }
}

.login-logo {
    width: 125px;
    margin: 0 auto;
}

.login-logo img {
    width: 100%;
}

@media (max-width: 992px) {
    .login-logo {
        width: 120px;
    }
}

.login-logotext {
    text-align: center;
}

.login-logotext h1 {
    font-size: 22px;
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    .login-logotext h1 {
        font-size: 22px;
    }
}

.login-logotext h6 {
    font-size: 13px;
    color: var(--main-color);
}

.recaptcha {
    width: 280px;
    margin: 0 auto;
}

/* ----- login end ----- */



/* ---- footer ---- */


footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

footer .copyright {
    font-size: 14px;
    text-align: center;
    color: rgba(27, 119, 218, 0.6);
    padding-bottom: 5px;
    opacity: .6;
}

/* ---- footer end---- */
/*-- 拖曳不會跑版 --*/
.ui-sortable-helper {
    overflow: auto;
    display: flex;
}

.open-time-title {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 900;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    margin-bottom: 20px;
}

.open-time {
    padding: 0;
    margin: 0;
}

.open-time li {
    list-style: none;
    padding: 15px 0 15px 25px;
    margin: 0 0 0px 25px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    border-left: 1px solid #ccc;
    position: relative;
}

.open-time li::before {
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    background-color: #2194f3;
    position: absolute;
    left: -5px;
    top: calc(50% - 6px);
    z-index: 1;
    border-radius: 50%;
}

.cart-menu {
    position: relative;
}

.cart-info {
    margin-top: 20px;
}

.cart-info h2 {
    font-size: 20px;
}

.cart-tabs {
    counter-reset: step;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    z-index: 999;
}

.cart-tabs:hover {
    cursor: pointer;
}

.cart-tabs li {
    position: relative;
    width: calc(100%/5);
    text-align: center;
}

@media (max-width: 768px) {
    .cart-tabs li {
        width: calc(100% / 4);
    }
}

.cart-tabs li:not(:last-of-type)::after {
    font-family: 'Font Awesome 6 Pro';
    content: '\f86c';
    position: absolute;
    right: -22%;
    top: calc(50% - 53px);
    font-size: 50px;
    font-weight: 100;
}

@media (max-width: 768px) {
    .cart-tabs li:not(:last-of-type)::after {
        font-size: 30px;
        top: calc(50% - 39px);
        right: -17%;
    }
}

@media (max-width: 576px) {
    .cart-tabs li:not(:last-of-type)::after {
        font-size: 20px;
        top: calc(50% - 32px);
        right: -16%;
    }
}

.cart-tabs li.tab_active::after {
    color: var(--main-color);
    opacity: .8;
}

.cart-tabs li.tab_inactive::after {
    color: var(--main-color);
    opacity: .3;
}

.cart-tabs li .step {
    top: -30%;
    left: 0;
    right: 0;
    font-size: 14px;
    color: #000;
    opacity: .8;
    transition: .3s ease;
    border: 2px solid #828282;
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    .cart-tabs li .step {
        top: -25%;
        font-size: 13px;
    }
}

.cart-tabs li.tab_active .step {
    color: #ffffff;
    font-weight: 700;
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.cart-tabs li.tab_active:before {
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);
}

.cart-tabs li.tab_inactive:before {
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);
    opacity: .5;
}

.cart-tabs li a {
    color: #333;
    font-size: 16px;
    letter-spacing: 2px;
}

@media (max-width: 576px) {
    .cart-tabs li a {
        letter-spacing: 0px;
        font-size: 14px;
    }
}

.cart-tabs li.tab_inactive .step {
    color: var(--main-color);
    border-color: var(--main-color);
    opacity: 0.8;
}

.cart-tabs li.tab_active a {
    color: var(--main-color);
    font-weight: 700;
}

.cart-tabs li.tab_inactive a {
    color: var(--main-color);
    opacity: .8;
}

.punch-box .pb-box .select2-container {
    margin-bottom: 10px;
    width: 100% !important;
}

@media (max-width: 992px) {
    .punch-box {
        width: 80%;
    }

    .punch-box .pb-box {
        width: calc(100% / 2.1);
    }
}

@media (max-width: 576px) {
    .punch-content {
        height: auto;
        max-height: unset;
        align-items: start;
    }

    .punch-box {
        width: 95%;
    }

    .punch-box .pb-box {
        width: calc(100% / 1);
    }

    .punch-box .pb-box button {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .punch-content {
        height: auto;
        max-height: unset;
        align-items: start;
    }

    .punch-box {
        width: 95%;
    }

    .punch-box .pb-box {
        width: calc(100% / 1);
    }

    .punch-box .pb-box button {
        font-size: 16px;
    }
}

.punch-box {
    padding: 35px 45px;
    width: 50%;
    background-color: #fff;
    border-radius: 15px;
    height: fit-content;
    margin: auto;
}

@media (max-width: 1500px) {
    .punch-box {
        width: 80%;
    }
}

@media (max-width: 992px) {
    .punch-box {
        width: 80%;
    }

    .punch-box .pb-box {
        width: calc(100% / 2.1);
    }
}

@media (max-width: 768px) {
    .punch-box {
        padding: 20px 15px;
    }
}

@media (max-width: 576px) {
    .punch-content {
        height: auto;
        max-height: unset;
        align-items: start;
    }

    .punch-box {
        width: 95%;
    }

    .punch-box .pb-box {
        width: calc(100% / 1);
    }

    .punch-box .pb-box button {
        font-size: 16px;
    }
}

.punch-box-t {
    padding-left: 0;
    border-left: none;
    margin-bottom: 15px;
    text-align: center;
    color: var(--main-color);
}

.editbox .editflex {
    width: 100%;
    display: flex;
    align-items: center;
}

.editbox .editflex button {
    width: 100px;
    justify-content: center;
    margin-left: 5px;
    min-width: 100px;
}

.editbox .editflex button.sm {
    width: 50px;
    margin-left: 5px;
    min-width: 50px;
}

.badge {
    background-color: #e6f5f0;
    box-shadow: 0px 1px 2px rgb(6 6 6 / 30%);
    color: #3a3a3a;
    font-weight: 400;
    font-size: 88%;
    padding: 3px 4px;
    border: 1px solid #efefef;
}

.badge .fa-xmark:hover {
    cursor: pointer;
}

/* 忘打卡申請（未審核）提示 icon */
.forget-attend-mark {
    color: #e6a23c;
    margin-right: 4px;
    cursor: help;
}

.hidden {
    display: none;
}

.firsttd th {
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent
}

.main-table.border-all td,
.main-table.border-all th {
    border: 1px solid #eee;
}

.main-table.border-all td,
.main-table.border-all th {
    border: 1px solid #eee;
}

.scroll-table.border-all td,
.scroll-table.border-all th {
    border: 1px solid #eee;
}


.scroll-table .cancel-mark {
    color: #aaa;
}

.scroll-table .drag-btn:hover {
    cursor: pointer;
}

.scroll-table .func-btn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

.scroll-table .func-btn button {
    margin: 2px 2px;
}

.scroll-table .func-btn.nowrap {
    flex-wrap: nowrap;
}

.scroll-table .red-mark {
    color: var(--main-color);
}

.scroll-table .sortable-chosen {
    background-color: rgba(198, 70, 70, 0.07);
}

.scroll-table .table-img {
    width: 100px;
    margin: 0 auto;
    padding: 3px;
    display: inline-block;
    border: 1px solid #eee;
}

@media (max-width: 1200px) {
    .scroll-table .table-img {
        width: 150px;
        margin: 2px 0px;
    }
}

.scroll-table {
    width: 100%;
    min-width: 1440px;
}

.scroll-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: .3s ease;
}

.scroll-table td .select2-container {
    width: 100% !important;
}

.scroll-table th,
.scroll-table td {
    vertical-align: middle;
    padding: 8px 10px;
    font-weight: normal;
    font-size: 14px;
}

.scroll-table td {
    padding: 5px 10px;
    border: 1px solid #9b9b9b;
}

.scroll-table thead {
    background: rgb(31, 31, 31);
    background: linear-gradient(135deg, rgb(48, 48, 48) 0%, rgb(46, 46, 46) 100%);
    color: #fff;
}

.scroll-table thead.light {
    background: transparent;
    color: var(--primary-color);
}

.scroll-table thead.light th {
    font-size: 18px;
    font-weight: 700;
}

.scroll-table.auto {
    width: auto;
    min-width: auto;
}

.scroll-table.border-all td,
.scroll-table.border-all th {
    border: 1px solid #eee;
}

.scroll-table.long {
    min-width: 3000px;
}

.scroll-table-wrap {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: auto;
}

.desc-text {
    color: var(--primary-color);
    font-size: 15px;
}

.input-upload-group {
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    padding: 2.5px 10px;
    height: 35px;
    width: 100%;
}

.searchbtn {
    background-color: transparent;
    color: #1b78da;
    padding: 0 10px;
    ;
}

/*營業項目modal大小*/
.modal-SystemItem {
    max-width: 575px !important;
    margin: auto;
}

@media (min-width: 576px) {
    .modal-Calendar {
        max-width: 500px !important;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .modal-Calendar {
        max-width: 1000px !important;
        margin: 0 auto;
    }
}

@media (min-width: 576px) {
    .modal-BackuserSetting {
        max-width: 500px !important;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .modal-BackuserSetting {
        max-width: 700px !important;
        margin: 0 auto;
    }
}

/* 給內含寬表格的 modal 用 */
@media (min-width: 768px) {
    .modal-WideTable {
        max-width: 1000px !important;
        margin: 0 auto;
    }
}

.ui-sortable-placeholder>td:not(:first-child) {
    display: none;
}

.icon-size {
    width: 25px;
}

.order-a {
    color: #fff;
}

.search-toggle {
    background-color: transparent;
    color: #999;
    padding: 2px 0;
    font-size: 15px;
    border-bottom: 1px solid #ccc;
    letter-spacing: 2px;
    transition: .3s ease;
}

.search-toggle:hover,
.search-toggle.active {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
    opacity: .85;
    cursor: pointer;
}

div[data-type="search-content"] {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

#external-search-events {
    min-height: 726px;
    max-height: 726px;
    padding: 10px;
    margin: 0px 10px 0px 10px;
    border: 1px solid #ccc;
}

@media (max-width: 576px) {
    #external-search-events {
        display: none;
    }
}

@media (max-width: 768px) {
    #external-search-events {
        display: none;
    }
}

@media (max-width: 1024px) {
    #external-search-events {
        display: none;
    }
}

#external-events {
    min-height: 640px;
    max-height: 640px;
    overflow-y: auto;
    margin: 10px 0px 0px 0px;
}

.fc-move-event {
    margin: 5px 0;
    padding: 10px;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

.fc-event {
    margin: 5px 0;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.fc-category {
    margin: 5px 0;
    padding: 10px;
    background-color: #2c3e50;
    color: white;
    cursor: pointer;
}

.mission-menu {
    /*    overflow-y: scroll;*/
    margin: 0;
    padding: 0;
    height: auto;
}


.mission-menu::-webkit-scrollbar {
    width: 7px;
}

.mission-menu::-webkit-scrollbar-button {
    background: transparent;
    border-radius: 4px;
}

.mission-menu::-webkit-scrollbar-track-piece {
    background: transparent;
}

.mission-menu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(102, 102, 102, 0.2);
}

.mission-menu::-webkit-scrollbar-track {
    box-shadow: transparent;
}

.mission-menu ul {
    padding: 0;
    margin: 0;
}

.mission-menu>ul>li {
    position: relative;
    list-style: none;
}


.mission-menu>ul>li>a {
    display: flex;
    position: relative;
    height: 50px;
    padding: 10px 20px;
    transition: 0.3s;
    font-size: 18px;
    text-align: left;
    letter-spacing: 3px;
    color: white;
    border-bottom: 1px solid rgba(27, 119, 218, 0.1)
}

.mission-menu>ul>li>a>i {
    display: inline-block;
    margin-right: 3px;
    text-align: center;
    width: 30px;
}

.mission-menu>ul>.active>a,
.mission-menu .drop-down.on>a,
.mission-menu>ul>li:hover>a {
    /*color: rgba(255, 255, 255, .8);*/
}

.mission-menu>ul>.active>a {
    color: #fff;
}

.mission-menu .drop-down>a {
    display: flex;
    align-items: center;
    position: relative;
}


.mission-menu .drop-down>a::after {
    display: block;
    content: '\f078';
    font-size: 16px;
    font-family: 'Font Awesome 6 Pro';
    transition: .3s ease;
    color: white;
    position: absolute;
    right: 15px;
}

.mission-menu .drop-down .drop-down>a::after {
    color: #aaa;
}

.mission-menu .drop-down:hover>a::after {
    /*  color: rgba(255, 255, 255, 0.5);*/
}

.mission-menu,
.drop-down .drop-down:hover>a::after {
    color: var(--main-color);
}


.mission-menu .drop-down.on>a::after {
    transform: rotate(180deg);
}

.mission-menu .drop-down .drop-down.active>a::after,
.mission-menu .drop-down .drop-down.on>a::after {
    color: var(--main-color);
}

.mission-menu .drop-down>ul {
    background-color: rgba(255, 255, 255, 0.5);
}



.mission-menu .drop-down>ul li {
    list-style: none;
    display: block;
}

.mission-menu .drop-down>ul>li a {
    display: flex;
    position: relative;
    padding: 8px 20px 8px 25px;
    word-break: break-all;
    transition: 0.3s ease;
    font-size: 17px;
    text-align: left;
    letter-spacing: 2px;
    color: #888;
}

.mission-menu .drop-down>ul>li>a::before {
    content: '-';
    display: block;
    margin-right: 5px;
}

.mission-menu .drop-down>ul>li.on>a,
.mission-menu .drop-down>ul>li:hover>a {
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.45);
}

.mission-menu .drop-down>ul>li.active>a {
    color: var(--main-color);
    background-color: rgba(255, 255, 255, 0.45);
    font-weight: 900;
}

.mission-menu .drop-down .drop-down>a {
    transition: .3s ease;
}


.mission-menu .drop-down .drop-down ul a {
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #aaa;
    margin-left: 10px
}

.mission-menu .drop-down .drop-down ul a::before {
    content: '';
    display: block;
    margin-right: 10px;
    width: 5px;
    height: 5px;
    background-color: #a3a3a3;
}

.mission-menu .drop-down .drop-down.active ul .active a {
    font-weight: 500;
}

.mission-menu .drop-down .drop-down.active ul .active a::before {
    background-color: rgba(27, 119, 218, 1);
}

.mission-reported {
    background-color: var(--orange-color)
}

.mission-complete {
    background-color: var(--green-color)
}

.mission-doing {
    background-color: #007bff;
}

.mission-hint-reported {
    color: var(--orange-color)
}

.mission-hint-complete {
    color: var(--green-color)
}

.mission-hint-doing {
    color: #007bff;
}

.mission-expired {
    background-color: var(--gray-color)
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*行事曆*/
#calendar {
    max-height: 700px;
    overflow-y: auto;
}

.fixed-bottom-right {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 10;
}

/*左上角logo文字*/
.logo-text {
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    font-family: 'Microsoft JhengHei', sans-serif;
    color: #fff;
}

/*叫修總覽 查看modal*/
.repairrequest-modal {
    max-width: 800px !important
}

.td-repairrequest {
    background-color: #258af4;
    color: white
}

.convert-to-task {
    border: 2px solid #258af4;
    border-radius: 5px;
    background-color: #258af4;
    color: white
}

/*fullcalendar 手機板調整*/
@media (max-width: 576px) {
    .fc .fc-toolbar {
        flex-direction: column;
    }

    .fc .fc-toolbar-title {
        font-size: 1.25em;
    }
}

@media (max-width: 768px) {
    .fc .fc-toolbar {
        flex-direction: column;
    }

    .fc .fc-toolbar-title {
        font-size: 1.25em;
    }
}

@media (max-width: 1024px) {
    .fc .fc-toolbar-title {
        font-size: 1.25em;
    }
}

/* 鎖定功能樣式 */
.hidden {
    display: none !important;
}

#lockCont.locked-content {
    position: relative;
    pointer-events: none;
}

#lockCont.locked-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.4);
    z-index: 10;
}


/*--凍結表格--*/
.scroll-table td.sticky-col {
    position: sticky !important;
    background-color: #fff !important;
    /* 必須設定背景色，否則滾動時會透明 */
    z-index: 10 !important;
    /* 確保在普通欄位之上 */
}

/* 整體容器：移除外邊框，改用陰影增加立體感 */
.salary-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #ffffff;
    overflow: hidden;
    font-size: 15px;
}

/* 區域共同樣式 */
.section {
    display: flex;
    flex-direction: column;
}

/* 加項區：極淺翠綠色 */
.section-addition {
    background-color: #f6fbf8;
}

/* 扣項區：極淺淡紅色 */
.section-deduction {
    background-color: #fff9f9;
}

/* 標題改為簡潔風 */
.section-header {
    padding: 5px 20px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #444;
    border-bottom: 1px solid #7c7c7c;
    text-align: center;
}



/* 內容列表容器 */
.items-list {
    padding: 10px 20px 0;
    flex-grow: 1;
}

.item-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #e1e1e1;
    color: var(--darkgray-color);
}

/* 小計列：與背景同色系但稍微加深 */
.subtotal-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 1rem;
}

.section-addition .subtotal-row {
    background-color: #e6f6ec;
    color: #01582d;
}

.section-deduction .subtotal-row {
    background-color: #ffe5e5;
    color: #d90a0a;
}

/* 總計底部：移除深色背景，改用淺灰色背景 */
.total-footer {
    grid-column: span 2;
    background-color: #f8f9fa;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #eee;
    border-top: 2px solid #aba9a9;
    font-size: 22px;
    font-weight: 700;
}

.total-label {
    font-weight: 700;
    color: #4a5568;
    font-size: 1.1rem;
}

.total-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2b6cb0;
    /* 專業的深藍色 */
}

/* 清單容器：讓加項與扣項並排 */
.other-items-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

/* 小標題優化 */
.list-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #444;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.list-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 8px;
    border-radius: 2px;
}

.title-add::before {
    background-color: #48bb78;
}

.title-deduct::before {
    background-color: #f56565;
}

/* 輕量化清單樣式 */
.simple-list-wrap {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.simple-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.simple-list-table th {
    background-color: #f8f9fa;
    color: #666;

    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.simple-list-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #f9f9f9;
    font-size: 15pxs;
}

/* 數字靠右對齊 */
.text-right {
    text-align: right !important;
}

/* 合計行優化 */
.list-total-row {
    background-color: #fdfdfd;
    font-weight: bold;
}

.add-total {
    color: #2f855a;
}

.deduct-total {
    color: #c53030;
}

@media (max-width: 992px) {
    .other-items-container {
        grid-template-columns: 1fr;
    }
}

button.dark-border {
    background-color: #fff;
    color: #101010;
    border: 1px solid #101010;
    line-height: 1.25;
}


/* 容器：加入微陰影，讓表格浮現出來 */
.record-viewport {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

/* 表格主體 */
.record-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    white-space: nowrap;
    min-width: 1400px;
}


.record-data-table thead th {
    background-color: #383d44;
    color: #ffffff;
    text-align: left;
    padding: 5px 10px;
    letter-spacing: 0.5px;
    line-height: 26.5px;
    border: none;
}


.record-data-table tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid #f1f5f9;
    background-color: #fff;
}


.record-data-table tbody tr:nth-child(even) td {
    background-color: #f8fafc;
}

.checkbox-cell {
    width: 30px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}


.amount-cell {
    text-align: right !important;
}


.func-container {
    display: flex;
    gap: 3px;
}

.func-container a {
    display: inline-flex;
}

.vendor-cell {
    /* 設定最大寬度 */
    max-width: 260px;

    /* 設定對齊方式（可選） */
    text-align: left;
    vertical-align: middle;
}

.vendor-cell .vendor-name {
    /* 允許在單字內換行（針對長英文或無空格字串） */
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;

    /* 最多顯示兩行，超出以省略號顯示 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 年度合計欄位加強視覺 */
.total-cell {
    background-color: #f0f9ff;
    font-weight: 700 !important;
    color: #1d4ed8;
}

/* 固定首欄與末欄 (選擇性，方便在滾動時看項目名稱) */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid #e2e8f0;
}

.sticky-col-right {
    position: sticky;
    right: 0;
    z-index: 1;
    border-left: 2px solid #e2e8f0;
}

/* 合計列*/
.summary-row {
    background-color: #f1f5f9 !important;
    border-top: 2px solid #cbd5e1;
}

.summary-row td,
.summary-row th {
    font-weight: 700;
    color: #0f172a;
    padding: 12px 10px !important;
    font-size: 16px;
}

/* 標籤 (建/審) */
.info-row {
    line-height: 20px;
}

.info-row .label {
    color: #94a3b8;
    font-size: 11px;
    width: 20px;
}

.info-row .name {
    font-weight: 500;
    color: #334155;
    margin-right: 4px;
    min-width: 50px;
}

.info-row .date {
    color: #64748b;
    font-size: 12px;
}



/*--0119--*/
/* 區塊群組視覺邊界 */
.border-start-income {
    border-left: 3px solid #3b82f6 !important;
}

/* 收入區起始藍線 */
.border-start-expense {
    border-left: 3px solid #ef4444 !important;
}

/* 支出區起始紅線 */
.border-start-summary {
    border-left: 3px solid #64748b !important;
}

/* 盈餘區起始灰線 */

/* 背景強化 */
.group-income {
    background-color: #1e3a8a !important;
}

.group-expense {
    background-color: #7f1d1d !important;
}

.group-summary {
    background-color: #334155 !important;
}

/* 讓結餘列像收支表一樣清晰 */
.bg-light-blue {
    background-color: #f0f7ff !important;
}

.text-blue-strong {
    color: #1d4ed8 !important;
    font-size: 1.15rem;
}

.bg-primary-highlight {
    background-color: #1d4ed8 !important;
}



/* 常態薪資框 */
.salary-box {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}

.box-header {
    background: #334155;
    color: #fff;
    padding: 6px 12px;
    font-size: 0.9rem;
    border-radius: 5px 5px 0 0;
}

.box-body {
    padding: 12px;
}

.data-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.data-row.total {
    border-top: 1px dashed #cbd5e1;
    margin-top: 10px;
    padding-top: 8px;
    font-weight: bold;
}


.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.item-title {
    font-weight: 500;
    color: #334155;
}

.item-date {
    font-size: 0.8rem;
    color: #94a3b8;
}

.item-value {
    font-family: 'Consolas', monospace;
    font-weight: 600;
}

.bg-success-soft {
    background-color: #ecfdf5;
}

.bg-danger-soft {
    background-color: #fef2f2;
}

.bg-warning-soft {
    background-color: #fffbeb;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {

    line-height: 1.5;
}

.invoice-preview-container {
    position: relative;
    width: 100%;
    height: 200px;
    background: #f3f3f3;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #dee2e6;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}
.invoice-preview-container.drag-over {
    border-color: #4361ee;
    background: #eef1ff;
}
.invoice-preview-container .preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
    transition: transform 0.3s ease;
}
.invoice-scanner-line {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: rgba(67, 97, 238, 0.6);
    box-shadow: 0 0 15px 5px rgba(67, 97, 238, 0.6);
    z-index: 10;
    animation: invoiceScan 2s infinite ease-in-out;
}
@keyframes invoiceScan {
    0%   { top: 0; }
    50%  { top: 100%; }
    100% { top: 0; }
}
.invoice-status-badge {
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
    transition: all 0.3s ease;
}
.invoice-skeleton {
    height: 18px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}
@keyframes skeletonLoading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* -------- 通知區塊 ---------*/
header .logout #notificationBell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
}

#notificationBadge {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    border-radius: 50%;
    min-width: 12px;
    height: 12px;
    line-height: 6px;
    padding: 2px;
    text-align: center;
    font-size: 10px;
}

header .logout .notification-dropdown a {
    display: flex;
    width: auto;
    min-width: auto;
    font-weight: normal;
    color: inherit;
    text-align: left;
}

header .logout .notification-dropdown a span {
    display: inline;
}

header .logout .notification-dropdown .notification-footer a {
    display: block;
}

header .logout .dropdown-toggle.no-caret::after {
    display: none;
}

.notification-dropdown {
    width: 300px;
    padding: 0;
    border: none;
    box-shadow: 3px 0 5px rgb(23 23 54 / 20%);
    border-radius: 5px;
    right: 0;
    left: auto;
}

@media (min-width: 577px) and (max-width: 768px) {
    .notification-dropdown {
        width: 300px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .notification-dropdown {
        width: 260px;
    }
}

@media (min-width: 1025px) {
    .notification-dropdown {
        width: 380px;
    }
}
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.notification-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.notification-header-action {
    font-size: 13px;
    color: var(--main-color);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.notification-header-action:hover {
    text-decoration: underline;
}

.notification-list {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.notification-item:hover {
    background: #FFF5E6;
    text-decoration: none;
    color: inherit;
}

.notification-item.unread {
    background: var(--main-color-l);
}

.notification-item.unread:hover {
    background: #FFF5E6;
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 16px;
}

.notification-icon.type-Approval {
    background: var(--main-color-l);
    color: var(--main-color);
}

.notification-icon.type-Order {
    background: var(--vice-color-l);
    color: var(--vice-color);
}

.notification-icon.type-System {
    background: var(--robinblue-color-l);
    color: var(--robinblue-color);
}

.notification-icon.type-Task {
    background: var(--red-color-l);
    color: var(--red-color);
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.notification-message {
    font-size: 14px;
    color: #888;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}

.notification-time {
    font-size: 12px;
    color: #aaa;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--main-color);
    flex-shrink: 0;
    margin-left: 8px;
    margin-top: 6px;
}

.notification-empty {
    padding: 40px 16px;
    text-align: center;
    color: #aaa;
    font-size: 14px;
}

/* ===== 報價單總覽 quote-table（主列 + 版本歷史展開列） ===== */
.quote-table .quote-row.open {
    background-color: #eef4fc !important;
}

/* 版本切換器 */
.quote-table .ver-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 2px 7px;
    border-radius: 5px;
    transition: background .15s ease;
}


.quote-table .ver-badge {
    background: var(--main-color);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1.2;
}

.quote-table .ver-count {
    color: var(--vice-color);
    font-size: 13px;
    white-space: nowrap;
}

.quote-table .chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--vice-color);
    border-bottom: 2px solid var(--vice-color);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.quote-table .quote-row.open .chevron {
    transform: rotate(-135deg);
}

/* 種類標籤 */
.quote-table .tag {
    display: inline-block;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.quote-table .tag-normal {
    background: var(--main-color-l);
    color: var(--main-color);
}

.quote-table .tag-renewal {
    background: rgba(108, 189, 194, 0.15);
    color: #4a9499;
}

/* 訂單款項列表：類型 tag 與服務期數徽章 */
.main-table .tag {
    display: inline-block;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.2;
}

.main-table .tag-normal {
    background: var(--main-color-l);
    color: var(--main-color);
}

.main-table .tag-renewal {
    background: rgba(108, 189, 194, 0.15);
    color: #4a9499;
}

/* 固定欄寬：讓 th 的 width 設定（含選取欄）被確實套用，避免選取欄被多餘空間撐大 */
.main-table.table-fixed {
    table-layout: fixed;
}

.main-table .period-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 12px;
    border-radius: 10px;
    background: rgba(108, 189, 194, 0.15);
    color: #4a9499;
    white-space: nowrap;
}

.main-table .overdue-days {
    display: inline-block;
    padding: 1px 8px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    white-space: nowrap;
}

.quote-table .q-title {
    font-weight: 600;
}



.quote-table .q-amount {
    font-weight: 700;
    white-space: nowrap;
}

.quote-table .q-date {
    color: var(--vice-color);
    white-space: nowrap;
    line-height: 1.5;
}

/* 狀態膠囊 */
.quote-table .status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.2;
        margin-bottom: 0;
}



.quote-table .status-quoting {
    background: var(--main-color-l);
    color: var(--main-color);
}

.quote-table .status-quoting::before {
    background: var(--main-color);
}

.quote-table .status-finalized {
    background: rgba(131, 175, 120, 0.15);
    color: #168939;
}

.quote-table .status-finalized::before {
    background: var(--green-color);
}

.quote-table .status-converted {
    background: rgb(244 67 54 / 8%);
    color: #F44336;
}

.quote-table .status-converted::before {
    background: var(--robinblue-color);
}

.quote-table .status-expired {
    background: #e3e3e3;
    color: #515151;
}
}

.quote-table .status-expired::before {
    background: #bbb;
}

/* 版本歷史展開列 */
.quote-table .version-detail {
    display: none;
}

.quote-table .version-detail.show {
    display: table-row;
}

.quote-table .version-detail > td {
    background: #f8f9fb;
    padding: 0 !important;
}

.quote-table .version-history {
    padding: 6px 16px 10px;
}

.quote-table .versions-head {
    font-size: 13px;
    font-weight: 600;
    color: var(--vice-color);
    padding: 8px 0 4px;
}

.quote-table .versions-head .hint {
    font-weight: 400;
    color: #9aa0a6;
    font-size: 12px;
}

.quote-table .v-line {
    display: grid;
    grid-template-columns: 46px 110px 52px 1fr 110px auto;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-bottom: 1px dashed #dcdfe3;
}

.quote-table .v-line:last-child {
    border-bottom: none;
}

.quote-table .v-num {
    background: #e6edf6;
    color: var(--main-color);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 1px 0;
    border-radius: 4px;
}

.quote-table .v-time,
.quote-table .v-action {
    color: var(--vice-color);
    font-size: 13px;
}

.quote-table .v-creator {
    font-size: 13px;
}

.quote-table .v-amount {
    text-align: right;
    font-size: 13px;
}

.quote-table .v-ops {
    text-align: right;
}

@media (max-width: 992px) {
    .quote-table .v-line {
        grid-template-columns: 46px 1fr auto;
    }

    .quote-table .v-time,
    .quote-table .v-action,
    .quote-table .v-amount {
        display: none;
    }
}

/* ===== 報價單列表快速篩選 Tab ===== */
.quote-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid #e6e8ec;
    padding: 0 4px;
    margin: 6px 0 12px;
}

.quote-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 2px;
    font-size: 16px;
    color: var(--dark-color);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.quote-tab:hover {
    color: var(--main-color);
    text-decoration: none;
}

.quote-tab.active {
    color: var(--main-color);
    border-bottom-color: var(--main-color);
    font-weight: 600;
}

.quote-tab__count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eef0f3;
    color: var(--vice-color);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
}

.quote-tab.active .quote-tab__count {
    background: var(--main-color);
    color: #fff;
}

/* ===== 報價類型選擇卡片 ===== */
.quote-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quote-type-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.quote-type-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.quote-type-card--product:hover {
    border-color: var(--main-color);
}

.quote-type-card--service:hover {
    border-color: #7b6fd8;
}

.quote-type-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.quote-type-card--product .quote-type-card__icon {
    background: rgba(27, 119, 218, 0.1);
    color: var(--main-color);
}

.quote-type-card--service .quote-type-card__icon {
    background: rgba(123, 111, 216, 0.12);
    color: #7b6fd8;
}

.quote-type-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.quote-type-card__subtitle {
    font-size: 13px;
    color: var(--vice-color);
    margin-bottom: 14px;
}

.quote-type-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex: 1;
}

.quote-type-card__features li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.9;
}

.quote-type-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c0c4cb;
}

.quote-type-card__btn {
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}

.quote-type-card--product .quote-type-card__btn {
    background: var(--main-color);
}

.quote-type-card--service .quote-type-card__btn {
    background: #7b6fd8;
}

.quote-type-card__btn:hover {
    filter: brightness(0.92);
}

@media (max-width: 576px) {
    .quote-type-cards {
        grid-template-columns: 1fr;
    }
}

.notification-background-red {
    background: #ffeaea;
}
.q-summary {
    line-height:1.5;
}
/* ===== 排班管理 (StaffSchedule/Index) ===== */
#scheduleTable {
    font-size: 0.85rem;
}

#scheduleTable .schedule-cell {
    cursor: pointer;
    transition: background-color 0.2s;
}

    #scheduleTable .schedule-cell:hover {
        opacity: 0.8;
    }

/* 班別名稱過長時以 … 省略，避免撐開欄位（完整名稱於滑鼠停留時顯示） */
#scheduleTable .cell-text {
    display: inline-block;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

#scheduleTable .sticky-col {
    background: #fff;
}

#scheduleTable thead .sticky-col {
    z-index: 2;
}

/* 假日／週末表頭：日期與星期用紅字（不顯示假日名稱，滑鼠移上以 title 顯示） */
#scheduleTable thead th.holiday-head,
#scheduleTable thead th.holiday-head small {
    color: #ff8787;
}

/* 調色盤 / 模式切換 */
.schedule-palette-bar {
    padding: 8px 12px;
    background: #fcfdfe;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
}

.palette .swatch {
    border: 1.5px solid #e3e8ef;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: .12s;
}

    .palette .swatch:hover {
        border-color: #cbd5e1;
    }

    .palette .swatch.active {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px #e8f0fe;
        font-weight: 600;
    }

    .palette .swatch.erase {
        border-style: dashed;
        color: #7b8794;
    }

.palette.disabled {
    opacity: .4;
    pointer-events: none;
    filter: grayscale(.4);
}

/* 筆刷模式下游標改為十字 */
#scheduleTable.brush-mode .schedule-cell {
    cursor: cell;
    user-select: none;
}

/* 存檔成功瞬間提示 */
@keyframes cellSavedPop {
    0% {
        box-shadow: inset 0 0 0 2px #2f9e44;
    }

    100% {
        box-shadow: none;
    }
}

.schedule-cell.cell-saved {
    animation: cellSavedPop .8s ease;
}

#scheduleToast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1f2937;
    color: #fff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 1080;
}

    #scheduleToast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* ── 支出對帳：訂單分配（ReconcileExpense） ── */
.alloc-cell { min-width: 200px; }
.alloc-summary { display: flex; flex-direction: column; gap: 6px; }
.alloc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.alloc-chips .chip {
    display: inline-block; border-radius: 10px; padding: 1px 8px;
    font-size: 0.72rem; white-space: nowrap;
}
.alloc-chips .chip-order { background: #cfe2ff; color: #084298; border: 1px solid #9ec5fe; }
.alloc-chips .chip-general { background: #e2e3e5; color: #41464b; border: 1px solid #c4c8cb; }
.alloc-chips .chip-none { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.alloc-btn {
    font-size: 0.78rem; padding: 3px 10px; align-self: flex-start;
    background: #fff; color: #0a58ca; border: 1px solid #9ec5fe; border-radius: 4px;
}
.alloc-btn:hover { background: #e7f1ff; }
.readonly-badge {
    display: inline-block; background: #e2e3e5; color: #41464b; border: 1px solid #c4c8cb;
    border-radius: 6px; padding: 4px 8px; font-size: 0.74rem; line-height: 1.4;
}
#allocModal .modal-dialog { max-width: 760px; }
.alloc-table { width: 100%; font-size: 0.86rem; }
.alloc-table th { background: #f1f3f5; padding: 6px 8px; border: 1px solid #dee2e6; font-weight: 500; }
.alloc-table td { padding: 5px 8px; border: 1px solid #dee2e6; vertical-align: middle; }
.alloc-group-summary { font-size: 0.84rem; line-height: 1.7; }
.alloc-group-summary .gs-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed #e9ecef; }
.alloc-group-summary .gs-row:last-child { border-bottom: none; }
.alloc-group-summary .chip {
    display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 0.72rem;
}
.alloc-group-summary .chip-order { background: #cfe2ff; color: #084298; }
.alloc-group-summary .chip-general { background: #e2e3e5; color: #41464b; }
    }

/* =====================================================================
   庫存管理（庫存總覽／長料‧半成品‧成品‧耗材盤點）
   ===================================================================== */

/* --- 區塊標題 --- */
.inv-sub {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.inv-h2-icon {
    margin-right: 6px;
}

/* --- 說明框 --- */
.inv-note {
    background: #f8f9fa;
    border-left: 3px solid var(--main-color);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #666;
    line-height: 1.7;
}

.inv-note b {
    color: var(--main-color);
}

.inv-note--navy { border-left-color: #1E3A6E; }
.inv-note--navy b { color: #1E3A6E; }
.inv-note--teal { border-left-color: #0E8A8A; }
.inv-note--teal b { color: #0E8A8A; }
.inv-note--green { border-left-color: #1D9E75; }
.inv-note--green b { color: #1D9E75; }
.inv-note--purple { border-left-color: #7F77DD; }
.inv-note--purple b { color: #7F77DD; }
/* 帳面為負的常設清單（tasks 22.2③）。刻意沿用 .inv-note 而不是另做一個警示樣式——
   它不是錯誤、也不擋任何操作，是一份要拿去補帳的清單，視覺上該與其他說明同一層級 */
.inv-note--red { border-left-color: var(--red-color); }
.inv-note--red b { color: var(--red-color); }

/* 預計剩餘／目前庫存為負：數字標紅（tasks 22.2③）。
   與 .inv-mx--fin.is-low 同一個手法——標數字、不填底色 */
.inv-neg { color: var(--red-color); }

/* --- 分頁按鈕 --- */
.inv-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.inv-tab {
    padding: 7px 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: #555;
    transition: .15s;
}

.inv-tab:hover { border-color: #bbb; }

.inv-tab--navy.is-on   { background: #1E3A6E; border-color: #1E3A6E; color: #fff; }
.inv-tab--orange.is-on { background: #E8500A; border-color: #E8500A; color: #fff; }
.inv-tab--green.is-on  { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.inv-tab--purple.is-on { background: #7F77DD; border-color: #7F77DD; color: #fff; }
.inv-tab--teal.is-on   { background: #0E8A8A; border-color: #0E8A8A; color: #fff; }

/* --- 表格容器 --- */
.inv-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.inv-table {
    margin: 0;
}

.inv-table th,
.inv-table td {
    white-space: nowrap;
    padding: 5px 8px;
    font-size: 14px;
}

.inv-table-w1050 { min-width: 1050px; }
.inv-table-w1100 { min-width: 1100px; }
.inv-table-w1150 { min-width: 1150px; }
.inv-table-w1250 { min-width: 1250px; }
.inv-table-w950  { min-width: 950px; }
.inv-table-w900  { min-width: 900px; }
/* 🔴 加欄位時**新增一級、不要改上面那幾條** —— 它們是共用的，
   改掉會動到每一張掛同一個 class 的表（同 StockCheckSemi/Index.cshtml:56 的警告）。
   這兩級隨 tasks 29.1 的列尾功能欄新增 */
.inv-table-w1200 { min-width: 1200px; }
.inv-table-w1350 { min-width: 1350px; }

/* --- 表頭 --- */
.inv-th-c     { text-align: center; }
.inv-th-calc  { text-align: center; background: #eef4f8; color: #1E3A6E; }
.inv-th-semi  { text-align: center; background: #e6f4f4; color: #0E8A8A; }
.inv-th-fin   { text-align: center; background: #e9f6ef; color: #1D9E75; }
.inv-th-part  { text-align: center; background: #f3f0fa; color: #7F77DD; }
.inv-th-count { text-align: center; background: #fff8e8; color: #8a6d1f; }

/* --- 群組標籤欄 --- */
.inv-grp {
    font-size: 13px;
    font-weight: 600;
    border-left: 3px solid #ccc;
}

.inv-grp--navy   { color: #1E3A6E; border-left-color: #1E3A6E; }
.inv-grp--orange { color: #E8500A; border-left-color: #E8500A; }
.inv-grp--purple { color: #7F77DD; border-left-color: #7F77DD; }

/* --- 儲存格 --- */
.inv-name {
    font-size: 13px;
    color: #333;
}

/* 料號：灰色小字，置於料件名稱上方、共用同一欄（tasks 29.4）。
   🔴 font-weight 要寫死 400 —— 成品／半成品盤點頁把它放在 .inv-p 裡，
   而 .inv-p 是 700，不覆蓋的話料號會跟著變粗、比名稱還搶眼。
   置中不必處理：.inv-p 本來就是 text-align: center，區塊元素會跟著置中 */
.inv-code {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #999;
}

.inv-cat {
    font-size: 11px;
    color: #999;
}

.inv-c {
    text-align: center;
}

.inv-p {
    text-align: center;
    font-weight: 700;
}

.inv-h {
    text-align: center;
    font-size: 12px;
    color: #666;
}

/* 唯讀（上期結轉） */
.inv-ro {
    text-align: center;
    font-size: 13px;
    color: #999;
}

.inv-ro.is-empty { color: #ccc; }

/* 目前庫存 */
.inv-now {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1E3A6E;
}

.inv-now.is-zero  { color: var(--red-color); }
.inv-now.is-empty { color: #bbb; }
.inv-now--purple  { color: #7F77DD; }
.inv-now--green   { color: #1D9E75; }
.inv-now--teal    { color: #0E8A8A; }

/* 系統計算欄 */
.inv-calc {
    text-align: center;
    background: #f6f9fb;
    font-weight: 600;
    color: #444;
}

.inv-calc.is-neg   { color: var(--red-color); }
.inv-calc.is-empty { color: #ccc; font-weight: 400; }

/* 本月增減 */
.inv-delta { text-align: center; font-size: 13px; }
.inv-delta.is-up    { color: var(--green-color); }
.inv-delta.is-down  { color: var(--red-color); }
.inv-delta.is-flat  { color: #bbb; }
.inv-delta.is-empty { color: #ccc; }

/* 盤點輸入 */
.inv-in-cell { text-align: center; }

.inv-in {
    width: 78px;
    display: inline-block;
    text-align: center;
    padding: 2px 4px;
    height: 30px;
    font-size: 14px;
}

/* --- 矩陣：半成品／成品 --- */
.inv-state {
    text-align: center;
    font-size: 12px;
}

.inv-state--semi { color: #0E8A8A; background: #f4fafa; }
.inv-state--fin  { color: #1D9E75; background: #f5fbf8; }

.inv-mx {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.inv-mx--semi { color: #0E8A8A; }
.inv-mx--semi.is-empty { color: #bbb; font-weight: 400; }

.inv-mx--fin {
    font-weight: 700;
}

/* 🔴 原本的 .is-ok／.is-warn／.is-bad 三色底隨 tasks 29.3a 移除。
   矩陣是密度顯示，整片填色會蓋掉可讀性——那正是這次要拿掉的東西。
   低於安全庫存改成**數字本身變紅、不填背景**（29.3b）。
   .is-empty 留著：那是「—」的灰，不是三色的一員 */
.inv-mx--fin.is-low   { color: var(--red-color); }
.inv-mx--fin.is-empty { background: #fafafa; color: #ddd; font-weight: 400; }

/* 可點的格子（tasks 29.3c）。游標與 hover 是唯一的可點提示——
   加圖示會把數字擠掉，矩陣的每一格只有 64px 寬 */
.inv-mx--pick {
    cursor: pointer;
}

.inv-mx--pick:hover {
    background: #f2f6fa;
}

.inv-mx-th {
    text-align: center;
    width: 64px;
}

/* 🔴 .inv-legend 與 .inv-chip 系列隨 tasks 29.3a 一併移除：
   三色沒了，那個「綠足夠／橘半成品有貨／紅兩邊都沒有」的圖例就是錯的。
   全庫只有庫存總覽的矩陣區在用，刪除前已 grep 確認。 */

/* --- 矩陣格子的彈出視窗（tasks 29.3c）--- */
/* 🔴 內容是從 .main-table 的格子裡搬進 Modal 的，
   `.main-table .red-mark` 與 `.main-table .func-btn` 那兩條**在 Modal 裡不成立**
   （選擇器要求祖先是 .main-table）。所以這裡各補一條同義的，
   而不是去放寬那兩條共用規則 */
#invCellModal .inv-pop-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

#invCellModal .inv-pop-item:last-child {
    border-bottom: none;
}

#invCellModal .inv-pop-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

#invCellModal .inv-pop-qty {
    font-size: 13px;
    color: #666;
    margin: 2px 0 6px;
}

#invCellModal .inv-pop-low {
    color: var(--red-color);
}

#invCellModal .func-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#invCellModal .func-btn button {
    margin: 2px 2px;
}

/* --- 小標 --- */
.inv-caption {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin: 18px 0 8px;
}

/* =====================================================================
   施工看板詳情 — 矩陣進度表 + 批次更新 Modal
   ===================================================================== */

/* 矩陣進度表 stage-cell */
.stage-cell { text-align:center; font-size:14px; line-height:1.4; min-width:90px; }
.stage-cell .stage-icon { font-size:16px; }
.stage-cell .stage-date { color:#666; }
.stage-cell .stage-crew { color:var(--main-color); font-weight:500; }
.stage-done { color:var(--green-color); }
.stage-wip  { color:var(--main-color); }
.stage-na   { color:#ccc; }
/* 排定計畫（tasks 10.26）：已壓日期與人員但還沒開工。刻意比施工中／已完成淡，它是計畫不是進度 */
.stage-plan { color:var(--vice-color); }
/* 逾期排定（tasks 10.64）：排定日已過卻還沒開工，多半是備貨未完成被 10.27 的閘門擋下。
   這一格**要比正常排定顯眼**——它與 .stage-plan 相反，是要人去處理的，不是告知而已 */
.stage-overdue { color:var(--red-color); font-weight:500; }

/* 批次更新 Modal — 外框 */
#batchUpdateModal .modal-dialog { max-width: 1060px !important; }
#batchUpdateModal .modal-header .btn-close { filter: invert(1); }
#batchUpdateModal .modal-body { padding: 20px 24px; }
#batchUpdateModal .modal-footer { border-top:1px solid #eee; padding:12px 24px; display:flex; justify-content:flex-end; gap:8px; }

/* 快捷工具列 */
#batchUpdateModal .batch-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; margin-bottom:18px; padding:12px 16px; background:#f5f7fa; border-radius:8px; }
#batchUpdateModal .batch-toolbar label { width:auto; margin:0; font-weight:600; font-size:16px; white-space:nowrap; }
#batchUpdateModal .batch-toolbar input[type="date"] { width:155px; padding:4px 8px; border:1px solid #d0d5dd; border-radius:5px; font-size:14px; height:34px; }
#batchUpdateModal .batch-toolbar select { width:130px; padding:4px 8px; border:1px solid #d0d5dd; border-radius:5px; font-size:14px; height:34px; appearance:auto; }
#batchUpdateModal .batch-toolbar .select2-container { min-width:200px; max-width:300px; }
/* 拿掉固定 height/overflow:hidden——只留 min-height，選到多人要換行時讓方塊自然變高，
   而不是把已選的人夾在看不到的地方；空狀態的高度由下面 placeholder 的 line-height 保證跟其他欄位一樣 */
#batchUpdateModal .batch-toolbar .select2-container .select2-selection--multiple { min-height:34px; border:1px solid #d0d5dd; border-radius:5px; }
/* select2-selection__rendered 這個 <ul> 是 display:inline-block，預設 vertical-align:baseline，
   瀏覽器會依外層字體留一段「文字下伸部」空白在下面，方塊才會比旁邊欄位高一截——
   這才是真正原因，不是字級/行高本身；用 vertical-align:top 消掉那段留白 */
#batchUpdateModal .batch-toolbar .select2-container .select2-selection--multiple .select2-selection__rendered { vertical-align:top; line-height:18px; }
#batchUpdateModal .batch-toolbar .select2-container .select2-selection--multiple .select2-selection__placeholder { font-size:14px; line-height:32px; }

/* 座次區塊 */
.batch-seat-block { border:1px solid #e0e0e0; border-radius:8px; margin-bottom:14px; overflow:hidden; }
.batch-seat-block:last-child { margin-bottom:0; }
.batch-seat-head { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#f5f7fa; border-bottom:1px solid #e0e0e0; cursor:pointer; user-select:none; }
.batch-seat-head .seat-title { font-weight:600; font-size:16px; flex:1; }
.batch-seat-head .seat-title small { font-weight:400; color:#888; margin-left:8px; font-size:14px; }
.batch-seat-head .seat-toggle { color:#999; font-size:14px; transition:.2s; }
.batch-seat-head.collapsed .seat-toggle { transform:rotate(-90deg); }
.batch-seat-body { padding:0; }

/* 階段列 */
.batch-stage-row { display:flex; align-items:center; border-bottom:1px solid #f0f0f0; padding:8px 16px; gap:10px; flex-wrap:wrap; }
.batch-stage-row:last-child { border-bottom:none; }
.batch-stage-row input[type="checkbox"] { width:16px; height:16px; min-width:16px; cursor:pointer; flex-shrink:0; }
.batch-stage-row .stage-label { width:130px; min-width:130px; font-weight:500; display:flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; }
.batch-stage-row .stage-fields { display:flex; align-items:center; gap:8px; flex:1; flex-wrap:nowrap; }
.batch-stage-row input[type="date"],
.batch-stage-row input[type="text"] { padding:4px 8px; border:1px solid #d0d5dd; border-radius:5px; font-size:14px; height:32px; }
.batch-stage-row input[type="date"] { width:135px; flex-shrink:0; }
.batch-stage-row select { padding:4px 8px; border:1px solid #d0d5dd; border-radius:5px; font-size:14px; height:32px; appearance:auto; }
.batch-stage-row select.sel-status { width:95px; flex-shrink:0; }

/* select2 多選人員 */
.batch-stage-row .select2-container { min-width:250px; max-width:250px; flex:0 1 250px; }
/* 拿掉固定 height/overflow:hidden——只留 min-height，選到多人要換行時讓方塊自然變高，
   而不是把已選的人夾在看不到的地方；空狀態的高度由下面 placeholder 的 line-height 保證跟其他欄位一樣 */
.batch-stage-row .select2-container .select2-selection--multiple { min-height:32px; border:1px solid #d0d5dd; border-radius:5px; padding:2px 4px; }
.batch-stage-row .select2-container .select2-selection--multiple .select2-selection__choice { font-size:14px; padding:1px 6px; margin:1px 2px; }
.batch-stage-row .select2-container .select2-selection--multiple .select2-search__field { font-size:14px; }
/* select2-selection__rendered 這個 <ul> 是 display:inline-block，預設 vertical-align:baseline，
   瀏覽器會依外層字體留一段「文字下伸部」空白在下面，方塊才會比旁邊欄位高一截——
   這才是真正原因，不是字級/行高本身；用 vertical-align:top 消掉那段留白 */
.batch-stage-row .select2-container .select2-selection--multiple .select2-selection__rendered { vertical-align:top; line-height:18px; }
.batch-stage-row .select2-container .select2-selection--multiple .select2-selection__placeholder { font-size:14px; line-height:26px; }


/* =====================================================================
   唯讀欄位（tasks 11.5）

   問題：全站有 40+ 處 `<input readonly>`，但沒有任何樣式與可編輯的輸入框區別
   ——看起來能打字、打了也不會存進去，而畫面不會說話。派工單尤其明顯：
   派工單號／客戶名稱／訂單編號／派工狀態四格都是唯讀，長得跟旁邊的工程名稱一模一樣。

   🔴 **刻意不用 disabled**：disabled 的欄位不會送值，而有些唯讀欄位仍要靠 hidden
   或表單其他欄位帶回。這裡只改「看起來」，不動送不送值。

   取向與既有的 `input:disabled`（#ebebeb 底、灰字）一致，但保留較高的對比
   ——唯讀不是停用，內容仍然是要讀的。
   ===================================================================== */

input[readonly],
textarea[readonly],
select[readonly] {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
    color: var(--darkgray-color);
    cursor: default;
}

/* 唯讀欄位不該有「你可以在這裡打字」的 focus 提示 */
input[readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus {
    border-color: #e0e0e0;
}

/* ⚠️ 唯讀欄位裡若放了連結（例：派工單詳情的訂單編號跳訂單），
   cursor 要還給 <a>，否則整格都是 default 看不出可以點 */
input[readonly] a,
.readonly-cell a {
    cursor: pointer;
}

/* 表格內的唯讀格：本來就不是 input，但要與可輸入的格看得出差別。
   用於各座明細的「尺寸(P數)」（由高度推導）與材料確認的「系統建議」欄（tasks 13.8） */
.readonly-cell {
    background-color: #f7f7f7;
    color: var(--darkgray-color);
}

/* ── 備貨核對「展開用料」的 BOM 小表（navy #1E3A6E，沿用 inv-* 既有色票）─────────────────────
   🔴 **表頭原本是看不見的**：這張表嵌在外層 .main-table 的
   <tbody><tr class="bom-row"><td class="bom-cell"> 裡，於是
   `.main-table tbody tr:nth-child(odd)` 也命中了它 <thead> 底下的 <tr>，
   把 `.main-table thead` 的深色底蓋成 #f8f9fa，配上白字就整片白。
   所以這裡不能只改 thead，要**指名 thead 的 tr** 並把權重拉高過那條規則
   （外層的 :hover 帶 !important，所以底色一律加 !important 才壓得住）。

   色票沿用四個盤點頁的 navy（.inv-note--navy / .inv-tab--navy / .inv-grp--navy 同一個 #1E3A6E、
   底色同 .inv-th-calc 的 #eef4f8），**不另調一個藍**——同一套庫存畫面用兩種藍會看起來像壞掉。 */
.main-table .bom-cell {
    background-color: #eef4f8;
    border-left: 3px solid #1E3A6E;
    padding: 10px 12px;
}

.main-table .bom-cell .bom-title {
    color: #1E3A6E;
}

.main-table .bom-cell .bom-table {
    background-color: #fff;
    border: 1px solid rgba(30, 58, 110, .25);
}

.main-table .bom-cell .bom-table thead tr {
    background-color: #1E3A6E !important;
}

.main-table .bom-cell .bom-table thead th {
    color: #fff;
    font-weight: 600;
}

.main-table .bom-cell .bom-table tbody tr {
    border-bottom: 1px solid rgba(30, 58, 110, .15);
}

.main-table .bom-cell .bom-table tbody tr:nth-child(odd) {
    background-color: #eef4f8 !important;
}

.main-table .bom-cell .bom-table tbody tr:nth-child(even) {
    background-color: #fff !important;
}

.main-table .bom-cell .bom-table tbody tr:hover {
    background-color: #dce8f4 !important;
}

/* 一列摘要格：四格排同一列、每格都不折行（使用者 2026-08-19）。

   用於 Dispatch/Detail 的「備貨單」摘要與 DispatchPicking/Check 的頁首摘要——
   **兩處共用同一份**，它們是同一種東西，各寫一份必然只改到其中一處。

   問題出在 .infobox 的預設值：.info-t 有 min-width:150px，四欄並排時標籤就吃掉大半、
   值被擠到剩幾十 px，再加上 .info-ct 的 word-break:break-all，
   備貨單號「TY20260416-1」會被逐字拆行。這幾個標籤最長 5 個字，不需要 150px。

   🔴 【標籤】寬度要「夠」不是「剛好」。body 是 font-size:17px，最長的
   「備貨項目數」5 個字就是 85px——第一版給 84px，差 1px 讓標籤自己折成兩行（使用者回報）。
   故 100px 再配 white-space:nowrap：標籤是固定的幾個字、永遠不該折行，
   日後有人調字級或多加一個字也不會再從這裡壞掉。

   🔴 【值】單行 ＋ 超出打點點。只寫 nowrap 的話，長案場名稱會**溢出格子**
   （比折行更難看，而且會壓到隔壁欄）；只留 break-all 則回到折行。
   text-overflow:ellipsis 兩者都避開，代價是看不到全文——所以呼叫端
   **要在值上掛 title**，滑過去仍讀得到完整內容。 */
.picking-summary .infobox .info-t {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
}

.picking-summary .infobox .info-ct {
    min-width: 0;              /* flex 子項預設 min-width:auto，不歸零 ellipsis 不會生效 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* ── 廠內加工單「總耗用量」缺口列（tasks 15.5）──────────────────────────
   缺口那一格已經是粗體紅字，但一整排數字裡單看一格不夠顯眼——
   缺口列整列上底色，現場一眼看得出是哪幾項卡住扣帳。

   🔴 用既有的 `--red-color-l`（本檔 :33，rgba(224,72,72,0.08)）而不是自己調一個淺紅——
   那個變數本來就是為了「紅色的淡底」而存在，另調一個會讓警示色在頁與頁之間不一樣。

   ⚠️ `_AttendLayout.cshtml:39` 的 style.css **沒有 cache buster**，
   驗證時若沒生效先 Ctrl+Shift+R 再懷疑程式。 */
#usageTable tbody tr.tap-usage-short {
    background-color: var(--red-color-l);
}

/* ── 廠內加工單「用料明細」的目標分組列（2026-08-20，使用者指示依目標 toggle）──
   組標題是一整列 colspan，要看得出來「這是一組的標頭、不是一筆資料」，
   所以給底色與游標；箭頭用 FontAwesome 既有的 chevron，不另外做圖。

   🔴 沿用既有的 `--lightgray-color`（本檔 :23，#E4E4E4），不自己調一個灰——
   同一頁已經有 mark-gray 等灰階，多一個近似色只會讓層次變糊。

   ⚠️ `_AttendLayout.cshtml:39` 的 style.css **沒有 cache buster**，
   驗證時若沒生效先 Ctrl+Shift+R 再懷疑程式。 */
.main-table tbody tr.tap-group > td {
    background-color: var(--lightgray-color);
    cursor: pointer;
    user-select: none;
}

.main-table tbody tr.tap-group .tap-caret {
    margin-right: 6px;
}

/* ── 料件盤點歸屬預覽（MaterialMaster/Edit，_DimensionPreview.cshtml）── */
.dimension-preview {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

.dimension-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dimension-result .placement-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
}

.dimension-result .placement-pill--current {
    background: #f0f0f0;
    color: #888;
    font-weight: 600;
}

.dimension-result .placement-pill--result {
    background: var(--main-color-l);
    color: var(--main-color);
}

.dimension-result .fa-arrow-right {
    color: #bbb;
}

/* main-table.light 表格預設置中（見全域規則），這裡的表是維度名稱＋值，靠左比較好讀 */
.dimension-preview .main-table.light th,
.dimension-preview .main-table.light td {
    text-align: left;
}

/* SweetAlert2 預設的確認鈕是紫色（#7066e0），改成系統主色藍；「確認刪除／確認…？」這類有取消鈕的決策彈窗由 sweetalert-defaults.js 以行內樣式覆蓋成紅色，呼叫端指定 confirmButtonColor 的也是行內樣式，都不受這條影響 */
.swal2-container button.swal2-styled.swal2-confirm {
    background-color: var(--main-color);
}
.swal2-container button.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(27, 120, 218, .5);
}

/* iOS 的 date／datetime 輸入框由系統自算尺寸並忽略 CSS 的 width/height，塞在 .editbox 這種 flex 容器裡會被撐爆、
   可點區域跟著被裁掉，看起來就是一格灰色點不動（WebKit #198959）。appearance:none 後 CSS 尺寸才生效 */
@supports (-webkit-touch-callout: none) {

    input[type="date"],
    input[type="datetime-local"] {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
        max-width: 100%;
    }

    /* 空值時內部的日期文字高度會摺疊成 0，補一個高度才點得到 */
    input[type="date"]::-webkit-date-and-time-value,
    input[type="datetime-local"]::-webkit-date-and-time-value {
        height: 1.5em;
        text-align: left;
    }
}