/**
 * LOB Theme — 基础组件样式（components）
 * 按钮 / 标签 / 输入框 / 表格 / 卡片 / 面包屑 / 容器网格 / 状态。
 * 首页、列表、详情三种页面复用同一套组件，不单独复制大块 CSS。
 */

/* ---- 重置与基础 ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-ink-900);
	background: var(--color-surface-0);
}

img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4 {
	font-family: var(--font-sans);
	line-height: var(--leading-tight);
	color: var(--color-ink-900);
	margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

a {
	color: var(--color-brand-600);
	text-decoration: none;
}

a:hover {
	color: var(--color-brand-700);
	text-decoration: underline;
}

/* ---- 容器与分区 ---- */
.lob-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.lob-section {
	padding-block: var(--space-12);
}

.lob-section--tint {
	background: var(--color-surface-50);
}

.lob-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

/* ---- 按钮 ---- */
.lob-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-button);
	border: 1px solid transparent;
	font-size: var(--text-md);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lob-btn:hover { text-decoration: none; }

.lob-btn--primary {
	background: var(--color-brand-600);
	color: var(--color-surface-0);
}
.lob-btn--primary:hover { background: var(--color-brand-700); }

.lob-btn--signal {
	background: var(--color-signal-500);
	color: var(--color-ink-900);
}
.lob-btn--signal:hover { filter: brightness(0.95); }

.lob-btn--ghost {
	background: transparent;
	color: var(--color-brand-600);
	border-color: var(--color-border);
}
.lob-btn--ghost:hover { background: var(--color-surface-100); }

.lob-btn--sm {
	min-height: 36px;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
}

.lob-btn:disabled,
.lob-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- 标签 / 徽标 ---- */
.lob-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 2px var(--space-2);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 600;
	background: var(--color-surface-100);
	color: var(--color-ink-700);
}

.lob-badge--success { background: #e2f3ea; color: var(--color-success); }
.lob-badge--warn    { background: #fdf0d9; color: #8a5a00; }
.lob-badge--danger  { background: #f8e3e3; color: var(--color-danger); }
.lob-badge--brand   { background: #e0f2f7; color: var(--color-brand-700); }

/* ---- 料号展示 ---- */
.lob-part-number {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	color: var(--color-ink-700);
}

/* ---- 输入框 ---- */
.lob-input,
.lob-select,
.lob-textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	background: var(--color-surface-0);
	color: var(--color-ink-900);
	font-size: var(--text-md);
	font-family: inherit;
}

.lob-textarea { min-height: 120px; }

.lob-input:focus,
.lob-select:focus,
.lob-textarea:focus {
	border-color: var(--color-brand-600);
	outline: 3px solid rgba(14, 116, 144, 0.25);
	outline-offset: 0;
}

.lob-input[aria-invalid="true"],
.lob-input--error {
	border-color: var(--color-danger);
}

.lob-field {
	margin-bottom: var(--space-4);
}

.lob-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.lob-field__hint {
	font-size: var(--text-sm);
	color: var(--color-muted);
	margin-top: var(--space-1);
}

.lob-field__error {
	font-size: var(--text-sm);
	color: var(--color-danger);
	margin-top: var(--space-1);
}

/* ---- 表格 ---- */
.lob-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.lob-table th,
.lob-table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.lob-table th {
	background: var(--color-surface-50);
	color: var(--color-ink-700);
	font-weight: 600;
}

/* ---- 卡片 ---- */
.lob-card {
	background: var(--color-surface-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: var(--space-6);
}

.lob-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---- 面包屑 ---- */
.lob-breadcrumb {
	padding-block: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.lob-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lob-breadcrumb li + li::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--color-border);
}

/* ---- 提示条 ---- */
.lob-notice {
	padding: var(--space-4);
	border-radius: var(--radius-button);
	border: 1px solid var(--color-border);
	background: var(--color-surface-50);
	color: var(--color-ink-700);
}

.lob-notice--error {
	border-color: var(--color-danger);
	background: #f8e3e3;
	color: var(--color-danger);
}

.lob-notice--success {
	border-color: var(--color-success);
	background: #e2f3ea;
	color: var(--color-success);
}