/* =========================================
   1. PLAYERS & HISTORY 统一筛选框样式
   ========================================= */

/* 筛选行容器 */
.filter-row-players,
.filter-row-history {
    display: flex; gap: 4px; margin: 0 0 10px 0; padding: 6px;
    height: 36px; align-items: center;
    background: #0a0a0a; border-radius: 6px; border: 1px solid #000;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* 筛选组 */
.filter-group-players,
.filter-group-history { flex: 1; position: relative; }

/* 输入框 & 下拉框 */
.filter-input-players,
.filter-select-players,
.filter-select-history {
    width: 100%; height: 28px; padding: 0 8px;
    border: 1px solid #000; border-radius: 4px;
    background: #050505; color: #777;
    font-size: 11px; font-weight: 500;
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
.filter-select-players {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 6px center; background-size: 8px;
}

/* 比例设置 */
.filter-name-group { flex: 6.2; }
.filter-type-group { flex: 3.8; }


/* =========================================
   2. PLAYERS FAB (强制修复版)
   ========================================= */

/* ... 其他样式保持不变 ... */

/* 主按钮样式 - 修改为绿色 */
.pl-btn-main {
    width: 40px !important;  /* 改为40px */
    height: 40px !important; /* 改为40px */
    border-radius: 50% !important;
    background-color: #22c55e !important; /* 绿色 */
    color: #fff !important;
    border: none !important;
    font-size: 24px !important; /* 对应调整字体大小 */
    line-height: 1 !important;
    
    /* 其他样式保持不变 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer;
    display: flex !important; 
    align-items: center; 
    justify-content: center;
    padding-bottom: 4px;
    
    transition: transform 0.2s, background 0.2s;
}
/* 点击反馈 */
.pl-btn-main:active {
    transform: scale(0.95);
    /* 🔥 点击时加深颜色 */
    background-color: #16a34a !important;
}

/* 🔥 可选：悬停效果 */
.pl-btn-main:hover {
    background-color: #4ade80 !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3) !important;
}
/* =========================================
   3. PLAYERS FAB 可见性修复（强制覆盖）
   ========================================= */

/* 🔥 强制FAB始终可见 */
.pl-fab-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 确保滚动隐藏状态也只移动位置，不影响透明度 */
.pl-fab-container.fab-hidden {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(200%);
}

/* 确保按钮可点击 */
.pl-btn-main {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* css/components/player-modal.css */
/* ==================== 模态框容器 ==================== */
/* ==================== 模态框容器 (修复版) ==================== */
#player-modal {
    position: fixed; /* 确保它浮在窗口最上层 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.6); /* 增加半透明背景遮罩 */
    
    /* 🔥 关键修复：默认隐藏，而不是直接 flex */
    display: none; 
    
    /* 居中布局配置 (为 .visible 准备) */
    align-items: center;
    justify-content: center;
}

/* 🔥 只有当 JS 添加了 .visible 类时，才显示 */
#player-modal.visible {
    display: flex;
}

#player-modal .modal-content {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 12px;
    width: 90%;
    max-width: 340px; 
    max-height: 95vh; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    overflow: hidden; 
}

/* ... 剩下的 CSS (头部、主体、拉杆等) 保持不变，不需要动 ... */

/* 头部 */
.modal-header {
    padding: 12px 16px;
    background: #0d1117;
    border-bottom: 1px solid #30363d;
    flex-shrink: 0;
}
.player-modal-title {
    margin: 0;
    font-size: 15px;
    color: #e6edf3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 主体内容 - 启用滚动但尽量紧凑 */
.compact-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1; /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==================== 1. 表单行 (名字+类型) ==================== */
.form-row {
    display: flex;
    gap: 10px;
}
.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.name-wrapper { flex: 2; }
.type-wrapper { flex: 1.2; }

.tiny-label {
    font-size: 10px;
    color: #8b949e;
    text-transform: uppercase;
    font-weight: 600;
    margin-left: 2px;
}

.compact-input, .compact-select {
    background: #0d1117;
    border: 1px solid #30363d;
    color: #c9d1d9;
    border-radius: 6px;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    width: 100%;
}
.compact-input:focus, .compact-select:focus {
    border-color: #2e8b57; /* 绿色高亮 */
    outline: none;
}

/* ==================== 2. 原生拉杆美化 ==================== */
.sliders-container {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.slider-label { font-size: 11px; color: #8b949e; font-weight: bold; }
.slider-value { font-size: 11px; color: #2e8b57; font-weight: bold; }

.slider-sub-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #484f58;
    margin-top: -2px;
}

/* 原生 Input Range 美化 */
input[type=range].native-range {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 6px 0;
}
input[type=range].native-range:focus { outline: none; }

/* 滑轨 */
input[type=range].native-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #30363d;
    border-radius: 2px;
}
/* 滑块 */
input[type=range].native-range::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: #e6edf3;
    border: 2px solid #2e8b57; /* 绿色边框 */
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px; /* 居中 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ==================== 3. Tab 笔记区域 ==================== */
.notes-tab-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* 撑满剩余高度 */
    min-height: 120px; /* 最小高度 */
}

.notes-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 0;
}

.tab-btn {
    flex: 1;
    background: #21262d;
    border: none;
    color: #8b949e;
    padding: 8px 0;
    font-size: 11px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
    border-top: 2px solid transparent;
}

.tab-btn.active {
    background: #30363d;
    color: #e6edf3;
    border-top-color: #2e8b57;
    font-weight: bold;
}

.compact-textarea {
    width: 100%;
    height: 100%; /* 填满父容器 */
    min-height: 100px;
    background: #30363d; /* 与 active tab 背景一致 */
    border: none;
    border-radius: 0 0 6px 6px;
    padding: 10px;
    color: #e6edf3;
    font-size: 13px;
    resize: none;
    line-height: 1.4;
}
.compact-textarea:focus { outline: none; background: #39414a; }

/* ==================== 底部按钮 ==================== */
.modal-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #30363d;
    background: #0d1117;
}

.modal-action-btn {
    padding: 14px 0;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}
.modal-cancel-btn { color: #8b949e; }
.modal-save-btn { color: #2e8b57; background: rgba(46, 139, 87, 0.1); }
.modal-save-btn:active { background: rgba(46, 139, 87, 0.2); }
/* =========================================
   [Play页面] 交互优化：弹窗打开时自动隐藏 FAB
   无需修改 JS，自动生效
   ========================================= */

/* 当 player-modal 带有 visible 类时 (即弹窗打开时) */
body:has(#player-modal.visible) .pl-fab-container,
body:has(#player-modal.visible) #pl-fab-group {
    display: none !important;
}