/* ==============================
   Chi 的工具箱 - 賽博龐克藍 (Cyberpunk Neon Blue)
   ============================== */

/* ▼▼▼ 主題變數：賽博龐克螢光藍 ▼▼▼ */
:root {
    /* 核心主色：強烈的螢光藍 */
    --main-color: #00f3ff; 
    /* 次要顏色：深邃的科技藍 (用於背景或陰影) */
    --accent-color: #007bff;
    /* 文字發光特效 (Neon Glow) */
    --text-glow: 0 0 10px rgba(0, 243, 255, 0.8), 0 0 20px rgba(0, 243, 255, 0.4);
}

/* ==============================
   1. 強制覆蓋綠色文字 (關鍵修正)
   ============================== */
/* 搜尋框上方的 Tab (常用、搜尋、工具...) */
.header-big:not(.no-bg) .s-type-list {
    color: var(--main-color) !important; /* 強制改為螢光藍 */
    text-shadow: var(--text-glow); /* 加上發光特效 */
    font-weight: bold;
}

/* Tab 被選中時的三角形指標 */
.header-big .search-type input:checked+label:before {
    border-color: var(--main-color) transparent transparent;
}

/* ==============================
   2. 全局字體與滾動條
   ============================== */
body, html {
    font-size: 14px;
    font-family: "Microsoft JhengHei", "PingFang SC", sans-serif !important;
}
.sidebar-menu.flex-fill::-webkit-scrollbar { display: none; }

/* ==============================
   3. 側邊欄 (Sidebar) 賽博化
   ============================== */
/* 側邊欄選中狀態：漸層藍色背景 + 左側亮條 */
.sidebar-menu-inner ul li.sidebar-item > a.active, 
.sidebar-menu-inner ul li.sidebar-item.active > a {
    color: var(--main-color) !important;
    border-left-color: var(--main-color) !important;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15), transparent) !important;
    text-shadow: 0 0 5px var(--main-color);
}

/* 懸浮子選單 */
.sidebar-popup.sidebar-menu-inner > div > ul > li.sidebar-item>ul {
    position: absolute; top: 0px; left: 10px; width: 90px; z-index: 99;
}
.sidebar-popup.sidebar-menu-inner ul, .sidebar-popup.sidebar-menu-inner ul li { width: 90px; }
.sidebar-menu-inner ul li ul li a { margin-left: 30px; }
.navbar-collapse ul li.menu-item-has-children:after { content: '\e612'; }

/* ==============================
   4. 頂部導航 (Header) & 搜尋框
   ============================== */
/* 背景透明 + 白字 */
.big-header-banner .page-header {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none;
}
.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a,
.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item) {
    color: #fff !important;
    text-shadow: 0 0 4px rgba(0,0,0,0.8); /* 黑色陰影讓字在亮背景更清楚 */
}

/* Hover 變色：螢光藍 + 發光 */
.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a:hover,
.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item):hover {
    color: var(--main-color) !important;
    text-shadow: var(--text-glow);
}

/* 搜尋框優化 */
.header-big #search-text { color: #ccc; }
.io-black-mode .header-big #search-text { color: #fff; }
#search button i { color: var(--main-color); font-size: 18px; text-shadow: 0 0 5px var(--main-color); }

/* 首頁大標題 */
.header-big:not(.no-bg) .big-title .h1 {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

/* ==============================
   5. 卡片 Logo 樣式 (您的需求)
   ============================== */
.url-card .url-body .url-img > img {
    border-radius: 50% !important; /* 圓形 */
    transition: all 0.4s ease;
    border: 2px solid transparent; /* 預留邊框位置 */
}

/* 滑鼠移過去：旋轉 + 亮藍色光環 */
.url-card:hover .url-img > img {
    transform: rotate(360deg) scale(1.1);
    border-color: var(--main-color);
    box-shadow: 0 0 15px var(--main-color);
}

/* 卡片背景微調 (讓它更像玻璃) */
.io-black-mode .url-card .url-body {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.1);
}
.io-black-mode .url-card:hover .url-body {
    border-color: var(--main-color);
}

/* ==============================
   6. 其他細節
   ============================== */
/* 載入動畫 */
.loader { color: var(--main-color) !important; text-shadow: var(--text-glow); }
.loader::before, .loader::after { background: var(--main-color) !important; box-shadow: 0 0 10px var(--main-color); }

/* 搜尋熱詞 */
.search-hot-text ul li.current, .search-hot-text ul li:hover {
    background: rgba(0, 243, 255, 0.1);
    color: var(--main-color) !important;
}

/* 頁尾連結 */
footer.main-footer .footer-text a { color: var(--main-color); }
footer.main-footer .footer-text a:hover { color: #fff; text-shadow: var(--text-glow); }

/* 強制背景圖 */
body, .page-container, .io-grey-mode, .io-black-mode {
    background-image: url('/tools/assets/images/bg-dna.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
.main-content, .page-container, body.io-black-mode {
    background-color: rgba(15, 15, 20, 0.9) !important; /* 深藍黑色底，更像賽博龐克 */
}
.sidebar-logo { background: transparent !important; }

/* 天氣與語錄對齊 */
#mini-weather, #hitokoto { display: flex; align-items: center; height: 100%; }
/* ==============================
   7. 搜尋框上方 Tab 優化 (去除動畫 + 改為光條)
   ============================== */


/* 2. 修改指標樣式：把「三角形」改成「賽博發光底線」 */
.header-big .search-type input:checked+label:before {
    content: '' !important;
    border: none !important;       /* 移除原本的三角形邊框 */
    
    /* 設定為發光線條 */
    width: 100% !important;        /* 寬度跟文字一樣寬 */
    height: 3px !important;        /* 線條厚度 */
    background: var(--main-color) !important; /* 使用我們的主題螢光色 */
    box-shadow: 0 0 10px var(--main-color), 0 0 5px #fff !important; /* 強烈發光 */
    
    /* 重新定位到文字下方 */
    top: auto !important;          /* 取消原本的頂部定位 */
    bottom: -8px !important;       /* 放在文字下方 8px 處 */
    left: 0 !important;
    margin-left: 0 !important;     /* 取消原本的置中偏移 */
    border-radius: 2px;            /* 稍微圓角 */
}

/* 3. 未選中的文字樣式 (讓它稍微暗一點，對比更強) */
.header-big .s-type-list label {
    opacity: 0.6;
    margin: 0 15px; /* 增加一點間距 */
}

/* 4. 選中的文字樣式 (全亮) */
.header-big .search-type input:checked+label {
    opacity: 1;
    color: var(--main-color) !important;
    text-shadow: 0 0 15px var(--main-color);
}
/* ==============================
   8. 強制凍結背景 (禁止移動/呼吸特效)
   ============================== */

/* 針對搜尋框的大背景區塊 */
#search-bg, 
.header-big,
.big-header-banner {
    /* 1. 殺掉所有 CSS 動畫 */
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;

    /* 2. 確保背景位置鎖死 */
    background-attachment: fixed !important; /* 讓背景像釘在牆上一樣，滾動網頁也不會動 */
    background-position: center center !important;
    background-size: cover !important;
    
    /* 3. 禁止任何變形縮放 */
    transform: none !important;
}
/* ==============================
   9. 隱藏搜尋分類的捲軸
   ============================== */

/* 隱藏 Chrome, Safari, Edge 的捲軸 */
.s-type-list::-webkit-scrollbar {
    display: none;
}

/* 隱藏 Firefox 的捲軸 */
.s-type-list {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* ==============================
   9. 核彈級隱藏捲軸 (針對搜尋區塊)
   ============================== */

/* 針對所有搜尋相關的容器，強制隱藏捲軸 */
.s-type-list, 
.s-type,
.s-search,
.header-big,
.search-group,
.search-type {
    /* Firefox */
    scrollbar-width: none !important;
    
    /* IE and Edge */
    -ms-overflow-style: none !important; 
    
    /* 確保不顯示 */
    overflow: hidden !important; 
}

/* 針對 Chrome, Safari, Edge (Webkit核心) */
.s-type-list::-webkit-scrollbar, 
.s-type::-webkit-scrollbar,
.s-search::-webkit-scrollbar,
.header-big::-webkit-scrollbar,
.search-group::-webkit-scrollbar,
.search-type::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}
/* ==============================
   修正卡片 Logo 大小與形狀
   ============================== */

.url-card .url-body .url-img {
    /* 確保容器本身固定大小 */
    width: 65px !important;
    height: 65px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.url-card .url-body .url-img > img {
    /* 1. 強制固定寬高 (解決圖片忽大忽小) */
    width: 50px !important;
    height: 50px !important;
    
    /* 2. 保持比例 (避免圖片被壓扁或拉長) */
    object-fit: contain !important; 
    
    /* 3. 圓形與特效 */
    border-radius: 50% !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    
    /* 4. (選用) 加個微微的背景色，避免黑色 Logo 在黑底消失 */
    /* background: rgba(255, 255, 255, 0.1); */ 
    /* padding: 5px; */ /* 如果圖片貼邊太醜，可以打開這行 */
}

/* 滑鼠移過去的特效 (賽博風) */
.url-card:hover .url-img > img {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 0 15px var(--main-color); /* 發光 */
}
/* ==============================
   Windows 風格 - 本地游標檔案套用 (相對路徑版)
   ============================== */

/* 1. 預設狀態 (普通箭頭) */
body, html {
    /* 使用 ../cursors/ 代表往上一層去找 */
    cursor: url('../cursors/normal.cur'), auto !important;
}

/* 2. 連結與可點擊元素 (手指) */
a, button, .btn, .url-card, .nav-item, [role="button"], input[type="submit"], .page-link {
    cursor: url('../cursors/link.cur'), pointer !important;
}

/* 3. 【全方位覆蓋】文字輸入與所有可能的文字標籤 */
input[type="text"], textarea, .form-control,
p, h1, h2, h3, h4, h5, h6,                 /* 文章與標題 */
span, label, li, ol, ul,                   /* 列表與標籤 */
code, pre, blockquote,                     /* 代碼與引用 */
strong, b, em, i, small, u, s, mark,       /* 粗體、斜體等格式 */
sub, sup, time, address,                   /* 上下標與時間 */
table, tr, td, th, thead, tbody, tfoot,    /* 表格內容 */
dt, dd, dl, figcaption, legend,            /* 定義列表與圖說 */
.text-muted, .text-xs, .footer-text,       /* 主題特定的文字 class */
.search-key                                /* 搜尋關鍵字 */
{
    cursor: url('../cursors/text.cur'), text !important;
}

/* 4. 精準選擇 (十字) */
.crosshair-area {
    cursor: url('../cursors/cross.cur'), crosshair !important;
}

/* 5. 移動 / 拖曳 */
.draggable {
    cursor: url('../cursors/move.cur'), move !important;
}

/* 6. 讀取中 / 忙碌 (注意：網頁只會顯示第一幀靜止圖) */
.loading, .wait {
    cursor: url('../cursors/working.ani'), progress !important;
}

/* 7. 禁止 / 無法使用 */
.disabled, :disabled {
    cursor: url('../cursors/unavailable.cur'), not-allowed !important;
}