/* 員工端樣式 — 取自前端切版 demo（Staff-today），去掉 scoped 屬性；之後各頁共用並擴充 */
.staff-app {
	--staff-bg:#eaf3ff;
	--staff-panel:#f5f9ff;
	--staff-paper:#fff;
	--staff-ink:#1b2b44;
	--staff-muted:#5f7696;
	--staff-line:#bdd7f1;
	--staff-blue:#3d8bd0;
	--staff-blue-deep:#275a8f;
	--staff-blue-hover:#194a7c;
	--staff-gold:#dbba78;
	--staff-gold-deep:#a58a52;
	--staff-action:#163a65;
	background-color:var(--staff-bg);
	min-height:100dvh;
	color:var(--staff-ink);
	background-image:linear-gradient(145deg,#edf6ff 0%,#e8f2ff 100%);
	font-family:inherit;
	font-size:15px;
	line-height:1.5}
.staff-app * {
	box-sizing:border-box}
.staff-app button,.staff-app input,.staff-app select,.staff-app textarea {
	font:inherit}
.staff-app button {
	cursor:pointer}
.staff-app button:disabled {
	cursor:not-allowed}
.staff-app :focus-visible {
	outline-offset:3px;
	outline:3px solid #a58a52}
.staff-app ::selection {
	color:#1b2b44;
	background:#dbba78}
.staff-header {
	background:var(--staff-paper);
	border-bottom:1px solid var(--staff-line)}
.staff-header-inner {
	align-items:center;
	gap:32px;
	width:min(100% - 56px,1240px);
	min-height:76px;
	margin:0 auto;
	display:flex}
.staff-brand {
	color:inherit;
	align-items:center;
	min-width:0;
	text-decoration:none;
	display:inline-flex}
.staff-brand-name {
	white-space:nowrap;
	font-size:20px;
	font-weight:700}
.staff-desktop-nav {
	align-items:stretch;
	gap:8px;
	height:76px;
	display:flex}
.staff-nav-link {
	color:var(--staff-muted);
	background:0 0;
	border:0;
	align-items:center;
	gap:9px;
	padding:0 15px;
	font-size:14px;
	display:inline-flex;
	position:relative}
.staff-nav-link.is-active {
	color:var(--staff-ink);
	font-weight:700}
.staff-nav-link.is-active:after {
	content:"";
	background:var(--staff-blue);
	border-radius:3px 3px 0 0;
	height:3px;
	position:absolute;
	bottom:0;
	left:14px;
	right:14px}
.staff-nav-link.is-static {
	pointer-events:none}
.staff-account {
	align-items:center;
	gap:10px;
	margin-left:auto;
	display:flex}
.staff-logout {
	color:var(--staff-muted);
	pointer-events:none;
	cursor:default;
	background:0 0;
	border:0;
	padding:9px 10px;
	font-size:13px}
.staff-main {
	width:min(100% - 56px,1240px);
	margin:0 auto;
	padding:34px 0 64px}
.staff-layout {
	grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
	grid-template-areas:"primary logs";
	align-items:start;
	gap:16px 22px;
	display:grid}
.staff-primary-column,.staff-secondary-column {
	gap:16px;
	min-width:0;
	display:grid}
.staff-primary-column {
	grid-area:primary}
.staff-secondary-column {
	grid-area:logs;
	align-self:start}
.staff-surface {
	border:1px solid var(--staff-line);
	background:var(--staff-paper);
	border-radius:16px}
.attendance-panel {
	padding:26px}
.attendance-panel-top {
	border-bottom:1px solid var(--staff-line);
	grid-template-columns:minmax(0,1fr) minmax(150px,.34fr);
	align-items:stretch;
	gap:18px;
	padding-bottom:23px;
	display:grid}
.attendance-panel-top--expanded {
	grid-template-columns:minmax(0,1fr) minmax(220px,.72fr)}
.attendance-person {
	min-width:0}
.attendance-panel-top h2 {
	letter-spacing:-.01em;
	margin:0;
	font-size:21px}
.attendance-panel-top p {
	color:var(--staff-muted);
	margin:7px 0 0;
	font-size:13px}
.attendance-date {
	flex-wrap:wrap;
	align-items:center;
	gap:7px;
	display:flex}
.attendance-date>span {
	color:var(--staff-muted)}
.attendance-panel-top .attendance-shift {
	color:var(--staff-ink)}
.attendance-shift strong {
	font-variant-numeric:tabular-nums;
	margin-left:6px;
	font-weight:700}
.attendance-status {
	border:1px solid var(--staff-line);
	background:var(--staff-panel);
	border-radius:10px;
	align-content:center;
	gap:6px;
	padding:13px 15px;
	display:grid}
.attendance-status>span {
	color:var(--staff-muted);
	font-size:12px}
.status-chip {
	color:var(--staff-ink);
	white-space:nowrap;
	font-size:20px;
	font-weight:700;
	line-height:1.25;
	display:block}
.status-chip--working {
	color:var(--staff-blue)}
.status-chip--finished {
	color:var(--staff-muted)}
.attendance-time-row {
	border-top:1px solid var(--staff-line);
	align-items:center;
	gap:8px;
	padding-top:7px;
	display:flex}
.attendance-time-row>span:first-child {
	color:var(--staff-muted);
	font-size:11px}
.attendance-time-row>strong {
	font-variant-numeric:tabular-nums;
	font-size:13px}
.pending-chip {
	color:#73591e;
	white-space:nowrap;
	background:#fbf1d9;
	border-radius:999px;
	align-items:center;
	padding:3px 7px;
	font-size:10px;
	font-weight:700;
	display:inline-flex}
.attendance-summary {
	border-top:1px solid var(--staff-line);
	gap:5px;
	padding-top:8px;
	display:grid}
.attendance-summary>div {
	white-space:nowrap;
	align-items:center;
	gap:7px;
	font-size:11px;
	display:flex}
.attendance-summary span {
	color:var(--staff-muted)}
.attendance-summary strong {
	font-size:11px}
.attendance-summary .overtime-summary small {
	color:var(--staff-muted);
	white-space:nowrap;
	background:#fff;
	border-radius:4px;
	margin-left:auto;
	padding:2px 4px;
	font-size:9px}
.attendance-facts {
	border-bottom:1px solid var(--staff-line);
	padding:20px 0;
	display:block}
.attendance-fact {
	min-width:0;
	display:block}
.site-select-wrap {
	min-width:0;
	line-height:1.3;
	display:grid}
.site-select-wrap>span {
	color:var(--staff-muted);
	margin-bottom:7px;
	font-size:12px}
.site-fact {
	cursor:pointer;
	position:relative}
.site-select-wrap select {
	appearance:none;
	width:100%;
	color:var(--staff-ink);
	cursor:pointer;
	background:0 0;
	border:0;
	border-radius:0;
	padding:0 20px 0 0;
	font-size:13px;
	font-weight:700}
.site-chevron {
	color:var(--staff-muted);
	pointer-events:none;
	font-size:10px;
	position:absolute;
	bottom:4px;
	right:0}
.punch-area {
	padding-top:20px}
.punch-buttons {
	grid-template-columns:1fr 1fr;
	gap:10px;
	display:grid}
.punch-button {
	border-radius:10px;
	justify-content:center;
	align-items:center;
	gap:9px;
	min-height:50px;
	padding:10px 16px;
	font-size:14px;
	font-weight:700;
	transition:background-color .18s,border-color .18s;
	display:inline-flex}
.punch-button--primary {
	border:1px solid var(--staff-action);
	background:var(--staff-action);
	color:#fff}
.punch-button--primary:hover:not(:disabled) {
	background:#214f7e}
.punch-button--secondary {
	border:1px solid var(--staff-line);
	background:var(--staff-paper);
	color:var(--staff-ink)}
.punch-button--secondary:hover:not(:disabled) {
	background:#f0f6ff}
.punch-button:disabled {
	opacity:.48}
.log-action {
	width:100%;
	margin-top:9px}
.completed-note {
	color:var(--staff-muted);
	text-align:center;
	margin:10px 0 0;
	font-size:12px}
.demo-note {
	color:var(--staff-muted);
	margin:11px 0 0;
	font-size:11px}
.correction-row {
	align-items:center;
	gap:8px;
	padding:2px 2px 0;
	display:flex}
.correction-row p {
	color:var(--staff-muted);
	margin:0;
	font-size:13px}
.text-action {
	color:var(--staff-blue-deep);
	background:0 0;
	border:0;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:700;
	display:inline-flex}
.text-action:hover {
	color:var(--staff-blue-hover);
	text-underline-offset:3px;
	text-decoration:underline}
.modal-backdrop {
	z-index:30;
	background:#23201d6b;
	place-items:center;
	padding:22px;
	display:grid;
	position:fixed;
	inset:0}
.dialog-card {
	border:1px solid var(--staff-line);
	background:var(--staff-paper);
	border-radius:16px;
	width:min(100%,490px);
	max-height:min(90dvh,760px);
	padding:23px;
	overflow-y:auto;
	box-shadow:0 24px 70px #00000038}
.checkout-dialog h2 {
	margin:0;
	font-size:19px}
.checkout-dialog p {
	color:var(--staff-muted);
	margin:11px 0 22px;
	font-size:14px}
.correction-dialog {
	gap:9px;
	display:grid}
.correction-form-heading {
	justify-content:space-between;
	align-items:center;
	gap:12px;
	margin-bottom:3px;
	display:flex}
.correction-form-heading h2 {
	margin:0;
	font-size:18px}
.icon-button {
	border:1px solid var(--staff-line);
	width:32px;
	height:32px;
	color:var(--staff-muted);
	background:#fff;
	border-radius:8px}
.field-label {
	color:var(--staff-ink);
	font-size:12px;
	font-weight:700}
.correction-type-fieldset {
	border:0;
	grid-template-columns:repeat(2,1fr);
	gap:8px;
	margin:0;
	padding:0;
	display:grid}
.correction-type-fieldset legend {
	grid-column:1/-1;
	margin-bottom:1px}
.correction-type-option {
	min-height:40px;
	color:var(--staff-ink);
	cursor:pointer;
	border:1px solid #49a2f4;
	border-radius:9px;
	align-items:center;
	gap:8px;
	padding:8px 11px;
	font-size:13px;
	display:flex}
.correction-type-option:has(input:checked) {
	background:#f0f6ff;
	border-color:#49a2f4}
.correction-type-option input {
	accent-color:var(--staff-action)}
.staff-input {
	border:1px solid var(--staff-line);
	width:100%;
	min-height:42px;
	color:var(--staff-ink);
	background:#fff;
	border-radius:9px;
	padding:9px 11px;
	font-size:13px;
	transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.staff-input::placeholder {
	color:var(--staff-muted);
	opacity:1}
.staff-input:focus {
	border-color:#49a2f4;
	outline:0;
	box-shadow:0 0 0 .25rem #0c83f040}
.staff-textarea {
	resize:vertical;
	min-height:82px}
.review-note {
	color:var(--staff-muted);
	margin:1px 0 2px;
	font-size:11px;
	line-height:1.6}
.correction-error {
	color:#eb646b;
	margin:-2px 0 0;
	font-size:12px}
.dialog-actions {
	justify-content:flex-end;
	align-items:center;
	gap:9px;
	margin-top:4px;
	display:flex}
.dialog-secondary {
	border:1px solid var(--staff-line);
	min-height:38px;
	color:var(--staff-ink);
	background:#fff;
	border-radius:9px;
	padding:8px 13px;
	font-size:12px;
	font-weight:700}
.small-primary-button {
	border:1px solid var(--staff-action);
	background:var(--staff-action);
	color:#fff;
	border-radius:9px;
	justify-content:center;
	align-items:center;
	gap:7px;
	min-height:38px;
	padding:8px 12px;
	font-size:12px;
	font-weight:700;
	transition:background-color .18s,border-color .18s;
	display:inline-flex}
.small-primary-button:hover {
	background:#214f7e}
.logs-panel {
	padding:23px}
.logs-heading {
	justify-content:space-between;
	align-items:center;
	gap:12px;
	display:flex}
.logs-heading h2 {
	margin:0;
	font-size:17px}
.logs-empty {
	border:1px dashed var(--staff-line);
	background:var(--staff-panel);
	text-align:center;
	border-radius:10px;
	justify-content:center;
	align-items:center;
	min-height:158px;
	margin-top:16px;
	padding:20px;
	display:flex}
.logs-empty p {
	max-width:34ch;
	color:var(--staff-muted);
	margin:0;
	font-size:13px}
.logs-timeline {
	gap:9px;
	margin-top:14px;
	display:grid}
.timeline-row {
	grid-template-columns:43px minmax(0,1fr);
	align-items:start;
	gap:9px;
	display:grid}
.timeline-row>time {
	color:var(--staff-muted);
	font-variant-numeric:tabular-nums;
	padding-top:6px;
	font-size:11px}
.timeline-event {
	align-items:center;
	gap:8px;
	min-height:32px;
	font-size:12px;
	font-weight:700;
	display:flex}
.log-entry-card {
	border:1px solid var(--staff-line);
	background:#fff;
	border-radius:9px;
	min-width:0;
	padding:9px 11px}
.log-entry-meta {
	color:var(--staff-muted);
	flex-wrap:wrap;
	align-items:center;
	gap:7px;
	font-size:10px;
	display:flex}
.log-entry-card p {
	color:var(--staff-ink);
	margin:7px 0 0;
	font-size:12px}
.staff-mobile-nav {
	display:none}
.staff-toast {
	z-index:20;
	color:#fff;
	background:#2e2e2e;
	border:1px solid #51483a;
	border-radius:11px;
	align-items:center;
	gap:9px;
	max-width:min(92vw,460px);
	padding:12px 16px;
	font-size:13px;
	display:flex;
	position:fixed;
	bottom:24px;
	left:50%;
	transform:translate(-50%);
	box-shadow:0 8px 26px #0000002e}
.staff-toast--success>i {
	color:#92c99d}
.staff-toast--info>i {
	color:#e5ca90}
@media (width<=900px) {
	.staff-layout {
	grid-template-columns:minmax(0,1fr) minmax(275px,.78fr);
	gap:16px}
.staff-header-inner,.staff-main {
	width:min(100% - 40px,760px)}
.staff-header-inner {
	gap:15px}
.staff-brand {
	min-width:unset}
.staff-desktop-nav {
	gap:0}
.staff-nav-link {
	padding-inline:10px}
.attendance-panel,.logs-panel {
	padding:19px}
.attendance-panel-top--expanded {
	grid-template-columns:1fr}
}
@media (width<=680px) {
	.staff-header-inner {
	gap:10px;
	width:auto;
	min-height:62px;
	margin:0 18px}
.staff-brand-name {
	font-size:13px}
.staff-desktop-nav {
	display:none}
.staff-account {
	gap:7px}
.staff-logout {
	padding:8px 4px;
	font-size:12px}
.staff-main {
	width:auto;
	margin:0 16px;
	padding:23px 0 100px}
.staff-layout {
	flex-direction:column;
	gap:16px;
	display:flex}
.staff-primary-column,.staff-secondary-column {
	gap:13px;
	width:100%}
.staff-primary-column {
	order:1}
.staff-secondary-column {
	order:2}
.attendance-panel {
	padding:18px}
.attendance-panel-top {
	grid-template-columns:1fr;
	gap:14px;
	padding-bottom:17px}
.attendance-panel-top h2 {
	font-size:18px}
.attendance-panel-top p {
	font-size:12px}
.attendance-shift strong {
	margin-left:5px}
.attendance-status {
	padding:12px 13px}
.status-chip {
	font-size:18px}
.attendance-facts {
	padding:16px 0}
.punch-area {
	padding-top:16px}
.punch-buttons {
	gap:8px}
.punch-button {
	gap:6px;
	min-height:48px;
	padding:9px 7px;
	font-size:13px}
.modal-backdrop {
	padding:14px}
.dialog-card {
	border-radius:14px;
	padding:19px}
.logs-panel {
	padding:18px}
.logs-heading h2 {
	font-size:16px}
.logs-empty {
	min-height:145px}
.timeline-row {
	grid-template-columns:37px minmax(0,1fr);
	gap:7px}
.log-entry-card {
	padding:8px}
.attendance-summary .overtime-summary small {
	margin-left:0}
.staff-mobile-nav {
	z-index:10;
	min-height:47px;
	padding:7px 10px max(7px, env(safe-area-inset-bottom));
	background:#163a65;
	grid-template-columns:repeat(3,minmax(0,1fr));
	align-items:center;
	display:grid;
	position:fixed;
	bottom:0;
	left:0;
	right:0}
.mobile-nav-item {
	color:#a8a9ab;
	background:0 0;
	border:0;
	justify-items:center;
	gap:2px;
	padding:0 2px;
	font-size:12px;
	line-height:1.25;
	display:grid}
.mobile-nav-item i {
	font-size:13px;
	line-height:1.1}
.mobile-nav-item.is-active {
	color:#fff;
	font-weight:700}
.mobile-nav-item.is-static {
	opacity:1;
	pointer-events:none}
.mobile-nav-item.is-static span {
	color:#ffffffb3}
.staff-toast {
	width:max-content;
	bottom:78px}
}
@media (prefers-reduced-motion:reduce) {
	.staff-app *,.staff-app :before,.staff-app :after {
	scroll-behavior:auto!important;
	transition-duration:.01ms!important}
}


/* ══════════════════════════════════════
   本案擴充（demo 之外的頁面／互動）
   ══════════════════════════════════════ */
.staff-logout { pointer-events: auto; cursor: pointer; color: var(--staff-blue-deep); font-weight: 600; }
.staff-logout:hover { color: var(--staff-blue-hover); text-decoration: underline; }
.staff-account { display: flex; align-items: center; gap: 10px; }
.staff-account-name { font-size: 13px; color: var(--staff-muted); }
.staff-nav-link, .mobile-nav-item { text-decoration: none; }
.staff-nav-link:hover { color: var(--staff-ink); }

/* flash 訊息 */
.staff-flash { width: min(100% - 32px, 1240px); margin: 14px auto 0; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid; }
.staff-flash.is-success { background: #e7f6ef; border-color: #a9dcc4; color: #1d5c4b; }
.staff-flash.is-error   { background: #fdecee; border-color: #f3b4b8; color: #8a1f26; }

/* 單欄小頁（變更密碼、個資同意、補卡表單頁…） */
.staff-page { width: min(100% - 32px, 560px); margin: 0 auto; padding: 22px 0 90px; }
.staff-page-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.staff-page-lead { color: var(--staff-muted); font-size: 14px; margin: 0 0 18px; }
.staff-card { background: var(--staff-paper); border: 1px solid var(--staff-line); border-radius: 16px; padding: 20px; box-shadow: 0 3px 14px rgba(67,126,190,.1); }
/* 頁面內區塊一律留間距，不靠各頁自己加 mb-3（垂直 margin 會與既有 mb-* 合併，不會變兩倍） */
.staff-page > * + .staff-card,
.staff-page > .staff-card + * { margin-top: 14px; }
.staff-field { margin-bottom: 16px; }
.staff-field .field-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--staff-ink); }
.staff-field .field-hint { font-size: 12px; color: var(--staff-muted); margin-top: 6px; }
.staff-input { font-size: 15px; min-height: 46px; }
.staff-rules { margin: 0 0 18px; padding-left: 20px; font-size: 13px; color: var(--staff-muted); }
.staff-rules li { margin: 3px 0; }
.staff-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.staff-actions .punch-button { width: 100%; }
.staff-actions .dialog-secondary { width: 100%; min-height: 46px; font-size: 14px; }
.consent-text p { font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.consent-text p:last-child { margin-bottom: 0; }
.consent-version { font-size: 12px; color: var(--staff-muted); text-align: right; margin-top: 10px; }
@media (width<=680px) {
	.staff-page { padding-top: 14px; }
	.staff-card { padding: 16px; }
}

/* 底部導覽 4 格（規格多了「薪資單」，demo 是 3 格） */
@media (width<=680px) {
	.staff-mobile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.staff-main { padding-bottom: 72px; }
}

/* 今日首頁：多段列、chip 變體、按鈕群 */
.attendance-summary .attendance-time-row { border-top: 0; padding-top: 0; font-size: 13px; white-space: normal; flex-wrap: wrap; }
.attendance-summary .attendance-time-row + .attendance-time-row { border-top: 1px dashed var(--staff-line); padding-top: 6px; }
.attendance-time-label { color: var(--staff-muted); font-size: 12px; min-width: 88px; }
.attendance-time-value { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--staff-ink); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.attendance-time-row--total .attendance-time-value strong { font-size: 18px; }
.working-now { color: var(--staff-blue); font-style: normal; font-weight: 700; }
.pending-chip--ok { color: #1d5c4b; background: #e7f6ef; }
.pending-chip--warn { color: #8a1f26; background: #fdecee; }
.log-action { display: flex; flex-direction: column; gap: 8px; }
.log-action .small-primary-button { width: 100%; min-height: 44px; font-size: 13px; text-decoration: none; }
.small-primary-button--outline { background: #fff; color: var(--staff-action); }
.small-primary-button--outline:hover { background: var(--staff-panel); }
.punch-button--secondary:disabled { opacity: .55; }
.text-action { text-decoration: none; }
.text-muted { color: var(--staff-muted) !important; }

/* 我的出勤：月份切換、統計卡、月曆、當日明細 */
.staff-page--wide { max-width: 760px; }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.month-nav .staff-page-title { font-size: 18px; }
.month-nav-btn { color: var(--staff-blue-deep); text-decoration: none; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 8px; background: var(--staff-paper); border: 1px solid var(--staff-line); }
.month-nav-btn.is-disabled { color: var(--staff-muted); opacity: .5; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat-card { background: var(--staff-paper); border: 1px solid var(--staff-line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.stat-card strong { display: block; font-size: 20px; line-height: 1.2; color: var(--staff-ink); }
.stat-card strong small { font-size: 11px; margin-left: 2px; color: var(--staff-muted); }
.stat-card span { font-size: 11px; color: var(--staff-muted); }
.calendar-card { padding: 14px; }
.calendar-empty { text-align: center; color: var(--staff-muted); font-size: 14px; margin: 6px 0 12px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-head { text-align: center; font-size: 11px; color: var(--staff-muted); padding: 4px 0; }
.calendar-cell { aspect-ratio: 1 / 1.1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--staff-ink); border: 1px solid transparent; }
.calendar-cell.is-empty { visibility: hidden; }
.calendar-cell.is-future, .calendar-cell:not(.has-record) .cal-day { color: var(--staff-muted); }
.calendar-cell.has-record { background: var(--staff-panel); border-color: var(--staff-line); }
.calendar-cell.has-record:hover { border-color: var(--staff-blue); }
.calendar-cell.is-today { outline: 2px solid var(--staff-blue); outline-offset: -2px; }
.cal-day { font-size: 14px; font-weight: 600; }
.cal-mark { font-size: 12px; font-weight: 700; min-height: 16px; color: var(--staff-muted); }
.mark-late .cal-mark, .mark-early .cal-mark, .mark-missing .cal-mark { color: #c0392b; }
.mark-punch_pending .cal-mark, .mark-overtime_pending .cal-mark { color: #8b6a28; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11px; color: var(--staff-muted); }
.back-link { display: inline-block; font-size: 13px; color: var(--staff-blue-deep); text-decoration: none; margin-bottom: 8px; }
.detail-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--staff-line); font-size: 14px; }
.detail-row:first-child { border-top: 0; padding-top: 0; }
.detail-label { flex: 0 0 84px; color: var(--staff-muted); font-size: 13px; }
.detail-label small { font-size: 11px; }
.detail-value { flex: 1; line-height: 1.7; }
.detail-subtitle { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.mt-3 { margin-top: 12px; }
.mb-0 { margin-bottom: 0; }

/* 我的加班 */
.stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ot-card { padding: 14px 16px; }
.ot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.ot-card-head small { color: var(--staff-muted); font-weight: 400; }
.ot-card .detail-row { padding: 7px 0; }
.mb-3 { margin-bottom: 12px; }
.small-primary-button:disabled { opacity: .55; cursor: not-allowed; }

/* 工作日誌 */
.voice-button { width: 100%; min-height: 86px; border-radius: 16px; border: 2px dashed var(--staff-blue); background: var(--staff-panel); color: var(--staff-blue-deep); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; transition: background .18s; }
.voice-button i { font-size: 28px; }
.voice-button:hover:not(:disabled) { background: #e3efff; }
.voice-button:disabled { opacity: .5; }
.recording-box { background: #fff6f6; border: 1px solid #f3b4b8; border-radius: 14px; padding: 14px; }
.recording-indicator { color: #c0392b; font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.recording-indicator i { animation: rec-pulse 1s infinite; }
.recording-indicator small { color: var(--staff-muted); font-weight: 400; }
@keyframes rec-pulse { 50% { opacity: .3; } }
.live-transcript { margin-top: 10px; min-height: 72px; font-size: 16px; line-height: 1.7; color: var(--staff-ink); background: #fff; border-radius: 10px; padding: 10px 12px; }
.staff-actions--row { flex-direction: row; }
.staff-actions--row > * { flex: 1; }
.raw-text { margin-top: 8px; font-size: 14px; color: var(--staff-muted); background: var(--staff-panel); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; }
.log-text { font-size: 15px; line-height: 1.75; white-space: pre-wrap; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.photo-grid:empty { display: none; }
.photo-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--staff-panel); border: 1px solid var(--staff-line); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(27,43,68,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; min-height: 42px; font-size: 13px; }
.log-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--staff-line); text-decoration: none; color: inherit; }
.log-row:first-child { border-top: 0; padding-top: 0; }
.log-row-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--staff-blue-deep); flex: 0 0 48px; }
.log-row-body { flex: 1; min-width: 0; }
.log-row-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--staff-muted); margin-bottom: 3px; }
.log-row-text { font-size: 14px; line-height: 1.5; }
.log-row-arrow { color: var(--staff-muted); }
.text-danger { color: #c0392b; }
.w-100 { width: 100%; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.text-center { text-align: center; }
.correction-error { display: block; }
.correction-error[hidden] { display: none; }
#editDialog .staff-textarea { min-height: 140px; }

/* flatpickr 在員工端的尺寸 */
.flatpickr-calendar { font-size: 15px; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { font-size: 18px; }

/* 月曆圖例：標記字做成小色塊，跟格子上的標記對得起來 */
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-mark { font-style: normal; font-weight: 700; font-size: 11px; line-height: 1; width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: #eef2f8; color: var(--staff-muted); }
.legend-mark.mark-late, .legend-mark.mark-early, .legend-mark.mark-missing { background: #fdecea; color: #c0392b; }
.legend-mark.mark-overtime_pending, .legend-mark.mark-punch_pending { background: #fbf3e1; color: #8b6a28; }
.detail-link { display: inline-block; margin-left: 8px; font-weight: 700; color: #163a65; text-decoration: none; }
.detail-link i { font-size: 10px; }

/* 說明卡：規則條列，不擠成一段 */
.note-card { padding: 14px 16px; }
.note-card-title { display: block; font-size: 14px; color: var(--staff-muted); margin-bottom: 6px; }
.note-list { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.7; color: var(--staff-text, #1f2d3d); }
.note-list li + li { margin-top: 2px; }
/* 按鈕型連結不要底線 */
a.punch-button, a.punch-button:hover, a.punch-button:focus { text-decoration: none; }
ul.note-list.review-note { padding-left: 1.6em; font-size: 13px; }