/* JARO 品質案例庫 - 前台樣式
 * 版次：v0.2.0（對應 JQC_VERSION，隨外掛版本同步更新）
 * 視覺語彙沿用同仁「風扇品質範本庫」原型（Noto Serif/Sans TC + IBM Plex Mono，
 * 米白底卡片、印章式圓形徽章、D-編號標籤、狀態圓點藥丸），讓正式系統與原始
 * 設計稿維持一致的識別。
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700&family=Noto+Sans+TC:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.jqc-app{
	--page:#f9f9f7;
	--surface:#fcfcfb;
	--surface-2:#f2f0e9;
	--surface-3:#eae7dd;
	--text:#0b0b0b;
	--text-2:#52514e;
	--muted:#898781;
	--border:rgba(11,11,11,0.10);
	--border-strong:rgba(11,11,11,0.20);
	--accent:#2a78d6;
	--accent-ink:#184f95;
	--accent-soft:#e4eefa;
	--good:#0ca30c;
	--warning:#fab219;
	--serious:#ec835a;
	--critical:#d03b3b;
	--c-noise:#2a78d6;
	--c-vibration:#eb6834;
	--c-bearing:#1baf7a;
	--c-dimension:#eda100;
	--c-solder:#e87ba4;
	--shadow-card:0 1px 2px rgba(11,11,11,0.05), 0 10px 28px -16px rgba(11,11,11,0.16);
	--font-display:'Noto Serif TC','Songti TC',serif;
	--font-body:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
	--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

	font-family:var(--font-body);
	color:var(--text);
	background:var(--page);
	padding:24px;
	border-radius:16px;
}

.jqc-wrap{ max-width:980px; margin:0 auto; font-size:15px; line-height:1.65; }
.jqc-wrap *{ box-sizing:border-box; }
.jqc-wrap h1,.jqc-wrap h2,.jqc-wrap h3{ font-family:var(--font-display); font-weight:700; margin:0; }
.jqc-wrap p{ margin:0; }
.jqc-wrap .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.jqc-wrap .eyebrow{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-top:2px; }

.jqc-wrap input[type="text"],
.jqc-wrap input[type="date"],
.jqc-wrap input[type="number"],
.jqc-wrap select,
.jqc-wrap textarea,
.jqc-wrap input[type="file"]{
	font-family:inherit; font-size:14px; color:var(--text);
	background:var(--surface); border:1px solid var(--border-strong);
	border-radius:6px; padding:7px 9px; width:100%;
}
.jqc-wrap input:focus-visible,.jqc-wrap select:focus-visible,.jqc-wrap textarea:focus-visible,.jqc-wrap button:focus-visible{
	outline:2px solid var(--accent); outline-offset:1px;
}
.jqc-wrap textarea{ resize:vertical; line-height:1.6; }

/* ---------- notices ---------- */
.jqc-notice{ padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13.5px; }
.jqc-notice-success{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink); }
.jqc-notice-error{ background:#fbe9e7; border:1px solid var(--critical); color:var(--critical); }
.jqc-notice a{ margin-left:8px; color:var(--accent-ink); font-weight:600; }

/* ---------- stamp badge (印章式圓形徽章) ---------- */
.jqc-stamp{
	--sz:40px; width:var(--sz); height:var(--sz); border-radius:50%;
	border:2px solid var(--tag-color,var(--accent)); position:relative;
	display:flex; align-items:center; justify-content:center; flex:none;
	transform:rotate(-6deg); color:var(--tag-color,var(--accent));
	font-family:var(--font-display); font-weight:700; font-size:17px;
}
.jqc-stamp::before{
	content:""; position:absolute; inset:3px;
	border:1px solid var(--tag-color,var(--accent)); border-radius:50%; opacity:.55;
}

/* ---------- banner (案件標題橫幅) ---------- */
.jqc-banner{
	display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
	background:var(--surface); border:1px solid var(--border); border-radius:14px;
	padding:20px 22px; box-shadow:var(--shadow-card); margin-bottom:20px;
}
.jqc-banner-title{ display:flex; align-items:center; gap:12px; min-width:220px; }
.jqc-banner-title h2{ font-size:20px; }
.jqc-banner-en{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.04em; }
.jqc-pill-row{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; align-self:center; }
.jqc-pill{
	display:inline-flex; align-items:center; gap:6px; font-size:12px;
	padding:4px 11px 4px 9px; border-radius:999px; border:1px solid var(--border-strong);
	color:var(--text-2); background:var(--surface);
}
.jqc-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--dot,var(--muted)); }

/* ---------- cards (取代 fieldset) ---------- */
.jqc-card{
	background:var(--surface); border:1px solid var(--border); border-radius:14px;
	box-shadow:var(--shadow-card); margin-bottom:18px; overflow:hidden;
}
.jqc-card-head{
	display:flex; align-items:center; gap:10px; padding:14px 20px;
	border-bottom:1px solid var(--border); background:var(--surface-2);
}
.jqc-d-num{
	font-family:var(--font-mono); font-weight:600; font-size:11.5px; color:#fff;
	background:var(--accent); border-radius:6px; padding:3px 8px; flex:none;
}
.jqc-card-head h3{ font-family:var(--font-display); font-weight:700; font-size:15.5px; flex:1; margin:0; }
.jqc-card-body{ padding:18px 20px; }

/* ---------- 基本資料欄位 grid ---------- */
.jqc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px 18px; margin-bottom:4px; }
.jqc-grid label, .jqc-block{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); }
.jqc-block{ margin-top:14px; }

/* ---------- D1 團隊成員 / 附件列 ---------- */
.jqc-team-row, .jqc-attachment-row{
	display:flex; gap:10px; align-items:center; margin-bottom:9px; flex-wrap:wrap;
	background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px;
}
.jqc-team-row input[type="text"]{ flex:1 1 180px; width:auto; }
.jqc-inline{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-2); white-space:nowrap; }
.jqc-inline input{ width:auto; }
.jqc-row-remove{
	background:transparent; border:none; color:var(--muted); cursor:pointer;
	font-size:12.5px; padding:2px 4px; border-radius:5px;
}
.jqc-row-remove:hover{ color:var(--critical); background:var(--surface-3); }

.jqc-hint{ color:var(--muted); font-size:12px; margin-top:8px; }
.jqc-existing-attachments{ margin:8px 0; padding-left:0; list-style:none; }
.jqc-existing-attachments li{
	background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
	padding:7px 12px; margin-bottom:6px; font-size:13px;
}
.jqc-existing-attachments a{ color:var(--accent-ink); font-weight:600; }

/* ---------- buttons ---------- */
.jqc-wrap .button,
.jqc-wrap button.button,
.jqc-wrap a.button{
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:8px; padding:9px 16px; font-size:13.5px; cursor:pointer;
	text-decoration:none; border:1px solid var(--border-strong);
	background:var(--surface); color:var(--text); height:auto;
}
.jqc-wrap .button:hover{ background:var(--surface-3); }
.jqc-wrap .button-primary{
	background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.jqc-wrap .button-primary:hover{ filter:brightness(1.06); background:var(--accent); color:#fff; }
#jqc-add-team, #jqc-add-attachment{
	border:1px dashed var(--border-strong); background:transparent; color:var(--text-2);
	border-radius:8px; padding:7px 14px; font-size:12.5px; cursor:pointer;
}
#jqc-add-team:hover, #jqc-add-attachment:hover{ background:var(--surface-2); }

/* ---------- 案件查詢清單／詳情 ---------- */
.jqc-filter-form{
	background:var(--surface); border:1px solid var(--border); border-radius:14px;
	padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow-card);
}
.jqc-filter-form label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); }

.jqc-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-card); }
.jqc-table{ width:100%; border-collapse:collapse; min-width:640px; background:var(--surface); }
.jqc-table thead th{
	background:var(--surface-2); text-align:left; font-size:11.5px; color:var(--muted);
	font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.jqc-table tbody td{ padding:9px 12px; border-bottom:1px solid var(--border); font-size:13.5px; }
.jqc-table tbody tr:last-child td{ border-bottom:none; }
.jqc-table tbody tr:hover{ background:var(--surface-2); }
.jqc-table a{ font-family:var(--font-mono); color:var(--accent-ink); font-weight:600; text-decoration:none; }
.jqc-table a:hover{ text-decoration:underline; }

.jqc-detail-table{ width:100%; border-collapse:collapse; margin:14px 0; }
.jqc-detail-table th,.jqc-detail-table td{ border:1px solid var(--border); padding:9px 12px; text-align:left; font-size:13.5px; }
.jqc-detail-table th{ background:var(--surface-2); width:170px; color:var(--text-2); font-weight:600; }

.jqc-badge{
	display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
	font-size:11.5px; color:#fff; background:var(--muted);
}
.jqc-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); }
.jqc-sev-good{ background:var(--good); }
.jqc-sev-warning{ background:var(--warning); color:#3a2a00; }
.jqc-sev-serious{ background:var(--serious); }
.jqc-sev-critical{ background:var(--critical); }

.jqc-pagination{ display:flex; gap:6px; margin:16px 0; }
.jqc-pagination a,.jqc-pagination span{
	display:inline-block; padding:5px 11px; border:1px solid var(--border-strong);
	border-radius:6px; text-decoration:none; font-family:var(--font-mono); font-size:12.5px; color:var(--text);
}
.jqc-page-current{ background:var(--accent); color:#fff; border-color:var(--accent); }

.jqc-summary{ white-space:pre-line; font-size:14px; line-height:1.75; }

@media (max-width:700px){
	.jqc-app{ padding:14px; }
	.jqc-grid{ grid-template-columns:1fr; }
	.jqc-banner{ flex-direction:column; }
	.jqc-pill-row{ margin-left:0; }
}