/* =========================================
   Mortgage Calculator - Specific Styles
   所有通用样式已移至 style.css
   ========================================= */

/* --- 可选字段区域 --- */
#optional-fields {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

/* --- 年度增长率输入网格 --- */
.annual-increase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.annual-increase-grid .form-group {
    margin-bottom: 0;
    min-width: 0;}

.annual-increase-grid .form-group label {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 还款计划表格 --- */
.schedule-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 14px; 
    text-align: right; 
}

.schedule-table th { 
    background: #f0f0f0; 
    padding: 10px; 
    border-bottom: 2px solid #ddd;
    font-weight: 600;
    color: #333;
}

.schedule-table td { 
    padding: 8px 10px; 
    border-bottom: 1px solid #eee; 
}

.schedule-table tr:nth-child(even) { 
    background: #fcfcfc; 
}

.schedule-table tr:hover {
    background: #f5f5f5;
}

/* 年份列居中加粗 */
.schedule-table td:first-child {
    text-align: center;
    font-weight: bold;
}

/* 余额列高亮 */
.schedule-table td:nth-child(3) {
    color: #00796b;
    font-weight: bold;
}

/* --- 隐藏的月度数据 --- */
.monthly-hidden { 
    display: none; 
}

/* --- 可选字段切换复选框 --- */
#toggle-optional {
    margin-right: 8px;
    cursor: pointer;
}

/* --- 响应式优化 --- */
@media screen and (max-width: 768px) {
    .annual-increase-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .schedule-table {
        font-size: 12px;
    }
    
    .schedule-table th,
    .schedule-table td {
        padding: 6px 8px;
    }
}

/* --- 打印时显示所有月度数据 --- */
@media print {
    .monthly-hidden { 
        display: table-row !important; 
    }
    
    .schedule-table, 
    .schedule-table th, 
    .schedule-table td { 
        border: 1px solid #999 !important; 
    }
    
    .schedule-table th, 
    .schedule-table td { 
        font-size: 9pt !important; 
        padding: 4px !important; 
    }
}
@media screen and (max-width: 480px) {
    .annual-increase-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}