/* 自定義樣式 */
body {
    background-color: #f8f9fa;
    font-family: 'Microsoft JhengHei', 'Arial', sans-serif;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.3rem;
}

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}

.card-footer {
    border-radius: 0 0 12px 12px !important;
    background-color: #f8f9fa;
}

.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    transform: translateY(-1px);
}

.badge {
    border-radius: 6px;
}

.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-radius: 12px 12px 0 0;
}

.alert {
    border-radius: 8px;
    border: none;
}

.jumbotron {
    border-radius: 12px;
}

.avatar {
    font-size: 1.2rem;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}

/* 動畫效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeIn 0.5s ease-in-out;
}

/* 圖片樣式 */
.card-img-top {
    border-radius: 12px 12px 0 0;
}

/* 自定義顏色 */
.bg-primary {
    background-color: #4e73df !important;
}

.bg-success {
    background-color: #1cc88a !important;
}

.bg-danger {
    background-color: #e74a3b !important;
}

.bg-warning {
    background-color: #f6c23e !important;
}

.bg-info {
    background-color: #36b9cc !important;
}

/* 表格樣式 */
.table {
    border-radius: 8px;
    overflow: hidden;
}

/* 自定義滾動條 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 特殊效果 */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

/* 簡單的模態框修復 */
.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
}

.modal input,
.modal textarea {
    background: white !important;
    color: black !important;
    border: 1px solid #ced4da !important;
}

.modal input:focus,
.modal textarea:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 簡單的按鈕樣式 */
.btn-auctions {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
}

.btn-wishlist {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
    color: white !important;
    border: none !important;
}

.btn-players {
    background: linear-gradient(135deg, #00b894, #00cec9) !important;
    color: white !important;
    border: none !important;
}

.btn-management {
    background: linear-gradient(135deg, #ffa726, #fb8c00) !important;
    color: white !important;
    border: none !important;
}

.discord-login {
    background: linear-gradient(135deg, #87CEEB 0%, #4682B4 100%) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(135, 206, 235, 0.3) !important;
}

.discord-login:hover {
    background: linear-gradient(135deg, #7BB8D9 0%, #3F7BA1 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(135, 206, 235, 0.4) !important;
}

/* 管理員徽章 */
.admin-crown-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #000 !important;
    border: 1px solid #FFD700 !important;
}

/* DragonBid 品牌標題顏色 */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* 卡片文字顏色規則 */
.card-body {
    background: white;
    color: #000 !important;
}

.card-body * {
    color: #000 !important;
}

.card-header.bg-primary * {
    color: white !important;
}

.card-header.bg-success * {
    color: white !important;
}

.card-header.bg-danger * {
    color: white !important;
}

.card-header.bg-warning * {
    color: #000 !important;
}

.card-header.bg-info * {
    color: white !important;
}

.card-header.bg-secondary * {
    color: white !important;
}

/* 按鈕文字顏色根據圖示調整 */
.btn-wishlist {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
    color: white !important;
    border: none !important;
}

.btn-wishlist:hover {
    background: linear-gradient(135deg, #e55656, #d63031) !important;
    color: white !important;
}

.btn-collection {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: white !important;
    border: none !important;
}

.btn-collection:hover {
    background: linear-gradient(135deg, #d68910, #dc7633) !important;
    color: white !important;
}

/* 根據圖示顏色調整按鈕文字 */
.btn i.fa-heart {
    color: #ff1744 !important; /* 心形圖示使用粉紅色 */
}

.btn i.fa-gavel {
    color: #2196f3 !important; /* 拍賣錘子使用藍色 */
}

.btn i.fa-trophy {
    color: #ffd700 !important; /* 獎盃圖示使用金色 */
}

.btn i.fa-users {
    color: #000000 !important; /* 用戶圖示使用黑色 */
}

.btn i.fa-crown {
    color: #ff9800 !important; /* 皇冠使用橙色 */
}

.btn i.fa-cogs {
    color: #c0c0c0 !important; /* 齒輪使用銀色 */
}

.btn i.fab.fa-discord {
    color: #5865F2 !important; /* Discord 圖示使用品牌色 */
}

/* 確保白色背景區域的文字為黑色 */
.bg-light,
.bg-white,
.modal-body,
.card-body,
.dropdown-menu {
    color: #000 !important;
}

.bg-light *,
.bg-white *,
.modal-body *,
.card-body *,
.dropdown-menu * {
    color: #000 !important;
}

/* 徽章文字顏色 */
.badge.bg-success {
    color: white !important;
}

.badge.bg-secondary {
    color: white !important;
}

.badge.bg-info {
    color: white !important;
}

.badge.bg-primary {
    color: white !important;
}

/* Jumbotron 和藍色背景區域 */
.jumbotron,
.bg-primary {
    background: linear-gradient(135deg, #4e73df, #224abe) !important;
}

.jumbotron *,
.bg-primary * {
    color: white !important;
}

/* 導航欄樣式 */
.navbar-dark {
    background: rgba(0, 0, 0, 0.1) !important;
}

.navbar-dark * {
    color: white !important;
}

/* 確保表單標籤在白色背景下為黑色 */
.form-label {
    color: #000 !important;
}

/* 下拉選單改善 */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #000 !important;
}

/* 確保所有普通文字為黑色 */
body {
    color: #000 !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
}

p, span, div, li {
    color: #000 !important;
}

/* 主要內容區域的文字 */
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6,
.container > p,
.container > div {
    color: #000 !important;
}

/* 特別處理空狀態文字 */
.text-center h4,
.text-center p {
    color: #000 !important;
}

/* 但是保持特殊區域的文字顏色 */
.navbar *,
.card-header *,
.btn *,
.badge *,
.jumbotron *,
.bg-primary *,
.bg-success *,
.bg-danger *,
.bg-info *,
.bg-secondary * {
    color: inherit !important;
}

/* 確保警告背景使用黑色文字 */
.bg-warning * {
    color: #000 !important;
}

/* 強制頁面標題和內容為黑色 */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p:not(.btn):not(.badge),
main div:not(.btn):not(.badge):not(.card-header):not(.navbar) {
    color: #000 !important;
}

/* 特別處理空狀態和文字內容 */
.text-center:not(.card-header):not(.navbar) * {
    color: #000 !important;
}

/* 確保所有直接在容器內的文字都是黑色 */
.container-fluid > *:not(.navbar):not(.btn):not(.badge),
.container > *:not(.navbar):not(.btn):not(.badge) {
    color: #000 !important;
}

/* 為所有圖示添加顏色 */
/* 功能類圖示 */
.fa-heart, .fas.fa-heart {
    color: #e91e63 !important; /* 粉紅色心形 */
}

.fa-gavel, .fas.fa-gavel {
    color: #2196f3 !important; /* 藍色拍賣錘 */
}

.fa-users, .fas.fa-users {
    color: #000000 !important; /* 黑色用戶群 */
}

.fa-crown, .fas.fa-crown {
    color: #ff9800 !important; /* 橙色皇冠 */
}

.fa-cog, .fa-cogs, .fas.fa-cog, .fas.fa-cogs {
    color: #c0c0c0 !important; /* 銀色齒輪 */
}

.fa-box, .fas.fa-box {
    color: #795548 !important; /* 棕色盒子 */
}

.fa-plus, .fas.fa-plus {
    color: #4caf50 !important; /* 綠色加號 */
}

.fa-trash, .fas.fa-trash {
    color: #f44336 !important; /* 紅色垃圾桶 */
}

.fa-edit, .fas.fa-edit, .fa-pencil-alt, .fas.fa-pencil-alt {
    color: #ff9800 !important; /* 橙色編輯 */
}

.fa-check, .fas.fa-check, .fa-check-circle, .fas.fa-check-circle {
    color: #4caf50 !important; /* 綠色勾選 */
}

.fa-times, .fas.fa-times, .fa-times-circle, .fas.fa-times-circle {
    color: #f44336 !important; /* 紅色叉號 */
}

.fa-info, .fas.fa-info, .fa-info-circle, .fas.fa-info-circle {
    color: #2196f3 !important; /* 藍色資訊 */
}

.fa-warning, .fas.fa-warning, .fa-exclamation-triangle, .fas.fa-exclamation-triangle {
    color: #ff9800 !important; /* 橙色警告 */
}

.fa-list, .fas.fa-list {
    color: #9c27b0 !important; /* 紫色列表 */
}

.fa-upload, .fas.fa-upload {
    color: #00bcd4 !important; /* 青色上傳 */
}

.fa-link, .fas.fa-link {
    color: #3f51b5 !important; /* 靛藍色連結 */
}

.fa-image, .fas.fa-image {
    color: #8bc34a !important; /* 淺綠色圖片 */
}

.fa-gamepad, .fas.fa-gamepad {
    color: #e91e63 !important; /* 粉紅色遊戲手把 */
}

.fa-dragon, .fas.fa-dragon {
    color: #ff5722 !important; /* 橘紅色龍 */
}

.fa-sparkles, .fas.fa-sparkles {
    color: #ffc107 !important; /* 金色閃亮 */
}

.fa-id-card, .fas.fa-id-card {
    color: #3f51b5 !important; /* 靛藍色身分證 */
}

.fa-sign-out-alt, .fas.fa-sign-out-alt {
    color: #f44336 !important; /* 紅色登出 */
}

.fa-user, .fas.fa-user {
    color: #607d8b !important; /* 灰藍色用戶 */
}

/* Discord 品牌圖示 */
.fab.fa-discord {
    color: #5865F2 !important; /* Discord 品牌色 */
}

/* 碎片相關圖示 */
.fa-fragment, .fas.fa-fragment {
    color: #9e9e9e !important; /* 灰色碎片 */
}

.fa-gem, .fas.fa-gem {
    color: #e91e63 !important; /* 粉紅色寶石 */
}

.fa-diamond, .fas.fa-diamond {
    color: #00bcd4 !important; /* 青色鑽石 */
}

.fa-coins, .fas.fa-coins {
    color: #ffc107 !important; /* 金色硬幣 */
}

.fa-cube, .fa-cubes, .fas.fa-cube, .fas.fa-cubes {
    color: #4caf50 !important; /* 綠色方塊 */
}

.fa-star, .fas.fa-star {
    color: #ffc107 !important; /* 金色星星 */
}

.fa-puzzle-piece, .fas.fa-puzzle-piece {
    color: #9c27b0 !important; /* 紫色拼圖 */
}

/* 狀態圖示 */
.fa-circle {
    color: inherit !important; /* 保持狀態指示器原色 */
}

.fa-sync-alt, .fas.fa-sync-alt {
    color: #2196f3 !important; /* 藍色刷新 */
}

.fa-clock, .fas.fa-clock {
    color: #ff9800 !important; /* 橙色時鐘 */
}

.fa-calendar, .fas.fa-calendar {
    color: #3f51b5 !important; /* 靛藍色日曆 */
}

.fa-tag, .fas.fa-tag {
    color: #4caf50 !important; /* 綠色標籤 */
}

.fa-magic, .fas.fa-magic {
    color: #9c27b0 !important; /* 紫色魔法 */
}

.fa-undo, .fas.fa-undo {
    color: #607d8b !important; /* 灰藍色撤銷 */
}

.fa-broom, .fas.fa-broom {
    color: #795548 !important; /* 棕色掃帚 */
}

.fa-layer-group, .fas.fa-layer-group {
    color: #607d8b !important; /* 灰藍色層級 */
}

.fa-shopping-cart, .fas.fa-shopping-cart {
    color: #4caf50 !important; /* 綠色購物車 */
}

.fa-arrow-right, .fas.fa-arrow-right {
    color: #2196f3 !important; /* 藍色箭頭 */
}

/* 確保圖示在特殊背景下保持顏色 */
.card-header .fas,
.card-header .fa,
.btn .fas,
.btn .fa {
    color: inherit !important; /* 在按鈕和卡片頭部中保持按鈕設計的顏色 */
}

/* 管理員玩家卡片特殊樣式 */
.admin-player-card {
    border: 2px solid #FFD700 !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 165, 0, 0.05)) !important;
}

.admin-player-card:hover {
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.4) !important;
    transform: translateY(-4px) !important;
}

/* 管理員頭像樣式 */
.bg-warning {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
}

.bg-warning .fa-crown {
    color: #8B4513 !important; /* 深棕色皇冠在金色背景上 */
}

/* 管理面板控制區域樣式 */
.admin-control-section {
    background: rgba(255,255,255,0.95) !important;
    padding: 8px !important;
    border-radius: 6px !important;
}

.admin-control-label {
    color: #212529 !important; /* text-dark */
    font-weight: 600 !important; /* fw-bold */
    font-size: 0.875rem !important; /* small */
}

/* 強制覆蓋任何可能導致文字變白的規則 */
.card-header .admin-control-label,
.bg-primary .admin-control-label,
.bg-success .admin-control-label,
.admin-control-section .admin-control-label,
small.admin-control-label {
    color: #212529 !important; /* 強制黑色，覆蓋所有其他規則 */
    background: none !important; /* 確保沒有背景顏色影響 */
}

/* 最高優先級規則 - 使用屬性選擇器 */
[class*="admin-control-label"] {
    color: #212529 !important;
}

/* 針對特定文字內容的強制規則 */
small:contains("篩選"), small:contains("定時開始"), small:contains("時長") {
    color: #212529 !important;
}

/* 確保所有表單控件內的文字都是黑色 */
.admin-control-section .form-control,
.admin-control-section .form-select {
    color: #212529 !important; /* text-dark */
}

.admin-control-section .form-control::placeholder {
    color: #6c757d !important; /* text-muted for placeholder */
}

.admin-control-section .form-select option {
    color: #212529 !important; /* text-dark */
}

/* 全域表單元素文字顏色確保 */
input.form-control, select.form-select, .form-control, .form-select {
    color: #212529 !important; /* 確保輸入框和下拉選單文字是黑色 */
}

input.form-control::placeholder {
    color: #6c757d !important; /* placeholder 使用較淡的顏色 */
}

/* 終極解決方案 - 直接覆蓋這些特定元素 */
.admin-control-section small,
.admin-control-section .admin-control-label,
div.admin-control-section small.admin-control-label {
    color: #000000 !important; /* 使用最純的黑色 */
    text-shadow: none !important;
    background: transparent !important;
}

/* Item type dropdown styling */
#itemTypeSelect option[value="__ADD_NEW__"] {
    font-style: italic !important;
    color: #007bff !important;
    background-color: #f8f9fa !important;
}

#newTypeContainer {
    transition: all 0.3s ease !important;
}

#newItemType {
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Unified status button sizing */
.badge.bg-success, .badge.bg-warning, #saveAuctionTime.btn-sm {
    padding: 0.25rem 0.5rem !important; /* Smaller button size */
    font-size: 0.75rem !important; /* Smaller font size */
    min-height: 28px !important; /* Unified smaller height */
    min-width: 60px !important; /* Unified minimum width */
    display: inline-flex !important;
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
    text-align: center !important; /* Text center */
}

/* Add item button - blue-green gradient */
.btn-add-item {
    background: linear-gradient(135deg, #17a2b8, #20c997) !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(23, 162, 184, 0.3) !important;
    padding: 0.2rem 0.4rem !important; /* Smaller button size */
    font-size: 0.75rem !important; /* Smaller font size */
    min-height: 28px !important; /* Unified height */
    display: inline-flex !important;
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
    text-align: center !important; /* Text center */
}

.btn-add-item:hover {
    background: linear-gradient(135deg, #138496, #1da085) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4) !important;
}

.btn-add-item:focus,
.btn-add-item:active {
    background: linear-gradient(135deg, #138496, #1da085) !important;
    color: white !important;
    box-shadow: 0 2px 10px rgba(23, 162, 184, 0.5) !important;
}

/* Clear sold items button - orange-red gradient */
.btn-clear-sold {
    background: linear-gradient(135deg, #fd7e14, #dc3545) !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(253, 126, 20, 0.3) !important;
    padding: 0.2rem 0.4rem !important; /* Smaller button size */
    font-size: 0.75rem !important; /* Smaller font size */
    min-height: 28px !important; /* Unified height */
    display: inline-flex !important;
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
    text-align: center !important; /* Text center */
}

.btn-clear-sold:hover {
    background: linear-gradient(135deg, #e66a02, #c82333) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.4) !important;
}

.btn-clear-sold:focus,
.btn-clear-sold:active {
    background: linear-gradient(135deg, #e66a02, #c82333) !important;
    color: white !important;
    box-shadow: 0 2px 10px rgba(253, 126, 20, 0.5) !important;
}

/* 教學按鈕樣式 */
.btn-tutorial {
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    border: none;
    font-weight: 500;
}

.btn-tutorial:hover {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(106,17,203,0.15);
}