/* =========================================================
   Korea Finance Planner — Black & Gold UI (หน้าหลัก)
   ปรับเฉพาะหน้าตา (presentation only) ไม่แตะ logic
   ========================================================= */
:root{
    --gold:#d4af37;
    --gold-light:#f3d870;
    --gold-deep:#a8841f;
    --ink:#0a0a0b;
    --surface:#141416;
    --surface-2:#1c1c1f;
    --line:rgba(212,175,55,.38);
    --line-soft:rgba(212,175,55,.16);
    --text:#f4f1e8;
    --muted:#9b978c;
    --green:#37d478;
    --font:"Prompt","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    background:
        radial-gradient(ellipse 80% 420px at 50% -80px, rgba(212,175,55,.16), transparent 70%),
        var(--ink);
    background-repeat:no-repeat;
    color:var(--text);
    font-family:var(--font);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

::selection{background:rgba(212,175,55,.35);color:#fff}

.container{
    max-width:820px;
    margin:auto;
    padding:64px 18px calc(48px + env(safe-area-inset-bottom));
}

h1{
    text-align:center;
    color:var(--gold);
    background:linear-gradient(135deg,#f8e58c 0%,#d4af37 50%,#a8841f 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size:34px;
    font-weight:700;
    letter-spacing:.3px;
    line-height:1.25;
    padding-top:6px;
}

.subtitle{
    text-align:center;
    color:var(--muted);
    margin-top:10px;
    margin-bottom:30px;
    font-size:15px;
}

.subtitle::after{
    content:"";
    display:block;
    width:64px;
    height:2px;
    margin:16px auto 0;
    border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ---------- Cards ---------- */
.card{
    background:linear-gradient(160deg,#19191c 0%,#111113 100%);
    padding:24px;
    border-radius:20px;
    margin-bottom:26px;
    border:1px solid var(--line);
    box-shadow:
        0 14px 34px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 40px rgba(212,175,55,.07);
    -webkit-tap-highlight-color:transparent;
}

.card h2{
    font-size:19px;
    font-weight:600;
    color:var(--gold-light);
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-soft);
}

/* ป้องกัน iOS ซูมหน้าจอเวลาโฟกัสช่องกรอก */
input, select, button{
    font-size:16px !important;
    font-family:inherit;
}

label{
    display:block;
    margin-bottom:8px;
    color:#e6c552;
    font-size:14px;
    font-weight:500;
    letter-spacing:.2px;
}

input{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    margin-bottom:20px;
    border:1px solid #2d2d31;
    border-radius:12px;
    background:#1b1b1e;
    color:#fff;
    color-scheme:dark;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input::placeholder{color:#6d6a62}

input:focus,
select:focus{
    border-color:var(--gold);
    background:#202024;
    box-shadow:0 0 0 3px rgba(212,175,55,.2);
}

input[readonly]{
    color:#a9a69c;
    background:#161618;
}

select{
    width:100%;
    min-height:48px;
    padding:12px 40px 12px 14px;
    margin-bottom:20px;
    border:1px solid #2d2d31;
    border-radius:12px;
    background-color:#1b1b1e;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d4af37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
    -webkit-appearance:none;
    appearance:none;
    color:#fff;
    color-scheme:dark;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease;
}

/* ---------- Buttons ---------- */
button{
    width:100%;
    padding:14px;
    background:linear-gradient(135deg,#f3d870 0%,#d4af37 55%,#b8901f 100%);
    color:#1a1400;
    border:none;
    border-radius:12px;
    font-weight:600;
    cursor:pointer;
    margin-bottom:12px;
    box-shadow:0 6px 16px rgba(212,175,55,.22);
    transition:transform .12s ease, filter .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color:transparent;
}

button:last-of-type{
    margin-bottom:0;
}

button:hover{
    filter:brightness(1.07);
}

button:active{
    transform:scale(.98);
    box-shadow:0 2px 8px rgba(212,175,55,.2);
}

button:focus-visible,
input:focus-visible,
select:focus-visible{
    outline:2px solid var(--gold-light);
    outline-offset:2px;
}

/* ปุ่มรอง / ปุ่มอันตราย */
.btn-secondary{
    background:transparent;
    color:var(--gold-light);
    border:1px solid rgba(212,175,55,.55);
    box-shadow:none;
}

.btn-secondary:hover{
    background:rgba(212,175,55,.1);
    filter:none;
}

.btn-secondary:active{
    box-shadow:none;
}

.btn-danger{
    background:linear-gradient(135deg,#3a1818,#2a1111);
    color:#ff8c8c;
    border:1px solid rgba(255,107,107,.45);
    box-shadow:none;
    margin-top:15px;
}

.btn-danger:hover{
    background:linear-gradient(135deg,#471d1d,#331414);
    filter:none;
}

/* ---------- Result cards ---------- */
.results{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:14px;
    margin-top:22px;
    margin-bottom:30px;
}

.result-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(160deg,#1a1a1d,#121214);
    padding:18px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    box-shadow:0 8px 22px rgba(0,0,0,.4);
}

.result-card::before{
    content:"";
    position:absolute;
    top:0;
    left:16px;
    right:16px;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.result-card h3{
    margin-bottom:10px;
    color:var(--gold-light);
    font-size:16px;
    font-weight:600;
}

.result-card p{
    color:#ecebe6;
    font-size:15px;
    line-height:1.7;
    overflow-wrap:anywhere;
}

/* ---------- Progress ---------- */
.progress-container{
    width:100%;
    height:16px;
    background:#232326;
    border-radius:999px;
    overflow:hidden;
    margin-top:16px;
    box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
}

.progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#b8860b,#d4af37,#ffe27a);
    border-radius:999px;
    box-shadow:0 0 12px rgba(212,175,55,.55);
    transition:.5s;
}

#progressText{
    margin-top:14px;
    font-size:24px;
    font-weight:700;
    color:var(--gold-light);
}

#goalInfo{
    margin-top:10px;
    color:#d6d3c8;
    line-height:1.7;
}

/* ---------- Salary history ---------- */
#salaryHistory{
    margin-top:20px;
}

.salary-item{
    background:#202023;
    padding:15px;
    margin-top:10px;
    border-radius:12px;
    border-left:4px solid var(--gold);
}

.salary-item button{
    margin-top:10px;
    width:auto;
    padding:8px 15px;
}

/* รายการประวัติ (สไตล์ inline จาก script.js จึงต้องใช้ !important) */
.history-item{
    background:linear-gradient(160deg,#1e1e21,#17171a) !important;
    border:1px solid var(--line-soft) !important;
    border-left:3px solid var(--gold) !important;
    border-radius:14px !important;
    padding:14px 16px !important;
    gap:12px;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
}

.history-item button{
    background:rgba(255,107,107,.08) !important;
    color:#ff8c8c !important;
    border:1px solid rgba(255,107,107,.45) !important;
    border-radius:10px !important;
    padding:8px 12px !important;
    box-shadow:none !important;
    margin:0 !important;
    flex-shrink:0;
}

/* ---------- Stats ---------- */
.stats-grid{
    display:grid;
    gap:14px;
    margin-bottom:25px;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}

@media(max-width:768px){
    .stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.stat-box{
    position:relative;
    min-height:140px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(160deg,#1d1d20,#141416);
    padding:20px 14px;
    border-radius:16px;
    text-align:center;
    border:1px solid var(--line);
    box-shadow:0 8px 20px rgba(0,0,0,.35);
    min-width:0;
}

.stat-box span{
    color:#c4c0b4;
    font-size:14px;
}

.stat-box h3{
    margin-top:10px;
    color:var(--gold-light);
    font-size:19px;
    font-weight:700;
    overflow-wrap:anywhere;
}

.stat-box p{
    margin-top:8px;
    color:var(--green);
    font-size:14px;
    font-weight:600;
}

#salaryChart{
    margin-top:25px;
}

.prediction-card{
    margin-top:20px;
    background:#202023;
    padding:20px;
    border-radius:14px;
    border:1px solid var(--line);
    text-align:center;
}

.prediction-card h3{
    color:var(--gold);
    margin-bottom:10px;
}

#goalDate{
    font-size:20px;
    font-weight:bold;
}

/* ---------- Exchange rate / converters ---------- */
#exchangeStatus{
    margin-top:14px;
    color:var(--green);
    font-size:13px;
    line-height:1.6;
    text-align:center;
}

#exchangeStatus:empty{
    display:none;
}

.salary-preview{
    margin-top:-10px;
    margin-bottom:22px;
    font-size:17px;
    font-weight:700;
    color:#8f8c82;
}

.salary-preview.success{
    color:var(--green);
}

#convertResult,
#remitResult{
    margin-top:20px;
    padding:16px;
    border-radius:14px;
    background:rgba(212,175,55,.07);
    border:1px dashed rgba(212,175,55,.4);
    font-weight:700;
    color:var(--gold-light);
    overflow-wrap:anywhere;
}

#convertResult{
    font-size:28px;
    text-align:center;
}

#remitResult{
    font-size:24px;
}

#quickConvertGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    margin-top:20px;
}

.quick-card{
    background:#1b1b1e;
    border:1px solid var(--line);
    border-radius:14px;
    padding:15px;
    text-align:center;
}

/* ---------- Charts / misc ---------- */
.card canvas{
    display:block;
}

/* กราฟทุกตัวอยู่ใน container ความสูงคงที่ -> ไม่ขยายเอง ไม่ค้างว่าง */
.pie-chart-container{
    position:relative;
    width:100%;
    max-width:340px;
    height:330px;
    margin:20px auto 0 auto;
}

.chart-box{
    position:relative;
    width:100%;
    height:260px;
    padding:12px 8px 6px;
    border-radius:16px;
    background:linear-gradient(160deg,rgba(212,175,55,.06),rgba(255,255,255,.015));
    border:1px solid var(--line-soft);
}

.chart-title{
    margin:26px 0 12px;
    font-size:16px;
    font-weight:600;
    color:var(--gold-light);
}
.chart-title small{
    color:var(--muted);
    font-weight:400;
    font-size:13px;
}
.chart-title:first-of-type{ margin-top:30px; }

.chart-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    color:var(--muted);
    font-size:14px;
}

.field-note{
    margin:-10px 0 16px;
    font-size:12.5px;
    color:var(--muted);
}

input[readonly]{
    opacity:.85;
    border-style:dashed;
}

.button-group{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}

.button-group button{
    flex:1;
    margin-bottom:0;
}

.year-filter{
    width:auto;
    min-width:130px;
    padding:8px 12px;
    border:1px solid var(--gold);
    border-radius:12px;
    background:#1b1b1e;
    color:#fff;
    font-weight:600;
    margin-bottom:0;
}

/* ---------- Gold portfolio shortcut ---------- */
.gold-portfolio-card{
    justify-content:space-between;
    grid-column:1 / -1;
    background:
        radial-gradient(circle at 100% 0%, rgba(212,175,55,.2), transparent 55%),
        linear-gradient(160deg,#1f1b10,#141416);
    border-color:rgba(212,175,55,.6);
    text-align:left;
    padding:20px 18px;
}

.gold-portfolio-card span{
    color:var(--gold-light);
    font-size:17px;
    font-weight:600;
}

.gold-portfolio-card p{
    color:#b9b5a8 !important;
    font-weight:400 !important;
    margin-top:6px;
}

.gold-btn{
    margin-top:15px;
    background:linear-gradient(135deg,#f3d870 0%,#d4af37 55%,#b8901f 100%);
    color:#1a1400;
    font-size:14px;
    padding:12px;
}

/* ---------- Mobile ---------- */
@media(max-width:600px){
    .container{padding:60px 14px calc(40px + env(safe-area-inset-bottom))}
    h1{font-size:30px}
    .card{padding:20px 16px;border-radius:18px}
    .results{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .result-card{padding:16px 13px}
    .result-card h3{font-size:15px}
    .result-card p{font-size:14px}
    .stat-box h3{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}


/* ===== ช่องเลือกวันที่/เดือน (iOS ชอบล้นการ์ดไปทางขวา) ===== */
input[type="date"],
input[type="month"]{
    display:block;
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    text-align:center;
    text-align-last:center;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value{
    text-align:center;
    min-width:0;
    margin:0 auto;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
    position:absolute;
    right:14px;
}
input[type="date"],
input[type="month"]{ position:relative; }

/* ===== ปุ่มเลือกระยะเวลาสัญญา ===== */
.contract-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:16px;
}
.contract-opt{
    margin:0 !important;
    padding:12px 4px;
    font-size:14px !important;
    line-height:1.3;
    background:#1b1b1e;
    color:#e6d9a8;
    border:1px solid rgba(212,175,55,.35);
    box-shadow:none;
}
.contract-opt.active{
    background:linear-gradient(135deg,#f3d870 0%,#d4af37 55%,#b8901f 100%);
    color:#1a1400;
    border-color:transparent;
    box-shadow:0 4px 12px rgba(212,175,55,.25);
}

/* ===== พอร์ตทองในการ์ดสถิติ (ออมทอง 15%) ===== */
.stat-portfolio{
    margin-top:12px;
    padding-top:10px;
    border-top:1px dashed rgba(212,175,55,.35);
    text-align:center;
}
.stat-portfolio .sp-label{font-size:12.5px;color:#bdb79f}
.stat-portfolio .sp-value{margin-top:4px;font-size:17px;font-weight:700;color:#f3d870}
.stat-portfolio .sp-pl{margin-top:2px;font-size:13px;font-weight:600}
.stat-portfolio .sp-pl.up{color:#37d478}
.stat-portfolio .sp-pl.down{color:#ff6b6b}
.stat-portfolio .sp-time{margin-top:3px;font-size:11px;color:#7f7c70}


/* ===== ปุ่มคำนวณ + บันทึกเงินเดือนเดือนนี้ (เคียงกัน) ===== */
.btn-row{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:stretch;
}
.btn-row button{
    margin:0 !important;
    line-height:1.3;
}
.btn-save-month{
    background:#1b1b1e;
    color:#f3d870;
    border:1px solid rgba(212,175,55,.6);
    box-shadow:none;
    font-size:15px !important;
}
.save-month-status{
    margin-top:12px;
    font-size:14px;
    text-align:center;
    min-height:0;
}
.save-month-status.ok{color:#37d478}
.save-month-status.warn{color:#ffb74d}