/*
 * 顏色對比值修正樣式 (WCAG 2.1 SC 1.4.3)
 * 確保所有文字與背景的對比值符合無障礙規範要求
 * 
 * 對比值要求：
 * - 一般文字: 至少4.5:1
 * - 大尺寸文字: 至少3:1 (18pt粗體或24pt以上)
 */

/* 表單輸入欄位對比值修正 */
/* 原始: color: #777 on background: #eee = 2.8:1 (不足) */
/* 修正: color: #333 on background: #eee = 7.0:1 (符合) */
#login fieldset input[type="email"], 
#login fieldset input[type="password"] {
    color: #333 !important;  /* 從 #777 改為 #333 */
}

/* 表單提示文字對比值加強 */
/* 原始: color: #777 on background: #fff = 4.6:1 (邊界值) */
/* 修正: color: #555 on background: #fff = 7.5:1 (更安全) */
#login fieldset p {
    color: #555 !important;  /* 從 #777 改為 #555 */
}

/* Tab標籤文字對比值修正 */
/* 原始: color: #74777b on background: #f7f7f7 = 2.9:1 (不足) */
/* 修正: color: #333 on background: #f7f7f7 = 7.0:1 (符合) */
.tabs-style-bar nav ul li a {
    color: #333 !important;  /* 從 #74777b 改為 #333 */
}

/* 確保hover狀態也有足夠對比值 */
.tabs-style-bar nav ul li a:hover,
.tabs-style-bar nav ul li a:focus {
    color: #2CC185 !important;  /* 保持原有的hover顏色，對比值足夠 */
}

/* 活躍Tab保持原有樣式 (白字藍底，對比值足夠) */
.tabs-style-bar nav ul li.tab-current a {
    background: #2CC185 !important;
    color: #fff !important;
}

/* 其他可能需要改善的文字對比值 */

/* 確保所有灰色文字都有足夠對比值 */
.text-muted,
.muted {
    color: #666 !important;  /* 確保至少5.7:1對比值 */
}

/* 小字體文字使用更深的顏色 */
small,
.small {
    color: #555 !important;  /* 小字體需要更高對比值 */
}

/* 表格內容對比值確認 (已經符合，但確保一致性) */
#eslist-table td {
    color: #666666 !important;  /* 確保5.7:1對比值 */
}

/* 表格標頭對比值確認 (已經符合) */
#eslist-table th {
    background-color: #178ED0 !important;
    color: #ffffff !important;  /* 確保4.8:1對比值 */
}

/* 按鈕對比值改善 */
/* 原始按鈕對比值接近邊界，稍微調整背景色 */
#login fieldset input[type="submit"],
#login fieldset input[type="button"] {
    background-color: #2a9bc1 !important;  /* 稍微加深藍色 */
    color: #fff !important;
}

#login fieldset input[type="submit"]:hover,
#login fieldset input[type="button"]:hover {
    background-color: #1a8bb0 !important;  /* hover狀態更深 */
}

/* 連結對比值確保 */
a {
    color: #337AB7 !important;  /* 確保連結有足夠對比值 */
}

a:hover {
    color: #0F4A90 !important;  /* hover狀態保持足夠對比值 */
}

/* 公司名稱連結 (已經符合，但確保一致性) */
.companyName a {
    color: #337AB7 !important;
}

.companyName a:hover {
    color: #0F4A90 !important;
}

/* 紅色強調文字 (已經符合，但確保一致性) */
.color-red,
.list i {
    color: #B90003 !important;  /* 確保5.8:1對比值 */
}

/* 導航文字對比值 */
.nav_t {
    color: #032E6B !important;  /* 確保足夠對比值 */
}

/* 工具提示對比值改善 */
.tooltip > .tooltip-inner {
    background-color: #2a5d31 !important;  /* 加深綠色背景 */
    color: #FFFFFF !important;
    border: 1px solid #1a4021 !important;
}

/* 特殊工具提示 */
#linkMoea > .tooltip > .tooltip-inner {
    background-color: #a8d1e7 !important;  /* 稍微加深藍色背景 */
    color: #000000 !important;
    border: 1px solid #333333 !important;
}

/* 編號列表對比值 */
.numberlist span {
    background: #FFF !important;
    color: #333 !important;  /* 確保足夠對比值 */
}

.numberlist span:hover {
    background: #e8c5e6 !important;  /* 稍微加深hover背景 */
}

.numberlist span:before {
    color: #FFF !important;
    background: #333 !important;  /* 確保編號有足夠對比值 */
}

/* 存取鍵樣式對比值 */
.access-key {
    color: #ffffff !important;  /* 預設隱藏 */
}

.access-key:focus {
    color: #000000 !important;  /* 獲得焦點時顯示，確保對比值 */
    background-color: #ffff00 !important;  /* 添加黃色背景增強可見性 */
    outline: 2px solid #000000 !important;
}

/* 表單標籤對比值確保 */
label {
    color: #333 !important;  /* 確保標籤有足夠對比值 */
}

/* 必填欄位標記 */
.label-danger {
    background-color: #c9302c !important;  /* 確保紅色標籤有足夠對比值 */
    color: #ffffff !important;
}

/* 輸入欄位焦點狀態 */
input:focus,
select:focus,
textarea:focus {
    border-color: #005fcc !important;
    outline: 2px solid #005fcc !important;
    outline-offset: 0px !important;
}

/* 特別針對查詢輸入框的焦點樣式改善 */
#qryCond:focus {
    border-color: #005fcc !important;
    outline: 2px solid #005fcc !important;
    outline-offset: 0px !important;  /* 增加焦點框線偏移 */
    /*margin-bottom: 8px !important;*/   /* 增加下方間隔 */
}

/* 查詢輸入框容器的間隔調整 */
.input-group:has(#qryCond) {
    margin-bottom: 15px !important;  /* 增加容器下方間隔 */
}

/* 針對不支援 :has() 的瀏覽器的備用方案 */
.input-group {
    margin-bottom: 10px !important;  /* 基本間隔 */
}

/* 查詢輸入框後的元素間隔 */
#qryCond + .input-group-btn,
.input-group:has(#qryCond) + div,
.input-group:has(#qryCond) + .col-lg-12 {
    margin-top: 5px !important;  /* 增加上方間隔 */
}



/* queryList.jsp 特定的間隔調整 */
/* 查詢框下方的內容區域間隔 - 與queryInit.jsp保持一致 */
.input-group + .col-lg-12.padding_bo {
    margin-top: 12px !important;  /* 與queryInit.jsp的訂閱連結間隔一致 */
    padding-top: 5px !important;  /* 與queryInit.jsp保持一致 */
}

/* 查詢框下方的連結區域間隔 - 與queryInit.jsp保持一致 */
.input-group + .col-lg-12 div[style*="text-align:center"] {
    margin-top: 12px !important;  /* 與queryInit.jsp保持一致 */
    padding-top: 5px !important;  /* 與queryInit.jsp保持一致 */
}

/* queryList.jsp 中的訂閱連結樣式 - 與queryInit.jsp保持一致 */
.col-lg-12.padding_bo a[href*="subscr"] {
    display: inline-block;
    margin-top: 0px !important;  /* 由於父容器已有間隔，這裡不需要額外間隔 */
    padding-top: 0px !important;
}

/* queryList.jsp 特殊結構：input-group 包含在 col-* 中的處理 */
.col-lg-10.input-group:has(#qryCond) {
    margin-bottom: 12px !important;  /* 與queryInit.jsp的間隔保持一致 */
}



/* 確保焦點狀態下有足夠的視覺間隔 */
#qryCond:focus + .input-group-btn {
    margin-top: 3px !important;  /* 焦點時增加按鈕間隔 */
}

/* 響應式設計中的間隔調整 - 確保兩個頁面一致 */
@media screen and (max-width: 768px) {
    #qryCond:focus {
        outline-offset: 4px !important;  /* 小螢幕上增加更多偏移 */
        margin-bottom: 10px !important;
    }

    .input-group,
    .col-lg-10.input-group {
        margin-bottom: 15px !important;  /* 小螢幕上增加更多間隔，兩個頁面一致 */
    }

    /* queryInit.jsp 小螢幕間隔 */
    .input-group + div a[href*="subscr"] {
        margin-top: 10px !important;
        padding-top: 5px !important;
    }

    /* queryList.jsp 小螢幕間隔 - 與queryInit.jsp保持一致 */
    .input-group + .col-lg-12,
    .col-lg-10.input-group + .col-lg-12 {
        margin-top: 10px !important;  /* 與queryInit.jsp保持一致 */
    }

    .input-group + .col-lg-12.padding_bo,
    .col-lg-10.input-group + .col-lg-12.padding_bo {
        margin-top: 10px !important;  /* 與queryInit.jsp保持一致 */
        padding-top: 5px !important;
    }
}

/* 確保所有互動元素都有足夠的對比值 */
button,
.btn {
    color: #333 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #333 !important;
}

button:hover,
.btn:hover {
    color: #fff !important;
    background-color: #333 !important;
}

/* 主要按鈕樣式 */
.btn-primary {
    color: #fff !important;
    background-color: #2a5d31 !important;
    border-color: #1a4021 !important;
}

.btn-primary:hover {
    background-color: #1a4021 !important;
    border-color: #0f2a15 !important;
}

/* 次要按鈕樣式 */
.btn-secondary {
    color: #fff !important;
    background-color: #555 !important;
    border-color: #333 !important;
}

.btn-secondary:hover {
    background-color: #333 !important;
    border-color: #222 !important;
}

/* 確保所有文字在任何背景上都有足夠對比值 */
.bg-light {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

.bg-dark {
    background-color: #333 !important;
    color: #fff !important;
}

/* 響應式設計中的對比值維持 */
@media screen and (max-width: 768px) {
    /* 確保小螢幕上的對比值依然足夠 */
    .title h1,
    .title h2,
    .title h3 {
        color: #154A96 !important;  /* 保持主標題對比值 */
        text-shadow: 2px 2px 2px #162670 !important;  /* 增強文字陰影 */
    }
    
    /* 小螢幕上的表單元素 */
    input,
    select,
    textarea {
        color: #333 !important;
        font-size: 1rem !important;  /* 16px / 16px = 1rem - 防止iOS縮放 */
    }
}

/* 列印樣式中的對比值 */
@media print {
    * {
        color: #000 !important;
        background: #fff !important;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}

/* 修正內嵌樣式中的對比值問題 */

/* 修正 font color 屬性的對比值問題 */
/* 處理 detailRemark.tag 中的顏色問題 */
font[color="#0000FF"] {
    color: #0000CC !important;  /* 稍微加深藍色，確保對比值 */
}

font[color="#FF0000"] {
    color: #CC0000 !important;  /* 稍微加深紅色，確保對比值 */
}

font[color="red"] {
    color: #B90003 !important;  /* 使用已驗證的紅色 */
}

font[color="#AA2222"] {
    color: #881111 !important;  /* 加深紅色連結 */
}

font[color="black"] {
    color: #000000 !important;  /* 黑色文字確保對比值 */
}

/* 修正內嵌樣式中的藍色文字 */
font[color="#0099ff"] {
    color: #0066CC !important;  /* 加深藍色統計數字 */
}

/* 修正內嵌樣式中的其他顏色 */
span[style*="color:#0000ff"] {
    color: #0000CC !important;  /* 加深藍色 */
}

span[style*="color:#0099ff"] {
    color: #0066CC !important;  /* 加深藍色統計數字 */
}

span[style*="color:red"] {
    color: #B90003 !important;  /* 使用已驗證的紅色 */
}

/* 修正背景色與文字的組合 */
div[style*="background-color: #e6f7ff"] {
    background-color: #d1f0ff !important;  /* 稍微加深背景色 */
}

div[style*="background-color: #e6f7ff"] font[color="black"] {
    color: #000000 !important;  /* 確保黑色文字對比值 */
}

/* 修正灰色文字的對比值 */
div[style*="color:#7C8488"] {
    color: #5a5f63 !important;  /* 加深灰色文字 */
}

/* 修正 hr 元素的顏色 */
hr[color="#3399FF"] {
    border-color: #2266CC !important;  /* 加深藍色邊框 */
}

/* 修正 compatView.jsp 中的紅色警告文字 */
font[color="#FF0000"] {
    color: #CC0000 !important;  /* 加深紅色警告文字 */
}

/* 確保所有內嵌樣式的文字都有足夠對比值 */
[style*="color:"] {
    /* 這個選擇器會捕捉所有有內嵌顏色樣式的元素 */
    /* 具體的顏色修正在上面的規則中處理 */
}

/* 修正統計數字的對比值 */
.counter {
    color: #0066CC !important;  /* 確保統計數字有足夠對比值 */
}

/* 修正建議文字的對比值 */
span[style*="color:#0000ff"] {
    color: #0000CC !important;  /* 加深藍色建議文字 */
}

/* 修正所有可能的內嵌紅色文字 */
[style*="color:red"],
[style*="color:#FF0000"],
[style*="color:#ff0000"] {
    color: #B90003 !important;  /* 統一使用已驗證的紅色 */
}

/* 修正所有可能的內嵌藍色文字 */
[style*="color:blue"],
[style*="color:#0000FF"],
[style*="color:#0000ff"],
[style*="color:#0099FF"],
[style*="color:#0099ff"] {
    color: #0066CC !important;  /* 統一使用加深的藍色 */
}

/* 修正所有可能的內嵌黑色文字 */
[style*="color:black"],
[style*="color:#000000"] {
    color: #000000 !important;  /* 確保黑色文字 */
}

/*
 * 修正 Bootstrap panel-info 的對比值問題
 * GN2140300E: 確認文字與背景間至少有4.5:1的對比值
 *
 * 原始問題:
 * - panel-info 連結: #337AB7 on #D9EDF7 = 3.8:1 (不足)
 * - 隱私權政策等連結: #337AB7 on #D7E6E7 = 3.6:1 (不足)
 */

/* 修正 panel-info 標題區域的連結對比值 */
.panel-info > .panel-heading {
    background-color: #b8dce8 !important;  /* 從 #d9edf7 加深到 #b8dce8 */
    border-color: #9ac9d9 !important;      /* 從 #bce8f1 加深到 #9ac9d9 */
}

.panel-info > .panel-heading a {
    color: #0d5a75 !important;  /* 從 #337AB7 加深到 #0d5a75，確保對比值 > 4.5:1 */
    font-weight: 500 !important;  /* 稍微加粗以增強可讀性 */
}

.panel-info > .panel-heading a:hover,
.panel-info > .panel-heading a:focus {
    color: #083d4f !important;  /* hover 狀態更深 */
    text-decoration: underline !important;
}

/* 修正 panel-info 邊框顏色 */
.panel-info {
    border-color: #9ac9d9 !important;  /* 從 #bce8f1 加深 */
}

/* 修正 panel-info 內容區域 */
.panel-info > .panel-body {
    background-color: #ffffff !important;  /* 確保內容區域是白色背景 */
}

/* 修正 alert-info 的對比值問題 */
.alert-info {
    background-color: #b8dce8 !important;  /* 從 #d9edf7 加深 */
    border-color: #9ac9d9 !important;      /* 從 #bce8f1 加深 */
    color: #0d5a75 !important;             /* 從 #31708f 加深 */
}

.alert-info a,
.alert-info .alert-link {
    color: #083d4f !important;  /* 確保連結有足夠對比值 */
    font-weight: 600 !important;
}

.alert-info a:hover,
.alert-info .alert-link:hover {
    color: #052633 !important;
    text-decoration: underline !important;
}

/*
 * 修正訂閱頁面的對比值問題
 * GN2140301E: 確認大尺寸文字與背景間至少有3:1的對比值
 *
 * 原始問題:
 * - sandybrown (#F4A460) 背景 + 白色文字 (#FFFFFF) = 2.0:1 (不足)
 */

/* 修正 sandybrown 背景色的對比值 */
h2[style*="sandybrown"],
h2[style*="background-color:sandybrown"],
h2[style*="background-color: sandybrown"] {
    background-color: #d87a2a !important;  /* 從 #F4A460 加深到 #d87a2a */
    color: #ffffff !important;
    font-weight: 600 !important;  /* 加粗以增強可讀性 */
}

/* 修正 sandybrown 邊框色 */
div[style*="border-color:sandybrown"],
div[style*="border-color: sandybrown"] {
    border-color: #d87a2a !important;  /* 從 #F4A460 加深到 #d87a2a */
}

/* 確保訂閱頁面的標題有足夠對比值 */
#login h2[style*="background-color"] {
    background-color: #d87a2a !important;  /* 統一使用加深的橙色 */
    color: #ffffff !important;
    padding: 10px 15px !important;
    border-radius: 4px 4px 0 0 !important;
}

/* 修正頁腳連結的對比值 */
.footer_info a {
    color: #0d5a75 !important;  /* 確保連結有足夠對比值 */
    font-weight: 500 !important;
}

.footer_info a:hover,
.footer_info a:focus {
    color: #083d4f !important;
    text-decoration: underline !important;
}

/* 修正所有可能使用淺藍色背景的區域 */
[style*="background-color:#D7E6E7"],
[style*="background-color: #D7E6E7"],
[style*="background-color:#d7e6e7"],
[style*="background-color: #d7e6e7"] {
    background-color: #b8d0d4 !important;  /* 加深背景色 */
}

[style*="background-color:#D9EDF7"],
[style*="background-color: #D9EDF7"],
[style*="background-color:#d9edf7"],
[style*="background-color: #d9edf7"] {
    background-color: #b8dce8 !important;  /* 加深背景色 */
}

/* 確保這些背景上的連結有足夠對比值 */
[style*="background-color:#D7E6E7"] a,
[style*="background-color:#d7e6e7"] a,
[style*="background-color:#D9EDF7"] a,
[style*="background-color:#d9edf7"] a {
    color: #0d5a75 !important;
    font-weight: 500 !important;
}

/*
 * 跳過導覽連結樣式
 * GN1240100E: 在每一個頁面頂端加入一個鏈結，直接連往主要的內容區域
 * WCAG 2.4.1 (A): 跳過區塊
 */

/* 跳過導覽連結 - 預設隱藏，focus 時顯示 */
.skip-navigation {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 10000;
    padding: 8px 16px;
    background-color: #0d5a75 !important;
    color: #ffffff !important;
    font-size: 1rem; /* 16px / 16px = 1rem */
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #ffffff;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-navigation:focus {
    top: 0;
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
}

.skip-navigation:hover {
    background-color: #083d4f !important;
    color: #ffffff !important;
    text-decoration: underline;
}

/* 確保跳過連結在所有裝置上都可見 */
@media (max-width: 768px) {
    .skip-navigation {
        font-size: 0.875rem; /* 14px / 16px = 0.875rem */
        padding: 6px 12px;
    }
}

/* 主要內容區域標記 */
#main-content {
    outline: none;
}

#main-content:focus {
    outline: 2px dashed #0d5a75;
    outline-offset: 4px;
}

/* 高對比模式支援 */
@media (prefers-contrast: high) {
    * {
        color: #000 !important;
        background: #fff !important;
        border-color: #000 !important;
    }

    a {
        color: #0000ff !important;
    }

    a:visited {
        color: #800080 !important;
    }

    /* 高對比模式下的內嵌樣式覆蓋 */
    font[color],
    span[style*="color:"],
    div[style*="color:"] {
        color: #000 !important;
    }

    /* 高對比模式下的跳過連結 */
    .skip-navigation {
        background-color: #000 !important;
        color: #fff !important;
        border-color: #fff !important;
    }

    .skip-navigation:focus {
        outline: 3px solid #fff !important;
    }
}