/* =========================================
   WalletAI · 奶茶色系主題
   Milk Tea Theme
   深焦糖 #5a3820 · 焦糖棕 #8a6040 · 奶茶棕 #a07850
   奶茶 #c9a882 · 珍珠 #e8d5b8 · 奶泡 #f2ead8 · 奶白 #faf5ed
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    /* 奶茶色板 */
    --tea-deep:    #5a3820;
    --tea-dark:    #8a6040;
    --tea-mid:     #a07850;
    --tea-main:    #c9a882;
    --tea-pearl:   #e8d5b8;
    --tea-foam:    #f2ead8;
    --tea-milk:    #faf5ed;

    /* 語意色 */
    --primary:     #8a6040;
    --primary-h:   #7a5030;
    --bg:          #ede3d4;
    --card:        #faf5ed;
    --card-alt:    #f2ead8;
    --border:      #e8d5b8;
    --border-soft: #f0e4d0;
    --text:        #3a2010;
    --text-mid:    #7a5a3a;
    --text-muted:  #c9a882;
    --success:     #5a9868;
    --error:       #c4784a;
    --warning:     #c9884a;
}

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

body {
    font-family: 'Nunito', 'Noto Sans TC', sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 10%, rgba(201,168,130,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 85%, rgba(160,120,80,0.12) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--text);
    padding: 16px 12px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) { body { padding: 10px 8px; } }

/* ========== 容器 ========== */
.index-container  { max-width: 600px; margin: 0 auto; }
.query-container  { width: 98%; max-width: 1600px; margin: 0 auto; }
.export-container { width: 98%; max-width: 1600px; margin: 0 auto; }
.page-wrap        { max-width: 720px; margin: 0 auto; }

@media (max-width: 768px) {
    .index-container, .query-container, .export-container { width: 100%; }
}

/* ========== Header ========== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--tea-deep), var(--tea-dark));
    padding: 16px 20px;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 28px rgba(90,56,32,0.25);
    position: relative; overflow: hidden;
}
/* 新增這段：導航連結顏色加強 */
.header a {
    color: #ffffff;                    /* 純白色，最清晰 */
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);   /* 增加陰影讓字更立體 */
    transition: color 0.2s ease;
}

.header a:hover {
    color: #f2ead8;                    /* hover 時變成溫暖奶泡白 */
    text-decoration: underline;
}
.header::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 110px; height: 110px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.header h1, .header h2 {
    font-size: 1.25em; font-weight: 700;
    color: var(--tea-milk); letter-spacing: -0.01em;
}
@media (max-width: 768px) {
    .header { flex-direction: column; gap: 10px; text-align: center; padding: 14px; border-radius: 13px; }
    .header h1, .header h2 { font-size: 1.1em; }
}

/* ========== 卡片 ========== */
.card {
    background: var(--card);
    border: 1.5px solid var(--border-soft);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(90,56,32,0.08), 0 1px 0 rgba(255,255,255,0.7) inset;
}
@media (max-width: 768px) {
    .card { padding: 14px; margin-bottom: 12px; border-radius: 13px; }
}

/* ========== 表單 ========== */
textarea, input[type="text"], input[type="email"], input[type="number"],
input[type="date"], select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 11px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
textarea { height: 100px; resize: vertical; min-height: 80px; }
textarea:focus, input:focus, select:focus {
    outline: none;
    border-color: var(--tea-mid);
    box-shadow: 0 0 0 3px rgba(160,120,80,0.15);
}
textarea::placeholder, input::placeholder { color: var(--text-muted); }
@media (max-width: 768px) {
    textarea, input[type="text"], input[type="email"], select { font-size: 16px; }
    textarea { height: 120px; }
}

/* ========== 按鈕 ========== */
button {
    padding: 11px 20px;
    border-radius: 11px;
    cursor: pointer;
    border: none;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
button.primary {
    background: linear-gradient(135deg, var(--tea-deep), var(--tea-dark));
    color: var(--tea-milk);
    box-shadow: 0 5px 18px rgba(90,56,32,0.28);
}
button.primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(90,56,32,0.36);
}
button.primary:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* danger 按鈕 */
button.danger {
    background: #fdf0ea;
    border: 1.5px solid #f4c8a8;
    color: var(--error);
}
button.danger:hover:not(:disabled) { background: #fae4d8; }

@media (max-width: 768px) {
    button { padding: 13px 16px; font-size: 15px; min-height: 48px; }
}

/* ========== 標籤 ========== */
.tag {
    display: inline-block;
    background: var(--tea-foam);
    border: 1px solid var(--tea-pearl);
    color: var(--tea-dark);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    margin-right: 5px;
}

/* ========== tx-id badge ========== */
.tx-id-badge {
    background: var(--tea-foam);
    color: var(--tea-dark);
    font-size: 0.85em;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--tea-pearl);
}

/* ========== Nav 分類按鈕 ========== */
.nav-buttons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.nav-buttons button {
    background: var(--tea-foam);
    border: 1.5px solid var(--tea-pearl);
    color: var(--tea-mid);
    font-size: 13px; padding: 8px 14px; flex-shrink: 0;
}
.nav-buttons button:hover { background: var(--tea-pearl); }
.nav-buttons button.active {
    background: var(--tea-dark);
    border-color: var(--tea-dark);
    color: var(--tea-milk);
}
@media (max-width: 768px) {
    .nav-buttons { gap: 5px; }
    .nav-buttons button { font-size: 12px; padding: 7px 11px; }
}

/* ========== 表格 ========== */
#tableContainer {
    background: var(--card);
    border: 1.5px solid var(--border-soft);
    border-radius: 13px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 12px rgba(90,56,32,0.07);
}
table { width: 100%; border-collapse: collapse; min-width: 600px; }
@media (max-width: 768px) { table { font-size: 13px; min-width: 800px; } }
thead { background: var(--tea-foam); position: sticky; top: 0; z-index: 10; }
th, td {
    padding: 11px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    font-size: 14px;
}
th {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}
tr:hover td { background: #fdf8f2; }
@media (max-width: 768px) {
    th, td { padding: 9px 8px; font-size: 13px; }
    th { font-size: 10px; }
}

/* ========== 狀態訊息 ========== */
.status { margin-top: 10px; font-size: 13px; color: var(--text-muted); min-height: 18px; }
.error-box {
    background: #fdf0ea;
    border: 1.5px solid #f4c8a8;
    color: var(--error);
    padding: 12px; border-radius: 11px;
    margin-top: 10px; display: none; font-size: 14px;
}
.loading { text-align: center; padding: 40px 20px; color: var(--text-muted); }

/* ========== Spinner ========== */
.spinner {
    display: inline-block;
    width: 15px; height: 15px;
    border: 2px solid rgba(90,56,32,0.15);
    border-radius: 50%;
    border-top-color: var(--tea-dark);
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 摘要卡片 ========== */
.summary-box, .income-expense-box {
    background: linear-gradient(155deg, var(--tea-deep) 0%, var(--tea-dark) 100%);
    border-radius: 16px;
    padding: 18px;
    margin: 14px 0;
    box-shadow: 0 8px 24px rgba(90,56,32,0.25);
    position: relative; overflow: hidden;
}
.summary-box::after, .income-expense-box::after {
    content: '🧋';
    position: absolute; right: 14px; bottom: 8px;
    font-size: 3em; opacity: 0.1;
}
.summary-item { flex: 1; text-align: center; }
.summary-label {
    font-size: 0.68em; color: rgba(250,245,237,0.5);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}
.summary-value {
    font-family: 'Lora', serif;
    font-size: 1.7em; font-weight: 700;
    color: var(--tea-milk); letter-spacing: -0.02em;
}
@media (max-width: 768px) {
    .summary-box, .income-expense-box { padding: 14px; }
    .summary-value { font-size: 1.4em; }
}

/* ========== 搜尋 ========== */
.search-box {
    border-left: 3px solid var(--tea-main);
    background: var(--tea-foam);
}
.search-input-group { display: flex; gap: 10px; align-items: center; }
@media (max-width: 768px) {
    .search-input-group { flex-direction: column; }
    .search-input-group button { width: 100%; }
}
.ai-hint {
    margin-top: 10px; padding: 10px 12px;
    background: var(--tea-foam);
    border: 1px solid var(--tea-pearl);
    border-radius: 9px; font-size: 0.88em; color: var(--tea-mid);
}

/* ========== hint 提示區 ========== */
.hint {
    background: var(--tea-foam);
    border: 1.5px solid var(--tea-pearl);
    border-radius: 13px; padding: 12px 14px;
    font-size: 0.85em; color: var(--text-mid);
    margin-bottom: 12px; line-height: 1.75;
}
.hint strong { color: var(--tea-dark); font-weight: 700; }

/* ========== 連結 ========== */
a { color: var(--tea-dark); text-decoration: none; font-size: 0.9em; transition: color 0.2s; }
a:hover { color: var(--tea-deep); text-decoration: underline; }

/* ========== 頁首歡迎文字 ========== */
#welcomeMsg { color: var(--tea-milk) !important; font-size: 0.9em; font-weight: 600; }

/* ========== 綁定按鈕 ========== */
#bindBtn {
    font-size: 0.82em !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 1.5px solid !important;
}

/* ========== 工具類 ========== */
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }

/* ========== 欄位群組（編輯頁）========== */
.field-group { margin-bottom: 14px; }
.field-group label {
    display: block;
    font-size: 0.72em; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.07em; margin-bottom: 5px;
}
.ref-input-box {
    background: var(--tea-foam);
    border-left: 3px solid var(--tea-main);
    border-radius: 0 11px 11px 0;
    padding: 10px 13px;
    font-size: 0.82em; color: var(--text-mid);
    margin-bottom: 14px; line-height: 1.55;
}

/* ========== header-links ========== */
.header-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.header-links a {
    color: rgba(250,245,237,0.85);
    font-size: 0.82em; font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
}
.header-links a:hover { background: rgba(255,255,255,0.15); text-decoration: none; }

/* ========== iOS 防縮放 ========== */
@media (max-width: 768px) {
    * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    input, textarea, select { -webkit-user-select: text; user-select: text; }
}

/* ========== 滾動條 ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(138,96,64,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(138,96,64,0.5); }
@media (max-width: 768px) { ::-webkit-scrollbar { width: 3px; height: 3px; } }