/**
 * 檔案路徑：src/css/main.css
 * 主要功能：定義應用程式的全域樣式、基礎排版、色彩變數以及所有 UI 元件的視覺樣式。
 * 角色定位：本檔案作為應用程式的統一樣式表，確保視覺一致性，且不包含任何 JavaScript 邏輯或 HTML 結構。
 * 核心邏輯：
 *   - 包含 :root 定義的 CSS 變數，用於管理主題色彩和常用數值。
 *   - 定義 body、container、card、button 等主要 UI 元素的通用樣式。
 *   - 包含響應式設計的 `@media` 查詢，以適應不同螢幕尺寸。
 */

/* --- 基本樣式和變數 --- */
:root {
    --primary: #0d47a1; --primary-light: #1a73e8; --secondary: #34a853; --tertiary: #fbbc05; --danger: #ea4335; --warning: #ff9800; --light: #f8f9fa; --dark: #202124; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --radius: 8px;
    --note-1000: #3D93F0; --note-500: #C6A27B; --note-100: #DE4545; --coin-50: #DAA520; --coin-10: #453A3A; --coin-5: #A3A3A3; --coin-1: #790C0C;
    --success: #28a745; --gray: #6c757d;
}
* {box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', 'Microsoft JhengHei', sans-serif;}
body {background-color: #f0f2f5; color: var(--dark); line-height: 1.6; padding: 0.5rem;}
.container {max-width: 960px; margin: 0 auto; padding: 0 1rem;}
.header {text-align: center; margin: 1rem 0; color: var(--primary);}
.header h1 {margin-bottom: 0.5rem;}
.card {background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem; border-top: 4px solid var(--primary);}
.section-title {color: var(--primary); margin-bottom: 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--tertiary); font-size: 1.4rem; font-weight: 700;}
.subsection-title {color: var(--secondary); margin-top: 1rem; margin-bottom: 0.6rem; font-size: 1.2rem; font-weight: 600; display: flex; align-items: center;}
.subsection-title:before {content: ""; display: inline-block; width: 6px; height: 18px; background-color: var(--secondary); margin-right: 8px; border-radius: 3px;}
.input-form {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem;}
.input-group {margin-bottom: 0.8rem; position: relative;}
.input-group label {display: block; margin-bottom: 0.4rem; font-weight: 600;}
.input-flexbox {display: flex; gap: 0.5rem; align-items: center;}
.bag-input {width: 25%; padding: 0.7rem 0.5rem; border: 2px solid #ddd; border-radius: var(--radius); font-size: 1rem; text-align: center; background-color: #f0f0f0;}
.amount-input {width: 75%; padding: 0.7rem; border: 2px solid #ddd; border-radius: var(--radius); font-size: 1.1rem; transition: all 0.3s; background-color: #f9f9f9;}
.input-group input:focus, .input-group select:focus {border-color: var(--primary-light); outline: none; box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2); background-color: white;}
.input-error {border-color: var(--danger) !important; animation: pulse-error 1.5s infinite;}
.error-message {color: var(--danger); font-size: 0.8rem; margin-top: 0.3rem; display: none; font-weight: bold;}
.error-message.active {display: block; animation: fadeIn 0.3s;}
.btn {background-color: var(--primary-light); color: white; border: none; border-radius: var(--radius); padding: 0.75rem 1.5rem; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; display: inline-block; text-align: center; font-weight: 600; letter-spacing: 0.5px; position: relative; overflow: hidden;}
.btn:hover:not(:disabled) {background-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.btn:active:not(:disabled) {transform: translateY(0);}
.btn:disabled {background-color: #aaa; cursor: not-allowed;}
.btn-block {display: block; width: 100%;}
.btn-clear {background-color: #6c757d;}
.btn-clear .progress-bar {position: absolute; top:0; left:0; height: 100%; background: rgba(255,255,255,0.3); width: 0; transition: width 0.1s linear;}
.btn-clear:hover {background-color: #5a6268;}
.btn-simulate {background-color: #28a745;}
.btn-simulate:hover {background-color: #218838;}
.buttons-row {display: flex; gap: 0.5rem; margin-bottom: 1rem;}
.buttons-row .btn {flex: 1;}
.result-section {display: none;}
.result-section.active {display: block; animation: fadeIn 0.5s;}
@keyframes fadeIn {from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);}}
@keyframes pulse-error {0% {box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.4);} 70% {box-shadow: 0 0 0 6px rgba(234, 67, 53, 0);} 100% {box-shadow: 0 0 0 0 rgba(234, 67, 53, 0);}}
.result-block {background-color: #f9f9f9; border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; border-left: 6px solid var(--tertiary);}
.warning-block {background-color: #fff3e0; border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; border-left: 6px solid var(--warning); position: relative;}
.warning-block:after {content: "⚠️"; position: absolute; top: 10px; right: 10px; font-size: 1.5rem; opacity: 0.2;}
.warning-title {color: var(--warning); font-weight: bold; margin-bottom: 0.6rem; font-size: 1.1rem; display: flex; align-items: center;}
.warning-title:before {content: "⚠️"; margin-right: 6px;}
.result-row {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px dashed #e0e0e0;}
.result-row:last-child {border-bottom: none;}
.result-row .label {flex: 1; font-weight: 500;}
.result-row .value {text-align: right; font-weight: 600; min-width: 160px;}
.result-total {font-weight: bold; font-size: 1.15rem; color: var(--primary); border-top: 2px solid var(--tertiary); padding-top: 0.6rem; margin-top: 0.6rem;}
.coin-detail {font-size: 0.95rem; color: #555; margin-top: 0.6rem; padding: 0.6rem; border-radius: var(--radius); background-color: #efefef; border-left: 3px solid #bbb;}
.denomination {display: flex; align-items: center; margin-bottom: 6px;}
.denom-icon {width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-right: 10px; border-radius: 50%; font-weight: bold; color: white; font-size: 0.9rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2); flex-shrink: 0;}
.note-1000 {background-color: var(--note-1000);} .note-500 {background-color: var(--note-500);} .note-100 {background-color: var(--note-100);} .coin-50 {background-color: var(--coin-50);} .coin-10 {background-color: var(--coin-10);} .coin-5 {background-color: var(--coin-5);} .coin-1 {background-color: var(--coin-1);}
.money-amount {font-size: 1.2rem; font-weight: 700; color: var(--primary);}
.summary-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem;}
.summary-box {display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #e8f0fe; border-radius: var(--radius); padding: 0.6rem; border: 1px solid #c0d6f9; text-align: center; transition: all 0.3s;}
.summary-box.highlight-box {grid-column: 1 / -1; background-color: var(--secondary); border-color: var(--secondary); color: white;}
.summary-box.highlight-box .summary-title, .summary-box.highlight-box .summary-value {color: white;}
.summary-title {font-weight: 600; font-size: 0.95rem; line-height: 1.2; white-space: nowrap;}
.summary-value {font-size: 1.5rem; font-weight: 700; margin-top: 0.3rem; color: var(--primary);}
.summary-box.error {background-color: #ffebee; border-color: #ffcdd2; animation: pulse-error 1.5s infinite;}
.collapsible-header {cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.collapsible-header::after {content: "▼"; font-size: 0.8rem; transition: transform 0.3s; margin-left: 0.5rem;}
.collapsible-header.collapsed::after {transform: rotate(-90deg);}
.collapsible-content {overflow: hidden; max-height: 0; transition: max-height 0.5s ease-in-out; border-top: 1px solid #eee; padding-top: 0;}
.collapsible-content.active {max-height: 2000px; padding-top: 1rem;}
hr.orange-separator {border: none; border-top: 3px solid var(--warning); box-shadow: 0 0 8px rgba(255, 168, 0, 0.7); margin: 0.8rem 0;}
.modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);}
.modal-content {background-color: #fefefe; margin: 5% auto; padding: 0; border: 1px solid #888; width: 90%; max-width: 600px; border-radius: var(--radius); box-shadow: 0 4px 10px rgba(0,0,0,0.2); animation: slideDown 0.4s; overflow: hidden;}
@keyframes slideDown {from {opacity: 0; transform: translateY(-30px);} to {opacity: 1; transform: translateY(0);}}
.modal-header {background-color: var(--primary-light); color: white; padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center;}
.modal-header h3 {margin: 0; font-size: 1.2rem;}
.close {color: white; font-size: 24px; font-weight: bold; cursor: pointer; opacity: 0.8; line-height: 1;}
.close:hover {opacity: 1;}
.modal-body {padding: 1rem; max-height: 70vh; overflow-y: auto;}
.table-container { overflow-x: auto; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
.manual-section h4 { margin-top: 1rem; margin-bottom: 0.5rem; color: var(--primary); }
.manual-section p, .manual-section ul { margin-bottom: 0.8rem; }
.manual-section ul { padding-left: 20px; }
.exchange-section {margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee;}
.exchange-field {margin-bottom: 1rem;}
.exchange-field label {display: block; margin-bottom: 0.4rem; font-weight: 600;}
.exchange-input {width: 100%; padding: 0.7rem; border: 2px solid #ddd; border-radius: var(--radius); font-size: 1.1rem; background-color: #f9f9f9;}
.exchange-select {width: 100%; padding: 0.7rem; border: 2px solid #ddd; border-radius: var(--radius); font-size: 1rem; background-color: #f9f9f9;}
.exchange-info {background-color: #e8f0fe; padding: 1rem; border-radius: var(--radius); margin-top: 1rem;}
.exchange-info div {margin-bottom: 0.4rem; line-height: 1.5;}
.exchange-arrow {display: flex; justify-content: center; margin: 1rem 0; color: var(--primary); font-size: 2rem;}
.btn-exchange {background-color: var(--primary-light); width: 100%; padding: 0.8rem; font-size: 1.2rem;}
.info-btn {background-color: var(--primary-light); color: white; border: none; border-radius: var(--radius); padding: 0.4rem 0.8rem; margin: 0.4rem; font-size: 0.9rem; cursor: pointer;}
.action-buttons {display: flex; justify-content: center; gap: 8px; margin: 12px 0 8px; flex-wrap: wrap;}

.item {display: flex; align-items: center; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;}
.item-content { flex: 1; min-width: 0; margin: 0 12px; }
.amount {font-size: 1.2rem; font-weight: 700; word-break: break-all; }
.meta {font-size: 1.0rem; font-weight: 600; background-color: #e8f5e9; color: #2c3e50; border: 1px solid #c8e6c9; border-radius: 4px; padding: 0.15rem 0.4rem; margin-left: auto; white-space: nowrap; flex-shrink: 0;}

.d1000 { background: var(--note-1000); } .d500 { background: var(--note-500); } .d100 { background: var(--note-100); } .d50 { background: var(--coin-50); } .d10 { background: var(--coin-10); } .d5 { background: var(--coin-5); } .d1 { background: var(--coin-1); }
.highlight-amount-pack {font-size: 1.8rem; font-weight: 800; background-color: var(--tertiary); color: var(--dark); padding: 0.2rem 0.6rem; border-radius: var(--radius); margin-right: 0.5rem; display: inline-block;}
.coin-pack-loose-count {font-size: 0.9rem; font-weight: 600; background-color: #e8f5e9; color: #2c3e50; border: 1px solid #c8e6c9; border-radius: 4px; padding: 0.15rem 0.4rem; white-space: nowrap; margin-left: 0.5rem;}
.coin-pack-value-container {margin-left: auto; display: flex; align-items: center; white-space: nowrap;}
.picker-group { display: flex; align-items: center; margin-bottom: 10px; }
.picker-group label { flex-basis: 100px; margin-right: 10px; font-weight: 600; }
.picker-group input[type="color"] { width: 60px; height: 30px; border: none; padding: 0; background: none; cursor: pointer; }
.hex-value { margin-left: 10px; font-family: monospace; font-size: 0.9em; color: #555; }

.input-stepper { display: flex; align-items: center; gap: 4px; }
.input-stepper input { text-align: center; flex-grow: 1; width: 0; }
.stepper-btn { font-size: 1.2rem; font-weight: bold; color: var(--primary); background-color: #e8f0fe; border: 1px solid #c0d6f9; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background-color 0.2s; flex-shrink: 0; }
.stepper-btn:hover { background-color: #d0e0fd; }
.stepper-btn:active { background-color: #b9d0fb; }

.exchange-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-start; gap: 1rem; }
.exchange-panel { padding: 1rem; border: 1px solid #ddd; border-radius: var(--radius); background: #fdfdfd; }
.exchange-panel h4 { color: var(--primary); margin-bottom: 0.5rem; }
.exchange-live-preview { font-size: 0.9rem; color: var(--gray); margin-top: 0.5rem; min-height: 4.5em; border-left: 3px solid #eee; padding-left: 8px;}
.exchange-live-preview .swap-path { font-weight: bold; }
.exchange-live-preview .swap-path.possible { color: var(--success); }
.exchange-live-preview .swap-path.impossible { color: var(--danger); }
.history-controls { margin-top: 1rem; }
.history-log { background: #f1f3f4; border-radius: var(--radius); padding: 0.8rem; margin-top: 0.5rem; max-height: 200px; overflow-y: auto; }
.history-log-item { padding: 0.5rem; border-bottom: 1px solid #e0e0e0; cursor: pointer; transition: background-color 0.2s; display: flex; justify-content: space-between; align-items: center; }
.history-log-item:last-child { border-bottom: none; }
.history-log-item:hover { background-color: #e8f0fe; }
.history-log-item.active { background-color: var(--tertiary); color: var(--dark); font-weight: bold; }
.history-timestamp { font-size: 0.8rem; color: var(--gray); margin-right: 1rem; flex-shrink: 0;}
.history-action { flex-grow: 1; }
.update-highlight { animation: flash-highlight 2s ease-out; }
@keyframes flash-highlight {0%, 100% { background-color: transparent; }25%, 75% { background-color: var(--tertiary); }}
@media (max-width: 768px) {.input-form {grid-template-columns: 1fr;}.result-row {flex-direction: column; align-items: flex-start;}.result-row .value {text-align: left; margin-top: 3px;}.exchange-grid { grid-template-columns: 1fr; }}}