/* DP-09 皮肤：MiSans、Espresso 语义变量、登录页、桌面图标、少量动效（设计见 ui.md 第二~五节）。
 * 只改变量和三类通用动效；打印 PDF 不用这套网页字体。 */

/* ---------- 1. MiSans（GB2312 6763 字 + ASCII + 中文标点子集） ---------- */
@font-face { font-family: "MiSans"; src: url("/assets/pvc_erp/fonts/MiSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MiSans"; src: url("/assets/pvc_erp/fonts/MiSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "MiSans"; src: url("/assets/pvc_erp/fonts/MiSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- 2. 设计变量（浅色）+ Espresso 语义层映射 ---------- */
:root {
	--pvc-primary: #0e6e73;
	--pvc-primary-hover: #0b5a5e;
	--pvc-tint: #e8f4f4;
	--pvc-tint-strong: #d3eaea;
	--pvc-on-primary: #ffffff;
	--pvc-page: #ffffff;
	--pvc-side: #f7f7f5;
	--pvc-card: #ffffff;
	--pvc-text: #2f2e2b;
	--pvc-muted: #6f6e69;
	--pvc-faint: #9b9a95;
	--pvc-border: #e9e8e4;
	--pvc-field-border: #d3d2cc;
	--pvc-field-bg: #ffffff;
	--pvc-hover-row: #fafaf8;
	--pvc-danger-bg: #fdecec;
	--pvc-danger-fg: #b42318;
	--pvc-success-bg: #e6f4ea;
	--pvc-success-fg: #1e7b34;
	--pvc-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
	--pvc-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
	--pvc-font: "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
	--font-stack: var(--pvc-font);
	/* Espresso 的 regular 是 420（为可变字体 Inter 设的）；MiSans 只有 400/500/600，正文用 400 */
	--font-weight-regular: 400;
	--primary: var(--pvc-primary);
	--btn-primary: var(--pvc-primary);
	--text-color: var(--pvc-text);
	--heading-color: var(--pvc-text);
	--text-muted: var(--pvc-muted);
	--border-color: var(--pvc-border);
	--table-border-color: var(--pvc-border);
	--surface-base: var(--pvc-page);
	--surface-sidebar: var(--pvc-side);
	--card-bg: var(--pvc-card);
	--control-bg: var(--pvc-field-bg);
	--sidebar-select-color: var(--pvc-tint);
	--highlight-color: var(--pvc-hover-row);
	--ink-blue-link: var(--pvc-primary);
	--radius: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--shadow: var(--pvc-shadow);
	--elevation-base: var(--pvc-shadow);
	--shadow-md: var(--pvc-shadow-hover);
	--elevation-md: var(--pvc-shadow-hover);
}

/* ---------- 3. 深色 ---------- */
[data-theme="dark"] {
	--pvc-primary: #3fb5b0;
	--pvc-primary-hover: #5cc6c1;
	--pvc-tint: #16302f;
	--pvc-tint-strong: #1e3f3d;
	--pvc-on-primary: #0b2a2b;
	--pvc-page: #191918;
	--pvc-side: #1e1e1d;
	--pvc-card: #222221;
	--pvc-text: #edece9;
	--pvc-muted: #a3a29e;
	--pvc-faint: #7a7975;
	--pvc-border: #2f2e2c;
	--pvc-field-border: #3e3d3a;
	--pvc-field-bg: #1e1e1d;
	--pvc-hover-row: #242423;
	--pvc-danger-bg: #3a1c1c;
	--pvc-danger-fg: #f08a80;
	--pvc-success-bg: #16301f;
	--pvc-success-fg: #6bcb85;
	/* 深色不用阴影，靠边框和底色区分层次 */
	--pvc-shadow: none;
	--pvc-shadow-hover: none;
	--primary: var(--pvc-primary);
	--btn-primary: var(--pvc-primary);
	--text-color: var(--pvc-text);
	--heading-color: var(--pvc-text);
	--text-muted: var(--pvc-muted);
	--border-color: var(--pvc-border);
	--table-border-color: var(--pvc-border);
	--surface-base: var(--pvc-page);
	--surface-elevation-1: var(--pvc-card);
	--surface-elevation-2: var(--pvc-card);
	--surface-elevation-3: var(--pvc-card);
	--modal-bg: var(--pvc-card);
	--popover-bg: var(--pvc-card);
	--card-bg: var(--pvc-card);
	--control-bg: var(--pvc-field-bg);
	--desk-sidebar-bg: var(--pvc-side);
	--sidebar-select-color: var(--pvc-tint);
	--highlight-color: var(--pvc-hover-row);
	--ink-blue-link: var(--pvc-primary);
	--shadow: none;
	--elevation-base: none;
	--shadow-md: none;
	--elevation-md: none;
}

/* ---------- 4. 字号、行距、圆角、阴影 ---------- */
body { font-size: 14px; line-height: 1.55; background-color: var(--pvc-page); color: var(--pvc-text); }
.list-row, .grid-row, .frappe-datatable .dt-cell, .table td, .table th { line-height: 1.45; }

/* ---------- 5. 语义替换与通用动效（按钮、卡片、输入框、侧栏标识） ---------- */
/* 主按钮深青：覆盖 Espresso 组件局部变量 */
.es-button[data-variant="solid"] {
	--bt-solid-bg: var(--pvc-primary);
	--bt-solid-bg-hover: var(--pvc-primary-hover);
	--bt-solid-bg-active: var(--pvc-primary-hover);
	--bt-solid-fg: var(--pvc-on-primary);
}
/* 表单控件的框原生用底色区分（.form-control 是 border:none），底色改白后补回边框 */
.frappe-control .control-input .form-control,
.frappe-control .control-input select,
.frappe-control .control-input textarea,
.frappe-control .control-input .input-with-feedback { border: 1px solid var(--pvc-field-border); }
.btn.btn-default:not(.icon-btn), .btn.btn-secondary:not(.icon-btn) { border: 1px solid var(--pvc-border); }
.form-control:focus, .control-input input:focus, .control-input select:focus, .control-input textarea:focus {
	border-color: var(--pvc-primary) !important;
	box-shadow: 0 0 0 3px var(--pvc-tint) !important;
}
/* 浅色下原生 amber/blue 状态文字对比度 3.6/4.2，按验收 A2（≥4.5）用原型深一档文字色；深色原生已达标 */
:root:not([data-theme="dark"]) .es-badge[data-theme="amber"] { --c-fg: #a35200; }
:root:not([data-theme="dark"]) .es-badge[data-theme="blue"] { --c-fg: #1d5bc4; }
/* 侧栏选中项：原生用 --surface-elevation-3（白/弹窗色），只换这一处组件样式 */
.standard-sidebar-item.active-sidebar { background: var(--pvc-tint); box-shadow: none; }
.standard-sidebar-item.active-sidebar .item-anchor,
.standard-sidebar-item.active-sidebar .sidebar-item-label,
.standard-sidebar-item.active-sidebar .sidebar-item-icon { color: var(--pvc-primary); }
/* 侧栏头部：ERPNext、人事的自家 logo 改为同一标识（内容替换，不改它们的钩子） */
.shell-header .header-logo img[src*="erpnext-logo"],
.shell-header .header-logo img[src*="frappe-hr-logo"] {
	content: url("/assets/pvc_erp/images/pvc-mark.svg");
	background-color: transparent;
}

/* ---------- 6. 动效：只在允许动态效果时启用（按钮、卡片、桌面图标、输入框、链接） ---------- */
@media (prefers-reduced-motion: no-preference) {
	.es-button, .btn { transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out; }
	.es-button:not([disabled]):not([aria-busy="true"]):hover, .btn:not([disabled]):hover {
		transform: translateY(-1px);
		box-shadow: var(--pvc-shadow-hover);
	}
	.es-button:not([disabled]):not([aria-busy="true"]):active, .btn:not([disabled]):active { transform: translateY(0) scale(0.98); }
	/* 卡片悬浮只加深阴影，不位移 */
	.frappe-card, .widget { transition: box-shadow 0.18s ease-out; }
	.frappe-card:hover, .widget:hover { box-shadow: var(--pvc-shadow-hover); }
	/* 登录页按钮、输入框、链接与加载转圈 */
	.pvc-login .form-control { transition: border-color 0.15s, box-shadow 0.15s; }
	.pvc-login .es-button { transition: background-color 0.18s ease-out; }
	.pvc-login .pvc-lnk { transition: color 0.15s; }
	.pvc-login .es-spinner { animation: pvc-spin 0.8s linear infinite; }
}

/* 减少动态效果：关闭动画和过渡 */
@media (prefers-reduced-motion: reduce) {
	.es-button, .btn, .frappe-card, .widget,
	.pvc-login .form-control, .pvc-login .es-button, .pvc-login .pvc-lnk, .pvc-login .es-spinner {
		transition: none !important;
		animation: none !important;
	}
	.es-button:hover, .es-button:active, .btn:hover, .btn:active,
	.frappe-card:hover, .widget:hover {
		transform: none !important;
	}
}

/* ---------- 8. 登录页与设置新密码页（.pvc-login，含原生 request_otp 注入的验证表单） ---------- */
.pvc-login, .pvc-login * { box-sizing: border-box; }
.pvc-login {
	position: fixed;
	inset: 0;
	overflow-y: auto;
	z-index: 5;
	background:
		radial-gradient(900px 420px at 50% -120px, rgba(14, 110, 115, 0.07), transparent 70%),
		var(--pvc-page);
	color: var(--pvc-text);
	font-family: var(--pvc-font);
	font-size: 14px;
	line-height: 1.55;
}
[data-theme="dark"] .pvc-login {
	background:
		radial-gradient(900px 420px at 50% -120px, rgba(63, 181, 176, 0.1), transparent 70%),
		var(--pvc-page);
}
.pvc-login::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(47, 46, 43, 0.09) 1px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(620px 420px at 50% 46%, transparent 40%, #000 100%);
	mask-image: radial-gradient(620px 420px at 50% 46%, transparent 40%, #000 100%);
}
[data-theme="dark"] .pvc-login::before { background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px); }
.pvc-brand { position: absolute; top: 24px; left: 32px; display: flex; align-items: center; gap: 10px; z-index: 1; }
.pvc-brand-text { font-size: 15px; font-weight: 600; letter-spacing: 0.2px; }
.pvc-mark {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: linear-gradient(135deg, #139096, #0b5a5e);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.pvc-mark-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
.pvc-login-col { width: 380px; max-width: calc(100% - 48px); margin: 0 auto; padding: 22vh 0 80px; }
.pvc-login-head { margin-bottom: 28px; }
.pvc-login-title { font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: 0.2px; margin: 22px 0 0; color: inherit; }
.pvc-login-sub { font-size: 15px; color: var(--pvc-muted); margin: 6px 0 0; }

.pvc-login .es-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 16px;
}
.pvc-login .es-alert[data-theme="red"] { background: var(--pvc-danger-bg); color: var(--pvc-danger-fg); }
.pvc-login .es-alert[data-theme="green"] { background: var(--pvc-success-bg); color: var(--pvc-success-fg); }
.pvc-login .es-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

.pvc-login .form-group { margin-bottom: 16px; }
.pvc-login label, .pvc-login .pvc-label-row { font-size: 13px; color: var(--pvc-muted); }
.pvc-login .pvc-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.pvc-login .pvc-label-row label { margin: 0; }
.pvc-login .form-control {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-size: 15px;
	border: 1px solid var(--pvc-field-border);
	border-radius: 10px;
	background: var(--pvc-field-bg);
	color: var(--pvc-text);
	box-shadow: none;
	outline: none;
}
.pvc-login .form-control::placeholder { color: var(--pvc-faint); opacity: 1; }
.pvc-login .form-control:focus { border-color: var(--pvc-primary) !important; box-shadow: 0 0 0 3px var(--pvc-tint) !important; }
.pvc-login .page-card-body.invalid #login_password,
.pvc-login .form-group.invalid .form-control {
	border-color: var(--pvc-danger-fg) !important;
	box-shadow: 0 0 0 3px var(--pvc-danger-bg) !important;
}
.pvc-login .field-error { display: none; margin: 6px 0 0; font-size: 13px; color: var(--pvc-danger-fg); }
.pvc-login .form-group.invalid .field-error { display: block; }
.pvc-login .email-field, .pvc-login .password-field { position: relative; }
.pvc-login .password-field .form-control { padding-right: 44px; }
.pvc-login .toggle-password {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 19px;
	height: 19px;
	cursor: pointer;
	color: var(--pvc-faint);
	z-index: 2;
}
.pvc-login .toggle-password use { stroke: currentColor; }

.pvc-login .es-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 0 14px;
	font-family: var(--pvc-font);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	background: var(--pvc-primary);
	color: var(--pvc-on-primary);
	text-decoration: none;
}
.pvc-login .es-button:hover { background: var(--pvc-primary-hover); }
.pvc-login .es-button[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.pvc-login .es-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: currentColor;
}
@keyframes pvc-spin { to { transform: rotate(360deg); } }
.pvc-login .btn-forgot[disabled] { opacity: 0.5; cursor: default; }
.pvc-login .pvc-lnk { color: var(--pvc-muted); cursor: pointer; text-decoration: none; }
.pvc-login .pvc-lnk:hover { color: var(--pvc-primary); }
.pvc-login-note { font-size: 13px; color: var(--pvc-faint); text-align: center; line-height: 1.6; margin: 18px 0 0; }
.pvc-login .pvc-back { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; }
.pvc-login-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 32px;
	text-align: center;
	font-size: 12px;
	color: var(--pvc-faint);
}
.pvc-login .for-login, .pvc-login .for-forgot, .pvc-login .for-reset-password { position: relative; z-index: 1; }
.pvc-login .for-forgot { display: none; }
.pvc-login .hidden { display: none !important; }
/* 原生 request_otp 注入的验证表单（#twofactor_div / .form-verify） */
.pvc-login .page-card-head { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: var(--pvc-text); }
.pvc-login .form-verify .form-control { margin-bottom: 16px; }
.pvc-login .form-verify .es-button { margin-top: 4px; }

.pvc-login .password-strength-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--pvc-muted); }
.pvc-login .password-hint { font-size: 12.5px; color: var(--pvc-muted); margin: 6px 0 0; }
.pvc-login .password-mismatch-message { font-size: 12.5px; margin: 6px 0 0; }
.pvc-login .text-danger, .pvc-login .text-ink-red-8 { color: var(--pvc-danger-fg); }

@media (max-width: 480px) {
	.pvc-brand { top: 20px; left: 20px; }
	.pvc-login-col { padding-top: 16vh; }
	.pvc-login-footer { position: static; padding: 24px 20px 32px; }
}