/*
Awesome Bootstrap Checkbox
Source: http://www.cssscript.com/demo/pretty-checkbox-radio-inputs-with-bootstrap-and-awesome-bootstrap-checkbox-css/
Modified by Nguyen Tran 7/29/2016
    - Fixed bug with MVC generated check boxes
    - MVC creates hidden input value between check box and label
      <div class="checkbox">
        <input id="Field1" name="Field1" type="checkbox" value="true">
        <input name="Field1" type="hidden" value="false">
        <label for="Field1">
            Field Name
        </label>
      </div>
    - Note: For this checkbox to work, you must have <input> followed by <label>
*/

/* =====================================================
   Glyphicons @font-face 補回
   BS4 移除了 Glyphicons，但 datatables.min.css 的排序圖示
   仍依賴 'Glyphicons Halflings' 字型（\e150 \e155 \e156）；
   字型檔仍保留於 chshb/fonts/，此處補回 @font-face 宣告
   ===================================================== */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/* =====================================================
   BS4 reboot 將 h1-h6 的 margin-top 清為 0，
   補回 BS3 預設的 margin-top: 20px
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 20px;
}
.checkbox {
    padding-left: 20px;
}

    .checkbox label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
    }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

    .checkbox input[type="checkbox"],
    .checkbox input[type="radio"] {
        opacity: 0;
        z-index: 1;
    }

        .checkbox input[type="checkbox"]:focus + label::before,
        .checkbox input[type="checkbox"]:focus + input[type="hidden"] + label::before,
        .checkbox input[type="radio"]:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .checkbox input[type="checkbox"]:checked + label::after,
        .checkbox input[type="checkbox"]:checked + input[type="hidden"] + label::after,
        .checkbox input[type="radio"]:checked + label::after {
            font-family: "FontAwesome";
            content: "\f00c";
        }

        .checkbox input[type="checkbox"]:indeterminate + label::after,
        .checkbox input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
        .checkbox input[type="radio"]:indeterminate + label::after {
            display: block;
            content: "";
            width: 10px;
            height: 3px;
            background-color: #555555;
            border-radius: 2px;
            margin-left: -16.5px;
            margin-top: 7px;
        }

        .checkbox input[type="checkbox"]:disabled + label,
        .checkbox input[type="checkbox"]:disabled + input[type="hidden"] + label,
        .checkbox input[type="radio"]:disabled + label {
            opacity: 0.65;
        }

            .checkbox input[type="checkbox"]:disabled + label::before,
            .checkbox input[type="checkbox"]:disabled + input[type="hidden"] + label::before,
            .checkbox input[type="radio"]:disabled + label::before {
                background-color: #eeeeee;
                cursor: not-allowed;
            }

    .checkbox.checkbox-circle label::before {
        border-radius: 50%;
    }

    .checkbox.checkbox-inline {
        display: inline-block;
        margin-top: 0;
    }

    .radio.radio-inline {
        display: inline-block;
        margin-top: 0;
    }

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="checkbox"]:checked + input[type="hidden"] + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="checkbox"]:indeterminate + input[type="hidden"] + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="checkbox"]:indeterminate + input[type="hidden"] + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
    background-color: #fff;
}

.radio {
    padding-left: 20px;
}

    .radio label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
    }

        .radio label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }

        .radio label::after {
            display: inline-block;
            position: absolute;
            content: " ";
            width: 11px;
            height: 11px;
            left: 3px;
            top: 3px;
            margin-left: -20px;
            border-radius: 50%;
            background-color: #555555;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }

    .radio input[type="radio"] {
        opacity: 0;
        z-index: 1;
    }

        .radio input[type="radio"]:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .radio input[type="radio"]:checked + label::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        .radio input[type="radio"]:disabled + label {
            opacity: 0.65;
        }

            .radio input[type="radio"]:disabled + label::before {
                cursor: not-allowed;
            }

    .radio.radio-inline {
        display: inline-block;
        margin-top: 0;
    }

.radio-primary
    background-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #337ab7;
}

.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de;
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de;
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de;
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e;
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c;
}

input[type="checkbox"].styled:checked + label:after,
input[type="checkbox"].styled:checked + input[type="hidden"] + label:after,
input[type="radio"].styled:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
}

input[type="checkbox"] .styled:checked + label::before,
input[type="checkbox"] .styled:checked + input[type="hidden"] + label::before,
input[type="radio"] .styled:checked + label::before {
    color: #fff;
}

input[type="checkbox"] .styled:checked + label::after,
input[type="checkbox"] .styled:checked + input[type="hidden"] + label::after,
input[type="radio"] .styled:checked + label::after {
    color: #fff;
}

/* =====================================================
   Bootstrap 4 card-* 對應 panel-* 自訂樣式補齊
   讓 style.css / style2.css 的自訂樣式在 BS4 仍有效
   ===================================================== */

/* panel-body → card-body（font-size 已合併至 card-body 主規則） */
.chat-panel .card-body {
    height: 350px;
    overflow-y: scroll;
}

/* tabs-container */
.tabs-container .card-body {
    background: #fff;
    border: 1px solid #e7eaec;
    border-radius: 2px;
    padding: 20px;
    position: relative;
}
.tabs-container .tab-pane .card-body {
    border-top: none;
}
.tabs-container .tabs-left .tab-pane .card-body,
.tabs-container .tabs-right .tab-pane .card-body {
    border-top: 1px solid #e7eaec;
}
.tabs-container .tabs-left .card-body {
    position: static;
}
.tabs-container .tabs-left .card-body {
    width: 80%;
    margin-left: 20%;
}
.tabs-container .tabs-right .card-body {
    width: 80%;
    margin-right: 20%;
}

/* panel-heading → card-header */
.card-header h1,
.card-header h2 {
    margin-bottom: 5px;
}
.blank-panel .card-header {
    padding-bottom: 0;
}
.payments-method .card-header {
    padding: 15px;
}
.payments-method .card-header h5 {
    margin-bottom: 5px;
}
.payments-method .card-header i {
    font-size: 240%;
}

/* panel-primary / success / info / warning / danger → card 색상 */
.card.border-primary {
    border-color: #1ab394;
}
.card.border-primary > .card-header {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
}
.card.border-success {
    border-color: #1c84c6;
}
.card.border-success > .card-header {
    background-color: #1c84c6;
    border-color: #1c84c6;
    color: #ffffff;
}
.card.border-info {
    border-color: #23c6c8;
}
.card.border-info > .card-header {
    background-color: #23c6c8;
    border-color: #23c6c8;
    color: #ffffff;
}
.card.border-warning {
    border-color: #f8ac59;
}
.card.border-warning > .card-header {
    background-color: #f8ac59;
    border-color: #f8ac59;
    color: #ffffff;
}
.card.border-danger {
    border-color: #ed5565;
}
.card.border-danger > .card-header {
    background-color: #ed5565;
    border-color: #ed5565;
    color: #ffffff;
}

/* panel-title → card-title */
.card-title {
    font-size: inherit;
}

/* modal control-label → col-form-label */
.modal .col-form-label {
    text-align: right;
}

/* Bootstrap 4 input-group-addon 相容補丁（外觀以 style.css 定義為準） */
.input-group-addon {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 1px;
    color: inherit;
    font-size: 120%;
    font-weight: 400;
    line-height: 1;
    padding: 6px 12px;
    text-align: center;
}
.input-group > .input-group-addon:not(:last-child) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .input-group-addon:not(:first-child) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .input-group-addon + .form-control,
.input-group > .input-group-addon + select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .form-control + .input-group-addon,
.input-group > select + .input-group-addon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* =====================================================
   Bootstrap 4 字型大小還原 (BS3 base=14px, BS4 base=16px)
   style.css 的 body { font-size: 130% } 在 BS4 html=16px 基底下會變 20.8px
   用 !important 鎖定 body font-size 為 BS3 時的等效大小 (130% × 10px = 13px，
   原始 BS3 設 html=10px → body 130% = 13px；現在直接寫死 13px)
   ===================================================== */
html {
    font-size: 10px !important;
}
body {
    font-size: 13px !important;
}

/* =====================================================
   Bootstrap 4 排版還原補丁
   ===================================================== */

/* form-control: BS3 padding=6px 12px, BS4 padding=.375rem .75rem (約6px 12px 相同，但 height 不同) */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 1px;
}
select.form-control {
    height: 34px;
}
textarea.form-control {
    height: auto;
}

/* BS3 input-sm / input-lg：BS4 移除了這兩個 class，補回以相容舊版元件（含 DataTables）*/
.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
select.input-sm {
    height: 30px;
    line-height: 30px;
}
.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
select.input-lg {
    height: 46px;
    line-height: 46px;
}

/* form-group 水平排列：BS4 移除了 float，改用 flex。
   .form-group 若是 .row 的子元素，需 width:100% 才能佔滿整行；
   若直接含 col-* 則需自帶 row 語意（margin ±15px）。
   統一策略：.form-group 固定 width:100%，並作為 flex 容器讓 col-* 水平排列。
   不再加 margin ±15px，改由父層 .row 負責 gutter。 */
.form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 15px;
    align-items: center;
}
/* 當 .form-group 非 .row 子元素時（獨立使用），補回 gutter */
.form-group:not(.row > .form-group) {
    margin-right: -15px;
    margin-left: -15px;
}
.form-group > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* input-group 高度 */
.input-group-text {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 1px;
}

/* input-group-addon 覆蓋 bootstrap-patch 中的設定，以 style.css 定義為準（已合併至上方，此處保留 flex 結構補丁） */

/* col-form-label (control-label) 顏色對應 */
.has-success .col-form-label {
    color: #1ab394;
}
.has-warning .col-form-label {
    color: #f8ac59;
}
.has-error .col-form-label {
    color: #ed5565;
}

/* BS4 移除了 has-error/has-warning/has-success，補回視覺效果 */
.has-success .form-control {
    border-color: #1ab394;
}
.has-warning .form-control {
    border-color: #f8ac59;
}
.has-error .form-control {
    border-color: #ed5565;
}

/* btn 大小還原 (BS3 padding: 6px 12px, BS4 padding: .375rem .75rem) */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}
.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
}
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    border-radius: 3px;
}

/* card 外觀還原為 BS3 panel 樣子 */
.card {
    border-radius: 0;
    margin-bottom: 20px;
    border: 1px solid #e7eaec;
    box-shadow: none;
}
.card-header {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background-color: #f5f5f5;
    border-color: #ddd;
    font-size: 14px;
}
.card-body {
    padding: 15px;
    font-size: 100%;
}
.tab-pane .card-body {
    font-size: 90%;
}
.card-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-radius: 0;
}

/* BS3 navbar 高度與間距 */
.navbar {
    min-height: 50px;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* BS4 row 的 margin 還原為 BS3 */
.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* BS4 移除了 page-header，補回 */
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}

/* =====================================================
   Sidebar / Navigation 修正
   Bootstrap 4 將 .nav 改為 display:flex (水平)，
   側邊欄 .nav.metismenu 需要強制垂直排列
   ===================================================== */

/* 強制側邊欄頂層 ul.nav 垂直排列（不可套到子選單） */
.navbar-default.navbar-static-side > div > ul.nav,
#side-menu.nav,
#side-menu.metismenu {
    display: block;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 側邊欄每個 li 佔一整行 */
.navbar-static-side .nav > li,
#side-menu > li {
    display: block;
    float: none;
    width: 100%;
}

/* .nav > li > a padding 還原為 BS3 sidebar 樣式 */
.navbar-static-side .nav > li > a {
    padding: 10px 15px;
    display: block;
}
/* Bootstrap 4 的 .nav-link 在側邊欄不需要 flex 樣式 */
.navbar-static-side .nav-link {
    display: block;
}

/* top navbar (.navbar-top-links) 的 li 維持 inline-block */
.nav.navbar-top-links > li {
    display: inline-block;
    float: none;
}

/* =====================================================
   Top Navbar 置右與 label 位置修正
   BS4 移除了 .navbar-right（需用 ml-auto）、
   且 .navbar 改為 flex 讓子元素水平排列
   ===================================================== */

/* .navbar-static-top 內部排列：左側 navbar-header，右側 navbar-right */
.navbar-static-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

/* BS4 移除了 .navbar-header，補回 flex 子元素行為 */
.navbar-header {
    display: flex;
    align-items: center;
    float: none;
    min-height: 50px;
}

/* flex 容器內 float 失效，改用 flex 對齊讓按鈕垂直置中 */
.navbar-header .minimalize-styl-2 {
    float: none;
    margin: 0 5px 0 20px;
    align-self: center;
}

/* .navbar-right 補回 BS3 的靠右行為 */
.navbar-right {
    margin-left: auto !important;
    float: none !important;
    margin-right: 0 !important;
}

/* .navbar-top-links 本身不要 flex，維持 inline-block 排列 */
ul.navbar-top-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* top navbar 裡的 .label / .badge：count-info 已用 absolute 定位，
   其餘一般 label 維持 vertical-align */
.navbar-top-links .label:not(.count-info .label),
.navbar-top-links .badge:not(.count-info .badge) {
    vertical-align: middle;
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1.4;
}

/* =====================================================
   .count-info .label 定位修正
   原 BS3 以 <li> 為 position:relative 基準；
   BS4 flex 破壞了此行為，改以 <a>.count-info 為基準
   ===================================================== */
.navbar-top-links li {
    position: relative;
}

/* 讓 <a class="count-info"> 成為 label 的定位基準 */
a.count-info {
    position: relative;
}

/* label 固定在連結文字的右上角 */
.count-info .label,
.count-info .badge {
    position: absolute !important;
    top: 8px;
    right: 4px;
    font-size: 10px;
    padding: 2px 5px;
    line-height: 12px;
}

/* 修正 .navbar-form-custom 中 form-control 高度被覆蓋的問題 */
.navbar-form-custom .form-control {
    height: 60px;
}

/* col-xs-* 在 BS4 已改名為 col-*，保留 wrapper min-width */
@media (min-width: 768px) {
    #page-wrapper {
        margin: 0 0 0 240px;
    }
}

/* collapsing 動畫期間維持 overflow hidden */
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

/* =====================================================
   panel-* 相容補丁
   殘留於：Form\copyPartial, table_8, table_41, table_48,
           table_p001, Industry\Edit
   BS4 移除了 .panel-group / .panel-title，
   補回視覺相容，避免排版跑掉
   ===================================================== */

/* .panel-group 作為手風琴容器：還原 margin */
.panel-group {
    margin-bottom: 10px;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
    overflow: hidden;
}
.panel-group .panel + .panel {
    margin-top: 5px;
}

/* .panel-title 還原字型大小與行高 */
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small {
    color: inherit;
}

/* =====================================================
   col-form-label 全域置右補丁
   BS4 的 .col-form-label 預設左對齊；
   還原為 BS3 form-horizontal 的置右行為，
   不再限定 .form-horizontal 父層才生效
   ===================================================== */
.col-form-label,
.control-label {
    text-align: right !important;
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
}

/* =====================================================
   form-horizontal 相容補丁
   BS4 移除了 .form-horizontal，
   補回 label 水平對齊與 padding 行為
   ===================================================== */
.form-horizontal .col-form-label,
.form-horizontal .control-label {
    text-align: right !important;
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
}
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}
.form-horizontal .form-group:not(.row > .form-group) {
    margin-right: -15px;
    margin-left: -15px;
}
.form-horizontal .form-group > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* =====================================================
   input-group-addon 結構相容補丁（補充）
   style.css 已定義外觀，此處補 BS4 flex 結構所需的
   邊框連接行為，讓 addon 與 input 正確銜接
   ===================================================== */
.input-group .input-group-addon {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* =====================================================
   nav-header profile dropdown 定位補丁
   BS4 預設用 popper.js 動態計算位置，導致選單飄移；
   強制改回靜態定位，讓選單固定在頭像區塊正下方
   ===================================================== */

/* 父層需要 position:relative 才能讓子層 absolute 定位正確 */
.nav-header {
    position: relative;
}

/* 關閉 popper.js 動態定位，回歸 BS3 靜態下拉 */
.nav-header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    will-change: auto;
    min-width: 160px;
    margin-top: 0;
}

/* 確保 BS4 .show 與 BS3 .open 都能正常顯示 */
.nav-header .dropdown-menu.show,
.nav-header .open > .dropdown-menu {
    display: block !important;
}

/* 隱藏 BS4 自動產生的 caret 箭頭（View 裡已有自訂 <b class="caret">） */
.nav-header .dropdown-toggle::after {
    display: none;
}

/* BS4 .text-muted 帶 !important 會蓋過 style.css 的 nav-header 顏色設定，強制還原 */
.nav-header .text-muted {
    color: #ccc !important;
}

/* BS4 移除了 .caret，補回 BS3 的下三角箭頭樣式 */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* =====================================================
   BS3 → BS4 全域差異補丁
   以下為 BS4 reboot / 移除項目的還原，確保視覺與 BS3 一致
   ===================================================== */

/* -----------------------------------------------------
   1. .label 結構補丁
   BS4 的 .badge 需要 inline-block；BS3 .label 同樣需要，
   style.css 已定義外觀，此處補結構行為
   ----------------------------------------------------- */
.label {
    display: inline-block;
    border-radius: 0.25em;
    font-size: 75%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

/* -----------------------------------------------------
   2. <label> 元素 font-weight
   BS4 reboot 將 label 改為 font-weight: 400，BS3 是 bold
   ----------------------------------------------------- */
label {
    font-weight: 700;
    margin-bottom: 5px;
}

/* -----------------------------------------------------
   3. .pull-left / .pull-right
   BS4 改名為 .float-left / .float-right，補回舊名稱
   ----------------------------------------------------- */
.pull-left {
    float: left !important;
}
.pull-right {
    float: right !important;
}

/* -----------------------------------------------------
   4. .well
   BS4 移除了 .well，補回 BS3 樣式
   ----------------------------------------------------- */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well-sm {
    padding: 9px;
    border-radius: 3px;
}
.well-lg {
    padding: 24px;
    border-radius: 6px;
}

/* -----------------------------------------------------
   5. <p> margin-bottom
   BS4 reboot 改為 1rem (16px)，BS3 是 10px
   ----------------------------------------------------- */
p {
    margin-bottom: 10px;
}

/* -----------------------------------------------------
   6. blockquote
   BS4 移除了左邊框樣式，補回 BS3 外觀
   ----------------------------------------------------- */
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}
blockquote footer,
blockquote small {
    font-size: 80%;
    color: #777;
}
blockquote footer::before,
blockquote small::before {
    content: '\2014 \00A0';
}

/* -----------------------------------------------------
   7. legend
   BS4 reboot 將 legend 字型縮小且移除底線，補回 BS3 樣式
   ----------------------------------------------------- */
legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

/* -----------------------------------------------------
   8. .dl-horizontal
   BS4 移除了此 class，補回水平定義清單樣式
   ----------------------------------------------------- */
@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dl-horizontal dd {
        margin-left: 180px;
    }
}

/* -----------------------------------------------------
   9. .text-hide（圖片替換工具 class）
   BS4 v4.3+ 棄用，補回以防萬一
   ----------------------------------------------------- */
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

/* -----------------------------------------------------
   10. .hidden / .show (BS3 工具 class)
   BS4 改名，補回舊名稱對應
   ----------------------------------------------------- */
.hidden {
    display: none !important;
}
.visible-xs, .visible-sm, .visible-md, .visible-lg {
    display: none !important;
}
@media (max-width: 767px) {
    .visible-xs { display: block !important; }
    .hidden-xs  { display: none  !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm { display: block !important; }
    .hidden-sm  { display: none  !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md { display: block !important; }
    .hidden-md  { display: none  !important; }
}
@media (min-width: 1200px) {
    .visible-lg { display: block !important; }
    .hidden-lg  { display: none  !important; }
}

/* =====================================================
   DataTables 1.10.13 (BS3 版) + Bootstrap 4 相容性修正
   原則：datatables.min.css 已有設定的不重複覆蓋，
         只補 BS4 reboot 破壞但 datatables.min.css 未保護的部分
   ===================================================== */

/* A-0. 根本修正：DataTables BS3 JS 在 wrapper 加 form-inline，
        BS4 把 .form-inline 改為 display:flex，導致所有直接子元素
        (html5buttons, .row, table) 全部變成橫排 flex item，
        float:right 完全失效，版面大亂。補回 display:block。 */
div.dataTables_wrapper.form-inline {
    display: block;
}

/* A. Glyphicons @font-face 已在本檔頂端宣告。
      問題1：排序按鈕文字換行
      BS4 的 th 預設 white-space:normal，需補回 nowrap */
table.dataTable thead th,
table.dataTable thead td {
    white-space: normal;
}

/* B. padding：BS4 reboot 的 th/td padding 與 BS3 不同；補回 BS3 的 8px */
table.dataTable thead > tr > th,
table.dataTable thead > tr > td {
    padding: 8px;
    vertical-align: bottom;
}
table.dataTable tbody > tr > td,
table.dataTable tbody > tr > th,
table.dataTable tfoot > tr > td,
table.dataTable tfoot > tr > th {
    padding: 8px;
    vertical-align: middle;
    line-height: 1.42857143;
}

/* C. 邊框顏色：BS4 .table-bordered 改用 #dee2e6，補回 BS3 的 #e7e7e7。
      重要：只覆蓋 border-color，不覆蓋 border-width，
      保留 datatables.min.css 故意設為 0 的左右/底部邊框寬度（避免雙線）。
      另外 datatables.min.css 將 table.dataTable 設為 border-collapse:separate !important，
      在 BS4 下間隙變明顯，強制覆蓋回 collapse。 */
table.dataTable {
    border-collapse: collapse !important;
}
table.dataTable.table-bordered {
    border-color: #EBEBEB;
}
table.dataTable.table-bordered thead > tr > th {
    background-color: #F5F5F6;
}
table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
    border-color: #e7e7e7;
}
table.dataTable thead > tr > th {
    border-bottom: 1px solid #DDDDDD;
}

/* D. label display：BS4 reboot 將 label 改為 display:block，
      datatables.min.css 未設定 display，需補回 inline */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
    display: inline;
}

/* E. select 外觀：DataTables JS 為 select 加了 input-sm class（BS3 小尺寸）。
      BS4 reboot 覆蓋了 input-sm 樣式，補回 BS3 input-sm 規格：
      height:30px, padding:5px 10px, font-size:12px */
div.dataTables_wrapper div.dataTables_length select {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* F. 搜尋框外觀：DataTables JS 為 input 加了 input-sm class（BS3 小尺寸）。
      補回 BS3 input-sm 規格：height:30px, padding:5px 10px, font-size:12px。
      重要：BS4 .form-control 預設 width:100%，但 BS3 form-inline 環境下搜尋框
      應為 width:auto（只佔自身內容寬度），否則會佔滿整行擠壓右側按鈕。 */
div.dataTables_wrapper div.dataTables_filter input {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: auto;
}

/* G. dataTables_info 垂直對齊：
      BS4 .row 為 flexbox，padding-top 失效，改用 line-height */
div.dataTables_wrapper div.dataTables_info {
    padding-top: 0;
    line-height: 34px;
}

/* H. 問題6：caption 跑到下方
      BS4 reboot 預設 caption-side:bottom，補回 BS3 的 top */
table.dataTable caption {
    caption-side: top;
}

/* DataTable 內的 btn：BS4 全域 box-sizing:border-box 讓 padding 計入欄寬，
   導致固定寬度欄位（如 50px 的刪除欄）的按鈕文字被擠壓換行。
   BS3 預設 content-box，補回 nowrap 確保不換行。 */
table.dataTable td .btn,
table.dataTable td a.btn {
    white-space: nowrap;
}

/* I. CSV/Excel 按鈕置右：
      form-inline 已補回 display:block，float:right 在 .row 的 flex 子項仍無效。
      .row 是 BS4 flexbox，裡面的 col 才是 float 的目標。
      html5buttons 的 col 本身需要用 text-align 或 flex 置右。 */
div.dataTables_wrapper div.html5buttons {
    float: right;
    text-align: right;
    white-space: nowrap;
}
div.dataTables_wrapper div.html5buttons .dt-button,
div.dataTables_wrapper div.html5buttons a.dt-button,
div.dataTables_wrapper div.html5buttons button.dt-button {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 2px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: content-box;
}
div.dataTables_wrapper div.html5buttons .dt-button:hover,
div.dataTables_wrapper div.html5buttons a.dt-button:hover,
div.dataTables_wrapper div.html5buttons button.dt-button:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
    text-decoration: none;
}

/* J. 工具列 .row：BS4 .row 是 flexbox，子 col 預設左對齊；
      html5buttons 在第一個 .row，info 在最後一個 .row，
      讓左側項目靠左、右側項目靠右 */
div.dataTables_wrapper > .row:first-child {
    justify-content: space-between;
    align-items: center;
}
div.dataTables_wrapper > .row:last-child {
    justify-content: space-between;
    align-items: center;
}

/* K. 分頁 <li>/<a>：BS4 重設了 .pagination 的 li/a 樣式，補回 BS3 外觀。
      datatables.min.css 用 text-align:right 對齊 dataTables_paginate，
      但 BS4 ul.pagination 為 display:flex，text-align 對其無效，
      補 margin-left:auto 讓 ul 靠右。 */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 2px 0 2px auto;
    display: flex;
    justify-content: flex-end;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span {
    color: inherit;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 4px 10px;
    line-height: 1.42857143;
    float: left;
    margin-left: -1px;
    text-decoration: none;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span:hover {
    color: inherit;
    background-color: #eee;
    border-color: #ddd;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .active > span:hover {
    background-color: #f4f4f4;
    border-color: #ddd;
    color: inherit;
    cursor: default;
    z-index: 2;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > span,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > a:hover,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > .disabled > span:hover {
    color: #777;
    background-color: #fff;
    border-color: #ddd;
    cursor: not-allowed;
}

/* L. clearfix：確保 wrapper 能包住內部浮動元素 */
div.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}
div.dataTables_wrapper > .row::after {
    content: "";
    display: table;
    clear: both;
}

/* .group 容器（原本靠 float 讓 col-* 水平排列）補回 flex 行為
   若在 .form-group 或 .row 內則以 width:100% 佔滿，不再加 margin ±15px */
.group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}
/* 獨立使用時（非在 .form-group 或 .row 內）補回 gutter */
.group:not(.form-group > .group):not(.row > .group) {
    margin-right: -15px;
    margin-left: -15px;
}
.group > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* BS4 .nav-tabs 為 flex-wrap:wrap，中文 Tab 文字寬度不足時每個字會換行
   強制不換行，維持 Tab 按鈕單行顯示 */
#form-head .nav-link {
    white-space: nowrap;
}

/* style.css (Inspinia BS3 主題) 的 .tabs-container .nav-tabs > li 有 float:left，
   在 BS4 flex 容器裡 float 完全無效，導致 li 回到 block 排列（Tab 文字變直）。
   覆寫為正確的 BS4 flex item 行為 */
.tabs-container .nav-tabs > li {
    float: none;
    display: -ms-flexbox;
    display: flex;
    align-items: stretch;
}
.tabs-container .nav-tabs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* .text-inline：讓 div 以 inline-block 方式排列，
   用於 radio 選項旁的日期選擇器、輸入欄等需與前後元素同行的容器 */
.text-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
}

/* Bootstrap 4 的 .input-group 預設 width:100%，
   放在 .text-inline 內時會撐滿容器造成換行，
   強制改為 width:auto 讓它配合 inline 排列；
   用 !important 覆蓋 HTML inline style="width:120px" */
.text-inline > .input-group {
    width: auto !important;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.text-inline > .input-group > .form-control {
    width: auto !important;
    min-width: 90px;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
/* span.text-inline 直接包含 form-control（如說明輸入框）時，限制寬度讓它不撐滿整行 */
.text-inline > .form-control,
span.text-inline > input.form-control,
span.text-inline > textarea.form-control {
    width: auto !important;
    min-width: 120px;
    max-width: 200px;
}

/* =====================================================
   BS3 相容：.inline.col-sm-* 直接套在非 flex 容器的元素上
   BS3 靠 float 排列；BS4 col-* 改為 flex，移除了 float。
   解法：父容器加 .inline-col-wrap 後改為 flex 容器，
         讓 .inline.col-* 子元素依比例並排
   ===================================================== */
.inline-col-wrap {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.inline[class*="col-"] {
    display: block !important;
    float: none !important;
    -ms-flex: none !important;
    flex: none !important;
    box-sizing: border-box !important;
}
/* 各欄寬 width */
.inline.col-sm-1  { width: 8.333333% !important;  max-width: 8.333333% !important; }
.inline.col-sm-2  { width: 16.666667% !important; max-width: 16.666667% !important; }
.inline.col-sm-3  { width: 25% !important;         max-width: 25% !important; }
.inline.col-sm-4  { width: 33.333333% !important;  max-width: 33.333333% !important; }
.inline.col-sm-5  { width: 41.666667% !important;  max-width: 41.666667% !important; }
.inline.col-sm-6  { width: 50% !important;         max-width: 50% !important; }
.inline.col-sm-7  { width: 58.333333% !important;  max-width: 58.333333% !important; }
.inline.col-sm-8  { width: 66.666667% !important;  max-width: 66.666667% !important; }
.inline.col-sm-9  { width: 75% !important;         max-width: 75% !important; }
.inline.col-sm-10 { width: 83.333333% !important;  max-width: 83.333333% !important; }
.inline.col-sm-11 { width: 91.666667% !important;  max-width: 91.666667% !important; }
.inline.col-sm-12 { width: 100% !important;        max-width: 100% !important; }

/* =====================================================
   BS3 相容：btn-default
   BS4 移除了 btn-default，補回 BS3 原始顏色 (#f0f0f0 背景)
   ===================================================== */
.btn-default {
    color: #333;
    background-color: #fff !important;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: #333;
    background-color: #e6e6e6 !important;
    border-color: #adadad;
}

/* =====================================================
   BS3 相容：btn-secondary
   BS4 的 btn-secondary 是灰底白字，BS3 時期對應 btn-default（白底深灰字）
   ===================================================== */
.btn-secondary {
    color: #333 !important;
    background-color: #fff !important;
    border-color: #ccc !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #333 !important;
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
}

/* =====================================================
   radio-inline / checkbox-inline 水平排列修正
   BS4 下 display:inline-block 的 radio 在窄 col 內仍會換行；
   改用 inline-flex 並加 white-space:nowrap 確保同行顯示
   ===================================================== */
.radio.radio-inline,
.checkbox.checkbox-inline {
    display: inline-flex !important;
    align-items: center;
    margin-top: 0;
    white-space: nowrap;
}

/* col-form-label 在 row 內垂直置中 */
.form-group .row > .col-form-label,
.form-group .row > .control-label {
    align-self: center;
}

/* =====================================================
   form-group > row 內的 col-sm-* 強制寬度
   BS4 的 col-sm-* 需 >= 576px 才觸發 flex-basis；
   在 card-body/tab-pane 內部可能因容器寬度計算異常，
   直接強制設定常用 col 的 flex-basis 確保 grid 正確
   ===================================================== */
.form-group > .row > [class*="col-sm-"],
.form-group > .row.align-items-center > [class*="col-sm-"] {
    flex-shrink: 0;
}
.form-group > .row > .col-sm-1,  .form-group > .row.align-items-center > .col-sm-1  { flex: 0 0 8.333333% !important;  max-width: 8.333333% !important; }
.form-group > .row > .col-sm-2,  .form-group > .row.align-items-center > .col-sm-2  { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
.form-group > .row > .col-sm-3,  .form-group > .row.align-items-center > .col-sm-3  { flex: 0 0 25% !important;        max-width: 25% !important; }
.form-group > .row > .col-sm-4,  .form-group > .row.align-items-center > .col-sm-4  { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.form-group > .row > .col-sm-5,  .form-group > .row.align-items-center > .col-sm-5  { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
.form-group > .row > .col-sm-6,  .form-group > .row.align-items-center > .col-sm-6  { flex: 0 0 50% !important;        max-width: 50% !important; }
.form-group > .row > .col-sm-7,  .form-group > .row.align-items-center > .col-sm-7  { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
.form-group > .row > .col-sm-8,  .form-group > .row.align-items-center > .col-sm-8  { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.form-group > .row > .col-sm-9,  .form-group > .row.align-items-center > .col-sm-9  { flex: 0 0 75% !important;        max-width: 75% !important; }
.form-group > .row > .col-sm-10, .form-group > .row.align-items-center > .col-sm-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
.form-group > .row > .col-sm-11, .form-group > .row.align-items-center > .col-sm-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
.form-group > .row > .col-sm-12, .form-group > .row.align-items-center > .col-sm-12 { flex: 0 0 100% !important;       max-width: 100% !important; }

/* =====================================================
   .group 容器內的 col-sm-* 強制寬度
   BS3 用 .group 做 float 容器，BS4 改為 flex；
   但 col-sm-* 的 flex-basis 在 @media(min-width:576px) 內，
   若被其他規則覆蓋則失效，故此處強制套用
   ===================================================== */
.form-group > .group > [class*="col-sm-"] { flex-shrink: 0; box-sizing: border-box; }
.form-group > .group > .col-sm-1  { flex: 0 0 8.333333% !important;  max-width: 8.333333% !important; }
.form-group > .group > .col-sm-2  { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
.form-group > .group > .col-sm-3  { flex: 0 0 25% !important;        max-width: 25% !important; }
.form-group > .group > .col-sm-4  { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.form-group > .group > .col-sm-5  { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
.form-group > .group > .col-sm-6  { flex: 0 0 50% !important;        max-width: 50% !important; }
.form-group > .group > .col-sm-7  { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
.form-group > .group > .col-sm-8  { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.form-group > .group > .col-sm-9  { flex: 0 0 75% !important;        max-width: 75% !important; }
.form-group > .group > .col-sm-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
.form-group > .group > .col-sm-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
.form-group > .group > .col-sm-12 { flex: 0 0 100% !important;       max-width: 100% !important; }

/* =====================================================
   bootstrap-filestyle: BS3 input-group-btn → BS4 相容
   BS4 移除了 input-group-btn，需模擬 input-group-append 行為
   同時修正 glyphicon 不存在時的 label 對齊
   ===================================================== */
.bootstrap-filestyle.input-group {
    flex-wrap: nowrap;
}
.bootstrap-filestyle .input-group-btn {
    display: flex;
    align-items: stretch;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

/* =====================================================
   N. DataTables scrollX: table-layout: fixed
      問題：_fnScrollDraw 量測欄寬時受 white-space 影響：
        - white-space:nowrap → 欄寬被文字撐大 → thead 與 tbody 錯位
        - white-space:normal → 欄寬縮小 → 捲動消失
      解法：全部捲動容器套用 table-layout:fixed，
            欄寬完全由 DataTables 的 columnDefs 決定，不受 white-space 影響
   ===================================================== */
div.dataTables_scrollHead table.dataTable,
div.dataTables_scrollBody > table.dataTable,
div.dataTables_scrollFoot table.dataTable {
    table-layout: fixed;
}