/* public/sneat/css/customAdmin.css */

/* 麵包屑的字的間距 */
.breadcrumb-adjust {
    padding-top: 0.5rem;
    /* 可依實際需求調整 */
}

.daterangepicker.dropdown-menu {
    z-index: 9999 !important;
}

/* for daily_reports */
input[type="datetime-local"] {
    min-width: 250px;
}

/* for edi_order_detail */
.order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    width: 59px;
    height: 24px;
    padding: 2px 10px;
    font-size: 14px;
    border-radius: 4px;
    /* 對應 border-radius-sm */
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

/*  edi_order_detail 狀態顏色類別 */
.order-badge-not-accepted,
.order-badge-editing {
    background-color: #99A7C8;
}

.order-badge-scheduling,
.order-badge-scheduled,
.order-badge-picking-up,
.order-badge-in-transit,
.order-badge-transport {
    background-color: #FFB100;
}

.order-badge-completed {
    background-color: #1F9B77;
}

.order-badge-cancelled {
    background-color: #99A7C8;
}

.order-badge-abnormal,
.order-badge-invalid-order,
.order-badge-returned {
    background-color: #EF4B61;
}

/*  edi_order_detail table 縱線 */
.th-separator {
    position: relative;
}

.th-separator::after {
    content: '';
    position: absolute;
    top: 30%;
    /* 讓線段不頂到上緣 */
    bottom: 30%;
    /* 讓線段不貼下緣 */
    right: 0;
    width: 2px;
    background-color: #22303E1F;
    /* 淡灰色分隔線 */

}

.menu-super {
    background-color: #4168D4 !important;
}

/* === 主選單項目（未點開） === */
.menu-super .menu-item:not(.open)>.menu-link {
    color: #FFFFFF !important;
}

/* === 主選單項目 hover（未點開） === */
.menu-super .menu-item:not(.open):hover>.menu-link {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #4168D4 !important;
}

/* === 主選單項目 active（含 dropdown）=== */
.menu-super .menu-item.active>.menu-link,
.menu-super .menu-item.menu-dropdown.active>.menu-link {
    color: #4168D4 !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.menu-super .menu-item.open>.menu-link {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* === 子選單項目（未點擊） === */
.menu-super .menu-sub .menu-item>.menu-link,
.menu-super .menu-sub .menu-item>.menu-link i,
.menu-super .menu-sub .menu-item>.menu-link div {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* === 子選單項目 hover === */
.menu-super .menu-sub .menu-item:hover>.menu-link,
.menu-super .menu-sub .menu-item:hover>.menu-link i,
.menu-super .menu-sub .menu-item:hover>.menu-link div {
    color: #4168D4 !important;
}

/* === 子選單項目 active === */
.menu-super .menu-sub .menu-item.active>.menu-link,
.menu-super .menu-sub .menu-item.active>.menu-link i,
.menu-super .menu-sub .menu-item.active>.menu-link div {
    background-color: #6786DD !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.menu-sub .menu-item.active>.menu-link {
    background-color: rgba(34, 48, 62, 0.06) !important;
}

/* ============================================
   Sidebar Menu: allow long labels to wrap
   Keep html.layout-menu-collapsed behavior unchanged.
   ============================================ */
html:not(.layout-menu-collapsed) #layout-menu.layout-menu.menu-vertical .menu-sub > .menu-item > .menu-link {
    min-block-size: 2.625rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

html:not(.layout-menu-collapsed) #layout-menu.layout-menu.menu-vertical .menu-sub > .menu-item > .menu-link > div:not(.badge) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

html:not(.layout-menu-collapsed) #layout-menu.layout-menu.menu-vertical .menu-sub > .menu-item > .menu-link::before {
    top: 50%;
    transform: translateY(-50%);
}

/* ============================================
   English Language Menu Width Adjustment
   ============================================ */
html[lang^="en"] {
    /* Original: 16.25rem. Increased to 22.5rem. */
    --bs-menu-width: 22.5rem !important;
}

/* Adjust toggle button position for wider menu.
   Only apply when NOT collapsed, or when collapsed but hovered (expanded). */
html[lang^="en"]:not(.layout-menu-collapsed) .layout-menu .app-brand .layout-menu-toggle,
html[lang^="en"].layout-menu-hover .layout-menu .app-brand .layout-menu-toggle {
    /* Original: 15.2rem. Diff is ~1.05rem. So 22.5 - 1.05 = 21.45rem */
    inset-inline-start: 21.45rem !important;
}

/* ============================================
   RWD: bill.php 篩選列 — 日期類型 radio buttons
   ============================================ */
.bill-filter-radios {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}

.bill-filter-radios .form-check {
    font-size: 0.7rem;
    line-height: 1.3;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.bill-filter-radios .form-check-input {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.2rem 0 0;
    flex-shrink: 0;
}

.bill-filter-radios .form-check-label {
    font-size: 0.7rem;
    line-height: 1.3;
    margin-bottom: 0;
}

.bill-filter-label {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.bill-filter-control {
    font-size: 0.875rem;
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
}

/* ============================================
   RWD: Responsive Overrides
   ============================================ */

/* --- 平板以下（<= 991px） --- */
@media (max-width: 991.98px) {
    /* 英文選單在平板上縮回預設寬度，避免超出畫面 */
    html[lang^="en"] {
        --bs-menu-width: 16.25rem !important;
    }
    html[lang^="en"]:not(.layout-menu-collapsed) .layout-menu .app-brand .layout-menu-toggle,
    html[lang^="en"].layout-menu-hover .layout-menu .app-brand .layout-menu-toggle {
        inset-inline-start: 15.2rem !important;
    }
}

/* --- 手機（<= 767px） --- */
@media (max-width: 767.98px) {
    /* order-badge：固定寬度改為自適應 */
    .order-badge {
        width: auto;
        min-width: 20px;
        padding: 2px 8px;
        font-size: 12px;
    }

    /* bill 篩選列：radio buttons 換行 */
    .bill-filter-radios {
        flex-wrap: wrap;
        gap: 0.125rem 0.5rem;
    }

    /* datetime-local 輸入框取消 min-width */
    input[type="datetime-local"] {
        min-width: unset;
        width: 100%;
    }

    /* bs-stepper vertical：手機上改為水平堆疊 */
    .bs-stepper.vertical {
        flex-direction: column;
    }
    .bs-stepper.vertical .bs-stepper-header {
        flex-direction: row;
        overflow-x: auto;
        border-right: none !important;
        border-bottom: 1px solid var(--bs-border-color);
        padding-bottom: 0.5rem;
        gap: 0;
    }
    .bs-stepper.vertical .bs-stepper-header .step {
        flex-shrink: 0;
    }
    /* 手機上隱藏步驟副標題，只保留圓圈與主標題 */
    .bs-stepper.vertical .bs-stepper-header .bs-stepper-subtitle {
        display: none;
    }
    .bs-stepper.vertical .bs-stepper-header .bs-stepper-title {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .bs-stepper.vertical .bs-stepper-content {
        width: 100%;
    }
}