/* market.css - 市场面板专属样式 (最终版) */

/* === 主布局 === */
#right-placeholder-panel { display: flex; flex-direction: column; }
#market-panel { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; margin-top: 0; overflow-y: auto; }

/* === 顶部操控区 === */
#market-controls { flex-shrink: 0; padding: 10px; border: 2px solid #2a3a5e; border-radius: 5px; background-color: rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; }
.search-group { display: flex; flex-grow: 1; }


.search-group input {
    width: 100%;
    /* background-color: #2a2a2a; */ /* <-- 删除或注释掉这一行 */
    border: 1px solid #555;
    border-radius: 4px 0 0 4px;
    /* color: #e0e0e0; */ /* <-- 删除或注释掉这一行 */
    padding: 8px 12px;
    font-size: 0.9em;
    border-right: none;
}


.search-group input:focus { outline: none; border-color: #d1b06b; }
.search-group button { border-radius: 0 4px 4px 0; white-space: nowrap; }
.disabled-btn { background-color: #333 !important; border-color: #555 !important; color: #777 !important; cursor: not-allowed; }
#view-mode-switcher { border-left: 1px solid #444; margin-left: 5px; padding-left: 15px; }
.view-mode-btn { padding: 6px 10px; }
.view-mode-btn.active { background-color: #6a5a2a; border-color: #f2b300; color: #f2b300; }
.view-mode-btn .fas { font-size: 1.2em; vertical-align: middle; }

/* === 滑出式高级搜索面板 === */
.advanced-search-panel { background-color: rgba(0, 0, 0, 0.2); border: 2px solid #2a3a5e; border-radius: 5px; margin-top: 10px; padding: 15px; display: none; }
.advanced-search-panel.open { display: block; }
#advanced-search-form { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; align-items: center; gap: 10px; }
.form-label { flex-basis: 80px; flex-shrink: 0; text-align: right; color: #aaa; }
.form-input { flex-grow: 1; width: auto; background-color: #2a2a2a; border: 1px solid #555; border-radius: 4px; color: #e0e0e0; padding: 8px 12px; font-size: 0.95em; }
.form-input:focus { outline: none; border-color: #d1b06b; }
.form-separator { text-align: center; color: #888; font-weight: bold; padding: 10px 0 0; border-top: 1px solid #444; margin-top: 5px; }
#attribute-filters-container { display: flex; flex-direction: column; gap: 10px; padding: 5px; background-color: rgba(0,0,0,0.1); border-radius: 4px; }
.attribute-filter-row { display: flex; align-items: center; gap: 8px; }
.attribute-filter-row .form-input-attr { flex-grow: 4; }
.attribute-filter-row .form-input-val { flex-grow: 1; min-width: 60px; text-align: center; }
.remove-filter-btn { background: #a13030; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; text-align: center; cursor: pointer; font-weight: bold; flex-shrink: 0; }
.remove-filter-btn:hover { background: #c03e3e; }
.add-filter-btn { width: 100%; background-color: #2a3a5e; border: 1px solid #5588ff; color: white; padding: 8px; border-radius: 4px; cursor: pointer; font-weight: bold; max-width: auto; /* 但最大宽度不超过 300 像素 */
    display: block; /* 确保它像块级元素一样，这样 margin: auto; 才能居中 */
    margin-left: 4.5px; /* 自动左边距 */
    margin-right: auto; /* 自动右边距，实现居中 */}
.add-filter-btn:hover { background-color: #3a5a8e; }
.advanced-search-panel .modal-actions { justify-content: center; margin-top: 15px; }

/* === 自定义下拉框样式 === */
.attribute-filter-row .custom-select-container { position: relative; width: 100%; height: 35px; }
.attribute-filter-row .selected-option-display { height: 100%; padding: 6px 10px; background-color: #2a2a2a; border: 1px solid #555; border-radius: 4px; color: #e0e0e0; font-size: 0.9em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.attribute-filter-row .selected-option-display:hover { border-color: #777; }
.attribute-filter-row .options-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; background-color: #222; border: 1px solid #777; border-radius: 4px; z-index: 10; max-height: 250px; overflow-y: auto; }
.custom-select-container.open .options-panel { display: block; }
.options-panel ul { list-style: none; padding: 0; margin: 0; }
.options-panel .custom-option { padding: 8px 12px; cursor: pointer; font-size: 0.9em; }
.options-panel .custom-option:hover { background-color: #4a4a4a; }
.attribute-filter-row.row-active { position: relative; z-index: 20; }
.options-panel::-webkit-scrollbar { display: none; }
.options-panel { -ms-overflow-style: none; scrollbar-width: none; }

/* === 市场结果区 === */
#market-results-area { padding: 10px 5px 10px 0; margin-top: 10px; }
.market-item-card { background-color: #1a1a1a; border: 1px solid #333; border-radius: 4px; margin-bottom: 8px; padding: 0 12px; min-height: 60px; display: flex; flex-direction: column; justify-content: center; }
.market-item-card:hover { border-color: #555; }
.market-item-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; margin: 0; }
.market-item-header.no-stats { border-bottom: none; }
.header-left { display: flex; align-items: baseline; gap: 10px; }
.header-right { display: flex; align-items: center; gap: 15px; }
.rarity-tag { font-weight: bold; font-size: 1em; }
.market-item-name { font-size: 1.1em; font-weight: bold; }
.quantity-tag { font-size: 1em; font-weight: bold; color: #999; margin-left: 8px; }
.timestamp { font-size: 0.9em; color: #888; min-width: 145px; text-align: right; }
.market-item-price { font-size: 1.2em; font-weight: bold; color: #f2b300; min-width: 90px; text-align: right; }
.market-item-stats-grid { display: flex; gap: 15px; border-top: 1px solid #3a3a3a; padding-top: 12px; margin-top: 0; padding-bottom: 12px; }
.stats-column { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.market-item-stats-grid .stat-line { font-size: 1em; }
.no-stats-placeholder { color: #666; font-style: italic; }
.stats-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.market-item-card.expanded .stats-wrapper { max-height: 500px; }

/* === 颜色与滚动条 === */
.rarity-tag.rarity-poor, #adv-search-rarity.rarity-text-poor, #adv-search-rarity option.rarity-text-poor { color: #9d9d9d; }
.rarity-tag.rarity-common, #adv-search-rarity.rarity-text-common, #adv-search-rarity option.rarity-text-common { color: #fff; }
.rarity-tag.rarity-uncommon, #adv-search-rarity.rarity-text-uncommon, #adv-search-rarity option.rarity-text-uncommon { color: #44cc44; }
.rarity-tag.rarity-rare, #adv-search-rarity.rarity-text-rare, #adv-search-rarity option.rarity-text-rare { color: #5588ff; }
.rarity-tag.rarity-epic, #adv-search-rarity.rarity-text-epic, #adv-search-rarity option.rarity-text-epic { color: #aa44dd; }
.rarity-tag.rarity-legendary, #adv-search-rarity.rarity-text-legendary, #adv-search-rarity option.rarity-text-legendary { color: #f2b300; }
.rarity-tag.rarity-unique, #adv-search-rarity.rarity-text-unique, #adv-search-rarity option.rarity-text-unique { color: #f26b00; }
.rarity-tag.rarity-artifact, #adv-search-rarity.rarity-text-artifact, #adv-search-rarity option.rarity-text-artifact { color: #ff4b4b; }
.rarity-text-poor .stat-line, .rarity-text-poor .no-stats-placeholder { color: #9d9d9d; }
.rarity-text-common .stat-line, .rarity-text-common .no-stats-placeholder { color: #ffffff; }
.rarity-text-uncommon .stat-line, .rarity-text-uncommon .no-stats-placeholder { color: #44cc44; }
.rarity-text-rare .stat-line, .rarity-text-rare .no-stats-placeholder { color: #5588ff; }
.rarity-text-epic .stat-line, .rarity-text-epic .no-stats-placeholder { color: #aa44dd; }
.rarity-text-legendary .stat-line, .rarity-text-legendary .no-stats-placeholder { color: #f2b300; }
.rarity-text-unique .stat-line, .rarity-text-unique .no-stats-placeholder { color: #f26b00; }
.rarity-text-artifact .stat-line, .rarity-text-artifact .no-stats-placeholder { color: #ff4b4b; }
[class*="rarity-text-"] .stat-name { opacity: 1; }
#market-panel::-webkit-scrollbar { width: 8px; }
#market-panel::-webkit-scrollbar-track { background: transparent; }
#market-panel::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; }
#market-panel::-webkit-scrollbar-thumb:hover { background-color: #666; }


/* ==========================================================
   新增：订阅功能相关样式
========================================================== */

/* 订阅按钮的特殊样式（紫色）*/
#subscribe-advanced-search-btn {
    background-color: #4a2a6b;
    border-color: #aa44dd;
}
#subscribe-advanced-search-btn:hover {
    background-color: #6a4a8b;
}



/* 定义一个发光/闪烁的动画 */
/*@keyframes glowing-pulse {
/*    0% { box-shadow: 0 0 3px #f2b300; }
/*    50% { box-shadow: 0 0 12px 3px #f2b300; }
/*    100% { box-shadow: 0 0 3px #f2b300; }
/*}*/

/* 请用这个新版本，完整替换旧的 @keyframes glowing-pulse 规则 */
@keyframes glowing-pulse {
    /* 动画开始和结束时的状态（按钮的默认状态） */
    0%, 100% {
        box-shadow: 0 0 3px #f2b300;
        border-color: #f2b300; /* 恢复为默认的金色边框 */
        color: #e0e0e0;      /* 恢复为默认的白色文字 */
        background-color: #6a5a2a; /* <-- 新增：恢复为按钮的原始背景色 */
    }
    /* 动画中点（50%）的状态（最亮的状态） */
    50% {
        box-shadow: 0 0 18px 7px #f2b300;
        border-color: #ffeb3b; /* 变为更亮的闪烁黄 */
        color: #fff8e1;      /* 文字也变为更亮的米黄色 */
        background-color: #8a7a4a; /* <-- 新增：设置为一个更亮的背景色 */
    }
}





/* 应用闪烁动画的类 */
.flashing {
    animation: glowing-pulse 1.5s infinite ease-in-out;
}

/* 订阅列表抽屉的独立宽度（如果需要）*/
#subscriptions-drawer {
    width: 700px;
}





/* ==========================================================
   新增：订阅列表抽屉内样式
========================================================== */
.subscription-item {
    background-color: #2a2a2a;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px;
    border-left: 5px solid #555; /* 默认边框颜色 */
}

.subscription-item:has(.status-tag.notified) {
    border-left-color: #f2b300; /* 对有新货的订阅使用金色左边框 */
}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.query-details {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    font-size: 0.9em;
    color: #ccc;
}
.query-details strong {
    color: white;
}

.subscription-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.status-tag {
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 1.2em;

}
.status-tag.active {
    background-color: #444;
    color: #aaa;
}
.status-tag.notified {
    background-color: transparent;

    color: #44cc44;
}

.found-items-list {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #444;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.found-items-list .market-item-card.small {
    padding: 0 10px;
    min-height: 45px;
}
.no-items-found-msg {
    font-style: italic;
    color: #888;
    padding: 10px 0;
}


/* --- 订阅列表中物品卡片的微调样式 --- */
.subscription-item .market-item-card {
    margin-top: 10px;
    padding: 0 10px;
    background-color: #222; /* 给个稍深的背景以作区分 */
    border-color: #444;
}

.subscription-item .market-item-card .market-item-header {
    padding: 8px 0; /* 减小头部的上下内边距 */
}

/* ==========================================================
   隐藏高级搜索中数值输入框的上下箭头
========================================================== */

/* 针对 Chrome, Edge, Safari 等 WebKit 内核浏览器 */
.form-input-val::-webkit-outer-spin-button,
.form-input-val::-webkit-inner-spin-button {
  -webkit-appearance: none; /* 移除默认外观 */
  margin: 0; /* 移除默认边距 */
}

/* 针对 Firefox 浏览器 */
.form-input-val[type=number] {
  -moz-appearance: textfield; /* 将其外观设置为普通文本框 */
}

/* ======================================= */
/* === 【新增】恢复视图切换按钮的间距 === */
/* ======================================= */
#view-mode-switcher {
    gap: 8px; /* 您可以把 5px 改成您觉得合适的任何间距，比如 8px 或 10px */
}

/* ======================================= */
/* === 【新增】统一视图切换按钮的大小 === */
/* ======================================= */
.view-mode-btn {
    width: 40px;  /* 设定一个固定的宽度 */
    height: 36px; /* 设定一个固定的高度，使其成为正方形 */
    padding: 0;   /* 移除内边距，完全由固定宽高来控制大小 */

    /* 使用Flexbox让内部的图标完美居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ========================================================== */
/* === 方案二：“工具灰”与“通知金”主题（推荐） === */
/* ========================================================== */
/* ======================================= */
/* === 方案一：“智慧蓝”主题 === */
/* ======================================= */

/* 高级搜索按钮 */
#show-advanced-search-btn {
    background-color: #3e6b3a;
    border-color: #44cc44;
}
#show-advanced-search-btn:hover {
    background-color: #4a8b44;
}

/* 订阅列表按钮 - 醒目的金色 */
#show-subscriptions-btn {
    background-color: #6a5a2a;
    border-color: #f2b300;
}
#show-subscriptions-btn:hover {
    background-color: #8a7a4a;
}

/* ======================================= */
/* === 【新增】隐藏高级搜索中数值输入框的上下箭头 === */
/* ======================================= */

/* 这一部分针对 Chrome, Edge, Safari 等 WebKit 内核的浏览器 */
#market-panel input[type="number"]::-webkit-outer-spin-button,
#market-panel input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* 移除默认外观 */
    margin: 0; /* 移除默认边距 */
}

/* 这一部分专门针对 Firefox 浏览器 */
#market-panel input[type="number"] {
    -moz-appearance: textfield; /* 将其外观设置为普通文本框，从而隐藏箭头 */
}


/* ========================================================== */
/* === 【新增】高级搜索物品名称输入的“实时校验”图标样式 === */
/* ========================================================== */

/* 1. 用于定位的父容器 */
.input-with-icon-wrapper {
    position: relative;
    flex-grow: 1; /* 让它占据剩余空间 */
    display: flex;
}
.input-with-icon-wrapper .form-input {
    width: 100%;
}


/* ========================================================== */
/* === 【重构】自动完成输入框的通用样式 === */
/* ========================================================== */

.autocomplete-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.autocomplete-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: #555;
    background-color: transparent;
    border-color: transparent;
    pointer-events: none;
    padding-right: 30px; /* 为右侧图标留出空间 */
}

.autocomplete-real {
    position: relative;
    z-index: 2;
    background-color: transparent;
    width: 100%;
}

.autocomplete-valid-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: #44cc44;
    font-size: 1.2em;
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}

.autocomplete-valid-icon.visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* ========================================================== */
/* === 【新增】用于搜索按钮冷却状态的样式 === */
/* ========================================================== */
.btn-cooldown {
    background-color: #333 !important; /* 使用 !important 来强制覆盖其他颜色样式 */
    border-color: #555 !important;
    color: #777 !important;
    cursor: not-allowed !important; /* 鼠标悬停时显示“禁止”图标 */
}

#subscription-counter.status-tag { /* 使用 ID 选择器确保精确性 */
    /* 关键改动：调整内边距，让 '0/3' 文字往下移 */
    padding: 9px 12px 4px 0px;
    font-size: 1em;/* 上9px，右12px，下7px，左12px */
    /* 或者你也可以使用纯粹增加顶部内边距的方案： */
    /* padding: 9px 12px 8px 12px; */
}

/* 文件: static/css/market.css */

/* ======================================= */
/* === 在线人数显示样式 === */
/* ======================================= */
#population-display-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 元素之间的间距 */
    padding: 8px;
    margin-top: 10px; /* 和上方控制区的间距 */
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    color: #d1b06b; /* “玩家名单：”的颜色 */
    user-select: none; /* 禁止用户选中文本 */
}

.population-number {
    font-size: 1.25em; /* 让数字更突出 */
    min-width: 45px; /* 给一个最小宽度，防止数字变化时布局跳动 */
    text-align: center;
}

#population-dungeon {
    color: #f2b300; /* 地牢人数的颜色 (金色) */
}

#population-lobby {
    color: #b3de05; /* 大厅人数的颜色 (黄绿色) */
}

.population-label {
    font-size: 1em;
    color: #ccc; /* “地牢”和“大厅”文字的颜色 */
    margin-right: 20px; /* 和下一个数字之间的间距 */
}