/*Admin Nav Bar 的Css*/

/*#region 後台的CSS */

/* 移除可能與 JavaScript 衝突的 hover 規則 */
/* .navbar-nav li:hover > .dropdown-menu {
    display: block;
} */

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    display: none;
}

/* 確保子菜單在hover時顯示 - 改為依賴 JavaScript 控制 */
.dropdown-submenu > .dropdown-toggle.active + .dropdown-menu {
    display: block;
}

/* 為有子菜單的項目添加箭頭指示器 */
.dropdown-submenu > .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid #6c757d;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

/* 滑鼠懸停時箭頭向右旋轉90度並改變顏色 */
.dropdown-submenu > .dropdown-toggle:hover::after,
.dropdown-submenu > .dropdown-toggle.active::after {
    transform: rotate(90deg);
    border-left-color: white !important;
}

/* 改善下拉選單的顯示效果 */
.dropdown-menu.show {
    display: block !important;
}

/* 確保下拉選單項目有足夠的間距且無空隙 */
.dropdown-item {
    padding: 0.5rem 1rem;
    min-height: 2rem;
    display: flex;
    align-items: center;
    margin: 0;
    border: none;
    transition: background-color 0.15s ease-in-out;
    position: relative;
}

/* 改善下拉選單的間距 */
.dropdown-menu {
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    list-style: none;
}

/* 改善子選單的定位 - 關鍵修改 */
.dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 10px;
    left: 100%;
    margin-left: -1px;
    border-radius: 0 0.25rem 0.25rem 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* 添加這些屬性來確保子選單正確顯示 */
    min-width: 200px;
    z-index: 1001;
}

/* 確保選單項目之間完全沒有空隙 */
.dropdown-menu li {
    margin: 0;
    padding: 0;
    display: block;
}

/* 改善選單項目的 hover 效果 */
.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #212529;
}

/* 父階層選單項目的 hover 效果 - 使用指定的藍色 */
.dropdown-submenu > .dropdown-toggle:hover,
.dropdown-submenu > .dropdown-toggle.active {
    background-color: #0e3f7f !important;
    color: white !important;
}

/* 確保選單容器有足夠的 z-index */
.dropdown-menu {
    z-index: 1000;
}

/* 確保選單項目之間無縫連接 */
.dropdown-item + .dropdown-item {
    border-top: none;
}

/* 改善選單項目的點擊區域 */
.dropdown-item {
    cursor: pointer;
    user-select: none;
}

/* 關鍵：為有子選單的項目添加額外的 padding，確保滑鼠移動時不會離開選單區域 */
.dropdown-submenu > .dropdown-toggle {
    padding-right: 2rem !important;
}

/* 為子選單添加一個透明的延伸區域，確保滑鼠移動時不會離開 */
.dropdown-submenu > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
    background: transparent;
}

/* 確保子選單項目有足夠的寬度 */
.dropdown-submenu .dropdown-item {
    white-space: nowrap;
    min-width: 180px;
}


/*container 95% 滿版*/
@media (min-width: 1200px) {
    .container {
        max-width: 95%;
    }

    .maxContainer1k {
        max-width: 1000px;
    }
}


/*自創共用區 */

.RowMarginLeft0 {
    /* margin-right: 0px; */
    margin-left: 0px;
}

.cursor:hover {
    cursor: pointer;
}

.cursorG:hover{
    cursor:grab;
}

/* LazyLoad 圖片統一：保留原比例並在框內置中 */
img[data-productid],
img[data-product-id],
img.lazyload,
img.lazyload-img {
    object-fit: contain;
    object-position: center center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.notShow {
    display: none;
}
.mt-5p {
    margin-top: 5%;
}

.mb-5p {
    margin-bottom: 5%;
}

.LRC {
    margin-left: auto;
    margin-right: auto;
}

.TAC {
    text-align: center;
}

.smaller-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 85%; /* Reduce the width by 15% */
    max-width: 2.7rem;
    margin-top: 1px;
    height: 1.7rem; /* Reduce the height by 15% */
    font-size: 0.8rem; /* Reduce the font size by 30% */
    padding: 0.2rem 0.4rem;
}

.marginTBAuto{
    margin-top: auto;
    margin-bottom: auto;
}



.smaller-button {
    padding: 0.25rem 0.3rem;
    font-size: 0.75rem;
}

.btn-primary {
    background-color: #0e3f7f;
    border-color: #0e3f7f;
}

.btn-warning {
    background-color: #ec9d55;
    border-color: #ec9d55;
}

.redText {
color:red;
}