/* style.css - 涼水站財務看板樣式 */
:root { --primary-color: #d81b60; --bg-color: #f4f6f8; --white: #ffffff; --accent-gold: #FFC107; }
body::before { content:''; display:block; height: 6px; background: linear-gradient(to right, #E53935, #FFC107, #2E7D32); }
body { font-family: 'Noto Sans TC', sans-serif; background: var(--bg-color); margin: 0; line-height: 1.6; color: #333; }
.container { max-width: 1200px; margin: 30px auto; padding: 0 15px; }

/* Header Styles */
.header-nav { background: var(--white); padding: 15px 25px; border-radius: 20px; box-shadow: 0 10px 28px rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border: 1px solid rgba(0,0,0,0.03); }
.header-logo-title { display: flex; align-items: center; gap: 15px; text-align: left; }
.main-logo { height: 75px; width: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); }
.header-text-col { display: flex; flex-direction: column; justify-content: center; }
.org-name { font-size: 15px; color: var(--primary-color); font-weight: 800; letter-spacing: 1px; margin-bottom: 2px; text-transform: uppercase; }
.header-nav h1 { margin: 0; color: #1e293b; font-size: 26px; font-weight: 900; letter-spacing: 0.5px; line-height: 1.2; }

.year-switcher-container { display: inline-flex; background: #f1f5f9; padding: 5px; border-radius: 16px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.02); }
.year-switcher-container a { padding: 8px 24px; border-radius: 12px; text-decoration: none; color: #64748b; font-weight: 800; font-size: 15px; transition: all 0.3s; border: 1px solid transparent; font-family: 'Roboto Mono'; }
.year-switcher-container a.active { background: var(--accent-gold); color: #333; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3); transform: translateY(-1px); font-weight: 900; }
.year-switcher-container a:hover:not(.active) { color: var(--primary-color); background: rgba(255,255,255,0.5); }
.create-year-btn { color: #2e7d32; border-color: #2e7d32 !important; margin-left: 5px; }
.create-year-btn:hover { background: #2e7d32 !important; color: white !important; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background: var(--white); padding: 20px; border-radius: 12px; text-align: center; border-top: 4px solid var(--primary-color); box-shadow: 0 4px 6px rgba(0,0,0,0.05); position: relative;}
.stat-card .value { font-size: 24px; font-weight: 800; margin-top: 10px; font-variant-numeric: tabular-nums; }
.edit-balance-btn { position: absolute; top: 10px; right: 10px; color: #aaa; cursor: pointer; font-size: 14px; }
.edit-balance-btn:hover { color: var(--primary-color); }

.section-header { background: #ffffff; color: #2c3e50; padding: 15px 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 8px solid var(--primary-color); font-weight: 900; display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 1.1rem; }
.section-header i { color: var(--primary-color); margin-right: 8px; font-size: 1.2rem; }

.table-container { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow: hidden; width: 100%; margin-bottom: 20px; transition: opacity 0.3s; }
.table-container.is-hidden { opacity: 0.6; border: 2px dashed #999; filter: grayscale(80%); }
.table-container.is-hidden .group-header-bar { background: #555 !important; }
.smart-split-wrapper { display: flex; gap: 20px; align-items: flex-start; width: 100%; }
.smart-col { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.group-header-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; color: white; font-weight: 900; }
.admin-group-layout { display: grid; gap: 16px; padding: 18px; grid-template-columns: 1fr; }
.col-2 { grid-template-columns: repeat(2, 1fr) !important; }
.col-3 { grid-template-columns: repeat(3, 1fr) !important; }
.admin-column { border: 1px solid #eee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: middle; }
th { background-color: #fafafa; font-size: 13px; color: #666; font-weight: 800; }

.col-item { width: 40%; text-align: left; } 
.col-qty { width: 15%; text-align: center; } 
.col-amt { width: 20%; text-align: right; }
.col-action { width: 10%; text-align: center; }

.edit-input-qty, .edit-input-amt { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 6px; text-align: inherit; }
.group-total-footer { padding: 14px 18px; text-align: right; background-color: #fafafa; border-top: 1px solid #eee; font-weight: 900; font-size: 15px; }
.save-btn { background: #28a745; color: white; border: none; padding: 6px 16px; border-radius: 8px; cursor: pointer; font-weight: 900; }
.del-btn { color: #e53935; cursor: pointer; border: none; background: none; font-size: 16px; }
.add-row-btn { width: 100%; padding: 10px; background: transparent; border: 2px dashed #ddd; color: #888; cursor: pointer; font-weight: 900; margin-top: auto; }
.add-sub-btn-block { border: 2px dashed #2196f3; background: #e3f2fd; color: #1976d2; border-radius: 10px; cursor: pointer; padding: 15px; text-align: center; font-weight: 900; margin-top: 10px; }
.header-btn-group { display: flex; gap: 5px; }
.toggle-layout-btn, .toggle-vis-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); color: white; cursor: pointer; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.toggle-vis-btn:hover, .toggle-layout-btn:hover { background: rgba(255,255,255,0.3); }
.admin-btn { position: fixed; bottom: 20px; right: 20px; background: #333; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 999; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
.modal-box { background: white; padding: 25px; border-radius: 12px; text-align: center; width: 300px; }
.modal-input { width: 100%; padding: 8px; margin: 8px 0; border: 1px solid #ddd; border-radius: 8px; }
.footer-note { text-align: center; font-size: 13px; color: #888; padding: 20px; }
.mini-table-header { background: #fce4ec; color: #c2185b; padding: 10px; font-weight: 900; text-align: center; border-bottom: 2px solid #f8bbd0; }
@media (max-width: 900px) { .header-nav { flex-direction: column; gap: 15px; text-align: center; } .header-logo-title { flex-direction: column; gap: 10px; text-align: center; } .header-text-col { align-items: center; } .smart-split-wrapper { flex-direction: column; } .smart-col { flex: 1; max-width: 100%; } .col-2, .col-3 { grid-template-columns: 1fr !important; } .table-container { overflow-x: auto; } .donate-table { min-width: 650px; } .year-switcher-container { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap:4px; } .year-switcher-container a { text-align: center; padding: 10px 5px; } }

.finance-summary { border-radius: 18px; padding: 22px; max-width: 920px; margin: 26px auto; border: 1px dashed rgba(0,0,0,0.16); border-top: 4px solid var(--accent-gold); box-shadow: 0 10px 28px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.finance-summary.bg-low { background: linear-gradient(180deg, rgba(255,235,238,0.75), rgba(255,255,255,0.9)); border-color: rgba(211,47,47,0.30); }
.finance-summary.bg-mid { background: linear-gradient(180deg, rgba(255,248,225,0.78), rgba(255,255,255,0.9)); border-color: rgba(245,124,0,0.28); }
.finance-summary.bg-high { background: linear-gradient(180deg, rgba(232,245,233,0.78), rgba(255,255,255,0.9)); border-color: rgba(46,125,50,0.26); }
.finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; align-items: center; }
.finance-row { display:flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.finance-row span { font-size: 13px; color: rgba(0,0,0,0.55); font-weight: 700; }
.finance-row strong { font-size: 18px; font-weight: 950; color: rgba(0,0,0,0.86); }
.finance-row.danger span, .finance-row.danger strong { color:#c62828; }
.finance-big { grid-column: 1 / -1; display:flex; justify-content: space-between; align-items:center; background: rgba(255,255,255,0.70); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 14px 16px; margin-top: 8px; }
.finance-big .value { font-size: 26px; font-weight: 1000; }
.finance-big.success .value { color:#2e7d32; } .finance-big.danger .value { color:#c62828; }
.progress-wrap { grid-column: 1 / -1; margin-top: 12px; background: rgba(255,255,255,0.78); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 16px; }
.progress-bar { width: 100%; height: 16px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); }
.progress-fill { height: 100%; width: 0%; border-radius: 999px; position: relative; transition: width 0.8s ease; }
.progress-fill.p-low { background: linear-gradient(90deg, #d32f2f, #ff5252); } .progress-fill.p-mid { background: linear-gradient(90deg, #f57c00, #ffb300); } .progress-fill.p-high { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.progress-badges { margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }
.badge { display:inline-flex; align-items:center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 900; background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.70); border: 1px solid rgba(0,0,0,0.06); }
.badge.ok { background: rgba(46,125,50,0.08); color:#1b5e20; } .badge.warn { background: rgba(245,124,0,0.10); color:#e65100; } .badge.danger { background: rgba(211,47,47,0.10); color:#b71c1c; }
.balance-tip { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.78); border: 1px solid rgba(0,0,0,0.07); font-size: 13.5px; font-weight: 900; }
.balance-tip.danger { color:#b71c1c; } .balance-tip.success { color:#1b5e20; }
.finance-formula { grid-column: 1 / -1; margin-top: 12px; font-size: 12.5px; color: rgba(0,0,0,0.45); background: rgba(255,255,255,0.60); padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(0,0,0,0.12); font-weight: 700; }
.donate-table { width: 100%; table-layout: fixed !important; }
.donate-table th:nth-child(1), .donate-table td:nth-child(1) { width: 8%; text-align:center; }
.donate-table th:nth-child(2), .donate-table td:nth-child(2) { width: 14%; text-align:center; }
.donate-table th:nth-child(3), .donate-table td:nth-child(3) { width: 18%; text-align:left; }
.donate-table th:nth-child(4), .donate-table td:nth-child(4) { width: 14%; text-align:right; }
.donate-table th:nth-child(5), .donate-table td:nth-child(5) { width: 10%; text-align:center; }
.donate-table th:nth-child(6), .donate-table td:nth-child(6) { width: 12%; text-align:center; color:#e65100; font-family:'Roboto Mono'; }
.donate-table th:nth-child(7), .donate-table td:nth-child(7) { width: 18%; text-align:left; }
.donate-table th:nth-child(8), .donate-table td:nth-child(8) { width: 6%; text-align:center; }
.donate-header { justify-content: space-between !important; }

.btn-donate-hero { background: linear-gradient(135deg, #ff9800, #f57c00); color: white; padding: 10px 20px; border-radius: 50px; text-decoration: none; font-weight: 900; box-shadow: 0 4px 15px rgba(245, 124, 0, 0.4); display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s; border: 2px solid white; cursor: pointer; animation: pulse-gold 2s infinite; }
.btn-donate-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 124, 0, 0.6); }
@keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }
.bank-info-box { background: #f8f9fa; border-radius: 12px; padding: 20px; margin: 15px 0; border-left: 5px solid var(--primary-color); text-align: left; }
.bank-row { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; font-size: 15px; }
.bank-label { color: #666; font-weight: bold; }
.bank-value { font-family: 'Roboto Mono', monospace; font-weight: 900; color: #333; font-size: 18px; }
.copy-btn { background: #e0e0e0; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; color: #555; }
.copy-btn:active { background: #bdbdbd; }
.donate-note { font-size: 13px; color: #e91e63; margin-top: 10px; font-weight: bold; }

.locked-row { cursor: pointer; transition: background 0.3s; }
.locked-row:hover { background-color: #e3f2fd !important; }
.locked-row.name-masked .name-cell::after { content: '\f023'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: 8px; color: #2196f3; font-size: 12px; }
.locked-row:hover .account-cell::after { content: '\f002'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: 5px; color: #ccc; font-size: 10px; }

.btn-register-action { display: block; width: 100%; padding: 12px; background: var(--primary-color); color: white; text-align: center; text-decoration: none; border-radius: 8px; font-weight: 900; box-sizing: border-box; transition: 0.3s; }
.btn-register-action:hover { background: #ad1457; box-shadow: 0 4px 10px rgba(216, 27, 96, 0.3); }

.registry-section { background: #f3e5f5; border: 2px dashed #9c27b0; border-radius: 12px; padding: 20px; margin-bottom: 30px; }
.registry-header { font-size: 18px; font-weight: 900; color: #6a1b9a; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.registry-table { width: 100%; border-collapse: collapse; background: white; }
.registry-table th, .registry-table td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }
.registry-table th { background: #e1bee7; color: #4a148c; }
.del-reg-btn { background: #e0e0e0; color: #555; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; }
.del-reg-btn:hover { background: #d32f2f; color: white; }

.hist-box { margin-top: 8px; padding: 8px; border: 1px dashed #b0bec5; background-color: #fafafa; border-radius: 6px; text-align: left; font-size: 13px; color: #546e7a; display: block; width: 100%; box-sizing: border-box; }
.hist-item { display: block; margin-bottom: 4px; line-height: 1.4; }
.hist-item:last-child { margin-bottom: 0; }

.match-badge { display: inline-block; font-size: 12px; font-weight: bold; color: #2e7d32; background: #e8f5e9; padding: 2px 8px; border-radius: 12px; margin-left: 5px; border: 1px solid #c8e6c9; }
.pending-badge { display: inline-block; font-size: 11px; color: #e65100; background: #fff3e0; padding: 2px 6px; border-radius: 4px; margin-left: 5px; }

.sep-row { background-color: #fce4ec !important; }
.sep-badge { display: inline-block; font-size: 11px; color: #880e4f; background: #f8bbd0; padding: 2px 6px; border-radius: 4px; border: 1px solid #f48fb1; margin-left: 5px; }

.float-back-btn { position: fixed; bottom: 30px; left: 30px; z-index: 9999; background: linear-gradient(135deg, #ffffff 0%, #fff8f8 100%); color: #d81b60; padding: 12px 22px; border-radius: 50px; text-decoration: none; font-weight: 900; font-family: 'Noto Sans TC', sans-serif; font-size: 15px; display: flex; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(216, 27, 96, 0.2); border: 2px solid #fff; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.float-back-btn:hover { background: linear-gradient(45deg, #d81b60, #e91e63); color: white; transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 25px rgba(216, 27, 96, 0.4); border-color: #ffc107; }
@media (max-width: 600px) { .float-back-btn { bottom: 20px; left: 20px; padding: 10px 16px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } }