* { box-sizing: border-box; }

html { min-width: 320px; background: var(--color-canvas); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
}

.compact-login-button { min-height: 36px; white-space: nowrap; }
.login-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0;
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}
.login-dialog::backdrop { background: rgba(15, 31, 38, .52); }
.login-dialog-form { display: grid; gap: var(--space-4); padding: var(--space-5); }
.login-dialog-form h2 { margin: 0 0 var(--space-1); font-size: 20px; }
.login-dialog-form p { margin: 0; color: var(--color-muted); font-size: 13px; }

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

:focus-visible {
  outline: 3px solid rgba(37, 99, 166, 0.35);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  color: #eff7f6;
  background: var(--color-sidebar);
  border-right: 1px solid #26393c;
}

.brand {
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid #304346;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #75aaa6;
  border-radius: var(--radius-md);
  color: #e3fffa;
  background: #24514f;
  font-size: 13px;
  font-weight: 800;
}

.brand strong, .brand span { display: block; }
.brand strong { font-size: 14px; }
.brand span { margin-top: 2px; color: #aebfc1; font-size: 11px; }

.primary-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
}

.nav-group-label {
  margin: 14px 10px 6px;
  color: #84999b;
  font-size: 11px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  color: #cfdddd;
  background: transparent;
  text-align: left;
}

.nav-item:hover { color: #fff; background: var(--color-sidebar-hover); }
.nav-item.active { color: #fff; background: var(--color-sidebar-active); box-shadow: inset 3px 0 0 #5fc4b8; }
.nav-icon { width: 26px; color: #94b6b4; font-size: 11px; font-weight: 800; text-align: center; }
.nav-item.active .nav-icon { color: #baf4ec; }
.nav-count { margin-left: auto; min-width: 22px; color: #b8c9ca; font-size: 11px; text-align: right; }

.sidebar-footer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 18px;
  border-top: 1px solid #304346;
  color: #b9c8c9;
  font-size: 11px;
}
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { color: #e6efef; font-size: 12px; }
.environment-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: #f0aa38; }

.main-area { min-height: 100vh; margin-left: var(--sidebar-width); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  gap: var(--space-4);
  padding: 10px 24px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.97);
}

.page-heading { min-width: 0; flex: 1; }
.page-heading h1 { margin: 0; font-size: 20px; line-height: 1.25; }
.page-heading p { overflow: hidden; margin: 3px 0 0; color: var(--color-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button.menu-button { display: none; }
.uat-tool-toggle { font-size: 11px; font-weight: 850; }
.uat-tool-toggle[hidden] { display: none; }

.compact-field { display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 12px; }
.compact-field select { min-width: 118px; height: 36px; }

.uat-role-toolbar {
  position: sticky;
  top: var(--topbar-height);
  z-index: 19;
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(250px, 1fr) minmax(230px, auto) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 9px 24px;
  border-bottom: 1px solid #a9cbc6;
  background: #edf7f5;
  box-shadow: 0 4px 12px rgba(28, 67, 65, .06);
}
.uat-role-toolbar[hidden] { display: none; }
.uat-role-context { display: grid; min-width: 0; grid-template-columns: max-content minmax(0, auto); align-items: baseline; gap: 2px 10px; }
.uat-role-kicker { grid-row: span 2; align-self: center; padding-right: 10px; border-right: 1px solid #bad4d0; color: #276b65; font-size: 10px; font-weight: 850; }
.uat-role-context strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.uat-role-context > span:last-child { overflow: hidden; color: var(--color-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.uat-role-selector { justify-self: end; }
.uat-role-selector select { min-width: 174px; }
.uat-role-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.uat-role-actions .secondary { min-height: 36px; white-space: nowrap; }

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: 19px;
}
.icon-button:hover { border-color: var(--color-border-strong); background: var(--color-surface-alt); }

.connection-status {
  display: flex;
  min-width: 92px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  background: var(--color-surface);
  font-size: 12px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #879394; }
.connection-status.ok .status-dot { background: var(--color-success); }
.connection-status.error .status-dot { background: var(--color-danger); }
.connection-status.pending .status-dot { background: var(--color-warning); }

.global-banner { margin: 16px 24px 0; padding: 10px 12px; border: 1px solid; border-radius: var(--radius-sm); }
.global-banner.info { color: #184f7d; border-color: #b9d4ee; background: var(--color-blue-soft); }
.global-banner.error { color: #842029; border-color: #f1b9bf; background: var(--color-danger-soft); }

.content { max-width: 1680px; margin: 0 auto; padding: 20px 24px 36px; }
.view-stack { display: grid; gap: var(--space-4); }
[data-scroll-target] { scroll-margin-top: calc(var(--topbar-height) + 16px); }
.app-shell.uat-tools-open [data-scroll-target] { scroll-margin-top: calc(var(--topbar-height) + 78px); }
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.section-header h2 { margin: 0; font-size: 16px; }
.section-header p { margin: 3px 0 0; color: var(--color-muted); font-size: 12px; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 10px; }
.metric-card { min-height: 104px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-panel); }
.metric-label { color: var(--color-muted); font-size: 12px; }
.metric-value { margin-top: 5px; font-size: 26px; font-weight: 750; line-height: 1.2; }
.metric-detail { margin-top: 7px; color: var(--color-subtle); font-size: 11px; }
.metric-card.warning { border-left: 4px solid var(--color-warning); }
.metric-card.danger { border-left: 4px solid var(--color-danger); }
.metric-card.success { border-left: 4px solid var(--color-success); }
.metric-card.info { border-left: 4px solid var(--color-blue); }
.import-conflict-actions { min-width: 210px; flex-wrap: wrap; }
.import-conflict-actions .button { white-space: nowrap; }
.import-review-toolbar { overflow-x: auto; padding-bottom: 2px; }

.layout-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.75fr); gap: var(--space-4); }
.layout-equal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.layout-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.panel { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-panel); }
.panel-header { display: flex; min-height: 58px; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--color-border); }
.panel-header h2, .panel-header h3 { margin: 0; font-size: 15px; }
.panel-header p { margin: 2px 0 0; color: var(--color-muted); font-size: 11px; }
.panel-body { padding: 16px; }
.panel-body.flush { padding: 0; }
.panel-footer { padding: 12px 16px; border-top: 1px solid var(--color-border); background: #fafcfc; }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.toolbar .field { min-width: 145px; flex: 0 1 220px; }
.toolbar .field.grow { flex: 1 1 260px; }

.report-daily-workspace { gap: 12px; }
.report-filter-bar {
  display: grid;
  grid-template-columns: auto minmax(210px, 1fr) minmax(145px, auto) minmax(145px, auto) auto;
  align-items: end;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  background: #fbfdfd;
}
.report-filter-segmented { align-self: center; }
.report-filter-actions {
  display: flex;
  min-width: 150px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.report-filter-hint { color: var(--color-muted); font-size: 12px; white-space: nowrap; }
.report-exception-dialog {
  width: min(960px, calc(100vw - 30px));
  max-height: min(760px, calc(100vh - 28px));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0;
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: 0 24px 64px rgba(20, 40, 42, 0.26);
}
.report-exception-dialog::backdrop { background: rgba(15, 31, 38, .52); }
.report-exception-shell {
  display: grid;
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
}
.report-exception-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .98);
}
.report-exception-header h2 { margin: 0; font-size: 18px; }
.report-exception-header p { margin: 3px 0 0; color: var(--color-muted); font-size: 12px; }
.report-exception-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  overflow: hidden;
}
.report-exception-summary-item {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 11px 12px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.report-exception-summary-item:nth-child(3n) { border-right: 0; }
.report-exception-summary-item:nth-last-child(-n+3) { border-bottom: 0; }
.report-exception-summary-item span { color: var(--color-muted); font-size: 11px; }
.report-exception-summary-item strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.report-exception-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 14px;
}
.report-exception-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: #fff;
}
.report-exception-card-main { display: grid; min-width: 0; gap: 8px; }
.report-exception-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
  font-size: 12px;
}
.report-exception-shell > .notice { margin: 0 18px 14px; }
.report-exception-body { display: grid; gap: 12px; padding-bottom: 18px; }
.report-exception-body > .notice { margin: 14px 18px 0; }
.report-page { align-content: start; }
.report-command-bar {
  position: sticky;
  top: calc(var(--topbar-height) + 8px);
  z-index: 12;
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 6px 18px rgba(23, 36, 38, .08);
}
.report-command-context { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--color-muted); font-size: 11px; }
.report-command-context strong { color: var(--color-ink); font-size: 14px; }
.report-command-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 8px; }
.report-command-controls .field { width: 144px; }
.report-policy-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(140px, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.report-policy-item { display: grid; min-width: 0; gap: 3px; padding: 10px 12px; border-right: 1px solid var(--color-border); }
.report-policy-item:last-child { border-right: 0; }
.report-policy-item span { color: var(--color-muted); font-size: 10px; }
.report-policy-item strong { overflow-wrap: anywhere; font-size: 12px; }
.report-workspace { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-panel); }
.report-workspace-shell, .report-workspace-loading { display: grid; min-width: 0; }
.report-dataset-tabs { display: flex; min-width: 0; overflow-x: auto; border-bottom: 1px solid var(--color-border); background: #f8fafa; }
.report-dataset-tabs button { min-width: 132px; min-height: 46px; padding: 8px 16px; border: 0; border-right: 1px solid var(--color-border); color: var(--color-muted); background: transparent; font-weight: 700; white-space: nowrap; }
.report-dataset-tabs button.active { color: var(--color-primary); background: #fff; box-shadow: inset 0 -3px 0 var(--color-primary); }
.report-subbar { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); }
.report-workspace-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.report-filter-bar-v2 { grid-template-columns: auto minmax(180px, 1fr) 145px 145px auto; }
.report-filter-modes { max-width: 100%; overflow-x: auto; }
.report-result-summary { padding: 8px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-muted); background: #fbfdfd; font-size: 11px; }
.report-recalculation-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #d5b768; background: #fff8e6; }
.report-recalculation-banner > div { display: grid; gap: 2px; }
.report-recalculation-banner span { color: #6f5a20; font-size: 11px; }
.report-table-wrap { max-height: min(62vh, 680px); overscroll-behavior: contain; }
.report-data-table { min-width: 980px; table-layout: auto; }
.report-data-table th { z-index: 3; }
.report-data-table th, .report-data-table td { max-width: 320px; }
.report-data-table td { overflow-wrap: anywhere; }
.report-data-table .report-raw-date { min-width: 108px; white-space: nowrap; }
.report-data-table .report-raw-time { min-width: 74px; white-space: nowrap; }
.report-data-table .report-raw-status { min-width: 112px; white-space: nowrap; }
.report-data-table .report-sticky-col { position: sticky; background: #fff; }
.report-data-table tbody tr:hover .report-sticky-col { background: #f8fbfb; }
.report-data-table th.report-sticky-col { z-index: 5; background: #f3f7f7; }
.report-data-table .report-sticky-1 { left: 0; width: 108px; min-width: 108px; max-width: 108px; }
.report-data-table .report-sticky-2 { left: 108px; width: 160px; min-width: 160px; max-width: 160px; border-right: 1px solid var(--color-border-strong); box-shadow: 5px 0 8px rgba(23, 36, 38, .04); }
.report-data-table td.report-punch-slot { width: 104px; min-width: 104px; max-width: 104px; padding: 7px; text-align: center; overflow-wrap: normal; }
.report-punch-slot-content { display: grid; min-height: 46px; align-content: center; justify-items: center; gap: 4px; }
.report-punch-slot-content strong { white-space: nowrap; }
.report-anomaly-tags { display: flex; min-width: 160px; flex-wrap: wrap; gap: 4px; }
.report-recognition-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 8px; }
.report-resolution-record { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.report-punch-slot-missing { background: #fff0ef; color: #a92d27; }
.report-punch-slot-supplement { background: #eef8f2; }
.report-punch-slot-warning, .report-punch-slot-pending_review, .report-punch-slot-rejected, .report-punch-slot-excluded { background: #fff8e6; }
.report-punch-slot-not_applicable { color: var(--color-muted); background: #f7f9f9; }
.report-punch-slot-schedule_assumed { color: #744d0d; background: #fff8e8; }
.report-pagination { display: flex; min-height: 58px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--color-border); }
.report-pagination .field { width: 100px; grid-template-columns: auto 1fr; align-items: center; }
.report-pagination .field-label { white-space: nowrap; }
.report-column-menu { position: relative; }
.report-column-menu summary { list-style: none; }
.report-column-menu summary::-webkit-details-marker { display: none; }
.report-column-menu-list { position: absolute; top: calc(100% + 5px); right: 0; z-index: 15; display: grid; width: 220px; max-height: 330px; overflow: auto; padding: 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 12px 28px rgba(23, 36, 38, .16); }
.report-column-menu-list .checkbox-field { min-height: 34px; padding: 2px 5px; }
.report-column-menu-list input { width: 17px; min-height: 17px; }
.report-inline-actions { display: grid; gap: 12px; padding: 0 18px; }
.report-inline-actions > .notice { margin: 0; }
.report-action-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fbfdfd; }
.report-action-section h3 { margin: 0; font-size: 14px; }
.report-action-section p { margin: 0; color: var(--color-muted); font-size: 12px; }
.report-action-section > .button { justify-self: start; }
.report-inline-form { display: grid; grid-template-columns: minmax(130px, .65fr) minmax(180px, 1fr) minmax(230px, 1.4fr); gap: 10px; }
.report-raw-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 18px 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.settings-rule-group { grid-column: 1 / -1; display: grid; gap: 12px; padding: 16px 0 4px; border-top: 1px solid var(--color-border); }
.settings-rule-heading h3 { margin: 0; font-size: 14px; }
.settings-rule-heading p { max-width: 920px; margin: 4px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.55; }
.settings-rule-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.punch-pattern-editor { gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fbfdfd; }
.punch-pattern-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.punch-slot-grid { display: grid; grid-template-columns: repeat(6, minmax(86px, 1fr)); gap: 6px; }
.punch-slot-grid .checkbox-field { justify-content: center; padding: 7px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.punch-rule-timeline { display: grid; grid-template-columns: repeat(6, minmax(86px, 1fr)); gap: 5px; }
.punch-rule-node { position: relative; display: grid; min-height: 86px; align-content: center; gap: 2px; padding: 9px; border-top: 4px solid var(--color-border-strong); background: #f3f6f6; text-align: center; }
.punch-rule-node:not(:last-child)::after { content: ""; position: absolute; top: -4px; right: -5px; width: 5px; border-top: 4px solid var(--color-border-strong); }
.punch-rule-node strong { font-size: 13px; }
.punch-rule-node span { color: var(--color-muted); font-size: 11px; }
.punch-rule-node em { font-size: 11px; font-style: normal; font-weight: 750; }
.punch-rule-node.required { border-color: var(--color-primary); background: #eaf5f3; }
.punch-rule-node.required em { color: var(--color-primary); }
.punch-rule-node.assumed { border-color: #b7791f; background: #fff8e8; }
.punch-rule-node.assumed em { color: #8a5a10; }
.punch-rule-node.not-applicable { opacity: .62; }
.field { display: grid; min-width: 0; gap: 5px; }
.field label, .field-label { color: #415153; font-size: 12px; font-weight: 650; }
.field-help { color: var(--color-subtle); font-size: 11px; }
.field.is-invalid select {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-soft);
}
.field.is-invalid .field-help { color: var(--color-danger); font-weight: 700; }

input, select, textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: #fff;
}
textarea { min-height: 84px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { color: #718083; background: #eef2f2; }

.checkbox-field { display: flex; min-height: var(--control-height); align-items: center; gap: 8px; }
.checkbox-field input { width: 18px; min-height: 18px; }

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.button.primary { color: #fff; background: var(--color-primary); }
.button.primary:hover { background: var(--color-primary-hover); }
.button.secondary { color: var(--color-ink); border-color: var(--color-border-strong); background: #fff; }
.button.secondary:hover { background: var(--color-surface-alt); }
.button.danger { color: var(--color-danger); border-color: #e4aeb3; background: #fff; }
.button.danger:hover { background: var(--color-danger-soft); }
.button.ghost { min-height: 34px; padding: 5px 9px; color: var(--color-primary); background: transparent; }
.button.small { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.button:disabled { cursor: not-allowed; opacity: 0.46; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.segmented-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.segmented-toolbar .button { min-height: 36px; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.metrics-grid.compact { grid-template-columns: repeat(5, minmax(130px, 1fr)); }
.payroll-setting-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fbfdfd;
}
.payroll-setting-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.payroll-setting-heading h3 { margin: 0; font-size: 14px; }
.payroll-setting-heading p { max-width: 860px; margin: 2px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.55; }
.payroll-setting-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.payroll-insurance-section .payroll-setting-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payroll-setting-field {
  align-content: start;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: #fff;
}
.payroll-field-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.payroll-field-title .field-label { min-width: 0; overflow-wrap: anywhere; }
.payroll-field-chip {
  display: inline-flex;
  min-height: 20px;
  flex: 0 0 auto;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.payroll-field-chip.earning { color: var(--color-success); background: var(--color-success-soft); }
.payroll-field-chip.deduction { color: var(--color-danger); background: var(--color-danger-soft); }
.payroll-field-chip.condition { color: var(--color-blue); background: var(--color-blue-soft); }
.payroll-field-chip.reference { color: #526164; background: var(--color-neutral-soft); }
.payroll-unsaved-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #efd39a;
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: #7c460a;
  background: var(--color-warning-soft);
  box-shadow: var(--shadow-panel);
}
.payroll-unsaved-bar[hidden] {
  display: none;
}
.payroll-unsaved-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.payroll-unsaved-copy strong {
  font-size: 13px;
}
.payroll-unsaved-copy span {
  color: #805a20;
  font-size: 12px;
}
.payroll-unsaved-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.payroll-definition-table table,
.payroll-pay-item-table table { min-width: 1120px; }
.payroll-pay-item-table select,
.payroll-pay-item-table input { width: 100%; min-width: 120px; }
.payroll-pay-item-table td.numeric input { text-align: right; }
.payroll-nature-controls,
.payroll-month-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 220px;
}
.payroll-month-picker {
  margin-top: 8px;
  max-width: 300px;
}
.payroll-month-picker[hidden] {
  display: none;
}
.payroll-nature-controls .checkbox-field,
.payroll-month-picker .checkbox-field {
  min-height: 24px;
  gap: 5px;
  white-space: nowrap;
}
.payroll-header-help {
  display: grid;
  gap: 2px;
  min-width: 160px;
}
.payroll-header-help small {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}
.payroll-managed-row { background: #fbfdfd; }
.payroll-edit-row { background: #fffdf5; }
.payroll-preview-layout { display: grid; gap: 14px; padding: 14px; }
.payroll-preview-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.payroll-preview-controls .field { max-width: 240px; }
.payroll-warning-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.payroll-preview-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
  background: #fbfdfd;
}
.payroll-preview-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.payroll-preview-total small { flex-basis: 100%; color: var(--color-muted); text-align: right; }
.payroll-employee-detail { scroll-margin-top: 84px; }
.payroll-employee-detail td.numeric,
.payroll-employee-detail .metric-value { font-variant-numeric: tabular-nums; }
.payroll-review-workspace { display: grid; gap: 0; }
.payroll-review-workspace > .notice { margin: 12px 14px 0; }
.payroll-review-workspace > .payroll-readonly-callout { margin: 12px 14px 0; }
.payroll-readonly-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.payroll-readonly-callout .notice { flex: 1 1 480px; }
.payroll-review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: #fbfdfd;
}
.payroll-review-toolbar .field { min-width: 150px; flex: 0 1 210px; }
.payroll-review-toolbar .field.grow { flex: 1 1 260px; }
.payroll-review-toggles { display: flex; min-height: 40px; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.payroll-review-table-wrap { max-height: min(66vh, 760px); overscroll-behavior: contain; }
.payroll-review-table { width: max-content; min-width: 100%; table-layout: fixed; }
.payroll-review-table th,
.payroll-review-table td { min-width: 112px; white-space: nowrap; }
.payroll-review-table thead tr:first-child th { top: 0; height: 30px; padding-top: 6px; padding-bottom: 6px; z-index: 4; color: #284d4c; background: #dfecea; text-align: center; }
.payroll-review-table thead tr:nth-child(2) th { top: 31px; z-index: 3; }
.payroll-review-table .payroll-item-heading { min-width: 126px; }
.payroll-item-heading span,
.payroll-item-heading small { display: block; }
.payroll-item-heading small { margin-top: 2px; color: var(--color-muted); font-size: 9px; font-weight: 500; }
.payroll-review-table .payroll-sticky-col { position: sticky; z-index: 2; background: #fff; }
.payroll-review-table th.payroll-sticky-col { z-index: 6; background: #f3f7f7; }
.payroll-review-table .payroll-sticky-employee { left: 0; width: 154px; min-width: 154px; max-width: 154px; }
.payroll-review-table .payroll-sticky-department { left: 154px; width: 92px; min-width: 92px; max-width: 92px; border-right: 1px solid var(--color-border-strong); box-shadow: 5px 0 8px rgba(23, 36, 38, .05); }
.payroll-review-table tbody tr:hover .payroll-sticky-col { background: #f8fbfb; }
.payroll-review-table tbody tr.payroll-row-warning td { background-color: #fffdf5; }
.payroll-review-table tbody tr.payroll-row-blocked td { background-color: #fff7f7; }
.payroll-review-table tbody tr.payroll-row-adjusted .payroll-sticky-employee { box-shadow: inset 3px 0 0 var(--color-blue); }
.payroll-review-money { padding: 5px 7px; font-variant-numeric: tabular-nums; }
.payroll-review-money .button { width: 100%; justify-content: flex-end; color: var(--color-ink); font-weight: 650; }
.payroll-review-money .button:hover { background: #eaf5f3; }
.payroll-review-readonly-amount { display: flex; min-height: 30px; align-items: center; justify-content: flex-end; padding: 0 8px; color: var(--color-ink); font-weight: 650; }
.payroll-review-item-value { display: grid; justify-items: end; gap: 2px; min-width: 92px; }
.payroll-review-item-value small { color: var(--color-warning); font-size: 9px; font-weight: 700; white-space: nowrap; }
.payroll-adjustment-heading,
.payroll-adjustment-cell { background-color: #f5f9fc !important; }
.payroll-adjustment-cell-content { display: grid; justify-items: end; gap: 2px; }
.payroll-adjustment-cell-content small { color: var(--color-warning); font-size: 9px; font-weight: 750; }
.payroll-total-cell { font-variant-numeric: tabular-nums; font-weight: 700; background: #fbfdfd; }
.payroll-net-heading,
.payroll-net-cell { color: var(--color-primary); background: #edf7f5 !important; }
.payroll-review-status { min-width: 112px !important; }
.payroll-review-status small { display: block; margin-top: 4px; color: var(--color-muted); font-size: 10px; }
.payroll-review-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 9px 14px; color: var(--color-muted); background: #fbfdfd; font-size: 11px; }
.payroll-adjustment-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 24px 70px rgba(15, 31, 38, .24);
}
.payroll-adjustment-dialog::backdrop { background: rgba(15, 31, 38, .52); }
.payroll-adjustment-dialog-body { display: grid; gap: 14px; padding: 16px; }
.payroll-adjustment-dialog-header { position: sticky; z-index: 8; top: -16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: -16px -16px 0; padding: 14px 16px; border-bottom: 1px solid var(--color-border); background: #fff; }
.payroll-adjustment-dialog-header h2 { margin: 0; font-size: 18px; }
.payroll-adjustment-dialog-header p { margin: 3px 0 0; color: var(--color-muted); font-size: 12px; }
.payroll-adjustment-editor { padding: 14px; }
.payroll-auto-rerun-status:empty { display: none; }
.payroll-auto-rerun-message { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payroll-auto-rerun-message .notice { flex: 1; }
.payroll-adjustment-current-summary { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.payroll-one-time-dialog { width: min(1380px, calc(100vw - 24px)); }
.payroll-one-time-summary { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.payroll-one-time-summary .metric-card { min-height: 104px; }
.payroll-one-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.payroll-one-time-toolbar > div { display: grid; gap: 3px; }
.payroll-one-time-toolbar span { color: var(--color-muted); font-size: 11px; }
.payroll-one-time-table-wrap { max-height: min(52vh, 580px); border: 1px solid var(--color-border); }
.payroll-one-time-table { width: max-content; min-width: 100%; table-layout: fixed; }
.payroll-one-time-table th,
.payroll-one-time-table td { min-width: 132px; padding: 7px; vertical-align: top; background: #fff; }
.payroll-one-time-table th { position: sticky; z-index: 4; top: 0; background: #f3f7f7; }
.payroll-one-time-table th:nth-child(1),
.payroll-one-time-table td:nth-child(1) { width: 96px; min-width: 96px; max-width: 96px; }
.payroll-one-time-table th:nth-child(2),
.payroll-one-time-table td:nth-child(2) { width: 190px; min-width: 190px; max-width: 190px; }
.payroll-one-time-table th:nth-child(3),
.payroll-one-time-table td:nth-child(3) { width: 124px; min-width: 124px; max-width: 124px; }
.payroll-one-time-table th:nth-child(4),
.payroll-one-time-table td:nth-child(4) { width: 142px; min-width: 142px; max-width: 142px; }
.payroll-one-time-table th:nth-child(5),
.payroll-one-time-table td:nth-child(5) { width: 220px; min-width: 220px; max-width: 220px; }
.payroll-one-time-table th:nth-child(6),
.payroll-one-time-table td:nth-child(6) { width: 156px; min-width: 156px; max-width: 156px; }
.payroll-one-time-table th:nth-child(7),
.payroll-one-time-table td:nth-child(7) { width: 106px; min-width: 106px; max-width: 106px; }
.payroll-one-time-table th:nth-child(8),
.payroll-one-time-table td:nth-child(8) { width: 216px; min-width: 216px; max-width: 216px; }
.payroll-one-time-table input,
.payroll-one-time-table select { width: 100%; min-width: 0; }
.payroll-one-time-table .numeric input { text-align: right; font-variant-numeric: tabular-nums; }
.payroll-one-time-table .payroll-one-time-sticky-type,
.payroll-one-time-table th:nth-child(1) { position: sticky; z-index: 3; left: 0; }
.payroll-one-time-table .payroll-one-time-sticky-name,
.payroll-one-time-table th:nth-child(2) { position: sticky; z-index: 3; left: 96px; border-right: 1px solid var(--color-border-strong); box-shadow: 5px 0 8px rgba(23, 36, 38, .05); }
.payroll-one-time-table .payroll-one-time-sticky-actions,
.payroll-one-time-table th:nth-child(8) { position: sticky; z-index: 3; right: 0; border-left: 1px solid var(--color-border-strong); box-shadow: -5px 0 8px rgba(23, 36, 38, .05); }
.payroll-one-time-table thead th:nth-child(1),
.payroll-one-time-table thead th:nth-child(2),
.payroll-one-time-table thead th:nth-child(8) { z-index: 6; background: #f3f7f7; }
.payroll-one-time-row.is-dirty td { background: #fffdf4; }
.payroll-one-time-row.is-dirty .payroll-one-time-sticky-type,
.payroll-one-time-row.is-dirty .payroll-one-time-sticky-name,
.payroll-one-time-row.is-dirty .payroll-one-time-sticky-actions { background: #fffdf4; }
.payroll-one-time-status { display: grid; justify-items: start; gap: 4px; padding-top: 4px; }
.payroll-one-time-status small { max-width: 100px; color: var(--color-danger); font-size: 9px; white-space: normal; }
.payroll-adjustment-history { border-top: 1px solid var(--color-border); }
.payroll-adjustment-history summary { padding: 12px 2px 4px; color: var(--color-primary); font-weight: 750; cursor: pointer; }
.payroll-adjustment-history > .muted { margin: 4px 2px 0; }
.payroll-adjustment-history .table-wrap { margin-top: 8px; }
.payroll-adjustment-guidance {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid #bfd6ea;
  border-radius: var(--radius-sm);
  background: #f5f9fc;
}
.payroll-adjustment-guidance h3 { margin: 0; font-size: 14px; }
.payroll-adjustment-guidance p { margin: 4px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.55; }
.payroll-adjustment-guidance-options { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 12px; }
.payroll-adjustment-guidance-options div { display: grid; gap: 2px; }
.payroll-adjustment-guidance-options span { color: var(--color-muted); font-size: 11px; }
.payroll-profile-permission-note { max-width: 280px; color: var(--color-muted); font-size: 11px; line-height: 1.5; }
.payroll-adjustment-guidance-options div:last-child { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #d8e6f0; }
.payroll-finalize-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 24px 70px rgba(15, 31, 38, .24);
}
.payroll-finalize-dialog::backdrop { background: rgba(15, 31, 38, .52); }
.payroll-finalize-body { display: grid; gap: 16px; padding: 18px; }
.payroll-finalize-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.payroll-finalize-header h2 { margin: 0; font-size: 19px; }
.payroll-finalize-header p { margin: 4px 0 0; color: var(--color-muted); font-size: 12px; }
.payroll-finalize-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.payroll-finalize-summary .metric-card { min-height: 96px; }
.payroll-finalize-summary .metric-value { font-size: 22px; }
.payroll-finalize-reason { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--color-border); background: #fbfdfd; }
.payroll-finalize-reason span { color: var(--color-muted); font-size: 11px; }
.payroll-finalize-reason strong { overflow-wrap: anywhere; font-size: 13px; }
.account-advanced-role-toggle { justify-content: flex-end; }
.account-advanced-role-toggle .checkbox-field { min-height: 40px; }
table input[type="checkbox"] { width: 18px; min-height: 18px; }
table select { min-width: 108px; }
table input[type="text"] { min-width: 150px; }
table input[type="number"],
table input[type="date"] { min-width: 120px; }

.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.segmented button { min-height: 32px; padding: 4px 10px; border: 0; border-radius: 3px; color: var(--color-muted); background: transparent; }
.segmented button.active { color: var(--color-primary); background: #fff; box-shadow: 0 1px 2px rgba(20, 40, 42, 0.12); font-weight: 700; }

.badge { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge.success { color: var(--color-success); background: var(--color-success-soft); }
.badge.warning { color: var(--color-warning); background: var(--color-warning-soft); }
.badge.danger { color: var(--color-danger); background: var(--color-danger-soft); }
.badge.info { color: var(--color-blue); background: var(--color-blue-soft); }
.badge.neutral { color: #526164; background: var(--color-neutral-soft); }

.notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid; border-radius: var(--radius-sm); }
.notice strong { display: block; margin-bottom: 2px; }
.notice p { margin: 0; font-size: 12px; }
.notice.info { color: #184f7d; border-color: #bfd6ea; background: var(--color-blue-soft); }
.notice.success { color: #155d37; border-color: #b9ddc7; background: var(--color-success-soft); }
.notice.warning { color: #7c460a; border-color: #efd39a; background: var(--color-warning-soft); }
.notice.danger { color: #842029; border-color: #efb6bc; background: var(--color-danger-soft); }

.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 10px 12px; border-bottom: 1px solid #e3e9e9; text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; color: #526164; background: #f3f7f7; font-weight: 750; white-space: nowrap; }
tbody tr:hover { background: #f8fbfb; }
td.numeric, th.numeric { text-align: right; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cell-primary { font-weight: 700; }
.cell-secondary { display: block; margin-top: 2px; color: var(--color-muted); font-size: 11px; }
.empty-cell { padding: 28px 16px; color: var(--color-muted); text-align: center; }

.calendar-year-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 12px; }
.calendar-month { min-width: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; }
.calendar-month h3 { margin: 0 0 8px; font-size: 14px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekdays span { color: var(--color-muted); font-size: 11px; font-weight: 700; text-align: center; }
.calendar-day {
  display: grid;
  min-width: 0;
  min-height: 54px;
  align-content: start;
  gap: 2px;
  padding: 5px;
  border: 1px solid #e2e9e9;
  border-radius: 4px;
  color: var(--color-ink);
  background: #fff;
  text-align: left;
}
.calendar-day.empty { border-color: transparent; background: transparent; }
.calendar-day:not(.empty):hover { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.calendar-day.statutory_holiday { background: #fff6df; border-color: #f1d995; }
.calendar-day.regular_holiday { background: #f5f7f7; color: #526164; }
.calendar-day.rest_day { background: #eaf4fb; border-color: #c8deef; }
.calendar-day.makeup_workday { background: #ecf8f1; border-color: #bde3ca; }
.calendar-day.site-override { box-shadow: inset 0 -3px 0 var(--color-primary); }
.calendar-date-number { font-weight: 800; font-size: 12px; line-height: 1.1; }
.calendar-date-name { min-height: 14px; overflow: hidden; color: #364749; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-date-source { justify-self: start; padding: 1px 4px; border-radius: 3px; color: var(--color-primary); background: #e3f1ef; font-size: 9px; font-weight: 800; }
.calendar-editor-dialog { width: min(760px, calc(100vw - 28px)); border: 0; border-radius: var(--radius-md); padding: 0; box-shadow: 0 22px 54px rgba(20, 40, 42, 0.24); }
.calendar-editor-dialog::backdrop { background: rgba(15, 31, 38, .48); }

.status-list { display: grid; gap: 0; }
.status-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--color-border); }
.status-row:last-child { border-bottom: 0; }
.status-row span { color: var(--color-muted); }
.status-row strong { text-align: right; }

.gantt-wrap { width: 100%; overflow-x: auto; }
.gantt { min-width: 880px; }
.gantt-axis, .gantt-row { display: grid; grid-template-columns: 180px minmax(680px, 1fr); min-height: 44px; }
.gantt-name { display: flex; flex-direction: column; justify-content: center; padding: 7px 12px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.gantt-name span { color: var(--color-muted); font-size: 10px; }
.gantt-track { position: relative; min-height: 44px; border-bottom: 1px solid var(--color-border); background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(6.25% - 1px), #e8eeee calc(6.25% - 1px), #e8eeee 6.25%); }
.gantt-axis .gantt-track { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; color: var(--color-muted); background: #f3f7f7; font-size: 10px; }
.gantt-axis .gantt-track span { padding-left: 4px; }
.gantt-plan { position: absolute; top: 8px; height: 28px; border: 1px dashed #8ca0a2; border-radius: 3px; background: rgba(214, 224, 224, 0.55); }
.gantt-actual { position: absolute; top: 13px; height: 18px; border-radius: 3px; background: var(--color-primary); }
.gantt-actual.open { background: var(--color-blue); }
.gantt-actual.warning { background: var(--color-warning); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 12px; color: var(--color-muted); font-size: 11px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 18px; height: 8px; border-radius: 2px; background: var(--color-primary); }
.legend-swatch.plan { border: 1px dashed #8ca0a2; background: #dce5e5; }
.legend-swatch.open { background: var(--color-blue); }
.legend-swatch.warning { background: var(--color-warning); }

.definition-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; }
.definition-list dt { color: var(--color-muted); }
.definition-list dd { margin: 0; font-weight: 650; }
.code-id { color: var(--color-muted); font-family: Consolas, monospace; font-size: 11px; }

.uat-run-toolbar { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(360px, 1.3fr); align-items: start; gap: var(--space-5); }
.uat-run-info { padding-top: 2px; }
.uat-layout { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.65fr); align-items: start; gap: var(--space-4); }
.uat-case-panel { position: sticky; top: calc(var(--topbar-height) + 16px); max-height: calc(100vh - var(--topbar-height) - 36px); overflow: hidden; }
.app-shell.uat-tools-open .uat-case-panel { top: calc(var(--topbar-height) + 74px); max-height: calc(100vh - var(--topbar-height) - 94px); }
.uat-case-panel .panel-body { max-height: calc(100vh - var(--topbar-height) - 96px); overflow-y: auto; }
.uat-case-list { display: grid; }
.uat-case-button {
  display: grid;
  width: 100%;
  min-height: 84px;
  gap: 5px;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  background: #fff;
  text-align: left;
}
.uat-case-button:hover { background: var(--color-surface-alt); }
.uat-case-button.active { background: #eaf5f3; box-shadow: inset 4px 0 0 var(--color-primary); }
.uat-case-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uat-case-heading strong { color: var(--color-primary); font-size: 12px; }
.uat-case-title { font-weight: 750; }
.uat-case-meta { color: var(--color-muted); font-size: 11px; }
.uat-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.uat-guide-block { min-width: 0; padding: 14px 16px; }
.uat-guide-block + .uat-guide-block { border-left: 1px solid var(--color-border); }
.uat-guide-block h3 { margin: 0 0 8px; font-size: 13px; }
.uat-check-list { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: #415153; font-size: 12px; }
.uat-role-launch { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr); align-items: center; gap: var(--space-4); padding: 13px 16px; border: 1px solid #b8d4d0; border-radius: var(--radius-sm); background: #f4faf9; }
.uat-role-launch h3 { margin: 0; font-size: 13px; }
.uat-role-launch p { margin: 2px 0 0; color: var(--color-muted); font-size: 11px; }
.uat-role-launch-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.uat-technical-fields { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.uat-technical-fields summary { cursor: pointer; padding: 10px 12px; color: var(--color-muted); font-size: 12px; font-weight: 750; }
.uat-technical-fields[open] summary { border-bottom: 1px solid var(--color-border); color: var(--color-ink); }
.uat-technical-fields > .form-grid { padding: 12px; }
.uat-result-form { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.uat-evidence-section { display: grid; gap: 12px; }
.uat-evidence-section h3 { margin: 0; font-size: 14px; }
.uat-evidence-section p { margin: 2px 0 0; color: var(--color-muted); font-size: 11px; }
.uat-evidence-list { display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.uat-evidence-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, auto) auto; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: 12px; }
.uat-evidence-row:last-child { border-bottom: 0; }
.uat-evidence-row > span { color: var(--color-muted); }

.toast-region { position: fixed; z-index: 80; right: 18px; bottom: 18px; display: grid; width: min(380px, calc(100vw - 36px)); gap: 8px; }
.toast { padding: 12px 14px; border: 1px solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 24px rgba(18, 35, 37, 0.16); }
.toast.success { border-left-color: var(--color-success); }
.toast.warning { border-left-color: var(--color-warning); }
.toast.danger { border-left-color: var(--color-danger); }
.toast strong { display: block; }
.toast span { color: var(--color-muted); font-size: 12px; }

.loading-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: rgba(244, 247, 247, 0.72); }
.loading-overlay[hidden] { display: none; }
.loading-box { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: 0 10px 30px rgba(20, 40, 42, 0.16); font-weight: 700; }
.spinner { width: 18px; height: 18px; border: 2px solid #bed2d0; border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1240px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .layout-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-year-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}

@media (max-width: 1450px) {
  .dashboard-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 160ms ease; }
  .app-shell.nav-open .sidebar { transform: translateX(0); box-shadow: 10px 0 30px rgba(10, 25, 27, 0.24); }
  .main-area { margin-left: 0; }
  .icon-button.menu-button { display: inline-grid; }
  .layout-2, .layout-equal, .layout-3 { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-3 { grid-column: span 2; }
  .payroll-setting-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uat-layout { grid-template-columns: 1fr; }
  .uat-case-panel { position: static; max-height: none; }
  .uat-case-panel .panel-body { max-height: 360px; }
  .uat-role-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .uat-role-selector { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .uat-role-selector select { width: 100%; }
  .uat-role-actions { grid-column: 2; grid-row: 1 / span 2; }
  .punch-slot-grid, .punch-rule-timeline { grid-template-columns: repeat(6, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
}

@media (max-width: 640px) {
  .topbar { min-height: auto; flex-wrap: wrap; padding: 10px 12px; }
  .page-heading { order: 1; flex: 1 1 calc(100% - 56px); }
  .topbar-actions { order: 2; display: grid; width: 100%; grid-template-columns: minmax(90px, 1fr) auto 40px; gap: 6px; }
  .compact-field span { display: none; }
  .compact-field select { min-width: 0; }
  .connection-status { width: 100%; min-width: 0; grid-column: 1 / -1; grid-row: 2; }
  .topbar-actions .icon-button { grid-column: 3; grid-row: 1; }
  .topbar-actions .uat-tool-toggle:not([hidden]) { grid-column: 2; grid-row: 1; }
  .uat-role-toolbar { position: static; grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
  .uat-role-context { grid-template-columns: max-content minmax(0, 1fr); }
  .uat-role-selector, .uat-role-actions { grid-column: 1; grid-row: auto; width: 100%; }
  .uat-role-actions { justify-content: space-between; }
  .uat-role-actions .secondary { flex: 1; }
  .content { padding: 14px 12px 28px; }
  .global-banner { margin: 12px 12px 0; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 96px; }
  .metric-value { font-size: 23px; }
  .section-header { align-items: stretch; flex-direction: column; }
  .section-actions { justify-content: flex-start; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .form-grid .span-2, .form-grid .span-3 { grid-column: span 1; }
  .settings-rule-fields { grid-template-columns: 1fr; }
  .payroll-setting-section { padding: 12px; }
  .payroll-setting-heading { display: grid; }
  .payroll-setting-fields { grid-template-columns: 1fr; }
  .payroll-unsaved-bar { align-items: stretch; flex-direction: column; }
  .payroll-unsaved-items { justify-content: flex-start; }
  .payroll-review-toolbar { align-items: stretch; flex-direction: column; }
  .payroll-review-toolbar .field,
  .payroll-review-toolbar .field.grow { width: 100%; flex: 0 0 auto; }
  .payroll-review-toolbar > .button { width: 100%; }
  .payroll-review-toggles { justify-content: space-between; }
  .payroll-review-table-wrap { max-width: calc(100vw - 26px); max-height: 58vh; }
  .payroll-review-table .payroll-sticky-employee { width: 132px; min-width: 132px; max-width: 132px; }
  .payroll-review-table .payroll-sticky-department { left: 132px; width: 82px; min-width: 82px; max-width: 82px; }
  .payroll-adjustment-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .payroll-adjustment-dialog-body { padding: 10px; }
  .payroll-adjustment-dialog-header { top: -10px; margin: -10px -10px 0; padding: 12px 10px; }
  .payroll-one-time-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-adjustment-current-summary { grid-template-columns: 1fr; }
  .payroll-auto-rerun-message { align-items: stretch; flex-direction: column; }
  .payroll-one-time-toolbar { align-items: stretch; flex-direction: column; }
  .payroll-one-time-toolbar .button { width: 100%; }
  .payroll-one-time-table-wrap { max-width: calc(100vw - 36px); max-height: 55vh; }
  .payroll-one-time-table .payroll-one-time-sticky-type,
  .payroll-one-time-table .payroll-one-time-sticky-name,
  .payroll-one-time-table .payroll-one-time-sticky-actions,
  .payroll-one-time-table th:nth-child(1),
  .payroll-one-time-table th:nth-child(2),
  .payroll-one-time-table th:nth-child(8) { position: static; box-shadow: none; }
  .payroll-adjustment-guidance { grid-template-columns: 1fr; }
  .payroll-adjustment-guidance-options { grid-template-columns: 1fr; }
  .payroll-adjustment-guidance-options .button { width: 100%; }
  .payroll-readonly-callout { align-items: stretch; flex-direction: column; }
  .payroll-readonly-callout .button { width: 100%; }
  .payroll-finalize-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .payroll-finalize-body { padding: 12px; }
  .payroll-finalize-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .field { width: 100%; flex-basis: auto; }
  .toolbar .button { width: 100%; }
  .report-command-bar { position: static; align-items: stretch; flex-direction: column; }
  .report-command-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .report-command-controls .field { width: auto; }
  .report-command-controls .button { grid-column: 1 / -1; width: 100%; }
  .report-policy-strip { grid-template-columns: 1fr; }
  .report-policy-item { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .report-policy-item:last-child { border-bottom: 0; }
  .report-subbar { align-items: stretch; flex-direction: column; }
  .report-grain-tabs { width: 100%; }
  .report-grain-tabs button { flex: 1; }
  .report-workspace-actions { justify-content: stretch; }
  .report-workspace-actions > * { flex: 1 1 120px; }
  .report-recalculation-banner { align-items: stretch; flex-direction: column; }
  .report-recalculation-banner .button { width: 100%; }
  .report-filter-bar { grid-template-columns: 1fr; }
  .report-filter-actions { justify-content: flex-start; }
  .report-filter-modes { width: 100%; }
  .report-filter-modes button { flex: 1 0 auto; }
  .report-table-wrap { max-width: calc(100vw - 26px); max-height: 58vh; }
  .report-data-table .report-sticky-1 { width: 92px; min-width: 92px; max-width: 92px; }
  .report-data-table .report-sticky-2 { left: 92px; width: 142px; min-width: 142px; max-width: 142px; }
  .report-pagination { justify-content: flex-start; }
  .report-inline-form { grid-template-columns: 1fr; }
  .report-action-section > .button { width: 100%; }
  .report-raw-detail { grid-template-columns: 1fr; }
  .report-exception-summary { grid-template-columns: 1fr; }
  .report-exception-summary-item,
  .report-exception-summary-item:nth-child(3n),
  .report-exception-summary-item:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .report-exception-summary-item:last-child { border-bottom: 0; }
  .report-recognition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-resolution-record { align-items: flex-start; flex-direction: column; }
  .report-exception-card { grid-template-columns: 1fr; align-items: stretch; }
  .report-exception-card .table-actions .button { flex: 1 1 140px; }
  .calendar-year-grid { grid-template-columns: 1fr; }
  .panel-header { align-items: stretch; flex-direction: column; }
  .table-wrap { max-width: calc(100vw - 26px); }
  .segmented-toolbar .button { flex: 1 1 150px; }
  .uat-run-toolbar, .uat-guide-grid, .uat-evidence-row, .uat-role-launch { grid-template-columns: 1fr; }
  .uat-guide-block + .uat-guide-block { border-top: 1px solid var(--color-border); border-left: 0; }
  .uat-evidence-row .button { width: 100%; }
  .uat-role-launch-actions { justify-content: stretch; }
  .uat-role-launch-actions .button { flex: 1 1 160px; }
}

@media print {
  .sidebar, .topbar, .global-banner, .segmented-toolbar, .toast-region, .loading-overlay,
  .payroll-employee-detail .section-actions, .button { display: none !important; }
  .main-area { margin-left: 0; }
  .content { max-width: none; padding: 0; }
  .panel, .metric-card { break-inside: avoid; box-shadow: none; }
  .table-wrap { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}