:root{
    --primary-color: #0078d6;
    --bg-color: #fafafa;
}
/* *{
    border-radius: 2px !important;
} */
.fi-simple-main, .fi-section, .fi-ta-ctn, .fi-fo-tabs, .fi-tabs, .fi-tabs-item, .fi-modal-window, .fi-dropdown-panel, .fi-input-wrp, .choices__list,
.fi-checkbox-input, .fi-btn, .fi-fo-toggle, .fi-fo-toggle .pointer-events-none, .fi-avatar, .fi-sidebar-item-button, .fi-fieldset, 
div[role=switch], div[role=switch] > span{
    border-radius: 2px !important;
}
.fi-ta-ctn{
    overflow: initial !important;
}

/* 拖曳捲軸 */
::-webkit-scrollbar{
    height: 10px;
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color:rgba(170,170,170,0.1);
}

/* 側邊欄或上邊欄 */
.fi-topbar nav, .fi-sidebar-header{
    background-color: black !important;
}
.fi-topbar-item a{
    border-radius: 1px 1px 0 0!important;
}
.fi-topbar-item-active{
    border-bottom: 1px solid var(--bg-color);
    box-shadow: 0 2px 1px var(--bg-color);
}
.fi-topbar-item .fi-topbar-item-label{
    color: white;
    font-size: 1rem;
}
.fi-topbar-item:hover .fi-topbar-item-label{
    color: var(--primary-color);
}
.fi-topbar-item-active .fi-topbar-item-label{
    color: var(--primary-color);
}
.fi-avatar{
    filter: invert(0.2);
}

/* sidebar */
.fi-sidebar-header-wrapper{
    position: sticky;
    top: 0;
    z-index: 20;
}
.fi-sidebar{
    box-shadow: 1px 0px 5px 0 rgba(0,0,0,.08) !important;
    /* background-color: white !important; */
}
.fi-topbar nav, .fi-sidebar-header{
    height: 5.5rem !important;
}
.fi-sidebar-header div,
.fi-sidebar-header div a{
    width: 100%;
}
/* .fi-sidebar-header button{
    align-self: flex-end;
    margin-bottom: 0px;
} */
.fi-sidebar-header svg.fi-icon-btn-icon {
    /* stroke: var(--primary-color);
    opacity: 0.75; */
}
.fi-sidebar-group-label{
    /* font-weight: 600 !important; */
}

/* logo */
.fi-logo{
    align-items: center;
    /* justify-content: space-between; */
}
.fi-logo svg:first-child{
    height: 100%;
}
.fi-logo svg:last-child{
    margin-left: calc(64px - 3rem);
}
.fi-simple-header .fi-logo svg:last-child{
    display: none;
}

/* login */
.fi-login{
    background-image: url('/images/twcs_login_bg.jpg');
    background-size: cover;
    background-position: center;    
}
.fi-mbtw-login{
    background-image: url('/images/twcs_login_bg.jpg');
    background-size: cover;
    background-position: center;
}

.fi-login main,
.fi-mbtw-login main{
    background: linear-gradient(0deg, rgba(255,255,255, 0.9), white);
    margin: 0 1rem;
}

.fi-login main .fi-simple-header-heading,
.fi-mbtw-login main .fi-simple-header-heading{
    display: none;
}

/* table */
.fi-ta-header{
    overflow-x: auto;
}
.fi-ta-header-heading{
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 1rem;
}

.attachment-col > div > a:first-child{
    display: none;
}

.attachment-download-list {
    list-style: auto;
    margin-left: 1rem;
}

.attachment-download-list a:hover{
    text-decoration: underline;
}

/* footer */
/* .fi-custom-footer{
    position: sticky;
    bottom: 0;
} */

/* other */
.bg-black{
    background-color: black;
}
.self-end{
    align-self: flex-end;
}





.fi-ta-table th:nth-child(2){
    width: 1px;
}
.truncate{
    overflow: visible !important;
}
.fi-tabs-item-label{
    white-space: nowrap;
}
.status{
    padding: 3px 6px;
    border-radius: 2px;
}
.status.primary{
    background-color: rgb(var(--primary-600));
    color: white;
}
.status.success{
    background-color: rgb(var(--success-600));
    color: white;
}
.status.info {
    background-color: rgb(var(--info-600));
    color: white;
}
.status.danger {
    background-color: rgb(var(--danger-500));
    color: white;
}
.status.fail{
    /* color: rgb(var(--danger-500)); */
}
.fi-tabs-item.fi-active.fi-tabs-item-active{
    background-color: rgba(0,0,0,.05);
}
.fi-section-content{
    /* background-color: rgba(0,0,0,.05); */
    /* border-radius: 0.75rem; */
}
.fi-section{
    /* overflow: hidden; */
}
.data-updated{
    color: rgb(217 119 6);
}
div[x-ref="modalContainer"]{
    overflow: initial;
}
.report-btn{
    height: 58px;
}
.fi-fo-field-wrp-label > span {
    font-weight: bold !important;
}
select.fi-select-input.multiple-select {
    background-image: unset;
    padding: 0px;
    height: calc(100vh - 40rem);
}
select.fi-select-input.multiple-select option{
    background-color: transparent;
    padding: 0.5rem;
    margin-bottom: 1px;
}
select.fi-select-input.multiple-select option:checked {
    background: #d97706;
    color: white;
}
.fi-modal-window{
    max-height: calc(100vh - 2rem - 100px);
    overflow: auto;
}
.fi-dropdown-panel{
    overflow: auto;
    max-height: 50vh;
}
.fi-section.custom-fields .fi-section-content-ctn{
    overflow: auto;
    max-height: 50vh;
}
.fi-fo-radio .fi-btn{
    font-weight: normal;
}
.fi-dropdown-trigger .fi-btn{
    background-color: rgba(255, 255, 255, 0.2);
}

.custom-fieldset{
    padding-top: 0.75rem !important;
}
.custom-fieldset .flex:has(.fi-fo-field-wrp-label){
    display: none;
}
.custom-fieldset legend{
    font-weight: bold;
}
.custom-fieldset .col-\[--col-span-default\]{
    align-self: center;
}

.key-section{
    /* background-color: rgba(245, 245, 220, 0.2); */
}

.fi-ta-filters-above-content-ctn {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), transparent);
}

/* .fi-ta-filters-above-content-ctn div:has(button.fi-ac-btn-action){
    text-align: right;
} */

ul.w-72:has(li[x-data="{ label: 'sub_navigation_' }"]) {
    width: unset;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .sm\:grid-cols-3 {
        grid-template-columns: 8rem 10fr 8rem !important;
    }
}

/* report overview */
/* Overview Title */
.overview-title {
    display: flex;
    justify-content: space-between;
    font-size: 1rem; /* 20px，等於 text-xl */
    font-weight: 700; /* 等於 font-bold */
    margin-bottom: 1rem; /* 16px，等於 mb-4 */
}
.overview-title .overview-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: rgba(0, 0, 0, 0.5);
}

/* Overview List (Grid Container) */
.overview-list {
    width: 100%; /* 等於 w-full */
    display: grid;
    grid-template-columns: 1fr; /* 預設每列 1 個，等於 grid-cols-1 */
    gap: 1rem; /* 16px，等於 gap-4 */
}

@media (min-width: 480px) { /* lg: ≥480px */
    .overview-list {
        grid-template-columns: repeat(2, 1fr); /* 等於 lg:grid-cols-4 */
    }
}

@media (min-width: 1440px) { /* lg: ≥1440px */
    .overview-list {
        grid-template-columns: repeat(4, 1fr); /* 等於 lg:grid-cols-4 */
    }
}

/* Overview Item (Each <li>) */
.overview-item {
    display: flex;
    flex-direction: column; /* 等於 flex flex-col */
    padding: 1rem; /* 16px，等於 p-4 */
    background-color: #f3f4f6; /* #f3f4f6，等於 bg-gray-100 */
    border-radius: 0.5rem; /* 8px，等於 rounded-lg */
    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */
}

/* Overview Item Title */
.overview-item-title {
    font-size: 1.125rem; /* 18px，等於 text-lg */
    font-weight: 600; /* 等於 font-semibold */
    margin-bottom: 0.5rem; /* 8px，等於 mb-2 */
}

/* Overview Item Row */
.overview-item-row {
    display: flex;
    justify-content: space-between; /* 等於 flex justify-between */
    margin-top: 0.5rem; /* 8px，等於 mt-2 */
}

/* Overview Label */
.overview-label {
    color: #4b5563; /* #4b5563，等於 text-gray-600 */
}

/* Overview Value */
.overview-value {
    font-weight: 500; /* 等於 font-medium */
}