/* ============================================
   Mobile Optimization for Calculator Pages
   ============================================ */

/* Tablet and smaller devices */
@media (max-width: 768px) {
    
    /* Reduce container padding */
    .container {
        padding: 0.2rem 1rem;
    }
    
    /* Reduce spacing above calculator container */
    .calculator-layout {
        margin-top: 0 !important;
    }
    
    /* Compact calculator container */
    .calculator-container {
        padding: 0.5rem 1rem !important;
        margin-top: 0 !important;
    }
    
    /* Compact calculator headers */
    .calculator-container h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        line-height: 1.3 !important;
        padding-top: 0 !important;
    }
    
    /* 减少第一个表单元素的上边距 */
    .calculator-container form:first-of-type,
    .calculator-container .mode-switch:first-of-type,
    .calculator-container .example-scenarios:first-of-type {
        margin-top: 0 !important;
    }
    
    /* Compact mode switch buttons */
    .mode-switch {
        padding: 3px;
        margin-bottom: 0.5rem;
        margin-top: 0;
    }
    
    .mode-btn {
        padding: 0.45rem 0.9rem;
        font-size: 0.85rem;
    }
    
    /* Collapsible example scenarios - add collapsed class by default on mobile */
    .example-scenarios {
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.5rem;
        margin-top: 0;
    }
    
    .example-scenarios h4 {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
    }
    
    .example-scenarios h4::after {
        content: '▼';
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }
    
    .example-scenarios.collapsed h4::after {
        transform: rotate(-90deg);
    }
    
    .example-scenarios.collapsed .scenario-buttons {
        display: none;
    }
    
    .scenario-buttons {
        gap: 0.5rem;
    }
    
    .scenario-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }
    
    /* Compact form groups */
    .form-group {
        margin-bottom: 0.6rem;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.3rem;
    }
    
    /* 第一个表单组减少上边距 */
    .form-group:first-child,
    form > .form-group:first-child {
        margin-top: 0;
    }
    
    .form-group input,
    .form-group select {
        padding: 0.6rem 0.85rem;
        font-size: 0.95rem;
    }
    
    /* Horizontal layout for short labels (mobile space saver) */
    .form-group.compact-horizontal {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.65rem;
    }
    
    /* 排除特殊布局页面（如 Real Estate IRR 的 form-grid） */
    .form-grid .form-group.compact-horizontal {
        display: block; /* 恢复默认布局 */
    }
    
    .form-grid .form-group.compact-horizontal label {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .form-group.compact-horizontal label {
        flex: 0 0 140px;  /* 固定宽度，让输入框对齐 */
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.85rem;
    }
    
    .form-group.compact-horizontal input,
    .form-group.compact-horizontal select {
        flex: 1 1 auto;
        min-width: 0;
    }
    
    /* Special compact layout for cash-flow-row (more constrained) */
    .cash-flow-row .form-group.compact-horizontal label {
        flex: 0 0 105px;  /* 固定宽度，cash-flow-row 空间更紧凑 */
        font-size: 0.8rem;
    }
    
    .cash-flow-row .form-group.compact-horizontal {
        gap: 0.5rem;
        margin-bottom: 0;
    }
    
    /* Compact cash flow rows */
    .cash-flow-row {
        gap: 0.6rem;
        margin-bottom: 0.6rem;
    }
    
    /* Compact buttons */
    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* Compact result actions */
    .result-actions {
        gap: 0.5rem;
        margin: 1rem 0;
    }
    
    .action-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    /* Calculator layout stacking */
    .calculator-layout {
        flex-direction: column;
        gap: 1rem;
        margin-top: 0 !important;
    }
    
    .calculator-main {
        padding: 0;
        margin: 0;
    }
    
    /* Compact page header */
    .page-header {
        margin-bottom: 1rem;
        margin-top: 0;
        padding-top: 0;
    }
    
    .page-header h1 {
        font-size: 1.75rem;
        margin-bottom: 0.4rem;
        margin-top: 0;
    }
    
    .page-header p {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* Compact breadcrumb */
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.4rem 0;
        margin-bottom: 0.5rem;
    }
    
    /* Reduce spacing between breadcrumb and content */
    .breadcrumb + .calculator-layout,
    .breadcrumb + .page-header {
        margin-top: 0 !important;
    }
}

/* Extra small screens (phones < 400px) */
@media (max-width: 400px) {
    
    .container {
        padding: 0.2rem 0.75rem;
    }
    
    .calculator-container {
        padding: 0.5rem 0.75rem !important;
    }
    
    .calculator-container h1 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .mode-switch {
        margin-bottom: 0.5rem;
    }
    
    .mode-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
    }
    
    /* 超小屏幕：缩小标签宽度 */
    .form-group.compact-horizontal label {
        flex: 0 0 110px;  /* 更小的固定宽度 */
        font-size: 0.8rem;
    }
    
    .cash-flow-row .form-group.compact-horizontal label {
        flex: 0 0 85px;  /* cash-flow-row 更紧凑 */
    }
    
    .example-scenarios {
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.4rem;
    }
    
    .scenario-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
    }
    
    .breadcrumb {
        font-size: 0.7rem;
        padding: 0.3rem 0;
        margin-bottom: 0.4rem;
    }
    
    .form-group {
        margin-bottom: 0.5rem;
    }
    
    .form-group input,
    .form-group select {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    /* ✅ 场景卡片移动端优化 */
    .scenarios-list {
        grid-template-columns: 1fr;
    }
    
    .scenario-card-body p {
        font-size: 0.85rem;
    }
    
    .saved-scenarios {
        padding: 1rem;
        margin-top: 1.5rem;
    }
    
    .saved-scenarios h3 {
        font-size: 1.1rem;
    }
    
    /* Mortgage Calculator 移动端优化 */
    #payment-breakdown-details {
        margin-top: 1rem;
        padding: 0.75rem 0;
    }
    #payment-breakdown-details h4 {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    .breakdown-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.5rem 0;
    }
    .breakdown-item label {
        font-size: 0.85rem;
    }
    .breakdown-item span {
        font-size: 1rem;
        font-weight: 700;
    }
    .breakdown-section {
        margin-top: 1.25rem;
        padding-top: 0.75rem;
    }
    .breakdown-section h4 {
        font-size: 0.85rem;
    }
    #amortization-chart {
        margin-top: 1.5rem;
    }
    
    /* ROI Calculator 移动端优化 */
    #roi-gauge-chart {
        margin-top: 1.5rem;
    }
    
    /* Cap Rate Calculator 移动端优化 */
    #cap-rate-gauge-chart {
        margin-top: 1.5rem;
    }
    
    /* Payback Period Calculator 移动端优化 */
    #cumulative-cashflow-chart {
        margin-top: 1.5rem;
    }
    
    /* Tax Calculator 移动端优化 */
    #tax-breakdown-chart,
    #income-distribution-chart {
        margin-top: 1.5rem;
        min-height: 300px;
    }
    
    /* Amortization Calculator 移动端优化 */
    .chart-container {
        margin: 1.5rem 0;
        padding: 1rem;
    }
    #payment-chart,
    #balance-chart {
        min-height: 300px;
    }
    
    /* Retirement Calculator 移动端优化 */
    .analysis-list li {
        font-size: 0.9rem;
        padding: 0.6rem;
    }
    #savings-growth-chart,
    #income-comparison-chart {
        min-height: 300px;
    }
}

/* === Homepage Mobile Optimizations === */
@media (max-width: 768px) {
    
    /* Trust Badges - Stack vertically on mobile */
    .trust-badges-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .trust-badge {
        padding: 1rem;
    }
    
    .trust-badge svg {
        width: 32px;
        height: 32px;
    }
    
    .trust-badge h4 {
        font-size: 1rem;
    }
    
    .trust-badge p {
        font-size: 0.85rem;
    }
    
    /* How It Works - Stack vertically */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .step-card {
        padding: 1.5rem 1rem;
    }
    
    .step-card h3 {
        font-size: 1.2rem;
    }
    
    .step-card p {
        font-size: 0.95rem;
    }
    
    /* Calculator Categories */
    .category-title {
        font-size: 1.3rem;
        gap: 0.5rem;
    }
    
    .category-title svg {
        width: 20px;
        height: 20px;
    }
    
    /* Calculator Cards - 2 columns on tablets */
    .calculator-category .grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .calculator-card {
        padding: 1.5rem;
        grid-template-columns: 44px 1fr;
        gap: 0 0.75rem;
    }
    
    /* 移动端保持图标和标题同行但尺寸稍大 */
    .calculator-card .card-icon {
        width: 44px;
        height: 44px;
    }
    
    .calculator-card .card-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .calculator-card h3 {
        font-size: 1.1rem;
        min-height: 44px;
    }
    
    .calculator-card p {
        font-size: 0.9rem;
        margin-top: 0.75rem;
    }
    
    /* Blog Cards */
    .blog-image {
        height: 180px;
    }
    
    .blog-content {
        padding: 1.25rem;
    }
    
    .blog-meta {
        font-size: 0.8rem;
        gap: 0.75rem;
    }
    
    .blog-content h3 {
        font-size: 1.1rem;
    }
    
    .blog-content p {
        font-size: 0.9rem;
    }
    
    /* Page Header */
    .page-header h2 {
        font-size: 1.75rem;
    }
    
    .page-header p {
        font-size: 1rem;
    }
    
    /* Section Padding */
    .trust-section,
    .how-it-works-section,
    .full-toolkit-section,
    .featured-posts {
        padding: 2rem 0;
    }
}

@media (max-width: 480px) {
    
    /* Trust Badges - Single column on small phones */
    .trust-badges-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .trust-badge {
        padding: 0.75rem;
    }
    
    /* Calculator Cards - Single column */
    .calculator-category .grid {
        grid-template-columns: 1fr;
    }
    
    /* Blog Cards - Single column */
    .featured-posts .grid {
        grid-template-columns: 1fr;
    }
    
    .blog-image {
        height: 160px;
    }
    
    /* Category Badges - Adjust for mobile */
    .card-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
        top: -16px;
        right: 8px;
    }
    
    /* Buttons */
    .btn, .btn-outline {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }
    
    /* Section Padding */
    .trust-section,
    .how-it-works-section,
    .full-toolkit-section,
    .featured-posts {
        padding: 1.5rem 0;
    }
    
    .page-header {
        margin-bottom: 1.5rem;
    }
    
    .page-header h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   Paycheck & SE Tax Calculator Mobile Styles
   ============================================ */

@media (max-width: 768px) {
    
    /* Deductions breakdown tables */
    .deductions-breakdown table,
    .se-breakdown table,
    .quarterly-schedule table,
    .annual-summary table {
        font-size: 0.85rem;
    }
    
    .deductions-breakdown th,
    .deductions-breakdown td,
    .se-breakdown th,
    .se-breakdown td,
    .quarterly-schedule th,
    .quarterly-schedule td,
    .annual-summary th,
    .annual-summary td {
        padding: 0.5rem !important;
    }
    
    /* Compact chart containers */
    #paycheck-chart,
    #annual-chart,
    #se-tax-chart,
    #income-distribution-chart {
        min-height: 300px;
    }
    
    /* SE Tips section */
    .se-tips ul li,
    .tax-planning ul li {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        font-size: 0.9rem;
    }
    
    /* Input wrapper for inline labels */
    .input-wrapper {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .input-wrapper input,
    .input-wrapper select {
        width: 100% !important;
        flex: none !important;
    }
    
    .input-wrapper small {
        margin-top: 0.25rem;
        font-size: 0.8rem;
    }
    
    /* Quarterly payment schedule - Stack on mobile */
    .quarterly-schedule table th:nth-child(2),
    .quarterly-schedule table td:nth-child(2) {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    
    /* Hide some table columns on very small screens */
    .deductions-breakdown table,
    .se-breakdown table {
        font-size: 0.8rem;
    }
    
    /* Smaller chart heights */
    #paycheck-chart,
    #annual-chart,
    #se-tax-chart,
    #income-distribution-chart {
        min-height: 250px;
    }
    
    /* Compact summary grid */
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .summary-item {
        padding: 0.75rem;
    }
}