﻿
/*換行*/
wrap {
    /*white-space: pre-wrap;*/
    word-wrap: break-word;
    word-break: break-all;
}

/* #region jquery-confirm 樣式**/
.btn-default {
    font-size: 1em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    padding: 8px 30px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-color: #008091 !important;
}

.jconfirm .jconfirm-box {
    max-width:400px;
}
.jconfirm-title-c {
    text-align:center;
}

.jconfirm-buttons {
    float: none !important; /* 移除右浮動 */
    text-align: center !important; /* 讓內部按鈕置中 */
}
.jconfirm-content {
    text-align: center;
    font-size: 1.33rem; /*16pt;*/
}
/* #endregion */
.form-control {
    width: calc(100%);
    min-width: 30px;
    padding: 8px 12px;
    border: 1px solid #cacccc;
    border-radius: 6px;
    margin-bottom: 0;
    font-size: 1em;
    display: block;
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 10px;
}


.icon-btn {
    background-color: transparent;
    border: none;
    padding: 0;
}

    .icon-btn:focus-visible {
        outline: 2px solid var(--main_btn_color_hover);
        outline-offset: 2px;
    }
 

/* #region CheckBox**/
.input-group {
    cursor: pointer;
    position: relative;
    display: table;
    border-collapse: separate;
    margin-bottom:5px;
}


/*#region radio button*/
.radio-warning input[type="radio"] + label::after {
    background-color: #5ccc4d;
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #2e665b;
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: var(--main_btn_color);
}
/*#endregion*/

.checkbox-warning input[type="checkbox"]:checked + label::before {
    background-color: var(--main_btn_color);
    border-color: #F7B52C;
}

/* 大型checkbox樣式 */
.checkbox-large input[type="checkbox"] {
    cursor: pointer;
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--main_btn_color);
}

.checkbox-large label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.checkbox-large input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--object_focus_color) !important;
    outline-offset: 3px;
}

/* 大型radio樣式 */
.radio-large input[type="radio"] {
    cursor: pointer;
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--main_btn_color);
}

.radio-large label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    font-size: 1em;
}

.radio-large input[type="radio"]:focus-visible {
    outline: 3px solid var(--object_focus_color) !important;
    outline-offset: 3px;
}
.checkbox .radio {
    min-height: 27px;
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    display: block;
}
/*.checkbox {
    padding-left: 20px;
    float: left;
}*/

.checkbox input[type="checkbox"] {
    cursor: pointer;
    /*opacity: 0;*/
    z-index: 1;
    outline: none !important;
    width: 15px;
    height: 15px;
}

    .checkbox input[type="checkbox"]:focus-visible,
    .checkbox input[type="radio"]:focus-visible {
        outline: 3px solid var(--object_focus_color) !important;
        outline-offset: 2px;
    }

#goTopButton:focus-visible {
    outline: 3px solid var(--object_focus_color);
    outline-offset: 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(30, 128, 198, 0.3);
}
/* #endregion */

/* #region 禁止textarea調整大小*/
textarea {
    resize: none;
}
/* #endregion */

/* #region 文字樣式*/

.row2stext {
    font-size: 0.875em;
    margin-bottom:10px;
}
.align-label {
    padding-top: 7px;
    margin-bottom: 0;
}
.row2textRed {
    color: red;
}
.row2textBlod {
    font-weight: bold;
}
    /* #endregion */
    /* #region 表格樣式 */
    .table-container {
        overflow-x: auto;
    }

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

thead tr {
    background-color: #b81f6d;
    color: #FFFFFF;
    text-align: center;
}

.custom-table th, .custom-table td {
    padding: 12px 16px;
    border: 1px solid #ddd;
    white-space: nowrap;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #ffeef7;
}

@media (max-width: 768px) {
    .custom-table table, thead, .custom-table tbody, .custom-table th, .custom-table td, .custom-table tr {
        display: block;
    }

    thead {
        display: none;
    }

    .custom-table tr {
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        background-color: #fff;
    }

    .custom-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    .custom-table td::before {
        content: attr(data-label);
        font-weight: bold;
        flex-shrink: 0;
        margin-right: 10px;
        color: #333;
    }
}
/* #endregion */

/* #region 行列*/
.row {
    margin-right: -10px;
    margin-left: -10px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-45, .col-md-5, .col-md-55, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    padding-left: 10px;
    padding-right: 10px;
}
.col-md-12 {
    width: 100%;
}

.form-horizontal .form-group, .sform-group {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 15px;
}
.form-group {
    margin-bottom: 65px;
}
.sform-group {
    margin-bottom: 45px;
}
.radio-group {
    margin-bottom: 25px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9
, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-4, .col-md-4, .col-md45, .col-md-5, .col-md-55, .col-md-6, .col-md-7, .col-md-8, .col-md-9
, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9
, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
}
/* #endregion */

/* #region 日曆*/
/* 可選日期：明顯的淺粉紅底搭配深色文字和深粉紅邊框 */
.xdsoft_calendar td:not(.xdsoft_disabled):not(.xdsoft_other_month) {
    background-color: #ffe8f5; /* 淺粉紅底 */
    color: #6b0d3a; /* 深酒紅色文字（對比度 8.2:1） */
    font-weight: bold;
    border: 2px solid #d946a3; /* 明亮粉紅邊框 */
    box-shadow: 0 1px 3px rgba(184, 31, 109, 0.2); /* 輕微陰影 */
}

/* hover狀態：使用系統主色 */
.xdsoft_calendar td.xdsoft_day:hover {
    background-color: #b81f6d !important; /* 深粉紅底 */
    color: #ffffff !important; /* 白字（對比度 6.2:1） */
    border-color: #a3155a !important;
}

/* 當前選中日期：更深的主色 */
.xdsoft_calendar td.xdsoft_current {
    background-color: #a3155a !important; /* 更深的粉紅 */
    color: #ffffff !important; /* 白字 */
    border-color: #8b1045 !important;
    box-shadow: 0 0 5px rgba(163, 21, 90, 0.5);
}

/* 今天的日期：青綠色標記 */
.xdsoft_calendar td.xdsoft_today {
    background-color: #e0f5f8 !important; /* 淺青綠底 */
    color: #005f6a !important; /* 深青綠字（對比度 7.5:1） */
    border: 2px solid #008091 !important;
}

    .xdsoft_calendar td.xdsoft_today:hover {
        background-color: #008091 !important; /* 青綠底 */
        color: #ffffff !important; /* 白字（對比度 4.8:1） */
    }

/* 禁用日期：灰色且半透明 */
.xdsoft_calendar td.xdsoft_disabled {
    background-color: #f5f5f5 !important;
    color: #999999 !important;
    opacity: 0.6;
}

/* 其他月份日期：更淡的樣式 */
.xdsoft_calendar td.xdsoft_other_month {
    color: #cccccc !important;
    background-color: #fafafa !important;
}
/* #endregion*/


/* #region RWD*/
@media only screen and (max-width: 1000px) {

    .form-group {
        margin-bottom: 30px;
    }
    .radio-group {
        margin-bottom: 20px;
    }
}
@media (min-width: 992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
    .col-md-45, .col-md-55,
    .datetime-input, .date-continuous {
        float: left;
    }
}
@media (min-width: 768px) {
    .control-label {
        padding-top: 8px;
        margin-bottom: 0;
        text-align: right;
    }
}

@media (min-width: 992px) {
    .datetime-input {
        width: 45%;
    }
    /*日期的至*/
    .date-continuous {
        width: 10%;
        margin-top: 10px;
        text-align:center;
    }

    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-md-45 { /*4.5*/
        width: 40%;
    }
    .col-md-5 {
        width: 41.6666666%;
    }
    .col-md-55 { /*5.5*/
        width: 45.83333333%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.333333%;
    }
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-md-12 {
        width: 100%;
    }
}
/* #endregion */


/* #region 超連結 */
.href{
    text-decoration: none;
    color: #0000ff;
}
/* #endregion */

/* #region 欄位驗證 */
.validation-error {
    background-color: #ffe6e6;
    color: #cc0000;
    font-size: 0.875rem;
    padding: 8px 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.validation-error .icon {
    font-weight: bold;
    font-size: 1rem;
}
/* #endregion */