@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
}

/* 人事管理中心：統一人事主檔、報到、假勤、薪資與容量的單一入口。 */
.hr-center-heading {
  align-items: center;
  margin-bottom: 18px;
  padding: 26px 30px;
  border: 1px solid rgba(0, 157, 135, .22);
  border-radius: 4px;
  background: linear-gradient(125deg, var(--paper-light), #fff 62%, rgba(88, 205, 187, .15));
}
.hr-center-heading p { max-width: 820px; font-size: 15px; }
.hr-center-tabs {
  position: sticky;
  z-index: 8;
  top: 76px;
  display: flex;
  flex: none;
  gap: 8px;
  margin: 0 0 22px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(251, 247, 244, .96);
  box-shadow: 0 10px 28px rgba(32, 25, 23, .06);
  backdrop-filter: blur(12px);
}
.hr-center-tab {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: #655b57;
  font-size: 13px;
}
.hr-center-tab:hover { border-color: rgba(0, 157, 135, .28); background: #fff; color: var(--green-dark); transform: none; }
.hr-center-tab.active { border-color: var(--green); background: var(--green); color: #fff; }
.hr-center-pane { animation: page-enter .2s ease both; }
.hr-center-pane[hidden] { display: none !important; }
.hr-center-pane > .section-head:first-child { margin-top: 4px; }
.hr-field-map-link { display: block; margin-top: 10px; white-space: nowrap; }
.hr-center-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.hr-center-metrics article {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  background: #fff;
  box-shadow: 0 8px 24px rgba(32, 25, 23, .05);
}
.hr-center-metrics span,
.hr-center-metrics small { display: block; color: var(--muted); font-size: 11px; }
.hr-center-metrics strong { display: block; margin: 5px 0 3px; color: var(--ink); font-size: 26px; line-height: 1.2; }
.hr-process-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid rgba(0, 157, 135, .22);
  background: #fff;
}
.hr-process-flow article {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 1px 10px;
  min-width: 0;
  padding: 18px 16px;
  border-right: 1px solid var(--line);
}
.hr-process-flow article:last-child { border-right: 0; }
.hr-process-flow article:not(:last-child)::after { position: absolute; z-index: 1; top: 50%; right: -7px; width: 12px; height: 12px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); background: #fff; content: ""; transform: translateY(-50%) rotate(45deg); }
.hr-process-flow b { grid-row: 1 / span 2; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--green); color: #fff; }
.hr-process-flow span { align-self: end; font-size: 13px; font-weight: 800; }
.hr-process-flow small { color: var(--muted); font-size: 10px; }
.hr-center-start { align-items: stretch; }
.payroll-visible { display:flex; align-items:center; gap:7px; margin-top:7px; color:var(--muted); font-size:12px; font-weight:700; }
.payroll-visible input { width:auto; margin:0; }
.roc-input-hint { display:block; margin-top:6px; color:#087f68; font-size:12px; font-weight:700; line-height:1.35; }
.payroll-total { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid #b8ded3; border-radius:12px; background:var(--green-soft); }
.payroll-total strong { color:var(--green-dark); font-size:20px; }
.hr-onboarding-compensation { margin:0 0 18px; padding:20px; border:1px solid #b8ded3; border-radius:16px; background:linear-gradient(135deg,#f7fffc,#eef8f5); }
.hr-compensation-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:14px; }
.hr-compensation-list div { display:flex; justify-content:space-between; gap:8px; padding:12px; border-radius:10px; background:#fff; border:1px solid var(--line); }
.hr-compensation-list span { color:var(--muted); }
.hr-compensation-list strong { color:var(--ink); }
.hr-center-guide { padding: 24px; border: 1px solid #d8ccc7; background: var(--paper-light); }
.hr-center-guide h3 { margin: 6px 0 14px; font-size: 21px; }
.hr-center-guide ul { margin: 0 0 20px; padding-left: 20px; color: #5e5754; }
.hr-center-guide li + li { margin-top: 8px; }
.hr-center-guide .route-link { display: inline-flex; padding: 9px 14px; border: 1px solid var(--green); color: var(--green-dark); font-size: 12px; font-weight: 800; text-decoration: none; }
.hr-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 9px; }
.hr-check input { width: 18px; height: 18px; }
.hr-master-selector { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:4px 0 18px; padding:18px 20px; border:1px solid #d8ccc7; background:#fff; }
.hr-master-selector label { display:grid; gap:7px; min-width:min(520px,72vw); font-size:13px; font-weight:800; }
.hr-master-selector select { min-height:44px; padding:9px 12px; border:1px solid #cfc5c0; background:#fff; color:var(--ink); font:inherit; }
.hr-master-selector span { color:var(--green-dark); font-size:13px; font-weight:800; }
.hr-master-form { margin-bottom:18px; }
.hr-master-children { align-items:start; }
.hr-master-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px; }
.hr-master-summary article { min-height:86px; padding:15px; border:1px solid #ded5d0; background:var(--paper-light); }
.hr-master-summary span,.hr-master-summary strong { display:block; }
.hr-master-summary span { color:var(--muted); font-size:12px; }
.hr-master-summary strong { margin-top:8px; font-size:22px; }
.hr-attendance-settings { margin-top:18px; align-items:start; }

@media (max-width: 1180px) {
  .hr-center-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-process-flow { grid-template-columns: 1fr; }
  .hr-process-flow article { border-right: 0; border-bottom: 1px solid var(--line); }
  .hr-process-flow article:last-child { border-bottom: 0; }
  .hr-process-flow article:not(:last-child)::after { top: auto; right: 22px; bottom: -7px; transform: rotate(135deg); }
}
@media (max-width: 720px) {
  .hr-center-heading { padding: 20px; }
  .hr-center-tabs { top: 68px; margin-inline: -4px; }
  .hr-center-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-center-metrics article:last-child { grid-column: 1 / -1; }
  .hr-master-selector { align-items:stretch; flex-direction:column; }
  .hr-master-selector label { min-width:0; }
  .hr-master-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("assets/fonts/montserrat-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/fonts/noto-sans-tc-chinese-traditional-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("assets/fonts/noto-sans-tc-chinese-traditional-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("assets/fonts/noto-sans-tc-chinese-traditional-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("assets/fonts/noto-sans-tc-chinese-traditional-800-normal.woff2") format("woff2");
}

:root {
  --green: #009d87;
  --green-dark: #007967;
  --green-deep: #005b4e;
  --green-soft: #dff3ee;
  --mint: #58cdbb;
  --ink: #211917;
  --muted: #6e6e6e;
  --bg: #efefef;
  --paper: #f3e8e2;
  --paper-light: #fbf7f4;
  --card: #ffffff;
  --line: #d6d6d3;
  --sidebar: #f3e8e2;
  --shadow: 0 18px 50px rgba(32, 25, 23, .08);
}

html { scroll-padding-top: 92px; }
body {
  background:
    radial-gradient(circle at 95% 4%, rgba(88, 205, 187, .18), transparent 20rem),
    radial-gradient(circle at 5% 95%, rgba(160, 125, 255, .09), transparent 22rem),
    var(--bg);
  color: var(--ink);
  font-family: "Montserrat", "Noto Sans TC", Helvetica, Arial, sans-serif;
  letter-spacing: .01em;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(150deg, transparent 0 72%, rgba(0, 157, 135, .035) 72% 82%, transparent 82%),
    linear-gradient(30deg, transparent 0 80%, rgba(243, 232, 226, .8) 80%);
  content: "";
  pointer-events: none;
}

/* 僅供完整畫面圖鑑擷取使用；一般操作網址不會啟用。 */
body.capture-mode {
  zoom: .5;
}

.sidebar {
  padding: 22px 16px 18px;
  border-right: 1px solid #cfc8c4;
  background:
    linear-gradient(145deg, rgba(0,157,135,.13) 0 9%, transparent 9% 20%, rgba(0,157,135,.07) 20% 29%, transparent 29%),
    var(--sidebar);
  color: var(--ink);
}

.brand-block {
  display: block;
  padding: 0 7px 22px;
  border-bottom: 1px solid rgba(33, 25, 23, .15);
}
.brand-logo { display: block; width: 132px; height: auto; }
.brand-system-name {
  margin-top: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}
.brand-system-name span {
  display: block;
  margin-top: 4px;
  color: var(--green-dark);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

nav { scrollbar-color: rgba(0, 157, 135, .45) transparent; }
nav::-webkit-scrollbar-thumb { background: rgba(0, 157, 135, .4); }
.nav-label {
  margin: 17px 11px 6px;
  color: #968b86;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}
nav a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #5e5754;
  font-size: 12px;
  font-weight: 700;
}
nav a:hover {
  border-color: rgba(0, 157, 135, .22);
  background: rgba(255, 255, 255, .55);
  color: var(--green-dark);
}
nav a.active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.nav-icon {
  border: 1px solid rgba(0, 157, 135, .18);
  border-radius: 2px;
  background: rgba(0, 157, 135, .08);
  color: var(--green-dark);
}
nav a.active .nav-icon {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .13);
  color: #fff;
}
.sidebar-footer {
  border-top-color: rgba(33, 25, 23, .15);
  color: var(--ink);
}
.sidebar-footer div > span { color: #8d817c; }
.avatar { background: var(--green); color: #fff; }
.online-dot { background: var(--green); }

main { max-width: 1640px; }
.topbar {
  border-bottom-color: #d8d4d1;
  background: rgba(239, 239, 239, .92);
}
.breadcrumb {
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.today { font-family: "Noto Sans TC", sans-serif; font-size: 12px; }
.proposal-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--green);
  border-radius: 2px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.proposal-link:hover { background: var(--green); color: #fff; }

.welcome-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 330px;
  align-items: center;
  padding: 46px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(150deg, var(--green) 0 20%, transparent 20%),
    linear-gradient(30deg, transparent 0 68%, rgba(0, 157, 135, .22) 68% 82%, transparent 82%),
    var(--paper);
  box-shadow: var(--shadow);
}
.welcome-panel::before,
.welcome-panel::after {
  position: absolute;
  z-index: -1;
  content: "";
  transform: rotate(30deg);
}
.welcome-panel::before {
  top: -110px;
  right: 8%;
  width: 240px;
  height: 340px;
  border: 70px solid rgba(255, 255, 255, .52);
}
.welcome-panel::after {
  right: -70px;
  bottom: -160px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: rgba(0, 157, 135, .95);
}
.welcome-panel > div { position: relative; z-index: 1; }
.welcome-panel h1 {
  max-width: 810px;
  color: var(--ink);
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.hero-copy {
  max-width: 760px;
  color: #5f5551;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  line-height: 1.9;
}

.eyebrow, .section-kicker {
  color: var(--green);
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3, strong { font-feature-settings: "kern"; }
h2 {
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.035em;
}
h3 { font-size: 16px; font-weight: 700; }
.section-head {
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #d3cfcc;
}
.section-head p {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 13px;
  line-height: 1.8;
}

button, .primary-button, .table-action {
  border-radius: 2px;
  background: var(--green);
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  letter-spacing: .04em;
}
button:hover { background: var(--green-dark); }
button.secondary {
  border-color: var(--green);
  border-radius: 2px;
  color: var(--green-dark);
}
.badge, .soft-badge, .owner-view-badge, .state-pill {
  border-radius: 2px;
  letter-spacing: .04em;
}

.grid article,
.table-panel,
.insight-panel,
.performance-panel,
.create-panel,
.decision-panel,
.cash-snapshot,
.scope-panel,
.master-card-section,
.accounting-form {
  border-color: #d9d5d2;
  border-radius: 2px;
  box-shadow: 0 12px 34px rgba(33, 25, 23, .045);
}
.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  border-top: 4px solid var(--green) !important;
}
.metric-card::after {
  position: absolute;
  top: -46px;
  right: -32px;
  width: 100px;
  height: 100px;
  border: 15px solid rgba(0, 157, 135, .08);
  content: "";
  transform: rotate(30deg);
}
.metric-card > strong {
  color: var(--ink);
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
}
.metric-icon { border-radius: 2px !important; }

input, select, textarea {
  border-color: #c9c4c0;
  border-radius: 2px;
  background: #fff;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 157, 135, .12);
}
th {
  background: var(--paper-light);
  color: #655c58;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  letter-spacing: .08em;
}
tbody tr:hover { background: #f7fbfa; }

.decision-list a { border-bottom-color: #e2dedb; }
.decision-list a:hover { background: var(--paper-light); }
.cash-snapshot-chart { background: linear-gradient(180deg, #f1f7f5, #fff); }
.scope-grid a,
.screen-grid a,
.feature-list a,
.rule-grid article,
.security-settings article,
.today-card,
.today-identity,
.master-card {
  border-radius: 2px !important;
}
.scope-grid a:hover,
.screen-grid a:hover,
.feature-list a:hover { border-color: var(--green); }

.settings-nav button {
  border-radius: 0;
  background: transparent;
  color: #655b57;
  text-align: left;
}
.settings-nav button.active {
  background: var(--green);
  color: #fff;
}
.login-brand img { width: 132px; height: auto; margin-bottom: 18px; }
.login-brand .brand-mark { display: none; }

footer {
  border-top-color: #d4cfcc;
  color: #807570;
  font-family: "Montserrat", "Noto Sans TC", sans-serif;
  letter-spacing: .04em;
}

@media (max-width: 1180px) {
  .welcome-panel { min-height: 0; }
  .welcome-panel::after { opacity: .25; }
}

@media (max-width: 920px) {
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid #cfc8c4;
  }
  .brand-block { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; }
  .brand-logo { width: 112px; }
  .brand-system-name { margin: 0; }
  .welcome-panel { padding: 34px 28px; }
}

@media (max-width: 680px) {
  .proposal-link { display: none; }
  .welcome-panel { margin-top: 18px; padding: 28px 22px; }
  .welcome-panel h1 { font-size: 36px; }
  .welcome-panel::before { opacity: .28; }
  .welcome-panel::after { display: none; }
}