/* style.css — ไดอารี่ส่วนตัว
 *
 * ธีมทำด้วย CSS variable บน :root[data-theme]
 * เพิ่มธีมใหม่ = เพิ่มบล็อกเดียวข้างล่าง ไม่ต้องแตะ CSS ส่วนอื่นเลย
 */

/* ---------- ธีม ---------- */
:root,
:root[data-theme="paper"] {           /* กระดาษ — ตั้งต้น ให้ความรู้สึกเหมือนสมุดจริง */
    --bg: #f5f0e6;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #fdfaf3 0%, #f5f0e6 60%);
    --surface: #fffdf7;
    --surface-2: #f0e9db;
    --text: #3a332a;
    --text-dim: #8a7f6d;
    --accent: #a8743a;
    --accent-soft: #f0e2cf;
    --border: #e2d8c5;
    --shadow: 0 1px 2px rgba(90, 74, 50, .06), 0 8px 24px rgba(90, 74, 50, .07);
    --danger: #b4452f;
}

:root[data-theme="light"] {           /* สว่าง — สะอาด อ่านง่ายกลางแดด */
    --bg: #f2f4f7;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, #f2f4f7 60%);
    --surface: #ffffff;
    --surface-2: #eef1f5;
    --text: #1f2933;
    --text-dim: #7b8794;
    --accent: #2f6fdb;
    --accent-soft: #e3edfd;
    --border: #e1e6ed;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
    --danger: #d03a3a;
}

:root[data-theme="dark"] {            /* มืด */
    --bg: #15171c;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #22262e 0%, #15171c 60%);
    --surface: #1e2128;
    --surface-2: #272b34;
    --text: #e6e8ec;
    --text-dim: #959ba6;
    --accent: #7aa2f7;
    --accent-soft: #2a3348;
    --border: #2f343e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --danger: #f07178;
}

:root[data-theme="garden"] {          /* สวน — เข้าชุดกับ goldengreen */
    --bg: #eef3ea;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #f8fbf5 0%, #eef3ea 60%);
    --surface: #ffffff;
    --surface-2: #e6eee0;
    --text: #243123;
    --text-dim: #6f8169;
    --accent: #3f7d3a;
    --accent-soft: #dcebd6;
    --border: #d8e3d2;
    --shadow: 0 1px 2px rgba(36, 49, 35, .06), 0 8px 24px rgba(36, 49, 35, .09);
    --danger: #b4452f;
}

:root[data-theme="night"] {           /* ราตรี — น้ำเงินเข้ม สบายตาตอนดึก */
    --bg: #0f1724;
    --bg-grad: radial-gradient(1200px 600px at 50% -10%, #182338 0%, #0f1724 60%);
    --surface: #172031;
    --surface-2: #1f2b40;
    --text: #dfe7f3;
    --text-dim: #8d9bb3;
    --accent: #e0b25c;
    --accent-soft: #2a3752;
    --border: #28344a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
    --danger: #ef8585;
}

/* ให้ control ของเบราว์เซอร์ (ช่องติ๊ก ปฏิทิน select) ใช้โทนเดียวกับธีม ไม่ใช่ตามโหมดของเครื่อง */
:root, :root[data-theme="paper"], :root[data-theme="light"], :root[data-theme="garden"] { color-scheme: light; }
:root[data-theme="dark"], :root[data-theme="night"] { color-scheme: dark; }

/* ---------- พื้นฐาน ---------- */
* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    transition: background-color .25s ease, color .25s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px 120px;     /* เว้นล่างไว้ให้ปุ่มลอยไม่ทับเนื้อหา */
}

/* ---------- header ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid var(--border);
}

.topbar-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand:hover { text-decoration: none; }

.icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 11px;
    cursor: pointer;
    font-size: 1.05rem;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

/* ---------- ปุ่ม ---------- */
.btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 9px 16px;
    border-radius: 11px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: transform .12s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { filter: brightness(1.07); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); border-color: var(--border); }

.btn-danger { color: var(--danger); border-color: var(--border); background: transparent; }
.btn-danger:hover { border-color: var(--danger); }

.btn-sm { padding: 5px 11px; font-size: .86rem; border-radius: 9px; }

/* ---------- การ์ด ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

/* ---------- ช่องเขียน ---------- */
.composer { margin: 18px 0 26px; padding: 14px; }

.composer textarea {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: 1.75;
    resize: none;
    outline: none;
    min-height: 54px;
    overflow: hidden;
}
.composer textarea::placeholder { color: var(--text-dim); }

.composer-extra {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}
.composer.open .composer-extra { display: block; }

.composer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.composer-row label { color: var(--text-dim); font-size: .88rem; }

input[type="text"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="search"] {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: .94rem;
    outline: none;
}
input:focus { border-color: var(--accent); }

/* ---------- แท็ก ---------- */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s ease;
}
.tag-chip:hover { filter: brightness(.96); text-decoration: none; }
.tag-chip .x { opacity: .55; font-weight: 600; }
.tag-chip .x:hover { opacity: 1; }

.tag-chip.ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dim);
}
.tag-chip.ghost:hover { border-color: var(--accent); color: var(--accent); }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.tag-input-wrap { position: relative; flex: 1; min-width: 160px; }

.tag-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: none;
}
.tag-suggest.open { display: block; }
.tag-suggest div {
    padding: 8px 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.tag-suggest div:hover, .tag-suggest div.active { background: var(--surface-2); }
.tag-suggest .count { color: var(--text-dim); font-size: .82rem; }

/* ---------- timeline ---------- */
.day-head {
    position: sticky;
    top: 103px;                /* ต่อจากแถบหัว + แท็บเมนู */
    z-index: 20;
    margin: 26px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.day-head span {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--text-dim);
    box-shadow: var(--shadow);
}
.day-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.entry {
    padding: 15px 17px;
    margin-bottom: 12px;
    transition: transform .14s ease, border-color .14s ease;
}
.entry:hover { transform: translateY(-1px); border-color: var(--accent); }

.entry-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.entry-time {
    color: var(--accent);
    font-size: .84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.entry-title {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entry-body {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.entry-body.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.entry-foot { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- รูป ---------- */
.thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 7px;
    margin-top: 11px;
}
.thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
    cursor: pointer;
    background: var(--surface-2);
    transition: transform .14s ease;
}
.thumbs img:hover { transform: scale(1.03); }

.viewer {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .9);
    display: none;
    place-items: center;
    padding: 20px;
}
.viewer.open { display: grid; }
.viewer img { max-width: 100%; max-height: 86vh; border-radius: 10px; }
.viewer .close {
    position: absolute;
    top: 16px; right: 18px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

/* ---------- ตัวเลือกธีม ---------- */
.theme-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px;
    display: none;
    z-index: 60;
    min-width: 186px;
}
.theme-pop.open { display: block; }

.theme-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .93rem;
}
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.swatch {
    width: 22px; height: 22px;
    border-radius: 7px;
    border: 1px solid rgba(128, 128, 128, .35);
    flex-shrink: 0;
}

/* ---------- เบ็ดเตล็ด ---------- */
.fab {
    position: fixed;
    right: 20px; bottom: 24px;
    width: 56px; height: 56px;
    border-radius: 18px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    z-index: 40;
    transition: transform .14s ease;
}
.fab:hover { transform: translateY(-2px) scale(1.04); }

.empty {
    text-align: center;
    color: var(--text-dim);
    padding: 64px 20px;
}
.empty .big { font-size: 3rem; margin-bottom: 10px; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 24px);
    background: var(--text);
    color: var(--bg);
    padding: 10px 20px;
    border-radius: 11px;
    font-size: .92rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 300;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.muted { color: var(--text-dim); }
.center { text-align: center; }
.spinner { text-align: center; padding: 34px; color: var(--text-dim); }

/* ---------- หน้า login ---------- */
.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}
.login-card { padding: 40px 34px; text-align: center; max-width: 360px; width: 100%; }
.login-card h1 { margin: 0 0 6px; font-size: 1.4rem; }
.login-card p { color: var(--text-dim); font-size: .9rem; margin: 0 0 26px; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 560px) {
    body { font-size: 15.5px; }
    .container { padding: 0 13px 110px; }
    .topbar-inner { padding: 9px 13px; }
    .day-head { top: 101px; }
    .thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}


/* ---------- แท็บเมนู Diary / Money matters ---------- */
.tabs { border-top: 1px solid var(--border); }
.tabs-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    gap: 4px;
}
.tab {
    padding: 9px 14px 8px;
    color: var(--text-dim);
    font-weight: 500;
    font-size: .94rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Money matters ---------- */
select {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: .94rem;
    outline: none;
    max-width: 100%;
}
select:focus { border-color: var(--accent); }

.amount-input {
    font-size: 1.7rem !important;
    font-weight: 600;
    width: 100%;
    padding: 6px 4px !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 1px dashed var(--border) !important;
    border-radius: 0 !important;
    font-variant-numeric: tabular-nums;
}
.amount-input:focus { border-bottom-color: var(--accent) !important; }

.money-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 17px;
    margin: 10px 0 4px;
}
.money-summary .big { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.money-summary .sub { color: var(--text-dim); font-size: .88rem; }

.day-head .day-sum {
    margin-left: 0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.exp { padding: 12px 15px; margin-bottom: 9px; }
.exp-main { display: flex; gap: 12px; align-items: flex-start; }
.exp-left { flex: 1; min-width: 0; }
.exp-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    white-space: nowrap;
}
.exp-notes { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.exp-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 7px; }
.cat-chip {
    background: var(--surface-2);
    color: var(--text-dim);
    border-radius: 7px;
    padding: 1px 9px;
    font-size: .8rem;
}
.acct { color: var(--text-dim); font-size: .8rem; }

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.filter-row input[type="search"] { flex: 1; min-width: 150px; }

/* ---------- หน้านำเข้า ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.stat { background: var(--surface-2); border-radius: 12px; padding: 10px 13px; }
.stat b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-dim); font-size: .8rem; }
.stat.locked { background: var(--accent-soft); }

.cat-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 4px; border-bottom: 1px solid var(--border);
}
.cat-row:last-child { border-bottom: none; }
.cat-row input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.cat-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-row .num { color: var(--text-dim); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-row.off .name { text-decoration: line-through; color: var(--text-dim); }

@media (max-width: 560px) {
    .tabs-inner { padding: 0 10px; }
    .tab { padding: 9px 11px 8px; font-size: .9rem; }
}

/* ---------- ช่วงเวลาลัด (วันนี้ / 7 วัน / เดือนนี้ …) ---------- */
.quick-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.quick-row::-webkit-scrollbar { display: none; }
.qbtn {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.qbtn:hover { border-color: var(--accent); color: var(--text); }
.qbtn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 500;
}

/* ---------- สรุปยอดรายหมวด/แท็ก ---------- */
.bd-row {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid transparent;
}
.bd-row:hover { border-color: var(--border); }
.bd-row.active { border-color: var(--accent); }
.bd-row.static { cursor: default; }
.bd-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent-soft);
    z-index: 0;
    transition: width .3s ease;
}
.bd-row > span:not(.bd-bar) { position: relative; z-index: 1; }
.bd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-meta { color: var(--text-dim); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- รายการรายจ่ายแบบกระชับ (ให้เห็นหลายแถวต่อหน้าจอ) ----------
   จำกัดเฉพาะในรายการ (.compact) หน้ารายละเอียดรายการเดี่ยวยังใช้สไตล์โปร่งตามเดิม */
.compact .exp { padding: 7px 12px; margin-bottom: 5px; border-radius: 12px; line-height: 1.4; }
.compact .exp[data-href] { cursor: pointer; }
.compact .exp[data-href]:hover { border-color: var(--accent); }
.compact .exp-main { gap: 10px; }
.compact .exp-notes {
    margin-top: 0;
    font-size: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.compact .exp-meta { margin-top: 3px; gap: 3px 6px; }
.compact .exp-meta.first { margin-top: 0; }
.compact .exp-amount { font-size: 1rem; line-height: 1.3; }
.compact .exp .tag-chip { padding: 0 9px; font-size: .76rem; line-height: 1.55; }
.compact .exp .cat-chip { font-size: .76rem; padding: 0 8px; line-height: 1.55; }
.compact .exp .acct { font-size: .76rem; }
.thumbs.sm { grid-template-columns: repeat(auto-fill, 52px); gap: 5px; margin-top: 6px; }
.thumbs.sm img { border-radius: 8px; }
#list.compact .day-head { margin: 14px 0 7px; }   /* เฉพาะหน้า Money ไม่กระทบไดอารี่ */