/* 報價單系統共用樣式，設計語彙延續 Prototype 資料夾裡驗證過的原型 */
:root{
	--accent:#3457d5; --accent-light:#eef1fd; --border:#dfe3ea; --text:#22262f; --text-dim:#6b7280;
	--bg:#f5f6f9; --card:#ffffff; --danger:#d9534f; --good:#1e8e5a;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:"Microsoft JhengHei","Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px;}
a{color:var(--accent);}

/* 頂部導覽 */
.app-nav{background:#1c1f2b;}
.app-nav-inner{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:4px;height:44px;}
.app-nav-brand{color:#fff;font-weight:700;font-size:13px;margin-right:14px;opacity:.85;flex-shrink:0;}
.app-nav-inner a{color:#c3c7d6;text-decoration:none;font-size:13px;padding:6px 12px;border-radius:5px;transition:.15s;}
.app-nav-inner a:hover{background:#2c2f3d;color:#fff;}
.app-nav-inner a.active{background:#3457d5;color:#fff;font-weight:600;}
.app-nav-user{margin-left:auto;display:flex;align-items:center;gap:6px;color:#8b90a3;font-size:12px;flex-shrink:0;}
.app-nav-user a{font-size:12px;color:#c3c7d6;}

.page-header{background:var(--accent);color:#fff;padding:14px 24px;}
.page-header h1{margin:0;font-size:18px;font-weight:600;}
.page-header p{margin:2px 0 0;font-size:12px;opacity:.85;}

.page-body{max-width:1400px;margin:0 auto;padding:20px;}
.page-body.narrow{max-width:1100px;}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px 18px;}
.card h2{font-size:15px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.card h2 .step{background:var(--accent);color:#fff;width:20px;height:20px;border-radius:50%;font-size:11px;display:inline-flex;align-items:center;justify-content:center;}

/* 表單元件 */
label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px;}
input[type=text],input[type=number],input[type=date],select,textarea{
	width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:5px;font-size:13px;font-family:inherit;background:#fff;color:var(--text);
}
textarea{resize:vertical;min-height:54px;line-height:1.5;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.field{margin-bottom:0;}

/* 按鈕 */
.btn-primary{background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;}
.btn-secondary{background:#fff;color:var(--accent);border:1px solid var(--accent);padding:9px 16px;border-radius:6px;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block;}
.smallbtn{border:1px solid var(--accent);color:var(--accent);background:#fff;padding:6px 12px;border-radius:5px;font-size:12px;cursor:pointer;}
.smallbtn:hover{background:var(--accent-light);}
.iconbtn{border:1px solid var(--border);background:#fff;border-radius:4px;width:26px;height:26px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
.iconbtn:hover{background:#f0f0f3;}
.iconbtn.danger:hover{background:#fdecec;color:var(--danger);border-color:#f3c9c7;}

/* 表格 */
table.list{width:100%;border-collapse:collapse;font-size:13px;}
table.list th{text-align:left;padding:9px 10px;border-bottom:2px solid var(--border);color:var(--text-dim);font-weight:600;font-size:12px;}
table.list td{padding:10px;border-bottom:1px solid #eef0f3;vertical-align:middle;}
table.list tr.void td{opacity:.5;}

/* 標籤 */
.type-tag{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--accent-light);color:var(--accent);white-space:nowrap;}
.status-tag{font-size:11px;padding:3px 9px;border-radius:10px;font-weight:600;white-space:nowrap;}
.status-tag.draft{background:#eef0f3;color:#5b6270;}
.status-tag.sent{background:#e4edff;color:#2158d1;}
.status-tag.signed{background:#e3f6ea;color:#1e8e5a;}
.status-tag.void{background:#fbe9e8;color:#b3392f;}

/* 彈出視窗 */
.overlay{position:fixed;inset:0;background:rgba(20,22,30,.45);display:none;align-items:flex-start;justify-content:center;z-index:20;overflow-y:auto;padding:30px 0;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:10px;width:560px;max-width:94vw;padding:22px 24px;}
.modal h3{margin:0 0 14px;font-size:16px;}
.modal .field{margin-bottom:12px;}
.modal .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.hint{font-size:11px;color:var(--text-dim);margin-top:3px;}
.note-line{color:var(--text-dim);font-size:12px;margin-bottom:10px;}

.empty{text-align:center;color:var(--text-dim);padding:50px 0;}