/* 
 * base.css - 全局基础样式与设计系统变量 
 * 风格：MacOS Big Sur+ / 现代玻璃拟态
 */

/* 与 mac.css 一致：首屏在 JS 完成 page_permissions 裁剪前隐藏侧栏 nav，减轻先露全量再收缩 */
html:not(.nav-permission-ready) aside.mac-sidebar > nav {
    visibility: hidden;
}

:root {
    /* --- 核心色彩系统 --- */
    /* 品牌色 - 哔哩哔哩粉与智投蓝的渐变融合 */
    --primary-color: #23ADE5; /* B站蓝，更适合商务/科技感 */
    --primary-hover: #1E9BCF;
    --primary-active: #1989B8;
    --primary-gradient: linear-gradient(135deg, #00C6FB 0%, #005BEA 100%);
    
    /* 强调色 */
    --accent-color: #FB7299; /* B站粉，用于特定强调 */
    --accent-gradient: linear-gradient(135deg, #FB7299 0%, #FF5C7C 100%);
    
    /* 语义色 */
    --success-color: #34C759;
    --warning-color: #FF9F0A;
    --danger-color: #FF3B30;
    --info-color: #5856D6;
    
    /* 背景色体系 - 亮色模式 */
    --mac-bg-primary: #F5F5F7; /* 整个页面的背景灰 */
    --mac-bg-secondary: rgba(255, 255, 255, 0.65); /* 侧边栏/顶栏的半透明背景 */
    --mac-bg-card: rgba(255, 255, 255, 0.85); /* 卡片背景 */
    --mac-bg-card-hover: rgba(255, 255, 255, 0.95);
    
    /* 文本色 */
    --text-primary: #1D1D1F; /* 接近纯黑 */
    --text-secondary: #86868B; /* 次级灰 */
    --text-tertiary: #AEAEB2;
    --text-disabled: #C7C7CC;
    
    /* 边框与分割线 */
    --border-light: rgba(0, 0, 0, 0.05); /* 极淡边框 */
    --border-medium: rgba(0, 0, 0, 0.1);
    
    /* --- 投影系统 (Smooth Shadows) --- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03); /* 常态卡片 */
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06); /* 悬停/浮起 */
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); /* 模态框 */
    
    /* --- 核心度量 --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px; /* 卡片标准圆角 */
    --radius-xl: 24px;
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* --- 字体 --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-mono: "SF Mono", "Monaco", "Consolas", monospace;
    
    /* --- 动画 --- */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* iOS 风格缓动 */
    
    /* --- 玻璃拟态效果 --- */
    --backdrop-blur: blur(20px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 基础重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-sans);
    background-color: var(--mac-bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font-family: inherit;
}

/* --- 通用工具类 --- */

/* 布局 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }

/* 文本 */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.font-bold { font-weight: 600; }
.text-sm { font-size: 13px; }
.text-lg { font-size: 18px; }

/* 颜色主题类 (用于标签/徽章/图表) */
.theme-blue { --theme-color: #007AFF; --theme-bg: rgba(0, 122, 255, 0.1); }
.theme-green { --theme-color: #34C759; --theme-bg: rgba(52, 199, 89, 0.1); }
.theme-orange { --theme-color: #FF9F0A; --theme-bg: rgba(255, 159, 10, 0.1); }
.theme-pink { --theme-color: #FF2D55; --theme-bg: rgba(255, 45, 85, 0.1); }
.theme-purple { --theme-color: #AF52DE; --theme-bg: rgba(175, 82, 222, 0.1); }
.theme-teal { --theme-color: #5AC8FA; --theme-bg: rgba(90, 200, 250, 0.1); }

/* 状态颜色 */
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }
.text-info { color: var(--info-color); }

/* 常用组件基础 */

/* 徽章 (Badge/Tag) */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
}

.badge.success { background: rgba(52, 199, 89, 0.15); color: #248A3D; }
.badge.warning { background: rgba(255, 159, 10, 0.15); color: #B26E00; }
.badge.danger { background: rgba(255, 59, 48, 0.15); color: #C9241B; }
.badge.info { background: rgba(88, 86, 214, 0.15); color: #4340AE; }
.badge.gray { background: rgba(142, 142, 147, 0.15); color: #636366; }

/* 加载动画 */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}
.loading::after {
    content: "";
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 滚动条优化 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}