/* ========================================
   針對您的 color.scss 的深色模式覆蓋
   Based on your actual color.scss variables
   ======================================== */

/* 
   原始的 color.scss 定義：
   $color-yellow: #F5D44A
   $color-green: #00848A
   $color-lightgreen: #EDF1F4
   $color-orange: #FFAA80
   $color-white: #ffffff
   $color-red: #ED252C
   $color-pink: #FD4E5A
   $color-blue: #0356AB
   $color-purple: #4E0796
   $color-litblue: #37BAFA
   $color-litblue2: #0768AC
   $color-litGray: #ECF0F1
   $color-litGray2: #ede3db
   $color-midGray: #b0b0b0
   $color-midGray2: #666666
   $color-darkGray: #222222
   $color-litblack: #4f4f4f
   $mainColor: #16828F
   $mainColor1: #04C0CE
   $secondColor: #153161
   $textColor: #333
*/

/* ========================================
   深色模式下的顏色映射
   ======================================== */

html[data-theme="dark"] {
    /* 主要顏色變數覆蓋 */
    --main-color: #4db8ff; /* 原 #16828F 改為淺藍 */
    --main-color-1: #64d4e0; /* 原 #04C0CE 改為淺青 */
    --second-color: #4a6fa5; /* 原 #153161 改為淺深藍 */
    --text-color: #e0e0e0; /* 原 #333 改為淺灰 */
    /* 其他顏色映射 */
    --color-black: black; /* 純白色 */
    --color-pureWhite: #ffffff; /* 純白色 */
    --color-yellow: #f5d44a; /* 黃色保持 */
    --color-green: #00a0a8; /* 綠色稍微調亮 */
    --color-lightgreen: #2d3d4d; /* 淺綠改為深灰藍 */
    --color-orange: #ffaa80; /* 橘色保持 */
    --color-white: #1e1e1e; /* 白色改為深灰 */
    --color-red: #ff5555; /* 紅色稍微調亮 */
    --color-pink: #ff6b7a; /* 粉色稍微調亮 */
    --color-blue: #4a7fd4; /* 藍色調亮 */
    --color-purple: #8a5dd6; /* 紫色調亮 */
    --color-litblue: #5fc8ff; /* 淺藍保持 */
    --color-litblue2: #3d8ac8; /* 淺藍2調整 */
    --color-litgray: #2d2d2d; /* 淺灰改為深灰 */
    --color-litgray2: #3d3d3d; /* 淺灰2改為稍淺深灰 */
    --color-midgray: #888888; /* 中灰保持可見度 */
    --color-midgray2: #999999; /* 中灰2調亮 */
    --color-darkgray: #e0e0e0; /* 深灰改為淺灰（反轉） */
    --color-litblack: #c0c0c0; /* 淺黑改為淺灰 */

}

/* ========================================
   文字顏色覆蓋
   ======================================== */

#ui-id-1 .ui-menu-item {
    color: var(--color-black);
}
/* 覆蓋 $textColor: #333 */
html[data-theme="dark"] {
    color: var(--text-color, #e0e0e0) !important;
}

    html[data-theme="dark"] * {
        color: inherit;
    }

/*     特定文字顏色覆蓋  文字改亮灰\*/
/*內頁*/
    html[data-theme="dark"] .page nav .topArea ul li a,
    html[data-theme="dark"] .page nav .topArea ul li span,
    html[data-theme="dark"] .page .page-container .left-dept ul li a,
    /*首頁*/
    html[data-theme="dark"] .ui-state-hover, .ui-state-active,
    html[data-theme="dark"] nav .topArea ul li,
    html[data-theme="dark"] nav .topArea ul li input,
    html[data-theme="dark"] nav .topArea ul li #toggleSearch,
    html[data-theme="dark"] .navbar-dark .navbar-nav .nav-link,
    html[data-theme="dark"] #ft_tab span,
    html[data-theme="dark"] #ft_slider_content a,
    html[data-theme="dark"] .container-fluid footer,
    html[data-theme="dark"] .container-fluid footer .footerRight .footer-info,
    html[data-theme="dark"] .container-fluid .fatfooter ul li .title3 a,
    html[data-theme="dark"] [style*="color: #333"],
    html[data-theme="dark"] [style*="color:#333"],
    html[data-theme="dark"] .text-color,
    html[data-theme="dark"] .textColor {
        color: var(--text-color, #e0e0e0) !important;
    }


    html[data-theme="dark"] .container-fluid .fatfooter ul li a {
        color: var(--text-color, #e0e0e0) !important;
    }
    /* 覆蓋深灰文字 #222222 */
    html[data-theme="dark"] [style*="color: #222222"],
    html[data-theme="dark"] [style*="color:#222222"],
    html[data-theme="dark"] .color-darkGray,
    html[data-theme="dark"] .darkGray {
        color: var(--color-darkgray, #e0e0e0) !important;
    }

    /* 覆蓋中灰文字 #666666 */
    html[data-theme="dark"] [style*="color: #666666"],
    html[data-theme="dark"] [style*="color:#666666"],
    html[data-theme="dark"] .color-midGray2,
    html[data-theme="dark"] .midGray2 {
        color: var(--color-midgray2, #999999) !important;
    }

    /* 覆蓋淺黑文字 #4f4f4f */
    html[data-theme="dark"] [style*="color: #4f4f4f"],
    html[data-theme="dark"] [style*="color:#4f4f4f"],
    html[data-theme="dark"] .color-litblack,
    html[data-theme="dark"] .litblack {
        color: var(--color-litblack, #c0c0c0) !important;
    }

    /* ========================================
   背景顏色覆蓋
   ======================================== */
/*內頁 */

    html[data-theme="dark"] .page .header::before {
        background: unset;
    }

    /* 覆蓋白色背景 #ffffff 用在大背景*/
    html[data-theme="dark"] [style*="background-color: rgba(255, 255, 255, 0.5)"],
    html[data-theme="dark"] [style*="background-color: #ffffff"],
    html[data-theme="dark"] [style*="background-color:#ffffff"],
    html[data-theme="dark"] [style*="background: #fff"],
    html[data-theme="dark"] [style*="background:#fff"],
    html[data-theme="dark"] form,
    html[data-theme="dark"] .page > .container-fluid.col-lg-12,
    html[data-theme="dark"] .header,
    html[data-theme="dark"] .color-white {
        background-color: var(--color-white, #1e1e1e) !important;
    }
        html[data-theme="dark"] .header .navbar > .container-fluid:nth-child(1) {
            background-color: initial !important;
        }

/*     覆蓋淺綠背景 #EDF1F4  用在右側按鈕*/
        html[data-theme="dark"] #ft_slider_content,
        html[data-theme="dark"] #ft_tab,
        html[data-theme="dark"] .fixNav ul li,
        html[data-theme="dark"] .container-fluid .gov ul.desktop li a,
        html[data-theme="dark"] .ct .in a,
        html[data-theme="dark"] [style*="background-color: #EDF1F4"],
        html[data-theme="dark"] [style*="background-color:#EDF1F4"],
        html[data-theme="dark"] .bg-lightgreen,
        html[data-theme="dark"] .color-lightgreen {
            background-color: var(--color-lightgreen, #2d3d4d) ;
        }

    /* 覆蓋淺灰背景 #ECF0F1 */
/*內頁*/
    html[data-theme="dark"] .tab-1 ul li a.active,
    html[data-theme="dark"] .left-dept ul,
    html[data-theme="dark"] .page .page-container .right-content .inside-box,
    html[data-theme="dark"] [style*="background-color: #ECF0F1"],
    html[data-theme="dark"] [style*="background-color:#ECF0F1"],
    html[data-theme="dark"] .bg-litGray,
    html[data-theme="dark"] .color-litGray {
        background-color: var(--color-litgray, #2d2d2d) !important;
    }

    /* 覆蓋淺灰2背景 #ede3db */
    html[data-theme="dark"] [style*="background-color: #ede3db"],
    html[data-theme="dark"] [style*="background-color:#ede3db"],
    html[data-theme="dark"] .bg-litGray2,
    html[data-theme="dark"] .color-litGray2 {
        background-color: var(--color-litgray2, #3d3d3d) !important;
    }

    /* 覆蓋淺灰2背景 #ede3db */
    /*內頁*/
    html[data-theme="dark"] .tab-1 ul li a,
    html[data-theme="dark"] [style*="background-color: #ede3db"],
    html[data-theme="dark"] [style*="background-color:#ede3db"],
    html[data-theme="dark"] .bg-litGray2,
    html[data-theme="dark"] .color-litGray2 {
        background-color: var(--color-litgray2, #3d3e3e) !important;
    }

    /* ========================================
   主要顏色覆蓋
   ======================================== */

    /* 覆蓋主色 #16828F */
    html[data-theme="dark"] .title .en,
    html[data-theme="dark"] .title2 .en,
    html[data-theme="dark"] [style*="color: #16828F"],
    html[data-theme="dark"] [style*="color:#16828F"],
    html[data-theme="dark"] [style*="background-color: #16828F"],
    html[data-theme="dark"] [style*="background-color:#16828F"],
    html[data-theme="dark"] .mainColor,
    html[data-theme="dark"] .bg-mainColor {
        color: var(--main-color, #4db8ff) !important;
    }

    html[data-theme="dark"] [style*="background-color: #16828F"],
    html[data-theme="dark"] [style*="background-color:#16828F"],
    html[data-theme="dark"] .bg-mainColor {
        background-color: var(--main-color, #4db8ff) !important;
        color: #000000 !important; /* 深色背景用淺色文字 */
    }

    /* 覆蓋主色1 #04C0CE  亮藍色*/
        html[data-theme="dark"] nav .mainMenu .navbar-nav li .dropdown-item:hover,
        html[data-theme="dark"] [style*="color: #04C0CE"],
        html[data-theme="dark"] [style*="color:#04C0CE"],
        html[data-theme="dark"] .mainColor1 {
            color: var(--main-color-1, #64d4e0) !important;
        }

    html[data-theme="dark"] [style*="background-color: #04C0CE"],
    html[data-theme="dark"] [style*="background-color:#04C0CE"],
    html[data-theme="dark"] .bg-mainColor1 {
        background-color: var(--main-color-1, #64d4e0) !important;
        color: #000000 !important;
    }

    /* 覆蓋次要顏色 #153161 */
    html[data-theme="dark"] [style*="color: #153161"],
    html[data-theme="dark"] [style*="color:#153161"],
    html[data-theme="dark"] .secondColor {
        color: var(--second-color, #4a6fa5) !important;
    }

    html[data-theme="dark"] [style*="background-color: #153161"],
    html[data-theme="dark"] [style*="background-color:#153161"],
    html[data-theme="dark"] .bg-secondColor {
        background-color: var(--second-color, #4a6fa5) !important;
    }

    /* ========================================
   其他顏色覆蓋
   ======================================== */

    /* 藍色 #0356AB */
    html[data-theme="dark"] [style*="color: #0356AB"],
    html[data-theme="dark"] [style*="color:#0356AB"],
    html[data-theme="dark"] .color-blue {
        color: var(--color-blue, #4a7fd4) !important;
    }

    html[data-theme="dark"] [style*="background-color: #0356AB"],
    html[data-theme="dark"] [style*="background-color:#0356AB"],
    html[data-theme="dark"] .bg-blue {
        background-color: var(--color-blue, #4a7fd4) !important;
    }

    /* 紫色 #4E0796 */
    html[data-theme="dark"] [style*="color: #4E0796"],
    html[data-theme="dark"] [style*="color:#4E0796"],
    html[data-theme="dark"] .color-purple {
        color: var(--color-purple, #8a5dd6) !important;
    }

    html[data-theme="dark"] [style*="background-color: #4E0796"],
    html[data-theme="dark"] [style*="background-color:#4E0796"],
    html[data-theme="dark"] .bg-purple {
        background-color: var(--color-purple, #8a5dd6) !important;
    }

    /* 紅色 #ED252C */
    html[data-theme="dark"] [style*="color: #ED252C"],
    html[data-theme="dark"] [style*="color:#ED252C"],
    html[data-theme="dark"] .color-red {
        color: var(--color-red, #ff5555) !important;
    }

    html[data-theme="dark"] [style*="background-color: #ED252C"],
    html[data-theme="dark"] [style*="background-color:#ED252C"],
    html[data-theme="dark"] .bg-red {
        background-color: var(--color-red, #ff5555) !important;
    }

    /* 綠色 #00848A */
    html[data-theme="dark"] [style*="color: #00848A"],
    html[data-theme="dark"] [style*="color:#00848A"],
    html[data-theme="dark"] .color-green {
        color: var(--color-green, #00a0a8) !important;
    }

    html[data-theme="dark"] [style*="background-color: #00848A"],
    html[data-theme="dark"] [style*="background-color:#00848A"],
    html[data-theme="dark"] .bg-green {
        background-color: var(--color-green, #00a0a8) !important;
    }

/*  原本的亮字改深藍  */
    html[data-theme="dark"] div:where(.swal2-container),
    html[data-theme="dark"] div:where(.swal2-html-container),
    html[data-theme="dark"] .moreBtn,
    html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li a:hover,
    html[data-theme="dark"] nav .mainMenu .navbar-nav li .dropdown-item:hover,
    html[data-theme="dark"] [style*="background-color:#00848A"] {
        color: var(--color-lightgreen, #2d3d4d) !important;
    }
            html[data-theme="dark"] .moreBtn:hover {
                color: var( --color-pureWhite, #2d3d4d) !important;
            }
            /* ========================================
   連結樣式
   ======================================== */
            /* 確保連結在深色背景下可見 */
            html[data-theme="dark"] a {
                /*color: var(--main-color, #4db8ff) !important;*/
            }
        html[data-theme="dark"] nav .topArea ul li input:hover,
        html[data-theme="dark"] #ft_tab:hover span,
        html[data-theme="dark"] a:hover {
            color: var(--main-color-1, #64d4e0) !important;
        }

        html[data-theme="dark"] a:visited {
            color: #8a5dd6 !important;
        }

    /* ========================================
   邊框顏色
   ======================================== */

        html[data-theme="dark"] #ft_slider_content > div,
        html[data-theme="dark"] #ft_tab,
        html[data-theme="dark"] .container-fluid .fatfooter ul li .title3 a,
        html[data-theme="dark"] [style*="border-color: #333"],
        html[data-theme="dark"] [style*="border-color:#333"] {
            border-color: #666666 !important;
        }

    html[data-theme="dark"] [style*="border-color: #ECF0F1"],
    html[data-theme="dark"] [style*="border-color:#ECF0F1"] {
        border-color: #404040 !important;
    }
        html[data-theme="dark"] .container-fluid footer .footerCenter .ul-link li {
            border-color: var(--text-color,#e0e0e0) !important;
        }

    html[data-theme="dark"] [style*="border-color: #ede3db"],
    html[data-theme="dark"] [style*="border-color:#ede3db"] {
        border-color: #404040 !important;
    }

    /* ========================================
   陰影調整
   ======================================== */

    html[data-theme="dark"] [style*="box-shadow"] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    }

    /* ========================================
   特殊狀態
   ======================================== */

    /* Hover 狀態 */
    html[data-theme="dark"] .hover\:bg-white:hover,
    html[data-theme="dark"] .hover\:bg-lightgreen:hover {
        background-color: var(--bg-elevated-hover, #3d3d3d) !important;
    }

    /* Active 狀態 */
    html[data-theme="dark"] .active {
/*        background-color: var(--bg-elevated-hover, #3d3d3d) !important;*/
    }

    /* Disabled 狀態 */
    html[data-theme="dark"] .disabled,
    html[data-theme="dark"] :disabled {
        color: var(--text-disabled, #666666) !important;
        opacity: 0.6;
    }


/* ========================================
   最新消息
   ======================================== */
/*內頁*/
    html[data-theme="dark"] .swal2-cancel, html[data-theme="dark"] .swal2-deny, html[data-theme="dark"] .swal2-confirm,
    html[data-theme="dark"] .page .page-container .btmFunction .open-it,
    html[data-theme="dark"] .page .page-container .btmFunction .open-it .action-text,
    html[data-theme="dark"] .page .page-container .btmFunction .guickLink ul li {
        background: #32393d;
        color: #ffffff;
        border: 2px solid #2e3a3b;
    }

        html[data-theme="dark"] .page .page-container .btmFunction .open-it .circle-svg text {
            fill: #ffffff;
        }
        /*首頁*/
        /* 2. 在暗色模式選擇器下，覆蓋這個變數 */
        html[data-theme="dark"] {
            /* 這裡定義暗色模式的圖片變數 */
            /* 請確保你有這張圖片，路徑正確 */
            --gov-bg-url: url('../AodmImg/govbt2.png');
        }

    html[data-theme="dark"] .container-fluid .news .title::before {
        height: 404px;
        right: 109px;
    }
    html[data-theme="dark"] .container-fluid .services {
        background: url(../AodmImg/taiwan4.png) center left / auto 100% no-repeat;
        /* 針對 Webkit 瀏覽器 (如 Chrome, Safari, 新版 Edge) 的前綴寫法 */
/*        -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);*/
        /* 標準寫法 (Firefox 等) */
/*        mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);*/
        /* 如果希望暈開的邊緣再更模糊一點，可以加上 mask-size 或調整上面的百分比 */
    }

        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-01 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/House_b.svg);
        }
        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-02 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/Megaphone_b.svg);
        }
        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-03 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/people-fill_b.svg);
        }
        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-04 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/Camera_b.svg);
        }
        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-05 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/caret-right-square_b.svg);
        }
        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-06 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/Buildings_b.svg);
        }
        html[data-theme="dark"] .extend-Left-nav > .in > .ct > .in ul li.extend-07 a::before {
            background-image: url(/AodmNodeModules/bootstrap-icons/icons/globe2_b.svg);
        }
        html[data-theme="dark"] .container-fluid .links .box {

            /*background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../AodmImg/linkBg.png) center center / 100% auto no-repeat;*/
        }
        /* ========================================
   Footer
   ======================================== */
        html[data-theme="dark"] .container-fluid .fatfooter ul,
        html[data-theme="dark"] .container-fluid .fatfooter,
        html[data-theme="dark"] .container-fluid .links .relative,
        html[data-theme="dark"] .container-fluid footer {
            position: relative;
        }
            html[data-theme="dark"] .container-fluid .fatfooter::before,
            html[data-theme="dark"] .container-fluid .links .box::before,
            html[data-theme="dark"] .container-fluid footer::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                pointer-events: none; /* 確保不會阻擋點擊事件 */
            }


    /* ========================================
   重要提醒
   ======================================== */
    /*
 * 使用方式：
 * 
 * 1. 確保引入順序：
 *    <link rel="stylesheet" href="color.css">        <!-- 從 color.scss 編譯來的 -->
 *    <link rel="stylesheet" href="dark-mode.css">
 *    <link rel="stylesheet" href="theme-button.css">
 *    <link rel="stylesheet" href="color-scss-overrides.css">  <!-- 這個檔案，最後引入 -->
 * 
 * 2. 如果某些顏色沒有正確覆蓋，請：
 *    - 檢查是否有 inline styles
 *    - 檢查是否有 JavaScript 動態設定顏色
 *    - 使用瀏覽器開發工具查看實際套用的樣式
 * 
 * 3. 如果需要針對特定元素微調：
 *    html[data-theme="dark"] .your-element {
 *        color: custom-color !important;
 *    }
 */