/* ============================================================
   Bootstrap 3 → 4 兼容層 (bs3-compat)
   目的：讓專案中殘留的 v3 專屬 class 在 v4.6.2 下保持原行為。
   斷點沿用 v3 定義（xs<768 / sm 768-991 / md 992-1199 / lg≥1200），
   與 responsive.css 的 mobile 樣式（max-width:767px）保持一致。
   新開發請優先使用 v4 原生 class（col-* / d-* / img-fluid 等），
   本文件僅為過渡墊片，日後模板清理完畢即可移除。
   ============================================================ */

/* ---------- 1. 顯隱類 visible-* / hidden-*（v3 斷點） ---------- */
@media (max-width: 767px) {
    .visible-xs,
    .visible-xs-block { display: block !important; }
    .visible-xs-inline { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
    .hidden-xs { display: none !important; }
}
@media (min-width: 768px) {
    .visible-xs,
    .visible-xs-block,
    .visible-xs-inline,
    .visible-xs-inline-block { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm,
    .visible-sm-block { display: block !important; }
    .visible-sm-inline { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
    .hidden-sm { display: none !important; }
}
@media (max-width: 767px), (min-width: 992px) {
    .visible-sm,
    .visible-sm-block,
    .visible-sm-inline,
    .visible-sm-inline-block { display: none !important; }
}
@media (max-width: 767px), (min-width: 992px) {
    .hidden-sm { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md,
    .visible-md-block { display: block !important; }
    .visible-md-inline { display: inline !important; }
    .visible-md-inline-block { display: inline-block !important; }
    .hidden-md { display: none !important; }
}
@media (max-width: 991px), (min-width: 1200px) {
    .visible-md,
    .visible-md-block,
    .visible-md-inline,
    .visible-md-inline-block { display: none !important; }
}
@media (max-width: 991px), (min-width: 1200px) {
    .hidden-md { display: block !important; }
}

@media (min-width: 1200px) {
    .visible-lg,
    .visible-lg-block { display: block !important; }
    .visible-lg-inline { display: inline !important; }
    .visible-lg-inline-block { display: inline-block !important; }
    .hidden-lg { display: none !important; }
}
@media (max-width: 1199px) {
    .visible-lg,
    .visible-lg-block,
    .visible-lg-inline,
    .visible-lg-inline-block { display: none !important; }
}
@media (max-width: 1199px) {
    .hidden-lg { display: block !important; }
}

/* ---------- 2. 列印顯隱 ---------- */
@media print {
    .visible-print,
    .visible-print-block { display: block !important; }
    .visible-print-inline { display: inline !important; }
    .visible-print-inline-block { display: inline-block !important; }
    .hidden-print { display: none !important; }
}

/* ---------- 3. col-xs-* 柵格（v3：xs 為「xs 及以上」，所有視口生效） ----------
   v4 已無 xs 前綴；此處還原 v3 行為：col-xs-* 於所有視口皆生效，
   由後方 col-sm-* / col-md-* / col-lg-* 於各自斷點覆寫。
   同時給 float + width + flex：v4 的 .row 為 flex 容器，
   float 失效時由 flex-basis/max-width 接管，雙環境兼容。 */
[class*="col-xs-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1  { float: left; width: 8.333333%;   flex: 0 0 8.333333%;   max-width: 8.333333%; }
.col-xs-2  { float: left; width: 16.666667%;  flex: 0 0 16.666667%;  max-width: 16.666667%; }
.col-xs-3  { float: left; width: 25%;         flex: 0 0 25%;         max-width: 25%; }
.col-xs-4  { float: left; width: 33.333333%;  flex: 0 0 33.333333%;  max-width: 33.333333%; }
.col-xs-5  { float: left; width: 41.666667%;  flex: 0 0 41.666667%;  max-width: 41.666667%; }
.col-xs-6  { float: left; width: 50%;         flex: 0 0 50%;         max-width: 50%; }
.col-xs-7  { float: left; width: 58.333333%;  flex: 0 0 58.333333%;  max-width: 58.333333%; }
.col-xs-8  { float: left; width: 66.666667%;  flex: 0 0 66.666667%;  max-width: 66.666667%; }
.col-xs-9  { float: left; width: 75%;         flex: 0 0 75%;         max-width: 75%; }
.col-xs-10 { float: left; width: 83.333333%;  flex: 0 0 83.333333%;  max-width: 83.333333%; }
.col-xs-11 { float: left; width: 91.666667%;  flex: 0 0 91.666667%;  max-width: 91.666667%; }
.col-xs-12 { float: left; width: 100%;        flex: 0 0 100%;        max-width: 100%; }
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left: 8.333333%; }
.col-xs-offset-2  { margin-left: 16.666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.333333%; }
.col-xs-offset-5  { margin-left: 41.666667%; }
.col-xs-offset-6  { margin-left: 50%; }
.col-xs-offset-7  { margin-left: 58.333333%; }
.col-xs-offset-8  { margin-left: 66.666667%; }
.col-xs-offset-9  { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.333333%; }
.col-xs-offset-11 { margin-left: 91.666667%; }
.col-xs-offset-12 { margin-left: 100%; }
.col-xs-push-1  { position: relative; left: 8.333333%; }
.col-xs-push-2  { position: relative; left: 16.666667%; }
.col-xs-push-3  { position: relative; left: 25%; }
.col-xs-push-4  { position: relative; left: 33.333333%; }
.col-xs-push-5  { position: relative; left: 41.666667%; }
.col-xs-push-6  { position: relative; left: 50%; }
.col-xs-push-7  { position: relative; left: 58.333333%; }
.col-xs-push-8  { position: relative; left: 66.666667%; }
.col-xs-push-9  { position: relative; left: 75%; }
.col-xs-push-10 { position: relative; left: 83.333333%; }
.col-xs-push-11 { position: relative; left: 91.666667%; }
.col-xs-push-12 { position: relative; left: 100%; }
.col-xs-pull-1  { position: relative; right: 8.333333%; }
.col-xs-pull-2  { position: relative; right: 16.666667%; }
.col-xs-pull-3  { position: relative; right: 25%; }
.col-xs-pull-4  { position: relative; right: 33.333333%; }
.col-xs-pull-5  { position: relative; right: 41.666667%; }
.col-xs-pull-6  { position: relative; right: 50%; }
.col-xs-pull-7  { position: relative; right: 58.333333%; }
.col-xs-pull-8  { position: relative; right: 66.666667%; }
.col-xs-pull-9  { position: relative; right: 75%; }
.col-xs-pull-10 { position: relative; right: 83.333333%; }
.col-xs-pull-11 { position: relative; right: 91.666667%; }
.col-xs-pull-12 { position: relative; right: 100%; }

/* ---------- 3b. col-sm-* 柵格（v3 斷點 ≥768px） ----------
   v4 的 col-sm-* 僅有 flex 且需父層 .row 為 flex 容器；
   此處補上 v3 的 float:left，使非 flex 父層下仍可左右排列。 */
@media (min-width: 768px) {
    .col-sm-1  { float: left; width: 8.333333%;   flex: 0 0 8.333333%;   max-width: 8.333333%; }
    .col-sm-2  { float: left; width: 16.666667%;  flex: 0 0 16.666667%;  max-width: 16.666667%; }
    .col-sm-3  { float: left; width: 25%;         flex: 0 0 25%;         max-width: 25%; }
    .col-sm-4  { float: left; width: 33.333333%;  flex: 0 0 33.333333%;  max-width: 33.333333%; }
    .col-sm-5  { float: left; width: 41.666667%;  flex: 0 0 41.666667%;  max-width: 41.666667%; }
    .col-sm-6  { float: left; width: 50%;         flex: 0 0 50%;         max-width: 50%; }
    .col-sm-7  { float: left; width: 58.333333%;  flex: 0 0 58.333333%;  max-width: 58.333333%; }
    .col-sm-8  { float: left; width: 66.666667%;  flex: 0 0 66.666667%;  max-width: 66.666667%; }
    .col-sm-9  { float: left; width: 75%;         flex: 0 0 75%;         max-width: 75%; }
    .col-sm-10 { float: left; width: 83.333333%;  flex: 0 0 83.333333%;  max-width: 83.333333%; }
    .col-sm-11 { float: left; width: 91.666667%;  flex: 0 0 91.666667%;  max-width: 91.666667%; }
    .col-sm-12 { float: left; width: 100%;        flex: 0 0 100%;        max-width: 100%; }
}

/* ---------- 3c. col-md-* 柵格（v3 斷點 ≥992px） ---------- */
@media (min-width: 992px) {
    .col-md-1  { float: left; width: 8.333333%;   flex: 0 0 8.333333%;   max-width: 8.333333%; }
    .col-md-2  { float: left; width: 16.666667%;  flex: 0 0 16.666667%;  max-width: 16.666667%; }
    .col-md-3  { float: left; width: 25%;         flex: 0 0 25%;         max-width: 25%; }
    .col-md-4  { float: left; width: 33.333333%;  flex: 0 0 33.333333%;  max-width: 33.333333%; }
    .col-md-5  { float: left; width: 41.666667%;  flex: 0 0 41.666667%;  max-width: 41.666667%; }
    .col-md-6  { float: left; width: 50%;         flex: 0 0 50%;         max-width: 50%; }
    .col-md-7  { float: left; width: 58.333333%;  flex: 0 0 58.333333%;  max-width: 58.333333%; }
    .col-md-8  { float: left; width: 66.666667%;  flex: 0 0 66.666667%;  max-width: 66.666667%; }
    .col-md-9  { float: left; width: 75%;         flex: 0 0 75%;         max-width: 75%; }
    .col-md-10 { float: left; width: 83.333333%;  flex: 0 0 83.333333%;  max-width: 83.333333%; }
    .col-md-11 { float: left; width: 91.666667%;  flex: 0 0 91.666667%;  max-width: 91.666667%; }
    .col-md-12 { float: left; width: 100%;        flex: 0 0 100%;        max-width: 100%; }
}

/* ---------- 3d. col-lg-* 柵格（v3 斷點 ≥1200px） ---------- */
@media (min-width: 1200px) {
    .col-lg-1  { float: left; width: 8.333333%;   flex: 0 0 8.333333%;   max-width: 8.333333%; }
    .col-lg-2  { float: left; width: 16.666667%;  flex: 0 0 16.666667%;  max-width: 16.666667%; }
    .col-lg-3  { float: left; width: 25%;         flex: 0 0 25%;         max-width: 25%; }
    .col-lg-4  { float: left; width: 33.333333%;  flex: 0 0 33.333333%;  max-width: 33.333333%; }
    .col-lg-5  { float: left; width: 41.666667%;  flex: 0 0 41.666667%;  max-width: 41.666667%; }
    .col-lg-6  { float: left; width: 50%;         flex: 0 0 50%;         max-width: 50%; }
    .col-lg-7  { float: left; width: 58.333333%;  flex: 0 0 58.333333%;  max-width: 58.333333%; }
    .col-lg-8  { float: left; width: 66.666667%;  flex: 0 0 66.666667%;  max-width: 66.666667%; }
    .col-lg-9  { float: left; width: 75%;         flex: 0 0 75%;         max-width: 75%; }
    .col-lg-10 { float: left; width: 83.333333%;  flex: 0 0 83.333333%;  max-width: 83.333333%; }
    .col-lg-11 { float: left; width: 91.666667%;  flex: 0 0 91.666667%;  max-width: 91.666667%; }
    .col-lg-12 { float: left; width: 100%;        flex: 0 0 100%;        max-width: 100%; }
}

/* ---------- 4. 圖片與浮動工具類 ---------- */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* ---------- 5. btn-default（v3 風格，v4 已移除） ---------- */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

/* ---------- 6. panel 系列（v4 改為 card，此處還原 v3 結構類） ---------- */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
    padding: 15px;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.panel-default {
    border-color: #ddd;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

/* ---------- 7. 表單：has-error / help-block / input-group-addon ---------- */
.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .control-label,
.has-error .help-block {
    color: #a94442;
}
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    white-space: nowrap;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---------- 8. dropdown-menu 舊結構：.dropdown-menu > li > a ---------- */
.dropdown-menu > li > a {
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    color: #333;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

/* ---------- 9. modal-lg 還原 v3 寬度（900px） ---------- */
@media (min-width: 992px) {
    .modal-lg {
        max-width: 900px;
    }
}
@media (min-width: 1200px) {
    .modal-lg {
        max-width: 1058px;
    }
}

/* ---------- 10. table-condensed ---------- */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 5px;
}