/*
    顏色一律寫成 var(--odd-xxx, 原本的色碼)：
    沒載 css/2nd/odd_theme_2nd.css 的專案取後面的 fallback，顏色與過去完全相同；
    有載的就會跟著深淺色主題走。

    標題列這個淺藍在通用色票裡沒有對應的項目，硬套別的會改到淺色外觀，
    所以在這裡自己定義一組：淺色值照抄原本的色碼，只有深色值是新的。
*/

@supports (color: light-dark(#000000, #ffffff)) {

:root {
    --odd-blockui-header-bg: light-dark(rgba(178, 215, 233, 1), #2f4a58);

    /* 視窗本體的陰影是 jquery.blockUI.customer-2.js 用 inline style 設的，
       box-shadow 沒有被 cssHooks 攔截，var() 在 inline 裡照樣有效 */
    --odd-blockui-surface: light-dark(#F8F8F8, #263238);
    --odd-blockui-text: light-dark(#000, #dbe4e8);
    --odd-blockui-shadow: light-dark(rgb(0, 0, 0, .3), rgb(0, 0, 0, .6));
}

/* jQuery UI 的顏色 cssHooks 會把 .css() 收到的 var() 直接換成裡面的 fallback，
   所以視窗的底色與文字色不能靠 jquery.blockUI.customer-2.js 的 inline style，
   改成在這裡蓋掉那組 inline。限定有包 #blockui 的那層，
   才不會連 blockuiLoading 的透明遮罩一起上色 */
div.blockMsg:has(> div#blockui) {
    background-color: var(--odd-blockui-surface, #F8F8F8) !important;
    color: var(--odd-blockui-text, #000) !important;
}

}

@media all {
    div#blockui {
        display : none;
        width   : 100%;
        height  : 100%;
        overflow: hidden;
        position: relative;
    }

    div.blockui_header_odd {
        width     : calc(100% - 2em);
        position  : absolute;
        top       : 0;
        left      : 0;
        padding   : .5em 1em;
        background: var(--odd-blockui-header-bg, rgba(178, 215, 233, 1));
        text-align: left;

        button {
            float     : right;
            margin-top: 4px;
        }
    }

    div.blockui_main_odd {
        width     : calc(100% - 2em);
        height    : calc(100% - 4.5em);
        margin-top: 2.5em;
        padding   : 1em;
        overflow-x: hidden;
        overflow-y: scroll;

        div.blockui_mainHeader_odd {
            width: 100%;

            div.blockui_title_odd {
                float: left;
            }

            div.blockui_btnArea_odd {
                text-align: right;
                float     : right;
            }
        }
    }

    div#blockuiLoading {
        width : 100%;
        height: 100%;

        div.process {
            width     : calc(100% - 100px);
            height    : calc(100% - 50px - 95px);
            margin    : 95px 50px 50px 50px;
            text-align: center;

            span.process {
                width    : 100%;
                margin   : .5em 0;
                color    : white;
                font-size: 1.3em;
            }
        }
    }


}

@media (min-width: 0) {
    div.blockui_mainHeader_odd {

        div.blockui_title_odd {
            width: 100%;
        }

        div.blockui_btnArea_odd {
            width        : 100%;
            margin-top   : .5em;
            margin-bottom: .5em;
        }
    }
}

@media (min-width: 1000px) {
    div.blockui_mainHeader_odd {

        div.blockui_title_odd {
            width: auto;
        }

        div.blockui_btnArea_odd {
            width: auto;
        }
    }
}


/* 新系統的彈出視窗（js：Oddi_OpenBlockModal）。底色與文字色成對走色票，深淺兩模式都對；
   寬度跟著內容、最寬 46em，太高就在視窗裡捲動，不會整個超出畫面 */
/* 視窗本身與裡面的 hidden 一律有效：視窗或 w3-button 這類 class 只要給了 display，
   就會蓋過瀏覽器內建的 [hidden]，平常該藏起來的視窗會整個畫在頁面上 */
.Oddi_BlockModal[hidden],
.Oddi_BlockModal [hidden] {
    display: none !important;
}

.Oddi_BlockModal {
    box-sizing   : border-box;
    width        : min(46em, 94vw);
    max-height   : 88vh;
    overflow-y   : auto;
    padding      : 1em 1.2em 1.2em;
    border-radius: 0.6em;
    background   : var(--odd-theme-surface, #ffffff);
    color        : var(--odd-theme-text, #263238);
    box-shadow   : 0 0.6em 2em var(--odd-theme-shadow-strong, rgba(38, 50, 56, 0.25));
    text-align   : left;
    cursor       : default;
}

/* 標題列：左邊標題、右邊 ×。× 是關閉對話框的通用符號，可以不加文字 */
.Oddi_BlockModalHead {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 1em;
    margin-bottom  : 0.6em;
}

.Oddi_BlockModalTitle {
    font-size  : 1.1em;
    font-weight: bold;
}

/* 紅底白字：一眼就找得到怎麼關。紅色是語意色，深淺兩模式都配白字 */
.Oddi_BlockModalClose {
    flex         : 0 0 auto;
    padding      : 0.1em 0.5em;
    border       : 0;
    border-radius: 0.35em;
    font-size    : 1.3em;
    line-height  : 1.2;
    cursor       : pointer;
    background   : var(--odd-theme-danger, #c62828);
    color        : var(--odd-theme-primary-text, #ffffff);
}

.Oddi_BlockModalClose:hover {
    background: var(--odd-theme-danger-hover, #8e0000);
    color     : var(--odd-theme-primary-text, #ffffff);
}