/* ============ 车贷计算器：仅保留工具专属样式（布局/卡片/按钮/空状态等公共样式由 common.css 提供） ============ */

/* 左右两栏按 1:2 分配（公共 .section-row 默认为 1:1；移动端由 common.css 的 !important 规则折叠为单列） */
.car-loan-layout {
    grid-template-columns: 1fr 2fr;
}

/* 两张结果卡横向并排，需顶部对齐：抵消公共 .result-card + .result-card 的纵向间距 */
.results-grid .result-card + .result-card {
    margin-top: 0;
}

/* ---------- 输入区 ---------- */
.input-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.input-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    width: 80px;
    flex-shrink: 0;
}

.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-unit {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    width: 24px;
}

.input-unit.placeholder {
    visibility: hidden;
}

.input-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 180px;
}

/* 输入框 / 下拉框（外观与公共 .setting-input 一致，但保持左侧标签+定宽的专属布局） */
.smart-input {
    width: 180px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.smart-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.smart-input::placeholder {
    color: #9ca3af;
}

.smart-input.small {
    width: 80px;
    padding: 6px 10px;
    font-size: 13px;
}

.smart-select {
    padding: 8px 8px 8px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    background: white;
    width: 180px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    text-indent: 2px;
}

.smart-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.smart-select.small {
    padding: 6px 8px;
    font-size: 13px;
}

.smart-select.small.year-select {
    width: calc(50% - 4px);
    padding: 8px 8px 8px 10px;
    font-size: 14px;
}

.smart-select.small.month-select {
    width: calc(50% - 4px);
    padding: 8px 8px 8px 10px;
    font-size: 14px;
}

/* 错误提示 */
.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* ---------- 结果区 ---------- */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 100%;
}

.result-card.principal-interest {
    border: 2px solid #86efac;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.result-card.principal {
    border: 2px solid #fca5a5;
    background: linear-gradient(135deg, #fef2f2, #ffffff);
}

.result-header {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 6px;
    margin: -15px -15px 16px -15px;
    text-align: center;
}

.result-card.principal-interest .result-header {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.result-card.principal .result-header {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.result-content {
    flex: 1;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.result-item:last-of-type {
    border-bottom: none;
}

.item-label {
    font-size: 13px;
    color: #6b7280;
}

.item-value {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.item-value.highlight {
    color: #6b21a8;
    font-size: 18px;
}

/* 空状态图标/副文案（公共 .empty-state 已提供布局，这里补足图标尺寸与颜色） */
.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-hint {
    font-size: 14px;
    color: #6b7280;
}

/* 节省利息对比 */
.savings-section {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
}

.savings-header {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
}

.savings-amount {
    font-size: 24px;
    font-weight: 700;
    color: #b45309;
}

.savings-unit {
    font-size: 14px;
    font-weight: 400;
    color: #92400e;
    margin-left: 4px;
}

.savings-desc {
    font-size: 12px;
    color: #b45309;
    margin-top: 6px;
}

/* ---------- 还款明细 ---------- */
.schedule-section {
    margin-top: 24px;
}

.schedule-header {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.schedule-card {
    border-radius: 10px;
    overflow: hidden;
}

.schedule-card.pi {
    border: 2px solid #86efac;
}

.schedule-card.p {
    border: 2px solid #fca5a5;
}

.schedule-card-header {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.schedule-card-header-row {
    padding: 12px 16px;
}

.schedule-card.pi .schedule-card-header-row {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.schedule-card.p .schedule-card-header-row {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.download-buttons {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.05);
}

.download-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #374151;
    transition: all 0.2s;
    border: 1px solid #e5e7eb;
}

.download-btn:hover {
    background: #f3f4f6;
}

.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.schedule-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.schedule-table th,
.schedule-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.schedule-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    position: sticky;
    top: 0;
    z-index: 1;
}

.schedule-table th:first-child,
.schedule-table td:first-child {
    min-width: 50px;
}

.schedule-table th:nth-child(2),
.schedule-table td:nth-child(2) {
    min-width: 80px;
}

.schedule-table th:nth-child(n+3),
.schedule-table td:nth-child(n+3) {
    min-width: 90px;
}

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

.schedule-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- 深色模式（仅工具专属元素） ---------- */
body.dark .input-label,
body.dark .item-label {
    color: #9ca3af;
}

body.dark .item-value {
    color: #e5e7eb;
}

body.dark .input-unit,
body.dark .empty-hint {
    color: #9ca3af;
}

body.dark .smart-input,
body.dark .smart-select {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark .schedule-table th {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark .schedule-table tbody tr:hover {
    background: #1f2937;
}

body.dark .download-btn {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark .download-btn:hover {
    background: #374151;
}

@media (max-width: 768px) {
    .results-grid,
    .schedule-grid {
        grid-template-columns: 1fr;
    }
}