/**
 * 算力边际 - 专业仪表盘主题覆盖
 * 基于原UI HTML结构，用zinc暗灰+琥珀橙重新着色
 * 保持所有功能和ID不变
 */

/* ========== 设计令牌 ========== */
:root {
    /* Zinc 色阶（暗灰基调） */
    --zinc-950: #09090b;
    --zinc-900: #18181b;
    --zinc-800: #27272a;
    --zinc-700: #3f3f46;
    --zinc-600: #52525b;
    --zinc-500: #71717a;
    --zinc-400: #a1a1aa;
    --zinc-300: #d4d4d8;
    
    /* 琥珀橙强调色 */
    --amber-500: #f59e0b;
    --amber-400: #fbbf24;
    --amber-600: #d97706;
    --amber-300: #fcd34d;
    
    /* 语义色 */
    --success: #10b981;
    --error: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    
    /* 字体 */
    --font-sans: Inter, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* ========== 全局基础 ========== */
body {
    font-family: var(--font-sans) !important;
    background-color: var(--zinc-950) !important;
    color: var(--zinc-300) !important;
}

/* ========== 赛博朋克 → 专业面板 ========== */
.cyber-panel,
.cyber-panel-neon,
.cyber-panel-purple {
    background: var(--zinc-900) !important;
    border: 1px solid var(--zinc-800) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ========== 青色霓虹 → 琥珀橙 ========== */
.cyber-text-neon,
[class*="text-sky-"] {
    color: var(--amber-500) !important;
    text-shadow: none !important;
}

.text-sky-400 { color: var(--amber-400) !important; }
.text-sky-300 { color: var(--amber-300) !important; }
.text-sky-500 { color: var(--amber-500) !important; }

.bg-sky-950 { background-color: var(--zinc-800) !important; }
.bg-sky-900 { background-color: var(--zinc-700) !important; }
.border-sky-500,
.border-sky-800,
.border-sky-900,
.border-sky-950 {
    border-color: var(--zinc-700) !important;
}

/* ========== Slate 暗灰调整 ========== */
.bg-slate-950 { background-color: var(--zinc-950) !important; }
.bg-slate-900 { background-color: var(--zinc-900) !important; }
.bg-slate-800 { background-color: var(--zinc-800) !important; }
.bg-slate-700 { background-color: var(--zinc-700) !important; }

.text-slate-500 { color: var(--zinc-500) !important; }
.text-slate-400 { color: var(--zinc-400) !important; }
.text-slate-300 { color: var(--zinc-300) !important; }
.text-slate-200 { color: var(--zinc-200) !important; }

.border-slate-800 { border-color: var(--zinc-800) !important; }
.border-slate-700 { border-color: var(--zinc-700) !important; }

/* ========== 按钮系统 ========== */
button {
    font-family: var(--font-sans) !important;
    transition: all 0.15s ease !important;
}

/* 主按钮（原青色渐变 → 琥珀橙） */
button[class*="from-sky-"],
button[class*="bg-sky-"] {
    background: linear-gradient(135deg, var(--amber-600), var(--amber-500)) !important;
    border-color: var(--amber-500) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}

button[class*="from-sky-"]:hover,
button[class*="bg-sky-"]:hover {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-400)) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

/* 次要按钮 */
button[class*="bg-slate-800"],
button[class*="bg-slate-700"] {
    background-color: var(--zinc-800) !important;
    border-color: var(--zinc-700) !important;
    color: var(--zinc-300) !important;
}

button[class*="bg-slate-800"]:hover,
button[class*="bg-slate-700"]:hover {
    background-color: var(--zinc-700) !important;
    color: white !important;
}

/* ========== 开始菜单 ========== */
#start-menu-screen {
    background: linear-gradient(135deg, var(--zinc-950) 0%, #0a0a0c 100%) !important;
}

#start-menu-screen h1 {
    background: linear-gradient(135deg, var(--amber-400), var(--amber-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 修复游戏主界面标题 - 不使用渐变透明 */
#game-container h1 {
    color: var(--amber-400) !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--amber-400) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
}

/* 更强的规则：直接针对游戏主界面头部的h1 */
#game-container > header h1,
#game-container header h1 {
    color: var(--amber-400) !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: var(--amber-400) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

/* ========== 游戏主界面顶栏 ========== */
#game-container > header {
    background: var(--zinc-900) !important;
    border-bottom: 1px solid var(--zinc-800) !important;
}

#game-container > header [class*="text-sky-"] {
    color: var(--amber-400) !important;
}

/* ========== Tab导航 ========== */
.nav-btn {
    background-color: var(--zinc-900) !important;
    border-color: var(--zinc-800) !important;
    color: var(--zinc-400) !important;
}

.nav-btn.active {
    background-color: var(--zinc-800) !important;
    color: var(--amber-400) !important;
    border-bottom-color: var(--amber-500) !important;
}

.nav-btn:hover {
    background-color: var(--zinc-800) !important;
    color: var(--zinc-200) !important;
}

/* ========== 弹窗 ========== */
[id^="modal-"] > div {
    background: var(--zinc-900) !important;
    border: 1px solid var(--zinc-700) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

[id^="modal-"] h3 {
    border-bottom-color: var(--zinc-800) !important;
}

/* ========== 输入框 ========== */
input[type="text"],
input[type="number"],
select,
textarea {
    background-color: var(--zinc-900) !important;
    border-color: var(--zinc-700) !important;
    color: var(--zinc-200) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--amber-500) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

/* ========== 紫色 → 琥珀橙（排行榜等） ========== */
.text-purple-400,
.text-purple-300 {
    color: var(--amber-400) !important;
}

.border-purple-950,
.border-purple-900 {
    border-color: var(--zinc-700) !important;
}

/* ========== 绿色/红色保持 ========== */
.text-emerald-500 { color: var(--success) !important; }
.text-red-500 { color: var(--error) !important; }
.text-amber-400 { color: var(--amber-400) !important; }

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--zinc-900);
}

::-webkit-scrollbar-thumb {
    background: var(--zinc-700);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--zinc-600);
}

/* ========== 等级/经验条 ========== */
[class*="bg-gradient-to-r"] {
    background: linear-gradient(90deg, var(--amber-600), var(--amber-400)) !important;
}

/* ========== 表格 ========== */
table thead {
    background-color: var(--zinc-900) !important;
    border-bottom-color: var(--zinc-800) !important;
}

table tbody tr {
    border-bottom-color: var(--zinc-800) !important;
}

table tbody tr:hover {
    background-color: var(--zinc-850) !important;
}

/* ========== 徽章/标签 ========== */
[class*="bg-sky-"][class*="text-sky-"] {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: var(--amber-400) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    button {
        min-height: 44px !important;
    }
    
    input[type="text"],
    input[type="number"],
    select {
        min-height: 44px !important;
    }
    
    /* 修复游戏主界面滚动 */
    #game-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #game-container > header {
        flex-shrink: 0 !important;
        order: -1 !important;
    }
    
    #game-container > main {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 修复弹窗超出屏幕 */
    .fixed {
        max-height: 100vh !important;
        overflow-y: auto !important;
    }
    
    /* 弹窗容器 */
    [id^="modal-"] {
        padding: 1rem !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* 弹窗内容 */
    [class*="max-w-"] {
        max-width: 100% !important;
        margin: 0 1rem !important;
    }
    
    /* 弹窗面板 */
    [class*="bg-slate-9"] {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
}

/* ========== 加载屏幕 ========== */
#loading-screen {
    background: rgba(9, 9, 11, 0.95) !important;
    backdrop-filter: blur(8px);
}

#loading-status {
    color: var(--amber-400) !important;
}

/* ========== 修复原UI硬编码样式 ========== */
body {
    background-color: var(--zinc-950) !important;
}

/* 移除所有霓虹发光效果 */
* {
    text-shadow: none !important;
}

button[class*="shadow-[0_0_"] {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}

/* ========== UI 报告局部修复 ========== */
/* 只提高设置弹窗的辅助说明对比度，保留其他区域的灰阶。 */
body #modal-system-settings span.text-slate-500 {
    color: var(--zinc-400) !important;
}

/* 服务器独立按内容确定高度，避免少卡服务器被同排多卡服务器拉伸。 */
.tap-server-card {
    align-self: start;
}

/* 同一 GPU 网格行内，空槽与已装卡均按内容确定行高并拉伸对齐。 */
.tap-server-card .grid > .gpu-slot {
    height: auto !important;
    min-height: 48px !important;
    min-width: 0;
}

.gpu-slot[draggable="true"] > div {
    flex-wrap: wrap;
}

.gpu-slot[draggable="true"] .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
    min-width: 0;
}