.payroll-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 28px;
  color: #0f172a;
}

.payroll-page h1,
.payroll-page h2,
.payroll-page h3,
.payroll-page p {
  margin-top: 0;
}

.payroll-center-page {
  min-width: 0;
}

/* Payroll navigation button */
#menu-payroll .payroll-nav-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #e11d48, #f97316);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 6px rgba(190,24,93,.18);
}

/* Header */
.payroll-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #38bdf8 100%);
  color: #fff;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.payroll-hero h1 {
  margin-bottom: 6px;
  color: #fff;
  font-size: 32px;
  line-height: 1.05;
}

.payroll-hero p {
  margin-bottom: 0;
  color: rgba(255,255,255,.84);
  font-size: 14px;
}

.payroll-hero-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 900;
  opacity: .82;
  margin-bottom: 7px;
}

.payroll-hero-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.payroll-refresh-btn {
  align-self: center;
  border: 1px solid rgba(255,255,255,.70);
  background: rgba(15,23,42,.30);
  color: #fff;
  border-radius: 12px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15,23,42,.14);
  transition: transform .15s ease, background .15s ease;
}

.payroll-refresh-btn:hover {
  transform: translateY(-1px);
  background: rgba(15,23,42,.48);
}

.payroll-latest-card {
  min-width: 250px;
  max-width: 340px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(10px);
}

.payroll-latest-card span,
.payroll-latest-card small {
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.payroll-latest-card strong {
  color: #fff;
  font-size: 14px;
}

/* Alerts */
.payroll-alert {
  border-radius: 12px;
  padding: 11px 13px;
  font-weight: 800;
}

.payroll-alert--error {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239;
}

.payroll-alert--ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* Summary cards */
.payroll-summary-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.payroll-summary-card {
  position: relative;
  min-height: 92px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 14px 15px;
  background: #fff;
  color: #0f172a;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  box-shadow: 0 10px 28px rgba(15,23,42,.07);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.payroll-summary-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15,23,42,.10);
}

.payroll-summary-card.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 16px 32px rgba(15,23,42,.10);
}

.payroll-summary-card--review {
  background: linear-gradient(135deg, #fff1f2, #fecaca);
  box-shadow: inset 0 4px 0 #dc2626, 0 10px 28px rgba(15,23,42,.07);
}

.payroll-summary-card--active {
  background: linear-gradient(135deg, #fff7ed, #fde68a);
  box-shadow: inset 0 4px 0 #d97706, 0 10px 28px rgba(15,23,42,.07);
}

.payroll-summary-card--draft {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  box-shadow: inset 0 4px 0 #2563eb, 0 10px 28px rgba(15,23,42,.07);
}

.payroll-summary-card--completed {
  background: linear-gradient(135deg, #f0fdf4, #bbf7d0);
  box-shadow: inset 0 4px 0 #16a34a, 0 10px 28px rgba(15,23,42,.07);
}

.payroll-summary-card--all {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  box-shadow: inset 0 4px 0 #64748b, 0 10px 28px rgba(15,23,42,.07);
}

.payroll-summary-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.08);
  font-size: 20px;
  font-weight: 900;
}

.payroll-summary-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.payroll-summary-copy > span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.payroll-summary-copy strong {
  font-size: 26px;
  line-height: 1.05;
}

.payroll-summary-copy small {
  color: #475569;
  font-size: 12px;
}

.payroll-summary-arrow {
  font-size: 26px;
  font-weight: 600;
  opacity: .75;
}

/* Search / filters */
.payroll-workbar {
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 13px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payroll-search-wide {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 14px;
  padding: 0 12px;
  background: #fff;
}

.payroll-search-wide:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.payroll-search-wide > span {
  color: #64748b;
  font-size: 18px;
}

.payroll-search-wide input {
  width: 100%;
  border: 0;
  outline: none;
  padding: 11px 0;
  font: inherit;
  background: transparent;
}

.payroll-filterbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-filter-chip {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 11px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.payroll-filter-chip:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.payroll-filter-chip.is-active {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

/* Panels and table */
.payroll-panel {
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.payroll-list-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 3px 10px;
  flex-wrap: wrap;
}

.payroll-table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 14px;
}

.payroll-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}

.payroll-table--runs {
  min-width: 980px;
}

.payroll-table th,
.payroll-table td {
  text-align: left;
  vertical-align: middle;
  padding: 11px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
}

.payroll-table th {
  color: #334155;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .035em;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
}

.payroll-run-row {
  cursor: pointer;
  position: relative;
  transition: filter .12s ease;
}

.payroll-run-row:hover {
  filter: brightness(.985);
}

.payroll-run-row.is-selected {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.payroll-run--danger {
  background: #ffd0d0;
  box-shadow: inset 7px 0 0 #dc2626;
}

.payroll-run--warning {
  background: #fff1b8;
  box-shadow: inset 7px 0 0 #d4a500;
}

.payroll-run--attention {
  background: #dbeafe;
  box-shadow: inset 7px 0 0 #2563eb;
}

.payroll-run--success {
  background: #dff7e7;
  box-shadow: inset 7px 0 0 #16a34a;
}

.payroll-run--neutral {
  background: #f8fafc;
  box-shadow: inset 7px 0 0 #94a3b8;
}

.payroll-open-btn {
  min-width: 72px;
  border: 1px solid #1d4ed8;
  background: #1d4ed8;
  color: #fff;
  border-radius: 9px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.payroll-open-btn:hover {
  background: #1e40af;
}

.payroll-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.payroll-status--ok {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.payroll-status--active {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}

.payroll-status--warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.payroll-status--bad {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.payroll-next {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(15,23,42,.10);
  background: #f8fafc;
  color: #334155;
}

.payroll-next--danger { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.payroll-next--warning { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.payroll-next--attention { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.payroll-next--success { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.payroll-next--neutral { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

.payroll-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.payroll-muted {
  color: #64748b;
  font-size: 12px;
}

.payroll-empty {
  color: #64748b;
  padding: 20px 10px !important;
  text-align: center !important;
}

.payroll-empty--detail {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Detail workspace */
.payroll-detail {
  min-height: 86px;
}

.payroll-detail.is-open {
  padding: 16px;
}

.payroll-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.payroll-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.payroll-detail-title-row h2 {
  margin-bottom: 2px;
  font-size: 22px;
}

.payroll-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  color: #64748b;
  font-size: 12px;
}

.payroll-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-action-row--main {
  justify-content: flex-end;
  margin: 14px 0 10px;
  padding: 10px 0 0;
  border-top: 1px solid #e2e8f0;
}

.payroll-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.payroll-btn:hover { background:#f8fafc; }
.payroll-btn:disabled,
.is-busy .payroll-btn,
.is-busy .payroll-refresh-btn,
.is-busy .payroll-open-btn { opacity:.56; cursor:wait; }

.payroll-btn--ghost { background:#fff; }
.payroll-btn--primary { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.payroll-btn--primary:hover { background:#1e40af; }
.payroll-btn--success { background:#16a34a; border-color:#16a34a; color:#fff; }
.payroll-btn--success:hover { background:#15803d; }
.payroll-btn--dark { background:#1e3a8a; border-color:#1e3a8a; color:#fff; }
.payroll-btn--dark:hover { background:#172554; }
.payroll-btn--danger { background:#fff1f2; border-color:#fecaca; color:#9f1239; }
.payroll-btn--small { padding:5px 8px; font-size:11px; }

.payroll-detail-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  border-bottom: 1px solid #e2e8f0;
  margin-top: 4px;
}

.payroll-tab {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #64748b;
  padding: 10px 12px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.payroll-tab:hover { color:#1d4ed8; }
.payroll-tab.is-active { color:#1d4ed8; border-bottom-color:#2563eb; }

.payroll-tab-content {
  padding-top: 14px;
}

.payroll-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 14px;
}

.payroll-overview-grid > div {
  min-width: 0;
  border-right: 1px solid #e2e8f0;
  padding-right: 14px;
}

.payroll-overview-grid > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.payroll-overview-label {
  display: block;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 9px;
}

.payroll-overview-status p {
  color: #64748b;
  margin: 9px 0 0;
  font-size: 13px;
}

.payroll-overview-keys dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.payroll-overview-keys dl div {
  display: grid;
  grid-template-columns: minmax(120px,1fr) auto;
  gap: 14px;
}

.payroll-overview-keys dt { color:#64748b; }
.payroll-overview-keys dd { margin:0; font-weight:800; text-align:right; }

.payroll-overview-todo {
  border-radius: 14px;
  padding: 13px !important;
  border: 1px solid #e2e8f0 !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.payroll-overview-todo strong { font-size:15px; }
.payroll-overview-todo > span:last-child { color:#64748b; font-size:12px; line-height:1.45; }
.payroll-overview-todo--danger { background:#fff1f2; border-color:#fecaca !important; }
.payroll-overview-todo--warning { background:#fffbeb; border-color:#fde68a !important; }
.payroll-overview-todo--attention { background:#eff6ff; border-color:#bfdbfe !important; }
.payroll-overview-todo--success { background:#f0fdf4; border-color:#bbf7d0 !important; }
.payroll-overview-todo--neutral { background:#f8fafc; }

.payroll-route-controls {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.payroll-route-controls label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.payroll-route-controls input {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  background: #fff;
}

.payroll-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.payroll-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
}

.payroll-kpi span {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.payroll-kpi strong { font-size:18px; }

@media (max-width: 1180px) {
  .payroll-summary-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .payroll-overview-grid { grid-template-columns: 1fr 1fr; }
  .payroll-overview-grid > div { border-right: 0; padding-right: 0; }
  .payroll-overview-todo { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .payroll-hero { border-radius:18px; padding:16px; }
  .payroll-hero h1 { font-size:26px; }
  .payroll-hero-actions { width:100%; justify-content:flex-start; }
  .payroll-latest-card { min-width:0; flex:1; }
  .payroll-summary-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .payroll-summary-card--all { grid-column:1 / -1; }
  .payroll-panel { padding:11px; }
  .payroll-overview-grid { grid-template-columns:1fr; }
  .payroll-overview-todo { grid-column:auto; }
  .payroll-kpis { grid-template-columns:repeat(3,minmax(90px,1fr)); }
}

@media (max-width: 520px) {
  .payroll-summary-cards { grid-template-columns:1fr; }
  .payroll-summary-card--all { grid-column:auto; }
  .payroll-refresh-btn { width:100%; }
  .payroll-latest-card { width:100%; max-width:none; }
  .payroll-kpis { grid-template-columns:repeat(2,minmax(90px,1fr)); }
}


/* ==========================================================
   R5 - Functional create-run workflow
   ========================================================== */
.payroll-create-btn {
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.95);
  color: #173b87;
  border-radius: 12px;
  padding: 11px 15px;
  min-height: 44px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
}
.payroll-create-btn:hover { transform: translateY(-1px); box-shadow:0 8px 22px rgba(15,23,42,.18); }
.payroll-create-btn:focus-visible { outline:3px solid rgba(255,255,255,.75); outline-offset:2px; }

.payroll-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15,23,42,.55);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  backdrop-filter: blur(3px);
}
.payroll-modal {
  width: min(940px, 96vw);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(148,163,184,.55);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(15,23,42,.34);
}
.payroll-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 18px;
  color:#fff;
  background:linear-gradient(120deg,#14285f 0%,#2457dc 63%,#31aeea 100%);
}
.payroll-modal-head h2 { margin:4px 0 6px; font-size:26px; line-height:1.1; }
.payroll-modal-head p { margin:0; opacity:.9; max-width:680px; line-height:1.45; }
.payroll-modal-kicker { font-size:11px; font-weight:900; letter-spacing:.14em; opacity:.82; }
.payroll-modal-close {
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}
.payroll-create-form { padding: 18px 22px 22px; }
.payroll-create-section { border:1px solid #dbe4f0; border-radius:16px; padding:16px; background:#fbfdff; margin-bottom:14px; }
.payroll-create-section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.payroll-create-section-head > div:first-child { display:flex; align-items:center; gap:9px; font-size:15px; }
.payroll-step-number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#2457dc; color:#fff; font-weight:900; }
.payroll-segmented { display:flex; gap:5px; padding:4px; border-radius:12px; background:#eef3fb; }
.payroll-segmented label { display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; }
.payroll-segmented label:has(input:checked) { background:#fff; color:#1746b6; box-shadow:0 1px 4px rgba(15,23,42,.1); }
.payroll-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.payroll-form-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.payroll-form-grid label { display:grid; gap:5px; min-width:0; }
.payroll-form-grid label > span { color:#475569; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.payroll-form-grid input, .payroll-form-grid select {
  width:100%; min-width:0; box-sizing:border-box;
  border:1px solid #cbd5e1; border-radius:10px; background:#fff;
  padding:10px 11px; font:inherit; color:#0f172a;
}
.payroll-form-grid input:focus, .payroll-form-grid select:focus { border-color:#2563eb; outline:3px solid rgba(37,99,235,.12); }
.payroll-form-span-2 { grid-column:span 2; }
.payroll-create-info { margin-top:12px; display:grid; gap:3px; padding:10px 12px; border-radius:12px; background:#eff6ff; border:1px solid #bfdbfe; color:#334155; font-size:12px; line-height:1.45; }
.payroll-create-info strong { color:#1e40af; }
.payroll-modal-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:4px; }
.payroll-btn--create { min-width:190px; }

@media (max-width: 900px) {
  .payroll-form-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .payroll-modal-backdrop { padding:10px; }
  .payroll-modal { max-height:calc(100vh - 20px); border-radius:16px; }
  .payroll-modal-head { padding:18px; }
  .payroll-create-form { padding:14px; }
  .payroll-create-section-head { align-items:flex-start; flex-direction:column; }
  .payroll-form-grid, .payroll-form-grid--3 { grid-template-columns:1fr; }
  .payroll-form-span-2 { grid-column:auto; }
  .payroll-modal-actions { flex-direction:column-reverse; }
  .payroll-modal-actions .payroll-btn { width:100%; }
  .payroll-create-btn, .payroll-refresh-btn { width:100%; }
}


/* ==========================================================
   R5D - Colored button system
   Semantic colors, no plain white action buttons.
   ========================================================== */

/* Header actions */
.payroll-create-btn {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: #15803d;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(22,163,74,.28);
}
.payroll-create-btn:hover {
  background: linear-gradient(135deg, #15803d, #16a34a);
  box-shadow: 0 10px 24px rgba(22,163,74,.34);
}

.payroll-refresh-btn {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border-color: rgba(255,255,255,.72);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37,99,235,.28);
}
.payroll-refresh-btn:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
}

/* Filter buttons - one color per workflow state */
.payroll-filter-chip {
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(15,23,42,.10);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.payroll-filter-chip:hover {
  transform: translateY(-1px);
  filter: brightness(.95);
  box-shadow: 0 5px 12px rgba(15,23,42,.16);
}
.payroll-filter-chip[data-payroll-filter="all"] { background:#2563eb; }
.payroll-filter-chip[data-payroll-filter="draft"] { background:#f59e0b; color:#422006; }
.payroll-filter-chip[data-payroll-filter="calculated"] { background:#8b5cf6; }
.payroll-filter-chip[data-payroll-filter="review"] { background:#ef4444; }
.payroll-filter-chip[data-payroll-filter="approved"] { background:#14b8a6; }
.payroll-filter-chip[data-payroll-filter="locked"] { background:#334155; }
.payroll-filter-chip[data-payroll-filter="completed"] { background:#16a34a; }
.payroll-filter-chip[data-payroll-filter="cancelled"] { background:#64748b; }
.payroll-filter-chip.is-active {
  color:#ffffff;
  border-color:rgba(255,255,255,.92);
  box-shadow: 0 0 0 3px rgba(255,255,255,.70), 0 6px 15px rgba(15,23,42,.24);
  filter: saturate(1.14) brightness(.92);
}
.payroll-filter-chip[data-payroll-filter="draft"].is-active { color:#2b1600; }

/* Table and workflow action buttons */
.payroll-open-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color:#1d4ed8;
  color:#ffffff;
  box-shadow:0 3px 9px rgba(37,99,235,.22);
}
.payroll-open-btn:hover { background:linear-gradient(135deg,#1d4ed8,#1e40af); }

.payroll-btn {
  background:#0f766e;
  border-color:#0f766e;
  color:#ffffff;
  box-shadow:0 2px 7px rgba(15,23,42,.10);
}
.payroll-btn:hover { background:#115e59; }
.payroll-btn--ghost {
  background:#64748b;
  border-color:#64748b;
  color:#ffffff;
}
.payroll-btn--ghost:hover { background:#475569; }
.payroll-btn--primary {
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  border-color:#4338ca;
  color:#ffffff;
}
.payroll-btn--primary:hover { background:linear-gradient(135deg,#1d4ed8,#4338ca); }
.payroll-btn--success {
  background:linear-gradient(135deg,#16a34a,#22c55e);
  border-color:#15803d;
  color:#ffffff;
}
.payroll-btn--success:hover { background:linear-gradient(135deg,#15803d,#16a34a); }
.payroll-btn--dark {
  background:linear-gradient(135deg,#312e81,#1e3a8a);
  border-color:#1e3a8a;
  color:#ffffff;
}
.payroll-btn--dark:hover { background:linear-gradient(135deg,#1e1b4b,#172554); }
.payroll-btn--danger {
  background:linear-gradient(135deg,#dc2626,#ef4444);
  border-color:#b91c1c;
  color:#ffffff;
}
.payroll-btn--danger:hover { background:linear-gradient(135deg,#b91c1c,#dc2626); }

/* Detail tabs are buttons too - keep them clearly differentiated */
.payroll-detail-tabs {
  gap:7px;
  border-bottom:0;
  padding-bottom:6px;
}
.payroll-tab {
  border:1px solid transparent;
  border-bottom:1px solid transparent;
  border-radius:10px;
  color:#ffffff;
  padding:8px 12px;
  box-shadow:0 2px 6px rgba(15,23,42,.10);
}
.payroll-tab[data-payroll-tab="overview"] { background:#2563eb; }
.payroll-tab[data-payroll-tab="persons"] { background:#7c3aed; }
.payroll-tab[data-payroll-tab="payslips"] { background:#0891b2; }
.payroll-tab[data-payroll-tab="delivery"] { background:#16a34a; }
.payroll-tab:hover { color:#ffffff; filter:brightness(.94); }
.payroll-tab.is-active {
  color:#ffffff;
  border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 3px rgba(37,99,235,.14), 0 4px 10px rgba(15,23,42,.16);
  filter:saturate(1.12) brightness(.90);
}

/* Keyboard focus should remain obvious on every colored control */
.payroll-create-btn:focus-visible,
.payroll-refresh-btn:focus-visible,
.payroll-filter-chip:focus-visible,
.payroll-open-btn:focus-visible,
.payroll-btn:focus-visible,
.payroll-tab:focus-visible {
  outline:3px solid #ffffff;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(37,99,235,.28);
}


/* ============================================================
   UI-PAYROLL-R6 - EXISTING LORE V2 STATUS STANDARD
   Green = OK / complete
   Yellow = waiting / draft / needs normal attention
   Red = error / blocked / urgent action
   Blue = active / in progress / information
   Gray = inactive / cancelled / no objects in that status
   ============================================================ */

/* Live status filters. R6 deliberately overrides the earlier R5D
   purple/turquoise experiment and returns Payroll to Lore's system standard. */
.payroll-filter-chip.lore-status-green { background:#16a34a; color:#fff; }
.payroll-filter-chip.lore-status-yellow { background:#d97706; color:#fff; }
.payroll-filter-chip.lore-status-red { background:#dc2626; color:#fff; }
.payroll-filter-chip.lore-status-blue { background:#2563eb; color:#fff; }
.payroll-filter-chip.lore-status-gray { background:#64748b; color:#fff; }

.payroll-filter-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:opacity .16s ease, filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.payroll-filter-chip.is-empty { opacity:.48; filter:saturate(.50); }
.payroll-filter-chip.has-items { opacity:1; filter:saturate(1.05); }
.payroll-filter-chip.is-active { opacity:1; filter:saturate(1.12) brightness(.96); }
.payroll-filter-count {
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.90);
  color:#0f172a;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.payroll-filter-chip.is-empty .payroll-filter-count { background:rgba(255,255,255,.72); color:#475569; }

/* Summary cards also react to the current state, like Fakturacentralen. */
.payroll-summary-card.payroll-summary-state--green { background:linear-gradient(135deg,#f0fdf4,#bbf7d0); box-shadow:inset 0 4px 0 #16a34a,0 10px 28px rgba(15,23,42,.07); }
.payroll-summary-card.payroll-summary-state--yellow { background:linear-gradient(135deg,#fff7ed,#fde68a); box-shadow:inset 0 4px 0 #d97706,0 10px 28px rgba(15,23,42,.07); }
.payroll-summary-card.payroll-summary-state--red { background:linear-gradient(135deg,#fff1f2,#fecaca); box-shadow:inset 0 4px 0 #dc2626,0 10px 28px rgba(15,23,42,.07); }
.payroll-summary-card.payroll-summary-state--blue { background:linear-gradient(135deg,#eff6ff,#bfdbfe); box-shadow:inset 0 4px 0 #2563eb,0 10px 28px rgba(15,23,42,.07); }
.payroll-summary-card.payroll-summary-state--gray { background:linear-gradient(135deg,#f8fafc,#e2e8f0); box-shadow:inset 0 4px 0 #64748b,0 10px 28px rgba(15,23,42,.07); }

/* The small Open/View button follows the actual row status. */
.payroll-open-btn.payroll-status-action--danger { background:#dc2626; border-color:#b91c1c; color:#fff; }
.payroll-open-btn.payroll-status-action--warning { background:#d97706; border-color:#b45309; color:#fff; }
.payroll-open-btn.payroll-status-action--attention { background:#2563eb; border-color:#1d4ed8; color:#fff; }
.payroll-open-btn.payroll-status-action--success { background:#16a34a; border-color:#15803d; color:#fff; }
.payroll-open-btn.payroll-status-action--neutral { background:#64748b; border-color:#475569; color:#fff; }
.payroll-open-btn[class*="payroll-status-action--"]:hover { filter:brightness(.92); }


/* ==========================================================
   UI-PAYROLL-R7 - CLEAN CREATE-RUN WORKFLOW
   Existing Lore V2 UI/status standard preserved.
   ========================================================== */
#payroll-period-new-fields[hidden],
#payroll-period-existing-fields[hidden] {
  display: none !important;
}

.payroll-form-span-3 { grid-column: 1 / -1; }

.payroll-field-with-note small,
.payroll-advanced small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.payroll-advanced {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
}

.payroll-advanced summary {
  cursor: pointer;
  padding: 9px 11px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  user-select: none;
}

.payroll-advanced[open] summary {
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
}

.payroll-advanced-body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
}

.payroll-advanced-body label {
  display: grid;
  gap: 5px;
}

.payroll-advanced-body label > span {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.payroll-advanced-body input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
  font: inherit;
  color: #0f172a;
}

@media (max-width: 620px) {
  .payroll-form-span-3 { grid-column: auto; }
  .payroll-advanced-body { grid-template-columns: 1fr; }
}

/* ============================================================
   UI-PAYROLL-R9A - PAYROLL MAIN WORKSPACES
   ============================================================ */

.payroll-main-tabs {
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 2px 8px;
  background:transparent;
  border:0;
  border-bottom:1px solid #cbd5e1;
  border-radius:0;
  box-shadow:none;
  flex-wrap:wrap;
}

.payroll-main-tab {
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 15px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#f1f5f9;
  color:#334155;
  cursor:pointer;
  text-align:center;
  font:inherit;
  box-shadow:none;
}

.payroll-main-tab strong {
  font-size:14px;
  color:#0f172a;
}

.payroll-main-tab span {
  display:none;
}

.payroll-main-tab:hover {
  border-color:#93c5fd;
  background:#eff6ff;
}

.payroll-main-tab.is-active {
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  border-color:#1d4ed8;
  box-shadow:0 7px 18px rgba(37,99,235,.22);
}

.payroll-main-tab.is-active strong,
.payroll-main-tab.is-active span {
  color:#ffffff;
}

.payroll-main-view {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.payroll-workspace-panel {
  display:grid;
  gap:16px;
}

.payroll-workspace-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

.payroll-workspace-head h2 {
  margin:3px 0 5px;
  font-size:22px;
}

.payroll-workspace-head p {
  margin:0;
  color:#64748b;
  max-width:760px;
  line-height:1.5;
}

.payroll-workspace-kicker {
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  color:#2563eb;
}

.payroll-status-legend {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.payroll-person-state {
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid transparent;
}

.payroll-person-state--green {
  background:#dcfce7;
  border-color:#86efac;
  color:#166534;
}

.payroll-person-state--yellow {
  background:#fef3c7;
  border-color:#fcd34d;
  color:#92400e;
}

.payroll-person-state--red {
  background:#fee2e2;
  border-color:#fca5a5;
  color:#991b1b;
}

.payroll-person-toolbar-shell {
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:#f8fafc;
}

.payroll-person-filter-shell {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.payroll-person-filter-shell button {
  border:0;
  border-radius:9px;
  padding:7px 10px;
  background:#64748b;
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:900;
}

.payroll-person-filter-shell button.is-green { background:#16a34a; }
.payroll-person-filter-shell button.is-yellow { background:#d97706; }
.payroll-person-filter-shell button.is-red { background:#dc2626; }

.payroll-person-filter-shell button:disabled {
  opacity:.58;
  cursor:not-allowed;
}

.payroll-person-layout {
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(0,1.7fr);
  gap:14px;
}

.payroll-person-list-shell,
.payroll-person-detail-shell {
  min-width:0;
  border:1px solid #dbe4f0;
  border-radius:16px;
  background:#fbfdff;
  padding:14px;
}

.payroll-person-list-head,
.payroll-person-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
}

.payroll-person-list-head span,
.payroll-person-card-head span {
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.payroll-person-card-head h3 {
  margin:2px 0 0;
}

.payroll-person-empty {
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.payroll-person-card-tabs {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.payroll-person-card-tabs span {
  padding:7px 9px;
  border-radius:9px;
  background:#e2e8f0;
  color:#475569;
  font-size:11px;
  font-weight:800;
}

.payroll-flow-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.payroll-flow-steps > div {
  min-width:0;
  display:grid;
  grid-template-columns:32px 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  padding:13px;
  border:1px solid #dbe4f0;
  border-radius:14px;
  background:#f8fafc;
}

.payroll-flow-steps b {
  grid-row:1 / 3;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2563eb;
  color:#fff;
}

.payroll-flow-steps strong {
  font-size:13px;
}

.payroll-flow-steps span {
  color:#64748b;
  font-size:11px;
}

.payroll-import-drop {
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px;
  border:2px dashed #93c5fd;
  border-radius:16px;
  background:#eff6ff;
  text-align:center;
}

.payroll-import-drop span {
  color:#64748b;
  max-width:620px;
}

.payroll-import-result-shell {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.payroll-import-stat {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-radius:13px;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
}

.payroll-import-stat.is-green {
  background:#dcfce7;
  border-color:#86efac;
}

.payroll-import-stat.is-yellow {
  background:#fef3c7;
  border-color:#fcd34d;
}

.payroll-import-stat.is-red {
  background:#fee2e2;
  border-color:#fca5a5;
}

.payroll-test-mode-card {
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 14px;
  border-radius:14px;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
}

.payroll-test-mode-card span,
.payroll-test-mode-card small {
  color:#64748b;
  font-size:11px;
}

.payroll-test-safety {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:13px 15px;
  border-radius:14px;
  background:#ecfeff;
  border:1px solid #67e8f9;
}

.payroll-test-safety strong {
  color:#155e75;
}

.payroll-test-safety span {
  color:#475569;
  line-height:1.45;
}

.payroll-test-history-head {
  padding-top:6px;
}

@media (max-width: 1000px) {
  .payroll-main-tabs {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .payroll-person-layout {
    grid-template-columns:1fr;
  }

  .payroll-flow-steps,
  .payroll-import-result-shell {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 600px) {
  .payroll-main-tabs,
  .payroll-flow-steps,
  .payroll-import-result-shell {
    grid-template-columns:1fr;
  }
}
/* ============================================================
   UI-PAYROLL-R10A - PERSONER
   ============================================================ */

.payroll-person-list-full {
  border:1px solid #dbe4f0;
  border-radius:16px;
  background:#fbfdff;
  padding:14px;
}

.payroll-person-table {
  min-width:980px;
  border-collapse:separate;
  border-spacing:0 7px;
}

.payroll-person-table tbody td {
  border-top:1px solid rgba(15,23,42,.10);
  border-bottom:1px solid rgba(15,23,42,.10);
}

.payroll-person-table tbody td:first-child {
  border-left:7px solid transparent;
  border-radius:12px 0 0 12px;
}

.payroll-person-table tbody td:last-child {
  border-right:1px solid rgba(15,23,42,.10);
  border-radius:0 12px 12px 0;
}

.payroll-person-row {
  cursor:pointer;
}

.payroll-person-row:hover td {
  filter:brightness(.985);
}

.payroll-person-row.is-selected td {
  outline:1px solid #2563eb;
  outline-offset:-1px;
}

.payroll-person-row--green td {
  background:#d9f5df;
  border-color:#77c889 !important;
}

.payroll-person-row--green td:first-child {
  border-left-color:#16a34a !important;
}

.payroll-person-row--yellow td {
  background:#fff0b8;
  border-color:#e6be46 !important;
}

.payroll-person-row--yellow td:first-child {
  border-left-color:#d97706 !important;
}

.payroll-person-row--red td {
  background:#ffd6d6;
  border-color:#ef8f8f !important;
}

.payroll-person-row--red td:first-child {
  border-left-color:#dc2626 !important;
}

.payroll-person-row--gray td {
  background:#f8fafc;
  border-color:#cbd5e1 !important;
}

.payroll-person-row--gray td:first-child {
  border-left-color:#94a3b8 !important;
}

.payroll-person-status {
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

.payroll-person-status--green {
  background:#dcfce7;
  color:#166534;
}

.payroll-person-status--yellow {
  background:#fef3c7;
  color:#92400e;
}

.payroll-person-status--red {
  background:#fee2e2;
  color:#991b1b;
}

.payroll-person-status--gray {
  background:#e2e8f0;
  color:#475569;
}

.payroll-person-filter-shell button.is-active {
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
  filter:brightness(.92);
}

.payroll-person-detail-shell {
  min-width:0;
  border:1px solid #dbe4f0;
  border-radius:16px;
  background:#ffffff;
  padding:16px;
}

.payroll-person-card-tabs {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid #e2e8f0;
}

.payroll-person-card-tabs button {
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#f1f5f9;
  color:#475569;
  padding:7px 10px;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.payroll-person-card-tabs button:hover {
  background:#eff6ff;
  border-color:#93c5fd;
}

.payroll-person-card-tabs button.is-active {
  background:#2563eb;
  border-color:#1d4ed8;
  color:#fff;
}

.payroll-person-card-tabs button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.payroll-person-detail-content {
  min-height:150px;
}

.payroll-person-detail-empty {
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.payroll-person-overview-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.payroll-person-overview-grid section {
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
  padding:13px;
}

.payroll-person-overview-grid h4 {
  margin:0 0 10px;
}

.payroll-person-form-view {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.payroll-person-kv {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:9px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e2e8f0;
}

.payroll-person-kv span {
  color:#64748b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.payroll-person-kv strong {
  overflow-wrap:anywhere;
  font-size:13px;
}

@media (max-width:1000px) {
  .payroll-person-overview-grid,
  .payroll-person-form-view {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px) {
  .payroll-person-overview-grid,
  .payroll-person-form-view {
    grid-template-columns:1fr;
  }
}
/* UI-PAYROLL-R10B - hide inactive main workspace */
.payroll-main-view[hidden] {
  display:none !important;
}
/* ============================================================
   UI-PAYROLL-R11A-R2 - CTI V1 IMPORT DRY-RUN
   ============================================================ */

.payroll-import-dryrun-badge {
  padding:8px 11px;
  border-radius:999px;
  border:1px solid #60a5fa;
  background:#dbeafe;
  color:#1e40af;
  font-size:11px;
  font-weight:900;
}

.payroll-import-file-input {
  display:none;
}

.payroll-import-drop {
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.payroll-import-drop.is-dragover {
  border-color:#2563eb;
  background:#dbeafe;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.payroll-import-toolbar {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.payroll-import-selected-file {
  max-width:100%;
  padding:6px 10px;
  border:1px solid #bfdbfe;
  border-radius:9px;
  background:#fff;
  color:#1e3a8a;
  font-size:12px;
  font-weight:800;
  overflow-wrap:anywhere;
}

.payroll-import-waiting {
  min-height:105px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  text-align:center;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#f8fafc;
  color:#64748b;
}

.payroll-import-waiting strong {
  color:#334155;
}

.payroll-import-contract,
.payroll-import-observed {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.payroll-import-contract > div,
.payroll-import-observed > div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 11px;
  border:1px solid #dbe4f0;
  border-radius:12px;
  background:#f8fafc;
}

.payroll-import-contract span,
.payroll-import-observed span {
  color:#64748b;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.payroll-import-contract strong,
.payroll-import-observed strong {
  overflow-wrap:anywhere;
}

.payroll-import-warning {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border:1px solid #fbbf24;
  border-radius:13px;
  background:#fffbeb;
}

.payroll-import-warning strong {
  color:#92400e;
}

.payroll-import-warning span {
  color:#78350f;
}

.payroll-import-neutral-note {
  padding:9px 11px;
  border:1px solid #cbd5e1;
  border-radius:11px;
  background:#f1f5f9;
  color:#475569;
}

.payroll-import-agent-table {
  min-width:1180px;
  border-collapse:separate;
  border-spacing:0 6px;
}

.payroll-import-agent-table tbody td {
  border-top:1px solid rgba(15,23,42,.09);
  border-bottom:1px solid rgba(15,23,42,.09);
}

.payroll-import-agent-table tbody td:first-child {
  border-left:6px solid transparent;
}

.payroll-import-agent-row--green td {
  background:#e6f8ea;
}

.payroll-import-agent-row--green td:first-child {
  border-left-color:#16a34a;
}

.payroll-import-agent-row--yellow td {
  background:#fff5cf;
}

.payroll-import-agent-row--yellow td:first-child {
  border-left-color:#d97706;
}

.payroll-import-agent-row--red td {
  background:#ffe2e2;
}

.payroll-import-agent-row--red td:first-child {
  border-left-color:#dc2626;
}

.payroll-import-agent-row--gray td {
  background:#f8fafc;
}

.payroll-import-agent-row--gray td:first-child {
  border-left-color:#94a3b8;
}

.payroll-import-safety-footer {
  padding:10px 12px;
  border:1px solid #86efac;
  border-radius:12px;
  background:#f0fdf4;
  color:#166534;
  font-size:12px;
}

@media (max-width:1000px) {
  .payroll-import-contract,
  .payroll-import-observed {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px) {
  .payroll-import-contract,
  .payroll-import-observed {
    grid-template-columns:1fr;
  }
}
/* ============================================================
   UI-PAYROLL-R11Q - IMPORT PERSON ACTION
   No layout redesign; only makes actionable rows explicit.
   ============================================================ */

.payroll-import-agent-row--actionable {
  cursor:pointer;
}

.payroll-import-agent-row--actionable:hover {
  filter:brightness(.975);
}

.payroll-import-agent-row--actionable:focus-visible {
  outline:3px solid #2563eb;
  outline-offset:-3px;
}
/* ============================================================
UI-PAYROLL-R11R - PERSON ENGAGEMENT
============================================================ */
.payroll-engagement-create {
display:grid;
gap:12px;
}
.payroll-engagement-checks {
display:flex;
flex-wrap:wrap;
gap:18px;
margin-top:15px;
padding-top:14px;
border-top:1px solid #e2e8f0;
}
.payroll-engagement-checks label {
display:flex;
align-items:center;
gap:8px;
font-size:13px;
font-weight:800;
color:#334155;
}
.payroll-engagement-checks input {
width:18px;
height:18px;
}
.payroll-engagement-masterdata-block {
display:grid;
gap:7px;
padding:16px;
border:1px solid #f59e0b;
border-radius:14px;
background:#fffbeb;
color:#78350f;
}
.payroll-engagement-masterdata-block strong {
font-size:14px;
}
.payroll-engagement-masterdata-block span {
line-height:1.45;
}
.payroll-engagement-actions {
display:flex;
justify-content:flex-end;
margin-top:14px;
}

/* ============================================================
   UI-PAYROLL-PERSON-FINISH-V1
   Complete person masterdata workspace
   ============================================================ */
.payroll-person-readiness {
  display:grid;
  gap:5px;
  padding:14px 16px;
  margin-bottom:14px;
  border-radius:14px;
  border:1px solid #cbd5e1;
}

.payroll-person-readiness strong { font-size:14px; }
.payroll-person-readiness span { line-height:1.4; }
.payroll-person-readiness--green { background:#ecfdf5; border-color:#22c55e; color:#166534; }
.payroll-person-readiness--red { background:#fef2f2; border-color:#ef4444; color:#991b1b; }

.payroll-person-edit-form,
.payroll-compensation-create,
.payroll-person-setting-form {
  display:grid;
  gap:14px;
}

.payroll-person-readonly-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.payroll-delivery-contact-preview {
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.payroll-delivery-contact-preview strong { width:100%; }

.payroll-history-list {
  display:grid;
  gap:10px;
}

.payroll-history-item {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:13px 15px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
}

.payroll-history-item > div { display:grid; gap:3px; }
.payroll-history-item span { color:#64748b; line-height:1.35; }
.payroll-history-item time { white-space:nowrap; color:#64748b; font-size:12px; }

@media (max-width: 900px) {
  .payroll-person-readonly-grid { grid-template-columns:1fr; }
  .payroll-history-item { flex-direction:column; gap:6px; }
}

/* LORE V2 LONECENTER VISUAL STATUS V1 START */

/*
   LORE V2 - LONECENTER CONTROL ROOM

   STATUS STANDARD
   red    = error / blocked
   yellow = draft / control
   blue   = active / information
   green  = complete / success
   gray   = inactive / cancelled

   NAVIGATION
   runs    = electric blue
   persons = turquoise
   import  = orange
   tests   = violet
*/


/* ============================================================
   MAIN PAYROLL SURFACE
   ============================================================ */

.payroll-center-page {
    --lc-night: #061a3a;
    --lc-night2: #0b315f;
    --lc-blue: #1877ed;
    --lc-cyan: #21c8ed;

    padding: 15px !important;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 95% 3%,
            rgba(35,205,242,.24),
            transparent 26%
        ),
        radial-gradient(
            circle at 0% 48%,
            rgba(90,72,218,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #4268c2 0%,
            #748bda 48%,
            #5578d2 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 15px 40px rgba(10,35,75,.18);
}


/* ============================================================
   HERO
   ============================================================ */

.payroll-center-page .payroll-hero {
    position: relative;
    overflow: hidden;

    border:
        1px solid rgba(91,210,255,.52) !important;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(41,219,246,.30),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #06162f 0%,
            #103e82 52%,
            #1788e9 100%
        ) !important;

    box-shadow:
        0 13px 30px rgba(4,23,55,.30),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.payroll-center-page .payroll-hero::after {
    content: "kr";

    position: absolute;
    right: 28px;
    bottom: -28px;

    font-size: 118px;
    font-weight: 950;
    line-height: 1;

    color: rgba(255,255,255,.045);

    transform: rotate(-8deg);

    pointer-events: none;
}

.payroll-center-page .payroll-hero-kicker {
    color: #71e4ff !important;

    font-weight: 950 !important;
    letter-spacing: .14em;
}

.payroll-center-page .payroll-hero h1 {
    font-size: 31px !important;
    font-weight: 950 !important;

    text-shadow:
        0 2px 9px rgba(0,0,0,.22);
}

.payroll-center-page .payroll-hero p {
    color: #dbeaff !important;
}


/* Main actions */

.payroll-center-page .payroll-create-btn {
    background:
        linear-gradient(
            135deg,
            #0cbf62,
            #20d77b
        ) !important;

    border-color: #62efa2 !important;

    box-shadow:
        0 8px 20px rgba(8,156,77,.30) !important;
}

.payroll-center-page .payroll-refresh-btn {
    background:
        linear-gradient(
            135deg,
            #1689ed,
            #285bd8
        ) !important;

    border-color:
        rgba(255,255,255,.70) !important;

    box-shadow:
        0 8px 19px rgba(22,88,207,.28) !important;
}


/* Latest run = informational area */

.payroll-center-page .payroll-latest-card {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.22),
            rgba(77,198,255,.24)
        ) !important;

    border:
        1px solid rgba(255,255,255,.45) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 6px 16px rgba(0,0,0,.11);
}


/* ============================================================
   MAIN MODULE TABS
   ============================================================ */

.payroll-center-page .payroll-main-tabs {
    display: flex !important;
    gap: 9px !important;

    padding: 8px !important;

    border:
        1px solid #174f8b !important;

    border-radius: 15px !important;

    background:
        linear-gradient(
            180deg,
            #0c315f,
            #061d3e
        ) !important;

    box-shadow:
        0 8px 20px rgba(4,21,50,.25),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}


.payroll-center-page .payroll-main-tab {
    min-width: 120px;

    padding:
        10px
        17px !important;

    border-width:
        2px !important;

    border-radius:
        10px !important;

    font-weight:
        900 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 4px 9px rgba(0,0,0,.15) !important;

    transition:
        transform .14s ease,
        filter .14s ease,
        box-shadow .14s ease !important;
}


/* Runs */

.payroll-center-page
.payroll-main-tab[data-payroll-main-tab="runs"] {
    background:
        linear-gradient(
            135deg,
            #369cff,
            #195fd8
        ) !important;

    border-color:
        #71c5ff !important;

    color:
        #ffffff !important;
}


/* Persons */

.payroll-center-page
.payroll-main-tab[data-payroll-main-tab="persons"] {
    background:
        linear-gradient(
            135deg,
            #43e0d1,
            #10a99a
        ) !important;

    border-color:
        #73efe2 !important;

    color:
        #063e39 !important;
}


/* Import */

.payroll-center-page
.payroll-main-tab[data-payroll-main-tab="import"] {
    background:
        linear-gradient(
            135deg,
            #ffc34e,
            #ef8317
        ) !important;

    border-color:
        #ffd47b !important;

    color:
        #492700 !important;
}


/* Test */

.payroll-center-page
.payroll-main-tab[data-payroll-main-tab="tests"] {
    background:
        linear-gradient(
            135deg,
            #a16df4,
            #6741d3
        ) !important;

    border-color:
        #baa0ff !important;

    color:
        #ffffff !important;
}


.payroll-center-page .payroll-main-tab:not(.is-active) {
    opacity: .82;
    filter: saturate(.88) brightness(.90);
}


.payroll-center-page .payroll-main-tab.is-active {
    opacity: 1;

    transform:
        translateY(-2px)
        scale(1.035);

    filter:
        saturate(1.25)
        brightness(1.08) !important;

    border-color:
        #ffffff !important;

    box-shadow:
        0 0 0 2px rgba(255,255,255,.25),
        0 8px 18px rgba(0,0,0,.25),
        0 0 18px rgba(42,220,255,.35) !important;
}


.payroll-center-page .payroll-main-tab strong {
    color: inherit !important;
}


/* ============================================================
   STATUS OVERVIEW CARDS
   Entire card uses actual status colour
   ============================================================ */

.payroll-center-page .payroll-summary-card {
    min-height: 106px !important;

    border-width:
        2px !important;

    border-radius:
        18px !important;

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease !important;
}


.payroll-center-page .payroll-summary-card:hover {
    transform:
        translateY(-3px);

    filter:
        saturate(1.05);

    box-shadow:
        0 13px 27px rgba(10,35,70,.22) !important;
}


/* GREEN */

.payroll-center-page
.payroll-summary-card.payroll-summary-state--green {
    color: #053e27 !important;

    border-color:
        #05945a !important;

    background:
        linear-gradient(
            135deg,
            #42d58b 0%,
            #91edb9 50%,
            #2ec979 100%
        ) !important;

    box-shadow:
        0 9px 22px rgba(0,124,69,.22) !important;
}


/* YELLOW */

.payroll-center-page
.payroll-summary-card.payroll-summary-state--yellow {
    color: #4d3100 !important;

    border-color:
        #dc9200 !important;

    background:
        linear-gradient(
            135deg,
            #ffc83b 0%,
            #ffe47b 52%,
            #f8b923 100%
        ) !important;

    box-shadow:
        0 9px 22px rgba(180,110,0,.22) !important;
}


/* RED */

.payroll-center-page
.payroll-summary-card.payroll-summary-state--red {
    color: #661717 !important;

    border-color:
        #d62f2f !important;

    background:
        linear-gradient(
            135deg,
            #ff7575 0%,
            #ffaaaa 50%,
            #ef5757 100%
        ) !important;

    box-shadow:
        0 9px 22px rgba(174,37,37,.23) !important;
}


/* BLUE */

.payroll-center-page
.payroll-summary-card.payroll-summary-state--blue {
    color: #092f64 !important;

    border-color:
        #1672dc !important;

    background:
        linear-gradient(
            135deg,
            #55a9ff 0%,
            #9bd5ff 50%,
            #3c92ee 100%
        ) !important;

    box-shadow:
        0 9px 22px rgba(25,99,189,.22) !important;
}


/* GRAY */

.payroll-center-page
.payroll-summary-card.payroll-summary-state--gray {
    color: #334155 !important;

    border-color:
        #718096 !important;

    background:
        linear-gradient(
            135deg,
            #aeb9c8 0%,
            #d9e0e8 50%,
            #9aa8b9 100%
        ) !important;

    box-shadow:
        0 9px 22px rgba(50,65,85,.17) !important;
}


/* Icon becomes stronger */

.payroll-center-page .payroll-summary-icon {
    width: 43px !important;
    height: 43px !important;

    background:
        rgba(255,255,255,.48) !important;

    border:
        1px solid rgba(255,255,255,.62) !important;

    box-shadow:
        0 3px 9px rgba(0,0,0,.10);
}


.payroll-center-page .payroll-summary-copy strong {
    font-size:
        27px !important;

    font-weight:
        950 !important;
}


/* Selected summary card */

.payroll-center-page
.payroll-summary-card.is-active {
    border-color:
        #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.50),
        0 13px 28px rgba(8,35,70,.28) !important;
}


/* ============================================================
   SEARCH / STATUS FILTER CONTROL ROOM
   ============================================================ */

.payroll-center-page .payroll-workbar {
    padding:
        13px !important;

    border:
        1px solid #174d84 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            135deg,
            #0b2b54 0%,
            #0a2041 100%
        ) !important;

    box-shadow:
        0 9px 22px rgba(5,24,53,.24),
        inset 0 1px 0 rgba(255,255,255,.09) !important;
}


.payroll-center-page .payroll-search-wide {
    background:
        #ffffff !important;

    border:
        2px solid #6ebdf6 !important;

    border-radius:
        12px !important;

    box-shadow:
        inset 0 1px 3px rgba(10,40,80,.07);
}


/* Status filter chips retain real Lore meaning */

.payroll-center-page
.payroll-filter-chip.lore-status-green {
    background:
        linear-gradient(
            135deg,
            #18b766,
            #28d77c
        ) !important;
}


.payroll-center-page
.payroll-filter-chip.lore-status-yellow {
    background:
        linear-gradient(
            135deg,
            #ee9e0a,
            #ffc632
        ) !important;

    color:
        #3c2600 !important;
}


.payroll-center-page
.payroll-filter-chip.lore-status-red {
    background:
        linear-gradient(
            135deg,
            #dc3030,
            #f45555
        ) !important;
}


.payroll-center-page
.payroll-filter-chip.lore-status-blue {
    background:
        linear-gradient(
            135deg,
            #1768dc,
            #258ce9
        ) !important;
}


.payroll-center-page
.payroll-filter-chip.lore-status-gray {
    background:
        linear-gradient(
            135deg,
            #58687e,
            #78879a
        ) !important;
}


/*
   Empty statuses should still be readable and coloured.
   They become quieter, but no longer washed out.
*/

.payroll-center-page
.payroll-filter-chip.is-empty {
    opacity:
        .72 !important;

    filter:
        saturate(.76) !important;
}


.payroll-center-page
.payroll-filter-chip.has-items {
    opacity:
        1 !important;

    filter:
        saturate(1.13) !important;

    box-shadow:
        0 5px 13px rgba(0,0,0,.20) !important;
}


.payroll-center-page
.payroll-filter-chip.is-active {
    opacity:
        1 !important;

    filter:
        saturate(1.22)
        brightness(1.04) !important;

    border-color:
        #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.30),
        0 7px 16px rgba(0,0,0,.25) !important;
}


/* ============================================================
   RUN LIST PANEL
   ============================================================ */

.payroll-center-page .payroll-run-panel {
    overflow: hidden;

    padding:
        0 !important;

    border:
        2px solid #1768c9 !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            180deg,
            #e4f2ff,
            #f8fbff
        ) !important;

    box-shadow:
        0 10px 25px rgba(9,49,96,.17) !important;
}


.payroll-center-page .payroll-list-topline {
    padding:
        14px
        17px !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            100deg,
            #176add,
            #27bde5
        ) !important;

    border-bottom:
        1px solid rgba(0,0,0,.14);
}


.payroll-center-page
.payroll-list-topline
.payroll-muted {
    color:
        rgba(255,255,255,.86) !important;
}


/* Table header */

.payroll-center-page
.payroll-table thead th {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #103966,
            #071f3e
        ) !important;

    border-bottom:
        1px solid #04152e !important;
}


/* ============================================================
   PAYRUN ROW STATUS
   Existing JS assigns these classes from the real status.
   ============================================================ */

.payroll-center-page
.payroll-run--danger td {
    background:
        #ffc3c3 !important;
}

.payroll-center-page
.payroll-run--danger {
    box-shadow:
        inset 8px 0 0 #d62222 !important;
}


.payroll-center-page
.payroll-run--warning td {
    background:
        #ffe28a !important;
}

.payroll-center-page
.payroll-run--warning {
    box-shadow:
        inset 8px 0 0 #dc9600 !important;
}


.payroll-center-page
.payroll-run--attention td {
    background:
        #bcdfff !important;
}

.payroll-center-page
.payroll-run--attention {
    box-shadow:
        inset 8px 0 0 #176fd7 !important;
}


.payroll-center-page
.payroll-run--success td {
    background:
        #bceecf !important;
}

.payroll-center-page
.payroll-run--success {
    box-shadow:
        inset 8px 0 0 #11914f !important;
}


.payroll-center-page
.payroll-run--neutral td {
    background:
        #d9e0e8 !important;
}

.payroll-center-page
.payroll-run--neutral {
    box-shadow:
        inset 8px 0 0 #697789 !important;
}


/* Selected actual run */

.payroll-center-page
.payroll-run-row.is-selected {
    outline:
        3px solid #ffffff !important;

    outline-offset:
        -4px !important;

    filter:
        saturate(1.12);

    box-shadow:
        inset 8px 0 0 currentColor,
        0 0 0 2px #156fd8 !important;
}


/* ============================================================
   STATUS BADGES / NEXT STEP
   ============================================================ */

.payroll-center-page .payroll-status,
.payroll-center-page .payroll-next {
    font-weight:
        900 !important;

    border-radius:
        999px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45);
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.payroll-center-page .payroll-empty {
    color:
        #52657d !important;

    background:
        linear-gradient(
            135deg,
            #e5f1ff,
            #f5f9ff
        ) !important;
}


/* ============================================================
   DETAIL / WORKSPACE PANELS
   ============================================================ */

.payroll-center-page .payroll-panel:not(.payroll-run-panel) {
    border:
        1px solid rgba(36,92,160,.35) !important;

    background:
        linear-gradient(
            145deg,
            #f5f9ff,
            #e5f1ff
        ) !important;

    box-shadow:
        0 9px 22px rgba(12,49,91,.11) !important;
}


/* Persons workspace */

.payroll-center-page:has(
    .payroll-main-tab[data-payroll-main-tab="persons"].is-active
)
.payroll-workspace-panel {
    border:
        2px solid #0aaa99 !important;

    background:
        linear-gradient(
            135deg,
            #b5f1e9,
            #e2faf6
        ) !important;
}


/* Import workspace */

.payroll-center-page:has(
    .payroll-main-tab[data-payroll-main-tab="import"].is-active
)
.payroll-workspace-panel {
    border:
        2px solid #dc850c !important;

    background:
        linear-gradient(
            135deg,
            #ffd48b,
            #fff0c2
        ) !important;
}


/* Test workspace */

.payroll-center-page:has(
    .payroll-main-tab[data-payroll-main-tab="tests"].is-active
)
.payroll-workspace-panel {
    border:
        2px solid #7041d5 !important;

    background:
        linear-gradient(
            135deg,
            #cdbbff,
            #eee7ff
        ) !important;
}


/* Existing person green/yellow/red standard becomes stronger */

.payroll-center-page
.payroll-person-state--green {
    background:
        #43d98b !important;

    border-color:
        #079858 !important;

    color:
        #073d26 !important;
}


.payroll-center-page
.payroll-person-state--yellow {
    background:
        #ffd34f !important;

    border-color:
        #dd9600 !important;

    color:
        #573700 !important;
}


.payroll-center-page
.payroll-person-state--red {
    background:
        #ff7d7d !important;

    border-color:
        #d82e2e !important;

    color:
        #651717 !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {

    .payroll-center-page .payroll-main-tabs {
        display:
            grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .payroll-center-page .payroll-main-tab {
        min-width:
            0;
    }
}


@media (max-width: 520px) {

    .payroll-center-page {
        padding:
            8px !important;
    }

    .payroll-center-page .payroll-main-tabs {
        grid-template-columns:
            1fr;
    }
}

/* LORE V2 LONECENTER VISUAL STATUS V1 END */


/* UI-PAYROLL-GLENN-TEST-V1 - final TEST workspace completion */
.payroll-test-workspace { border: 2px solid rgba(37, 99, 235, .18); }
.payroll-test-mode-card--active { box-shadow: 0 0 0 2px rgba(22, 163, 74, .14) inset; }
.payroll-test-mode-card--active strong { letter-spacing: .04em; }
.payroll-test-safety--locked { border-left: 4px solid currentColor; }
.payroll-test-history-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.payroll-test-run-row { cursor:pointer; }
.payroll-test-run-row:hover { background: rgba(59, 130, 246, .06); }
.payroll-test-db-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(22,163,74,.10); }
.payroll-test-detail { margin-top:18px; }
.payroll-test-preview-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.payroll-test-preview-head strong { display:block; margin-bottom:4px; }
.payroll-test-preview-head span { display:block; opacity:.76; }
.payroll-test-preview-note { margin-top:14px; padding:12px 14px; border-radius:10px; background:rgba(148,163,184,.10); font-size:13px; line-height:1.5; }
.payroll-inline-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* PAYROLL APPROVED STATUS COLORS 20260924 V1 */

/*
   RESTORES THE STATUS PALETTE VISUALLY APPROVED 2026-09-24.

   GREEN  = complete / OK
   YELLOW = control / attention
   RED    = blocked / configuration required
*/


/* ============================================================
   PERSON ROWS - WHOLE ROW
   ============================================================ */

.payroll-center-page .payroll-person-row--green td {
    background: #43d98b !important;
    border-color: #079858 !important;
}

.payroll-center-page .payroll-person-row--green td:first-child {
    border-left-color: #079858 !important;
}


.payroll-center-page .payroll-person-row--yellow td {
    background: #ffd34f !important;
    border-color: #dd9600 !important;
}

.payroll-center-page .payroll-person-row--yellow td:first-child {
    border-left-color: #dd9600 !important;
}


.payroll-center-page .payroll-person-row--red td {
    background: #ff7d7d !important;
    border-color: #d82e2e !important;
}

.payroll-center-page .payroll-person-row--red td:first-child {
    border-left-color: #d82e2e !important;
}


/* ============================================================
   PERSON STATUS LABELS
   ============================================================ */

.payroll-center-page .payroll-person-status--green,
.payroll-center-page .payroll-person-state--green {
    background: #43d98b !important;
    color: #073d26 !important;
}

.payroll-center-page .payroll-person-status--yellow,
.payroll-center-page .payroll-person-state--yellow {
    background: #ffd34f !important;
    color: #573700 !important;
}

.payroll-center-page .payroll-person-status--red,
.payroll-center-page .payroll-person-state--red {
    background: #ff7d7d !important;
    color: #651717 !important;
}

/* PAYROLL APPROVED STATUS COLORS 20260924 V1 END */

/* PAYROLL IMPORT WHOLE ROW STATUS COLORS 20260929 V1 */

/*
   IMPORTANT:
   This block colours the ACTUAL import-agent table rows.
   It does not alter status chips.
*/


.payroll-center-page
.payroll-import-agent-row--green td {
    background: #43d98b !important;
    border-top-color: #079858 !important;
    border-bottom-color: #079858 !important;
}

.payroll-center-page
.payroll-import-agent-row--green td:first-child {
    border-left-color: #079858 !important;
}


.payroll-center-page
.payroll-import-agent-row--yellow td {
    background: #ffd34f !important;
    border-top-color: #dd9600 !important;
    border-bottom-color: #dd9600 !important;
}

.payroll-center-page
.payroll-import-agent-row--yellow td:first-child {
    border-left-color: #dd9600 !important;
}


.payroll-center-page
.payroll-import-agent-row--red td {
    background: #ff7d7d !important;
    border-top-color: #d82e2e !important;
    border-bottom-color: #d82e2e !important;
}

.payroll-center-page
.payroll-import-agent-row--red td:first-child {
    border-left-color: #d82e2e !important;
}


/* PAYROLL IMPORT WHOLE ROW STATUS COLORS 20260929 V1 END */

/* PAYROLL STATUS CHIPS VISIBLE 20260929 V1 */

/*
   WHOLE ROW COLOURS ARE NOT CHANGED.
   These rules only make the existing status pills visible.
*/


.payroll-center-page .payroll-person-status--green,
.payroll-center-page .payroll-person-state--green {
    background: #079858 !important;
    border-color: #057344 !important;
    color: #ffffff !important;
}


.payroll-center-page .payroll-person-status--yellow,
.payroll-center-page .payroll-person-state--yellow {
    background: #b87300 !important;
    border-color: #8f5900 !important;
    color: #ffffff !important;
}


.payroll-center-page .payroll-person-status--red,
.payroll-center-page .payroll-person-state--red {
    background: #d82e2e !important;
    border-color: #a91f1f !important;
    color: #ffffff !important;
}


/* PAYROLL STATUS CHIPS VISIBLE 20260929 V1 END */

/* PAYROLL IMPORT INTRO READABILITY V1 20260930 */
/*
   Readability only:
   - Makes the CTI import introduction readable on the blue workspace.
   - No status colours, calculation logic, API behaviour or business values change.
*/
.payroll-center-page .payroll-import-workspace .payroll-workspace-head > div:first-child > p {
  display: block;
  box-sizing: border-box;
  max-width: 760px;
  margin: 8px 0 0;
  padding: 11px 13px;
  background: #ffffff;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

/* LORE-GUIDED-HELP-V1-PAYROLL-PERSON-PILOT */
.lore-guided-head-right {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.lore-guided-help-launch-btn {
  border:1px solid var(--lore-status-blue-border,#1d4ed8);
  border-radius:10px;
  padding:8px 13px;
  background:var(--lore-status-blue,#2563eb);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(37,99,235,.18);
}

.lore-guided-help-launch-btn:hover {
  background:var(--lore-status-blue-hover,#1d4ed8);
}

.lore-guided-launcher {
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin:0 0 14px;
  padding:16px;
  border:2px solid var(--lore-status-blue-border,#1d4ed8);
  border-radius:16px;
  background:var(--lore-status-blue-soft,#dbeafe);
  color:var(--lore-status-blue-text,#1e3a8a);
}

.lore-guided-launcher h3 {
  margin:2px 0 6px;
}

.lore-guided-launcher p {
  margin:0;
  max-width:760px;
  line-height:1.45;
}

.lore-guided-kicker {
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
}

.lore-guided-launcher-actions,
.lore-guided-row-actions,
.lore-guided-card-actions,
.lore-guided-nav {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.lore-guided-launcher-actions {
  justify-content:flex-end;
}

.lore-guided-example-row td {
  position:relative;
}

.lore-guided-example-row td:first-child::before {
  content:'HJÄLP';
  display:inline-flex;
  margin:0 7px 0 0;
  padding:2px 6px;
  border-radius:999px;
  background:var(--lore-status-blue,#2563eb);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  vertical-align:middle;
}

.lore-guided-inline-link {
  border:0;
  padding:0;
  background:transparent;
  color:#1d4ed8;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:2px;
}

.lore-guided-hide-btn {
  border:1px solid #94a3b8;
  border-radius:9px;
  padding:7px 9px;
  background:#fff;
  color:#475569;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.lore-guided-hide-btn:hover {
  background:#f1f5f9;
}

.lore-guided-help-card {
  margin-top:14px;
  border:2px solid var(--lore-status-blue-border,#1d4ed8);
  box-shadow:0 12px 30px rgba(30,58,138,.12);
  scroll-margin-top:18px;
}

.lore-guided-card-head {
  align-items:flex-start;
}

.lore-guided-card-actions {
  justify-content:flex-end;
}

.lore-guided-progress {
  display:grid;
  gap:8px;
  margin:0 0 12px;
  padding:11px 12px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
}

.lore-guided-progress > div:first-child {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:#1e3a8a;
  font-size:11px;
}

.lore-guided-progress-track {
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#dbeafe;
}

.lore-guided-progress-track > span {
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--lore-status-blue,#2563eb);
  transition:width .2s ease;
}

.lore-guided-tabs button:disabled {
  opacity:.36;
}

.lore-guided-step-banner {
  margin:0 0 13px;
  padding:13px 14px;
  border-left:4px solid var(--lore-status-blue,#2563eb);
  border-radius:0 12px 12px 0;
  background:#eff6ff;
}

.lore-guided-step-banner > span {
  color:#1d4ed8;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.lore-guided-step-banner h4 {
  margin:3px 0 5px;
  color:#1e3a8a;
}

.lore-guided-step-banner p {
  margin:0;
  color:#334155;
  line-height:1.45;
}

.lore-guided-content {
  min-height:180px;
}

.lore-guided-demo-form-grid,
.lore-guided-demo-grid--cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.lore-guided-demo-field {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 12px;
  border:1px solid #cbd5e1;
  border-radius:11px;
  background:#f8fafc;
}

.lore-guided-demo-field > span {
  display:flex;
  align-items:center;
  gap:5px;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.lore-guided-demo-field > strong {
  overflow-wrap:anywhere;
  color:#0f172a;
  font-size:13px;
}

.lore-guided-info-btn {
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  margin-left:4px;
  padding:0;
  border:1px solid #93c5fd;
  border-radius:50%;
  background:#eff6ff;
  color:#1d4ed8;
  font:inherit;
  font-size:11px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  vertical-align:middle;
}

.lore-guided-info-btn:hover {
  background:#dbeafe;
  border-color:#60a5fa;
}

.payroll-person-edit-form label > span,
.payroll-person-setting-form label > span,
.payroll-engagement-create label > span {
  display:flex;
  align-items:center;
  gap:4px;
}

.lore-guided-note {
  margin-top:11px;
  padding:11px 12px;
  border:1px solid #bfdbfe;
  border-radius:11px;
  background:#eff6ff;
  color:#334155;
  line-height:1.45;
}

.lore-guided-note--warning {
  border-color:var(--lore-status-yellow-strong,#dd9600);
  background:var(--lore-status-yellow,#ffd34f);
  color:var(--lore-status-yellow-text,#573700);
}

.lore-guided-finish {
  padding:15px;
  border:2px solid var(--lore-status-red-strong,#d82e2e);
  border-radius:14px;
  background:#fff7f7;
}

.lore-guided-finish.is-complete {
  border-color:var(--lore-status-green-strong,#079858);
  background:#f0fdf4;
}

.lore-guided-finish h4 {
  margin:0 0 9px;
}

.lore-guided-finish ul {
  margin:0 0 12px;
  padding-left:20px;
  line-height:1.55;
}

.lore-guided-finish p {
  margin:0 0 12px;
  line-height:1.45;
}

.lore-guided-nav {
  justify-content:space-between;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #e2e8f0;
}

.lore-guided-nav > span {
  color:#64748b;
  font-size:11px;
  font-weight:900;
}

.lore-guided-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(15,23,42,.48);
}

.lore-guided-modal {
  width:min(520px,100%);
  padding:18px;
  border:1px solid #bfdbfe;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 70px rgba(15,23,42,.26);
}

.lore-guided-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.lore-guided-modal-head span {
  color:#2563eb;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.lore-guided-modal-head h3 {
  margin:2px 0 0;
}

.lore-guided-modal-head > button {
  width:32px;
  height:32px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#f8fafc;
  color:#475569;
  font-size:20px;
  cursor:pointer;
}

.lore-guided-modal p {
  margin:0;
  color:#334155;
  line-height:1.55;
}

.lore-guided-modal-actions {
  display:flex;
  justify-content:flex-end;
  margin-top:15px;
}

@media (max-width:900px) {
  .lore-guided-launcher {
    flex-direction:column;
  }

  .lore-guided-launcher-actions {
    justify-content:flex-start;
  }

  .lore-guided-demo-form-grid,
  .lore-guided-demo-grid--cards {
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:600px) {
  .lore-guided-head-right {
    align-items:flex-start;
  }

  .lore-guided-demo-form-grid,
  .lore-guided-demo-grid--cards {
    grid-template-columns:1fr;
  }

  .lore-guided-card-head,
  .lore-guided-progress > div:first-child {
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ============================================================
   LORE GUIDED HELP V1.1 - END-TO-END JOURNEY
   Starts in Lönecenter and follows the user to completed example.
   ============================================================ */
.lore-guided-global-help-btn {
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:11px;
  background:#315fd6;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(15,23,42,.16);
}

.lore-guided-global-help-btn:hover { filter:brightness(1.06); }

.lore-guided-root-panel,
.lore-guided-person-stage {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:14px 14px 2px;
  padding:17px 18px;
  border:2px solid #2563eb;
  border-radius:16px;
  background:#eaf2ff;
  box-shadow:0 8px 24px rgba(37,99,235,.12);
}

.lore-guided-root-panel.is-active,
.lore-guided-person-stage {
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);
}

.lore-guided-root-copy h3,
.lore-guided-person-stage h3 { margin:3px 0 5px; }

.lore-guided-root-copy p,
.lore-guided-person-stage p {
  margin:0;
  max-width:800px;
  line-height:1.45;
  color:#334155;
}

.lore-guided-root-actions,
.lore-guided-person-stage-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.lore-guided-root-progress {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid #bfdbfe;
  color:#1e3a8a;
}

.lore-guided-root-progress strong { color:#1d4ed8; }

.lore-guided-next-instruction {
  padding:9px 12px;
  border-radius:10px;
  background:#fff;
  border:1px solid #93c5fd;
  color:#1e3a8a;
  font-weight:800;
  white-space:nowrap;
}

.payroll-main-tab.lore-guided-target-tab {
  position:relative;
  z-index:2;
  border-color:#2563eb !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.22), 0 7px 18px rgba(37,99,235,.18) !important;
  animation:loreGuidedPulse 1.35s ease-in-out infinite;
}

.payroll-main-tab.lore-guided-target-tab::after {
  content:'BÖRJA HÄR';
  position:absolute;
  right:-8px;
  top:-12px;
  padding:3px 7px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
}

.lore-guided-target-row {
  position:relative;
  outline:4px solid rgba(37,99,235,.28);
  outline-offset:2px;
  animation:loreGuidedPulseRow 1.35s ease-in-out infinite;
}

@keyframes loreGuidedPulse {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}

@keyframes loreGuidedPulseRow {
  0%,100% { outline-color:rgba(37,99,235,.22); }
  50% { outline-color:rgba(37,99,235,.52); }
}

@media (prefers-reduced-motion: reduce) {
  .payroll-main-tab.lore-guided-target-tab,
  .lore-guided-target-row { animation:none; }
}

@media (max-width:900px) {
  .lore-guided-root-panel,
  .lore-guided-person-stage {
    flex-direction:column;
    align-items:flex-start;
  }
  .lore-guided-root-actions,
  .lore-guided-person-stage-actions { justify-content:flex-start; }
}


/* LORE GUIDED HELP V1.2 - MANUAL REFERENCES */
.lore-guided-manual-ref {
  margin:8px 0 0;
  font-size:13px;
  line-height:1.4;
  color:#274b82;
}
.lore-guided-modal .lore-guided-manual-ref {
  margin-top:12px;
  padding:9px 11px;
  border-radius:10px;
  background:#eef5ff;
  border:1px solid #c9dcff;
}