/* ============================================
   Profit Calculator v4 — Auto 4-Scenario
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --c-orange-50:#FFF8F0;--c-orange-100:#FFEDD5;--c-orange-200:#FED7AA;
    --c-orange-400:#FB923C;--c-orange-500:#F97316;--c-orange-600:#EA580C;--c-orange-700:#C2410C;
    --c-yellow-50:#FFFBEB;--c-yellow-300:#FCD34D;--c-yellow-500:#F59E0B;
    --c-green-50:#F0FDF4;--c-green-100:#DCFCE7;--c-green-500:#22C55E;--c-green-600:#16A34A;--c-green-700:#15803D;
    --c-teal-50:#F0FDFA;--c-teal-500:#14B8A6;
    --c-cyan-50:#ECFEFF;--c-cyan-500:#06B6D4;
    --c-blue-50:#EFF6FF;--c-blue-100:#DBEAFE;--c-blue-500:#3B82F6;--c-blue-600:#2563EB;
    --c-purple-50:#FAF5FF;--c-purple-100:#F3E8FF;--c-purple-400:#C084FC;--c-purple-500:#A855F7;--c-purple-600:#9333EA;
    --c-red-50:#FEF2F2;--c-red-100:#FEE2E2;--c-red-500:#EF4444;--c-red-600:#DC2626;
    --c-gray-50:#F9FAFB;--c-gray-100:#F3F4F6;--c-gray-200:#E5E7EB;--c-gray-300:#D1D5DB;
    --c-gray-400:#9CA3AF;--c-gray-500:#6B7280;--c-gray-600:#4B5563;--c-gray-700:#374151;
    --c-gray-800:#1F2937;--c-gray-900:#111827;
    --c-white:#FFFFFF;
    --radius-sm:6px;--radius:10px;--radius-lg:14px;--radius-full:9999px;
    --shadow:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.1);
    --transition:all .25s cubic-bezier(.4,0,.2,1);
}

/* === Page === */
.profit-calculator-page {
    font-family: 'Inter', -apple-system, sans-serif;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 50%, #FEF2F2 100%);
    min-height: 100vh;
    padding-bottom: 40px;
}

/* === Hero === */
.calc-hero { padding: 16px 0 8px; }
.calc-hero__inner { display: flex; align-items: center; gap: 12px; }
.calc-hero__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--c-orange-500), var(--c-yellow-500));
    color: var(--c-white); flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(249,115,22,.3);
}
.calc-hero__title { font-size: 1.15rem; font-weight: 800; color: var(--c-gray-900); margin: 0; line-height: 1.2; }
.calc-hero__desc { font-size: .75rem; color: var(--c-gray-400); margin: 2px 0 0; }

/* === Calc Section === */
.calc-section { padding: 0; }

/* === Form Bar === */
.calc-form-bar {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0,0,0,.04);
    margin-bottom: 16px;
}

/* === Labels & Fields === */
.calc-lbl {
    display: block; font-size: .65rem; font-weight: 600;
    color: var(--c-gray-500); margin-bottom: 2px;
    text-transform: uppercase; letter-spacing: .03em;
}
.calc-field-wrap {
    display: flex; align-items: center; background: var(--c-white);
    border: 1.5px solid var(--c-gray-200); border-radius: var(--radius-sm);
    overflow: hidden; transition: var(--transition);
}
.calc-field-wrap:focus-within { border-color: var(--c-orange-400); box-shadow: 0 0 0 2px rgba(249,115,22,.1); }
.calc-field-wrap--accent { border-color: var(--c-purple-400); }
.calc-field-wrap--accent:focus-within { border-color: var(--c-purple-500); box-shadow: 0 0 0 2px rgba(168,85,247,.12); }
.calc-field {
    flex: 1; border: none; outline: none; padding: 7px 10px;
    font-size: .85rem; font-weight: 600; color: var(--c-gray-800);
    background: transparent; font-family: 'Inter', sans-serif;
    -moz-appearance: textfield; min-width: 0;
}
.calc-field::-webkit-outer-spin-button, .calc-field::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.calc-field--select {
    cursor: pointer; appearance: auto; padding: 7px 10px;
    border: 1.5px solid var(--c-gray-200); border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600; color: var(--c-gray-800);
    font-family: 'Inter', sans-serif; width: 100%; background: var(--c-white);
    transition: var(--transition);
}
.calc-field--select:focus { border-color: var(--c-orange-400); box-shadow: 0 0 0 2px rgba(249,115,22,.1); outline: none; }
.calc-sfx {
    padding: 6px 10px; font-size: .7rem; font-weight: 700;
    color: var(--c-orange-600); background: var(--c-orange-50);
    border-left: 1.5px solid var(--c-gray-200); white-space: nowrap; user-select: none;
}

/* === Detail Toggle === */
.calc-detail-toggle { margin-top: 10px; text-align: center; }
.calc-detail-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border: 1.5px solid var(--c-gray-200);
    border-radius: var(--radius-full); background: var(--c-gray-50);
    cursor: pointer; font-family: 'Inter', sans-serif;
    font-size: .72rem; font-weight: 600; color: var(--c-gray-500);
    transition: var(--transition);
}
.calc-detail-btn:hover { border-color: var(--c-orange-400); color: var(--c-orange-600); background: var(--c-orange-50); }
.calc-detail-btn svg { transition: transform .25s ease; }
.calc-detail-btn.is-open svg { transform: rotate(180deg); }
.calc-detail-btn.is-open { border-color: var(--c-orange-400); color: var(--c-orange-600); background: var(--c-orange-50); }

/* === Detail Panel === */
.calc-detail-panel {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, padding .35s ease, margin .35s ease;
    padding: 0; margin: 0;
}
.calc-detail-panel.is-open { max-height: 500px; padding: 14px 0 0; margin-top: 4px; }
.calc-detail-title {
    display: block; font-size: .65rem; font-weight: 700;
    color: var(--c-orange-500); text-transform: uppercase;
    letter-spacing: .04em; margin: 6px 0 4px;
    padding-bottom: 4px; border-bottom: 1px dashed var(--c-gray-200);
}

/* === Badge === */
.calc-badge {
    display: inline-flex; padding: 4px 12px;
    border-radius: var(--radius-full); font-size: .65rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: linear-gradient(135deg, var(--c-orange-500), var(--c-yellow-500));
    color: var(--c-white); box-shadow: 0 2px 8px rgba(249,115,22,.25);
}

/* ===================================================
   AUTO COMPARE TABLE (4 SCENARIOS)
   =================================================== */
.calc-auto-compare {
    background: var(--c-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,.04);
    overflow: hidden;
}

.calc-auto-compare__header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--c-gray-100);
    flex-wrap: wrap;
}

.calc-auto-compare__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700; color: var(--c-gray-800);
    margin: 0; flex: 1;
}

.calc-auto-compare__wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0;
}

/* === Table === */
.calc-auto-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: .8rem; min-width: 580px;
}

/* Header */
.calc-auto-table thead th {
    padding: 14px 12px; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em;
    text-align: center; white-space: nowrap; vertical-align: bottom;
    border-bottom: 2px solid var(--c-gray-200);
}
.calc-auto-table__th-label { text-align: left !important; min-width: 110px; background: var(--c-white); }
.calc-auto-table__th-sc {
    position: relative;
    color: var(--c-white) !important;
    background: var(--c-gray-700);
}
.calc-auto-table__th-sc--1 { background: linear-gradient(135deg, var(--c-blue-500), var(--c-blue-600)); }
.calc-auto-table__th-sc--2 { background: linear-gradient(135deg, var(--c-purple-500), var(--c-purple-600)); }
.calc-auto-table__th-sc--3 { background: linear-gradient(135deg, var(--c-orange-500), var(--c-orange-600)); }
.calc-auto-table__th-sc--4 { background: linear-gradient(135deg, var(--c-red-500), var(--c-red-600)); }
.calc-auto-table__th-sc--5 { background: linear-gradient(135deg, var(--c-teal-500), var(--c-cyan-500)); }
.calc-auto-table__sc-icon { display: block; font-size: 1.1rem; margin-bottom: 4px; }

/* Body */
.calc-auto-table tbody td {
    padding: 9px 12px; border-bottom: 1px solid var(--c-gray-100);
    text-align: center; white-space: nowrap; font-weight: 600;
    color: var(--c-gray-700); transition: var(--transition);
}
.calc-auto-table__label {
    text-align: left !important; font-weight: 500;
    color: var(--c-gray-500);
}
.calc-auto-table__tr-sub td { font-size: .75rem; color: var(--c-gray-500); font-weight: 500; }
.calc-auto-table__tr-sub .calc-auto-table__label { font-size: .72rem; padding-left: 12px; }

/* Total row */
.calc-auto-table__tr-total td {
    background: var(--c-gray-800) !important; color: var(--c-white) !important;
    font-weight: 700; border-bottom: none;
}
.calc-auto-table__tr-total .calc-auto-table__label { color: var(--c-gray-300) !important; }

/* Accent row */
.calc-auto-table__tr-accent td {
    background: var(--c-teal-50); font-weight: 700; color: var(--c-teal-500);
}
.calc-auto-table__tr-accent .calc-auto-table__label { color: var(--c-gray-600); }

/* Profit row */
.calc-auto-table__tr-profit td {
    background: var(--c-green-50); font-weight: 800; font-size: .9rem;
    color: var(--c-green-700);
}
.calc-auto-table__tr-profit .calc-auto-table__label { color: var(--c-gray-700); }

/* Suggest row */
.calc-auto-table__tr-suggest td {
    background: var(--c-orange-50); font-weight: 700;
    color: var(--c-orange-600); border-bottom: none;
}
.calc-auto-table__tr-suggest .calc-auto-table__label { color: var(--c-gray-600); }

/* Negative (loss) */
.calc-auto-table .is-negative { color: var(--c-red-600) !important; background: var(--c-red-50) !important; }

/* Value animation */
@keyframes cellPop { 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
.calc-auto-table td.is-changed { animation: cellPop .3s ease; }

/* === Export Button === */
.calc-btn-export {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: none; border-radius: var(--radius-full);
    background: linear-gradient(135deg, #16A34A, #22C55E);
    color: var(--c-white); font-family: 'Inter', sans-serif;
    font-size: .7rem; font-weight: 700; cursor: pointer;
    transition: var(--transition); box-shadow: 0 2px 8px rgba(22,163,74,.3);
    letter-spacing: .02em;
}
.calc-btn-export:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(22,163,74,.45);
    background: linear-gradient(135deg, #15803D, #16A34A);
}
.calc-btn-export:active { transform: translateY(0); }

/* === Scrollbar === */
.calc-auto-compare__wrap::-webkit-scrollbar { height: 5px; }
.calc-auto-compare__wrap::-webkit-scrollbar-track { background: var(--c-gray-50); }
.calc-auto-compare__wrap::-webkit-scrollbar-thumb { background: var(--c-gray-300); border-radius: 3px; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 991.98px) {
    .calc-form-bar { padding: 12px; }
    .calc-auto-compare__header { padding: 12px 14px; }
}
@media (max-width: 767.98px) {
    .profit-calculator-page { padding-bottom: 24px; }
    .calc-hero { padding: 10px 0 6px; }
    .calc-hero__icon { width: 36px; height: 36px; }
    .calc-hero__icon svg { width: 18px; height: 18px; }
    .calc-hero__title { font-size: 1rem; }
    .calc-form-bar { padding: 10px; border-radius: var(--radius); }
    .calc-auto-compare { border-radius: var(--radius); }
    .calc-auto-compare__header { padding: 10px 12px; }
    .calc-auto-table thead th { padding: 10px 8px; font-size: .65rem; }
    .calc-auto-table tbody td { padding: 7px 8px; font-size: .72rem; }
    .calc-auto-table__tr-profit td { font-size: .8rem; }
    .calc-auto-table__sc-icon { font-size: .9rem; }
}