/* 基础变量定义：统一管理深浅色模式核心色值 */
:root {
    /* 白天模式基础色 */
    --light-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --light-card-bg: #fff;
    --light-text-main: #2c3e50;
    --light-text-secondary: #555;
    --light-text-placeholder: #95a5a6;
    --light-border: #ddd;
    --light-shadow: 0 1px 6px rgba(0,0,0,0.05);
    
    /* 红色系（库存相关）- 深浅模式通用色调 */
    --stock-red-main: #e74c3c;
    --stock-red-light: #fff8f8;
    --stock-red-placeholder: #f18177;
    --stock-red-focus: rgba(231, 76, 60, 0.2);
    
    /* 功能色 - 深浅模式通用色调 */
    --income-blue: #3498db;
    --sales-green: #2ecc71;
    --month-purple: #9b59b6;
    --tip-purple: #9b59b6;
    --note-bg: #fafafa;
}

/* 深色模式变量覆盖 */
@media (prefers-color-scheme: dark) {
    :root {
        --light-bg: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
        --light-card-bg: #2d3748;
        --light-text-main: #f7fafc;
        --light-text-secondary: #cbd5e0;
        --light-text-placeholder: #718096;
        --light-border: #4a5568;
        --light-shadow: 0 1px 6px rgba(0,0,0,0.3);
        
        /* 深色模式红色系调整（降低饱和度，避免刺眼） */
        --stock-red-main: #fc8181;
        --stock-red-light: #2c1e1e;
        --stock-red-placeholder: #e53e3e;
        --stock-red-focus: rgba(239, 68, 68, 0.3);
        
        /* 深色模式功能色调整（提高对比度） */
        --income-blue: #63b3ed;
        --sales-green: #68d391;
        --month-purple: #b794f4;
        --tip-purple: #b794f4;
        --note-bg: #242c3a;
    }
}

/* 全局样式重置与基础设置 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', sans-serif; }
body { 
    background: var(--light-bg); 
    padding: 10px 0 70px; 
    min-height: 100vh; 
    color: var(--light-text-main); 
}

/* 头部样式 */
.header { 
    text-align: center; 
    margin-bottom: 12px; 
    padding: 12px; 
    background: linear-gradient(90deg, #2c3e50, #4a6491); 
    color: white; 
    border-radius: 0 0 12px 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
}
.header h1 { font-size: 20px; margin-bottom: 3px; }
.header p { font-size: 12px; opacity: 0.8; }

/* 数据统计卡片区域 */
.stats-container { 
    display: flex; 
    justify-content: space-around; 
    align-items: stretch; 
    margin: 8px auto; 
    width: 95%; 
    max-width: 1000px; 
    gap: 5px; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    padding: 0 5px;
}
.stat-card { 
    flex: 1; 
    min-width: 80px; 
    max-width: 120px; 
    background: var(--light-card-bg); 
    border-radius: 8px; 
    padding: 6px 4px; 
    text-align: center; 
    box-shadow: var(--light-shadow); 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stat-card h3 { 
    font-size: 11px; 
    color: var(--light-text-placeholder); 
    margin-bottom: 2px; 
    white-space: nowrap; 
}
.stat-value { 
    font-size: 13px; 
    font-weight: bold; 
    color: var(--light-text-main); 
    white-space: nowrap; 
}
/* 统计卡片顶部色条（功能区分） */
.income-stat { border-top: 3px solid var(--income-blue); }
.sales-stat { border-top: 3px solid var(--sales-green); }
.stock-stat { border-top: 3px solid var(--stock-red-main); }
.monthly-income-stat { border-top: 3px solid var(--month-purple); }

/* 日期选择与初始库存区域 - 核心布局调整 */
/* 1. 日期选择区域 - 核心布局+防溢出（库存占比最高+不溢出屏幕） */
/* 1. 日期选择区域 - 紧凑布局（无滚动，一行收窄） */
/* 1. 核心容器：紧凑不拥挤，视觉舒展 */
/* 日期选择与初始库存区域 - 视觉重设计 */
.date-select-container { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    flex-wrap: nowrap; 
    width: 96%; 
    max-width: 950px; 
    margin: 0 auto 8px; 
    padding: 7px 12px; 
    background: var(--light-card-bg); 
    border-radius: 16px; 
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06); 
    overflow-x: hidden; 
}

.global-stock-select { 
    flex-grow: 3; 
    min-width: 130px; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    position: relative; 
}
.year-select { 
    flex-grow: 1.5; 
    min-width: 100px; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}
.month-select { 
    flex-grow: 1; 
    min-width: 90px; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

.global-stock-select label, .year-select label, .month-select label { 
    font-size: 12px; 
    color: var(--light-text-secondary); 
    white-space: nowrap; 
    font-weight: 500; 
}

#globalInitStock { 
    flex: 1; 
    padding: 5px 24px 5px 10px; 
    border: 1px solid #E5E6EB; 
    border-radius: 8px; 
    font-size: 13px; 
    outline: none; 
    background: #FFF5F5; 
    color: var(--stock-red-main) !important; 
    font-weight: 600; 
    transition: all 0.2s; 
}
#globalInitStock:focus { 
    border-color: var(--stock-red-main); 
    box-shadow: 0 0 0 2px var(--stock-red-focus); 
}

.global-stock-select::after { 
    content: '双'; 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 12px; 
    color: #86909C; 
    pointer-events: none; 
}

#yearSelect, #monthSelect { 
    flex: 1; 
    padding: 5px 10px; 
    border: 1px solid #E5E6EB; 
    border-radius: 8px; 
    font-size: 13px; 
    outline: none; 
    background: #F7F8FA; 
    color: var(--light-text-main);
    appearance: none; 
    background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 8 5" fill="%2386909C"><path d="M0 0l4 5 4-5z"/></svg>');
    background-repeat: no-repeat; 
    background-position: right 8px center; 
    background-size: 6px; 
    transition: all 0.2s; 
}
#yearSelect:focus, #monthSelect:focus { 
    border-color: var(--income-blue); 
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); 
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    #globalInitStock { 
        background: #2c1e1e; 
        border-color: #4a5568; 
    }
    #globalInitStock:focus { 
        border-color: var(--stock-red-main); 
        box-shadow: 0 0 0 2px var(--stock-red-focus); 
    }
    #yearSelect, #monthSelect { 
        background: #242c3a; 
        border-color: #4a5568; 
    }
    #yearSelect:focus, #monthSelect:focus { 
        border-color: var(--income-blue); 
    }
}


/* 账本主体区域 */
.book-container { 
    width: 92%; 
    max-width: 1000px; 
    height: calc(100vh - 180px); 
    margin: 0 auto; 
    border: 1px solid var(--light-border); 
    border-radius: 12px; 
    overflow: hidden; 
    background: var(--light-card-bg); 
    box-shadow: var(--light-shadow); 
    position: relative; 
}
.pages-wrapper { width: 100%; height: 100%; position: relative; }
.book-page { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    padding: 12px; 
    overflow-y: auto; 
    display: none; 
    background: var(--light-card-bg); 
}
.book-page.active { 
    display: block; 
    animation: pageFade 0.3s ease-out; 
}
@keyframes pageFade { 
    from { opacity: 0; transform: translateX(15px); } 
    to { opacity: 1; transform: translateX(0); } 
}

/* 页面标题与日期 */
.page-title { 
    font-size: 16px; 
    color: var(--light-text-main); 
    text-align: center; 
    margin-bottom: 10px; 
    padding-bottom: 5px; 
    border-bottom: 2px solid var(--light-border); 
}
.page-date { 
    font-size: 12px; 
    color: var(--stock-red-main); 
    text-align: center; 
    margin-bottom: 10px; 
    padding: 4px 10px; 
    background: var(--stock-red-light); 
    border-radius: 16px; 
    width: fit-content; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: var(--light-shadow); 
}

/* 输入卡片样式 */
.input-card { 
    background: var(--note-bg); 
    border-radius: 8px; 
    padding: 12px; 
    margin-bottom: 10px; 
    box-shadow: var(--light-shadow); 
    border-left: 3px solid var(--income-blue); 
}
.input-card h3 { 
    font-size: 14px; 
    color: var(--light-text-main); 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
}
.input-card h3::before { 
    content: ""; 
    width: 3px; 
    height: 14px; 
    background: var(--income-blue); 
    margin-right: 6px; 
    border-radius: 1px; 
}

/* 提示文本 */
.tip-text { 
    font-size: 11px; 
    color: var(--tip-purple); 
    margin: 4px 0 8px; 
    padding-left: 12px; 
}

/* 输入行样式 */
.input-row { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 8px; 
    padding: 8px; 
    background: var(--light-card-bg); 
    border-radius: 6px; 
    box-shadow: var(--light-shadow); 
}
.input-row:last-child { margin-bottom: 0; }
.input-row label { 
    color: var(--light-text-secondary); 
    font-size: 12px; 
    font-weight: 500; 
    min-width: 80px; 
}
.price-tag { 
    color: var(--light-text-placeholder); 
    font-size: 11px; 
    margin-left: 3px; 
}

/* 输入组样式（包含多个输入项） */
.input-group { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    flex-wrap: wrap; 
    flex: 1; 
    position: relative; 
    padding-right: 30px; /* 给删除按钮留空间 */
}
/* 输入框/选择框统一样式 */
.input-group .income-input, 
.input-group .sales-input, 
.input-group .stock-num,
.input-group .stock-type,
.input-group .stock-name,
.input-group .custom-name,
.input-group .custom-price { 
    flex: 1; 
    min-width: 70px; 
    max-width: 150px; 
    padding: 6px 8px; 
    border: 1px solid var(--light-border); 
    border-radius: 5px; 
    font-size: 12px; 
    outline: none; 
    transition: all 0.3s; 
    background: var(--light-card-bg); 
    color: var(--light-text-main);
}
/* 库存类型选择框（下拉箭头） */
.input-group .stock-type {
    min-width: 90px;
    max-width: 120px;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 8 5" fill="%23666"><path d="M0 0l4 5 4-5z"/></svg>');
    background-repeat: no-repeat; 
    background-position: right 8px center; 
    background-size: 6px;
}
/* 输入框聚焦样式 */
.input-group input:focus, .input-group select:focus { 
    border-color: var(--income-blue); 
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); 
}
/* 单位文本 */
.input-group .unit { 
    color: var(--light-text-placeholder); 
    font-size: 12px; 
    white-space: nowrap; 
    min-width: 25px; 
}

/* 删除按钮 */
.delete-stock-btn, .delete-btn { 
    position: absolute; 
    top: 50%; 
    right: 3px; 
    transform: translateY(-50%); 
    background: transparent; 
    border: none; 
    color: var(--stock-red-main); 
    font-size: 16px; 
    cursor: pointer; 
    z-index: 1; 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s; 
}
.delete-stock-btn:hover, .delete-btn:hover { 
    background: var(--stock-red-focus); 
}

/* 添加按钮 */
.add-btn { 
    margin-top: 8px; 
    padding: 6px 12px; 
    background: #2c3e50; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    font-size: 12px; 
    cursor: pointer; 
    transition: background 0.2s; 
    width: 100%; 
}
.add-btn:hover { 
    background: #34495e; 
}

/* 结果显示（总收入、总销量、剩余库存） */
.stock-result { 
    color: var(--sales-green); 
    font-weight: 600; 
    background: #f8fdfa; 
    padding: 6px 10px; 
    border-radius: 5px; 
    font-size: 12px; 
    border: 1px solid #e1f5e1; 
    min-width: 70px; 
    text-align: center; 
}
/* 深色模式结果显示适配 */
@media (prefers-color-scheme: dark) {
    .stock-result { 
        background: #1e293b; 
        border-color: #27ae60; 
    }
}

/* 备注输入框 */
.note-input { 
    width: 100%; 
    min-height: 60px; 
    padding: 8px; 
    border: 1px solid var(--light-border); 
    border-radius: 5px; 
    font-size: 12px; 
    outline: none; 
    resize: vertical; 
    line-height: 1.5; 
    transition: all 0.3s; 
    background: var(--light-card-bg); 
    color: var(--light-text-main);
}
.note-input:focus { 
    border-color: var(--income-blue); 
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); 
}

/* 底部浮动菜单 */
.float-menu { 
    position: fixed; 
    bottom: 60px; 
    left: 20px; 
    z-index: 9999; 
}
.menu-btn.main { 
    background: var(--stock-red-main); 
    font-weight: 600; 
    width: 90px; 
    text-align: center; 
    padding: 7px 0; 
}
.sub-menu { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    position: absolute; 
    bottom: 100%; 
    left: 0; 
    transform: none; 
    padding-bottom: 8px; 
}
.sub-menu .menu-btn { 
    width: 90px; 
    padding: 6px 0; 
    text-align: center; 
}
.menu-btn { 
    background: #2c3e50; 
    color: white; 
    border: none; 
    border-radius: 24px; 
    cursor: pointer; 
    font-size: 12px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); 
    transition: all 0.3s; 
}
.menu-btn:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 3px 8px rgba(0,0,0,0.2); 
}
.menu-btn:disabled { 
    background: var(--light-text-placeholder); 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none; 
}
.sub-menu.hidden { display: none; }

/* 加载提示 */
.load-tip { 
    position: fixed; 
    top: 10px; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 5px 10px; 
    border-radius: 16px; 
    font-size: 12px; 
    color: white; 
    background: rgba(44, 62, 80, 0.8); 
    border: 1px solid rgba(255,255,255,0.1); 
    opacity: 0; 
    transition: opacity 0.2s; 
    pointer-events: none; 
    z-index: 1000; 
}
.load-tip.success { 
    background: rgba(46, 204, 113, 0.8); 
}
.load-tip.show { opacity: 1; }

/* 页面加载遮罩 */
.page-loading-mask { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.9); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 100; 
    border-radius: 12px; 
    pointer-events: all; 
}
/* 深色模式加载遮罩适配 */
@media (prefers-color-scheme: dark) {
    .page-loading-mask { 
        background: rgba(26, 32, 44, 0.9); 
    }
    .loading-text { 
        color: var(--light-text-main); 
    }
}
.loading-spinner { 
    width: 30px; 
    height: 30px; 
    border: 3px solid #f3f3f3; 
    border-top: 3px solid var(--income-blue); 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
    margin-right: 12px; 
}
.loading-text { 
    font-size: 14px; 
    color: #2c3e50; 
    font-weight: 500; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* 自定义销售/库存记录容器 */
.custom-sales-container, .stock-record-container { margin-top: 8px; }

/* 详情弹窗 */
.modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    display: none; 
    align-items: center; 
    justify-content: center; 
    z-index: 10000; 
}
.modal-content { 
    background: var(--light-card-bg); 
    border-radius: 12px; 
    padding: 20px; 
    width: 90%; 
    max-width: 600px; 
    max-height: 80vh; 
    overflow-y: auto; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    position: relative; 
}
.modal-close { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: transparent; 
    border: none; 
    color: var(--stock-red-main); 
    font-size: 20px; 
    cursor: pointer; 
}
.modal-title { 
    font-size: 18px; 
    color: var(--light-text-main); 
    margin-bottom: 15px; 
    text-align: center; 
}
.modal-section { margin-bottom: 15px; }
.modal-section h4 { 
    font-size: 14px; 
    color: var(--income-blue); 
    margin-bottom: 8px; 
}
.modal-item { 
    display: flex; 
    justify-content: space-between; 
    font-size: 13px; 
    margin-bottom: 5px; 
}
.modal-item span:first-child { color: var(--light-text-secondary); }
.modal-item span:last-child { 
    color: var(--light-text-main); 
    font-weight: bold; 
}