/* Base模板 - 全局样式和变量定义
 * 
 * 职责说明：
 * - 定义全局CSS变量（颜色、过渡时间等）
 * - 基础布局样式（body、navbar、container等）
 * - 确认对话框和Toast提示样式
 * - 响应式断点和全局媒体查询
 * - 动画效果定义
 * - 为所有页面提供统一的基础样式体系
 */

/* CSS颜色变量 */
:root {
    /* 主色调 - 现代低饱和度灰蓝色系 */
    --primary-color: #6b7280;
    --secondary-color: #9ca3af;
    --success-color: #6ee7b7;
    --info-color: #93c5fd;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    
    /* 文字颜色 - 现代灰色系统 */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-dark: #111827;
    --text-light: #6b7280;
    
    /* 背景颜色 - 温暖中性色 */
    --bg-light: #f9fafb;
    --bg-white: #ffffff;
    --bg-muted: #f3f4f6;
    --bg-danger-light: #fef2f2;
    --bg-success-light: #f0fdf4;
    
    /* 边框颜色 */
    --border-color: #e5e7eb;
    
    /* 季租房主题色 - 温和的珊瑚色 */
    --quarterly-primary: #fca5a5;
    --quarterly-light: #fef2f2;
    --quarterly-secondary: #f8b4b4;
    --quarterly-border: #fca5a5;
    --quarterly-text: #7f1d1d;
    --quarterly-text-dark: #651f1f;
    
    /* 普通房间主题色 - 温和的青色 */
    --normal-primary: #67e8f9;
    --normal-light: #f0fdff;
    --normal-secondary: #a5f3fc;
    --normal-border: #67e8f9;
    --normal-text: #155e75;
    --normal-text-dark: #0e4a5e;
    
    /* 动态主题色 - 统一的蓝灰色调 */
    --business-color: #3b82f6;
    --business-light: #eff6ff;
    --business-text: #1e40af;
    
    --owner-color: #34d399;
    --owner-light: #ecfdf5;
    --owner-text: #065f46;
    
    --expense-color: #f59e0b;
    --expense-light: #fffbeb;
    --expense-text: #92400e;
    
    /* 按钮主题色 - 低饱和度色调 */
    --btn-owner-bg: #eff6ff;
    --btn-owner-hover: #dbeafe;
    --btn-owner-text: #1e40af;
    
    --btn-bank-bg: #ecfdf5;
    --btn-bank-hover: #d1fae5;
    --btn-bank-text: #065f46;
    
    --btn-company-bg: #fffbeb;
    --btn-company-hover: #fef3c7;
    --btn-company-text: #92400e;
    
    --btn-reload-bg: #f5f3ff;
    --btn-reload-hover: #ede9fe;
    --btn-reload-text: #5b21b6;
    
    /* 状态颜色 - 清晰但柔和的状态区分 */
    --status-未下载-bg: #f9fafb;
    --status-未下载-text: #9ca3af;
    --status-已下载-bg: #eff6ff;
    --status-已下载-text: #3b82f6;
    --status-已核对-bg: #ecfdf5;
    --status-已核对-text: #059669;
    --status-已支付-bg: #fffbeb;
    --status-已支付-text: #d97706;
    
    /* 支出类型颜色 - 低饱和度但直观的映射 */
    --expense-electricity: #fbbf24;
    --expense-electricity-text: #92400e;
    --expense-water: #06b6d4;
    --expense-water-text: #155e75;
    --expense-refund: #10b981;
    --expense-refund-text: #065f46;
    --expense-repair: #ef4444;
    --expense-repair-text: #991b1b;
    --expense-general: #6b7280;
    --expense-general-text: #374151;
    
    /* 渐变颜色补充 - 自然过渡 */
    --gradient-business-light: #f8fafc;
    --gradient-owner-light: #f7fffe;
    --gradient-expense-light: #fffdf7;
    
    /* 按钮渐变色补充 - 低对比度 */
    --btn-owner-gradient: #bfdbfe;
    --btn-bank-gradient: #a7f3d0;
    --btn-company-gradient: #fed7aa;
    --btn-reload-gradient: #c4b5fd;
    
    /* 房间主题渐变色补充 - 极其温和的渐变 */
    --quarterly-gradient-1: #fef2f2;
    --quarterly-gradient-2: #fef1f1;
    --quarterly-gradient-3: #fdebeb;
    --quarterly-gradient-4: #fce8e8;
    --quarterly-gradient-5: #fbe2e2;
    
    --normal-gradient-1: #f0fdff;
    --normal-gradient-2: #ecfeff;
    --normal-gradient-3: #e1fffe;
    
    /* 卡片主题渐变色 - 专业低调色调 */
    --card-info-gradient: #1d4ed8;
    --card-warning-gradient: #d97706;
    --card-purple-1: #7c3aed;
    --card-purple-2: #5b21b6;
    
    /* 特殊灰色 - 现代灰色系统 */
    --gray-light: #6b7280;
    --gray-lighter: #d1d5db;
    
    /* 常用rgba颜色 - 极低透明度 */
    --shadow-light: rgba(0, 0, 0, 0.03);
    --shadow-medium: rgba(0, 0, 0, 0.06);
    --shadow-dark: rgba(0, 0, 0, 0.1);
    --bg-overlay: rgba(255, 255, 255, 0.9);
    --bg-overlay-strong: rgba(255, 255, 255, 0.97);
    
    /* 主题rgba颜色 - 极低强度 */
    --business-rgba-light: rgba(59, 130, 246, 0.04);
    --business-rgba-medium: rgba(59, 130, 246, 0.08);
    --business-rgba-border: rgba(59, 130, 246, 0.12);
    --business-rgba-hover: rgba(59, 130, 246, 0.16);
    --business-rgba-text: rgba(59, 130, 246, 0.7);
    
    --success-rgba-light: rgba(52, 211, 153, 0.06);
    --success-rgba-medium: rgba(52, 211, 153, 0.1);
    --success-rgba-border: rgba(52, 211, 153, 0.14);
    --success-rgba-hover: rgba(52, 211, 153, 0.18);
    --success-rgba-shadow: rgba(52, 211, 153, 0.12);
    
    /* 字体大小标准化 */
    --font-xs: 0.75rem;      /* 12px */
    --font-sm: 0.875rem;     /* 14px */
    --font-base: 1rem;       /* 16px */
    --font-lg: 1.125rem;     /* 18px */
    --font-xl: 1.25rem;      /* 20px */
    
    /* 统一过渡时间 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* 基础布局样式 */
body {
    padding-top: 70px;
}

.navbar {
    background-color: var(--bg-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1030;
}

.container {
    max-width: 960px;
}

.flash-messages {
    margin-top: 20px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* 进度条容器样式 */
.progress-container {
    position: relative;
    height: 100%;
    background-color: var(--bg-light);
    transition: background-color var(--transition-normal);
}

.progress-container.downloading {
    background-color: #e3f2fd;
}

.progress-container.success {
    background-color: #e8f5e9;
}

.progress-container.error {
    background-color: #ffebee;
}

.progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
}

/* 确认对话框样式 - 提高优先级 */
body .custom-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999 !important;
    animation: fadeIn var(--transition-normal);
    justify-content: center;
    align-items: center;
}

body .custom-dialog-overlay.show {
    display: flex !important;
}

body .custom-dialog {
    position: relative;
    background-color: var(--bg-white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    animation: slideIn var(--transition-normal);
    margin: 20px;
}

body .custom-dialog-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

body .custom-dialog-header i {
    font-size: 1.5rem;
    margin-right: 12px;
}

body .custom-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
}

body .custom-dialog-content {
    margin-bottom: 25px;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 1rem;
}

body .custom-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

body .custom-dialog-cancel, body .custom-dialog-confirm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    border-radius: 0.375rem !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
    user-select: none !important;
}

body .custom-dialog-cancel {
    color: var(--text-muted) !important;
    background-color: transparent !important;
    border-color: var(--text-muted) !important;
}

body .custom-dialog-cancel:hover {
    color: var(--bg-white) !important;
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted) !important;
}

body .custom-dialog-confirm {
    color: var(--bg-white) !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

body .custom-dialog-confirm:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}

body .custom-dialog-cancel:focus, body .custom-dialog-confirm:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Toast提示样式 */
.custom-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--success-color);
    color: var(--bg-white);
    padding: 12px 24px;
    border-radius: 6px;
    z-index: 99999;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: none;
    align-items: center;
    gap: 8px;
}

.custom-toast i {
    font-size: 1rem;
}

/* 导航栏样式 */
.navbar-brand {
    font-weight: 600;
    color: var(--primary-color) !important;
}

/* 小屏幕响应式修复 */
@media (max-width: 768px) {
    /* 确保图标在小屏幕下正常显示 */
    .action-button i,
    .btn i,
    i.fas,
    i.far,
    i.fab {
        display: inline-block !important;
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        font-style: normal !important;
        font-variant: normal !important;
        text-rendering: auto !important;
        -webkit-font-smoothing: antialiased !important;
        min-width: 1em !important;
    }
    
    /* 按钮在小屏幕下的布局优化 */
    .action-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .action-button {
        min-width: auto !important;
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    /* 确保导航栏图标显示 */
    .navbar i {
        display: inline-block !important;
    }
    
    /* 统计卡片在小屏幕下的优化 */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .summary-card {
        padding: 1rem !important;
    }
    
    .summary-value {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .summary-cards {
        grid-template-columns: 1fr !important;
    }
    
    .action-button {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }
    
    .action-button span {
        display: none !important;
    }
    
    .monthly-table {
        overflow-x: auto !important;
    }
    
    .monthly-table table {
        min-width: 800px !important;
    }
}

/* 响应式导航栏优化 */
@media (max-width: 991.98px) {
    /* 小屏幕时的导航栏样式 */
    .navbar-collapse {
        background-color: var(--bg-white);
        border-radius: 0.375rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        margin-top: 0.5rem;
        padding: 0.5rem 0;
    }
    
    .navbar-nav {
        padding: 0.5rem 1rem;
    }
    
    .nav-item {
        margin: 0.25rem 0;
    }
    
    .nav-link {
        padding: 0.5rem 1rem !important;
        border-radius: 0.25rem;
        transition: background-color var(--transition-fast);
    }
    
    .nav-link:hover {
        background-color: var(--bg-light);
    }
    
    /* 确保折叠时主内容不被遮挡 */
    body {
        padding-top: 80px;
    }
}

@media (max-width: 575.98px) {
    /* 超小屏幕优化 */
    body {
        padding-top: 90px;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .nav-link {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem !important;
    }
}