/* Payroll — AQ360 ERP module */
body[data-view="payroll"] .view { background:#f4f7fb; }
body[data-view="payroll"] .payroll-dashboard {
  --payroll-ink:#12233f;
  --payroll-muted:#687991;
  --payroll-line:#dfe6ef;
  display:grid;
  gap:14px;
  max-width:1480px;
  margin:0 auto;
}

body[data-view="payroll"] .payroll-module-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:66px;
}
body[data-view="payroll"] .payroll-module-head h1 { margin:2px 0 3px; color:var(--payroll-ink); font-size:24px; line-height:1.1; letter-spacing:-.025em; }
body[data-view="payroll"] .payroll-module-head p { margin:0; color:var(--payroll-muted); font-size:12px; }
body[data-view="payroll"] .payroll-eyebrow { color:#718096; font-size:9px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
body[data-view="payroll"] .payroll-period-chip {
  display:flex; align-items:center; gap:10px; min-width:190px; padding:9px 13px;
  border:1px solid var(--payroll-line); border-radius:9px; color:#2367d1; background:#fff;
}
body[data-view="payroll"] .payroll-period-chip svg { width:19px; height:19px; }
body[data-view="payroll"] .payroll-period-chip span { display:grid; gap:1px; }
body[data-view="payroll"] .payroll-period-chip small { color:#7a899d; font-size:8.5px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
body[data-view="payroll"] .payroll-period-chip strong { color:var(--payroll-ink); font-size:11px; }

body[data-view="payroll"] .payroll-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body[data-view="payroll"] .payroll-kpi-card {
  position:relative; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:12px;
  min-height:76px; padding:11px 14px; overflow:hidden; border:1px solid var(--payroll-line);
  border-radius:10px; background:#fff; box-shadow:0 2px 7px rgba(20,41,74,.035);
}
body[data-view="payroll"] .payroll-kpi-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#2f73e8; }
body[data-view="payroll"] .payroll-kpi-card.green::before { background:#20a66a; }
body[data-view="payroll"] .payroll-kpi-card.orange::before { background:#ef8c25; }
body[data-view="payroll"] .payroll-kpi-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; color:#2f73e8; background:#edf4ff; }
body[data-view="payroll"] .payroll-kpi-icon.green { color:#14945c; background:#eaf8f1; }
body[data-view="payroll"] .payroll-kpi-icon.orange { color:#e57b13; background:#fff3e6; }
body[data-view="payroll"] .payroll-kpi-icon svg { width:18px; height:18px; }
body[data-view="payroll"] .payroll-kpi-card p { margin:0 0 2px; color:#718096; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.045em; }
body[data-view="payroll"] .payroll-kpi-card strong { display:block; overflow:hidden; color:var(--payroll-ink); font-size:18px; line-height:1.05; white-space:nowrap; text-overflow:ellipsis; }
body[data-view="payroll"] .payroll-kpi-status { display:flex; align-items:center; gap:5px; margin-top:4px; color:#63748a; font-size:9px; font-weight:700; }
body[data-view="payroll"] .payroll-kpi-status i { width:6px; height:6px; border-radius:50%; background:currentColor; }
body[data-view="payroll"] .payroll-kpi-status.red { color:#dc3545; }
body[data-view="payroll"] .payroll-kpi-status.green { color:#15955e; }
body[data-view="payroll"] .payroll-kpi-status.orange { color:#d97706; }
body[data-view="payroll"] .payroll-kpi-menu { display:none; }

body[data-view="payroll"] .payroll-action-panel,
body[data-view="payroll"] .payroll-section-card { border:1px solid var(--payroll-line); border-radius:11px; background:#fff; box-shadow:0 3px 10px rgba(20,41,74,.04); }
body[data-view="payroll"] .payroll-action-panel {
  display:grid; grid-template-columns:minmax(230px,1fr) auto auto; align-items:center; gap:24px; min-height:82px; padding:13px 16px;
}
body[data-view="payroll"] .payroll-action-copy h2 { margin:3px 0; color:var(--payroll-ink); font-size:15px; letter-spacing:-.015em; }
body[data-view="payroll"] .payroll-action-copy p { margin:0; color:var(--payroll-muted); font-size:9.5px; }
body[data-view="payroll"] .payroll-workflow { display:flex; align-items:flex-start; }
body[data-view="payroll"] .payroll-workflow span { position:relative; display:grid; justify-items:center; gap:4px; min-width:70px; color:#8a98aa; font-size:8.5px; font-weight:750; }
body[data-view="payroll"] .payroll-workflow span:not(:last-child)::after { content:""; position:absolute; top:10px; left:calc(50% + 12px); width:calc(100% - 24px); height:1px; background:#dbe3ec; }
body[data-view="payroll"] .payroll-workflow span.done:not(:last-child)::after { background:#269b68; }
body[data-view="payroll"] .payroll-workflow i { z-index:1; display:grid; place-items:center; width:21px; height:21px; border:1px solid #d7e0ea; border-radius:50%; color:#8291a4; background:#fff; font-size:8px; font-style:normal; }
body[data-view="payroll"] .payroll-workflow .done { color:#198b5b; }
body[data-view="payroll"] .payroll-workflow .done i { border-color:#269b68; color:#fff; background:#269b68; }
body[data-view="payroll"] .payroll-workflow .current { color:#205fae; }
body[data-view="payroll"] .payroll-workflow .current i { border:2px solid #3478d5; color:#2468bc; background:#edf5ff; }
body[data-view="payroll"] .payroll-action-buttons { display:flex; align-items:center; gap:7px; }
body[data-view="payroll"] .payroll-action-buttons button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; height:32px; padding:0 12px; border-radius:7px; font-size:9.5px; font-weight:800; white-space:nowrap; }
body[data-view="payroll"] .payroll-action-buttons svg { width:14px; height:14px; }
body[data-view="payroll"] .payroll-primary-action { border-color:#1b5d91!important; color:#fff!important; background:#1b5d91!important; box-shadow:none!important; }
body[data-view="payroll"] .payroll-action-buttons button:disabled { border-color:#dfe6ee!important; color:#9ba8b8!important; background:#f3f6f9!important; box-shadow:none!important; opacity:1!important; cursor:not-allowed!important; }

body[data-view="payroll"] .payroll-section-card { overflow:hidden; padding:0; }
body[data-view="payroll"] .payroll-section-head { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:0 15px; border-bottom:1px solid #e5ebf2; }
body[data-view="payroll"] .payroll-section-head h2 { margin:0; color:var(--payroll-ink); font-size:14px; letter-spacing:-.01em; }
body[data-view="payroll"] .payroll-section-head p { margin:2px 0 0; color:#7b899b; font-size:8.5px; }
body[data-view="payroll"] .payroll-section-head > span { padding:4px 8px; border:1px solid #dae3ed; border-radius:999px; color:#617186; background:#f8fafc; font-size:8.5px; font-weight:800; }
body[data-view="payroll"] .payroll-section-head > span.attention { border-color:#f2d5b4; color:#b8600b; background:#fff8ee; }
body[data-view="payroll"] .payroll-section-head > span.ready { border-color:#bfe5d2; color:#168756; background:#eefaf4; }
body[data-view="payroll"] .payroll-lines-card { min-height:116px; }
body[data-view="payroll"] .payroll-empty-state { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:11px; min-height:70px; padding:10px 15px; }
body[data-view="payroll"] .payroll-empty-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:#2b6fd2; background:#edf4ff; }
body[data-view="payroll"] .payroll-empty-icon svg { width:16px; height:16px; }
body[data-view="payroll"] .payroll-empty-state strong { color:var(--payroll-ink); font-size:10.5px; }
body[data-view="payroll"] .payroll-empty-state p { margin:3px 0 0; color:#78879a; font-size:9px; }
body[data-view="payroll"] .payroll-alert { display:flex; align-items:center; gap:9px; margin:9px 13px 0; padding:8px 10px; border:1px solid #f2dbc1; border-radius:7px; color:#c26711; background:#fffaf3; }
body[data-view="payroll"] .payroll-alert svg { width:17px; height:17px; }
body[data-view="payroll"] .payroll-alert span { display:grid; gap:1px; }
body[data-view="payroll"] .payroll-alert strong { color:#8f4b0d; font-size:9.5px; }
body[data-view="payroll"] .payroll-alert small { color:#96704d; font-size:8.5px; }
body[data-view="payroll"] .payroll-section-card .table-wrap { max-height:228px; overflow:auto; border:0; border-radius:0; }
body[data-view="payroll"] .payroll-section-card table { margin:0; }
body[data-view="payroll"] .payroll-section-card th { height:31px; padding:0 14px; color:#64758a; background:#f5f8fb; font-size:8px; letter-spacing:.055em; }
body[data-view="payroll"] .payroll-section-card td { height:36px; padding:0 14px; color:#283b54; font-size:9px; }
body[data-view="payroll"] .payroll-section-card tbody tr:hover td { background:#f7faff; }
body[data-view="payroll"] .payroll-section-card td.payroll-missing { color:#b65d08; font-weight:750; }
body[data-view="payroll"] .payroll-section-card .status { padding:3px 7px; border-radius:999px; box-shadow:none; font-size:8px; font-weight:800; }

@media (max-width:1100px) {
  body[data-view="payroll"] .payroll-action-panel { grid-template-columns:1fr auto; }
  body[data-view="payroll"] .payroll-workflow { grid-row:2; }
  body[data-view="payroll"] .payroll-action-buttons { grid-column:2; grid-row:1 / span 2; }
}
@media (max-width:760px) {
  body[data-view="payroll"] .payroll-module-head { align-items:flex-start; }
  body[data-view="payroll"] .payroll-module-head p { display:none; }
  body[data-view="payroll"] .payroll-kpis { grid-template-columns:1fr; }
  body[data-view="payroll"] .payroll-action-panel { grid-template-columns:1fr; gap:14px; }
  body[data-view="payroll"] .payroll-workflow,
  body[data-view="payroll"] .payroll-action-buttons { grid-column:auto; grid-row:auto; }
  body[data-view="payroll"] .payroll-action-buttons { display:grid; grid-template-columns:1fr; }
}

/* Authoritative payroll layout; legacy dashboard passes use !important. */
html body[data-view="payroll"] .view {
  height:auto!important; min-height:calc(100vh - 52px)!important;
  padding:12px 18px 24px!important; overflow:auto!important; background:#f4f7fb!important;
}
html body[data-view="payroll"] .payroll-dashboard {
  display:grid!important; grid-template-rows:none!important; align-content:start!important;
  gap:12px!important; min-height:0!important; max-width:1480px!important;
}
html body[data-view="payroll"] .payroll-kpis { margin:0!important; gap:8px!important; }
/* Payroll summary: an operational control strip, not dashboard KPI cards. */
html body[data-view="payroll"] .payroll-summary {
  display:grid!important; grid-template-columns:minmax(190px,.82fr) minmax(210px,.92fr) minmax(310px,1.3fr)!important;
  align-items:stretch!important; gap:0!important; overflow:hidden!important;
  border:1px solid #d8e0e9!important; border-radius:7px!important; background:#fff!important;
  box-shadow:0 1px 2px rgba(15,35,60,.035)!important;
}
html body[data-view="payroll"] .payroll-summary > div {
  min-height:66px!important; padding:12px 15px!important; border-right:1px solid #e5eaf0!important;
}
html body[data-view="payroll"] .payroll-summary > div:last-child { border-right:0!important; }
html body[data-view="payroll"] .payroll-summary-label {
  display:block!important; margin:0 0 5px!important; color:#6b7b8f!important;
  font-size:9px!important; font-weight:800!important; letter-spacing:.06em!important; line-height:1!important; text-transform:uppercase!important;
}
html body[data-view="payroll"] .payroll-summary strong { display:block!important; color:#172b45!important; font-size:15px!important; line-height:1.15!important; letter-spacing:-.01em!important; }
html body[data-view="payroll"] .payroll-summary small,
html body[data-view="payroll"] .payroll-summary-state { display:block!important; margin-top:5px!important; color:#68798c!important; font-size:9px!important; font-weight:700!important; line-height:1!important; }
html body[data-view="payroll"] .payroll-summary-state::before,
html body[data-view="payroll"] .payroll-summary small::before { content:""; display:inline-block!important; width:5px!important; height:5px!important; margin:0 5px 1px 0!important; border-radius:50%!important; background:#8a99aa!important; }
html body[data-view="payroll"] .payroll-summary-state.is-draft { color:#a14e5a!important; }
html body[data-view="payroll"] .payroll-summary-state.is-draft::before { background:#bb3145!important; }
html body[data-view="payroll"] .payroll-summary-state.is-pending,
html body[data-view="payroll"] .payroll-summary-metric small { color:#a56a15!important; }
html body[data-view="payroll"] .payroll-summary-state.is-pending::before,
html body[data-view="payroll"] .payroll-summary-metric small::before { background:#cf851b!important; }
html body[data-view="payroll"] .payroll-summary-state.is-complete { color:#16734d!important; }
html body[data-view="payroll"] .payroll-summary-state.is-complete::before { background:#199564!important; }
html body[data-view="payroll"] .payroll-summary-exception { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; background:#fffbf4!important; }
html body[data-view="payroll"] .payroll-summary-exception.needs-action { border-left:3px solid #d38a22!important; padding-left:12px!important; }
html body[data-view="payroll"] .payroll-summary-exception.needs-action small { color:#a5620b!important; }
html body[data-view="payroll"] .payroll-summary-exception.needs-action small::before { background:#d58212!important; }
html body[data-view="payroll"] .payroll-summary-exception.is-ready { background:#f6fbf8!important; }
html body[data-view="payroll"] .payroll-summary-exception.is-ready small { color:#177551!important; }
html body[data-view="payroll"] .payroll-summary-exception.is-ready small::before { background:#1b9663!important; }
html body[data-view="payroll"] .payroll-summary-action { flex:0 0 auto!important; min-height:28px!important; padding:0 9px!important; border-color:#d6a565!important; border-radius:5px!important; color:#89530c!important; background:#fffdf9!important; font-size:9px!important; font-weight:800!important; }
html body[data-view="payroll"] .payroll-summary-ready { display:flex!important; align-items:center!important; gap:4px!important; color:#197653!important; font-size:9px!important; font-weight:800!important; white-space:nowrap!important; }
html body[data-view="payroll"] .payroll-summary-ready svg { width:13px!important; height:13px!important; }
html body[data-view="payroll"] .payroll-kpi-card {
  height:62px!important; min-height:62px!important; padding:8px 10px!important;
  grid-template-columns:32px minmax(0,1fr)!important; gap:9px!important;
  border-radius:7px!important;
}
html body[data-view="payroll"] .payroll-kpi-icon {
  width:32px!important; height:32px!important; min-width:32px!important; border-radius:8px!important;
}
html body[data-view="payroll"] .payroll-kpi-icon svg {
  width:15px!important; height:15px!important; min-width:15px!important;
}
html body[data-view="payroll"] .payroll-kpi-card p {
  margin:0 0 2px!important; color:#40516a!important; font-size:8.5px!important;
  line-height:1!important; text-transform:none!important;
}
html body[data-view="payroll"] .payroll-kpi-card strong { font-size:15px!important; line-height:1!important; }
html body[data-view="payroll"] .payroll-kpi-status {
  display:flex!important; margin-top:4px!important; font-size:7.5px!important; line-height:1!important;
}
html body[data-view="payroll"] .payroll-kpi-status i { width:4px!important; height:4px!important; }
html body[data-view="payroll"] .payroll-dashboard svg,
html body[data-view="payroll"] .payroll-dashboard svg path,
html body[data-view="payroll"] .payroll-dashboard svg rect,
html body[data-view="payroll"] .payroll-dashboard svg circle {
  fill:none!important; stroke:currentColor!important; stroke-width:2!important;
  stroke-linecap:round!important; stroke-linejoin:round!important;
}
html body[data-view="payroll"] .payroll-action-panel {
  display:grid!important; grid-template-columns:minmax(300px,1fr) auto auto!important;
  min-height:68px!important; height:auto!important; padding:10px 12px!important; gap:16px!important;
}
html body[data-view="payroll"] .payroll-action-copy h2 { margin:2px 0 3px!important; font-size:13px!important; }
html body[data-view="payroll"] .payroll-action-copy p { margin:0!important; font-size:8.5px!important; }
html body[data-view="payroll"] .payroll-workflow { display:flex!important; }
html body[data-view="payroll"] .payroll-workflow span { min-width:60px!important; font-size:7.5px!important; }
html body[data-view="payroll"] .payroll-workflow i { width:18px!important; height:18px!important; font-size:7px!important; }
html body[data-view="payroll"] .payroll-workflow i svg { width:9px!important; height:9px!important; }
html body[data-view="payroll"] .payroll-workflow span:not(:last-child)::after { top:9px!important; }
html body[data-view="payroll"] .payroll-action-buttons { display:flex!important; flex-wrap:nowrap!important; }
html body[data-view="payroll"] .payroll-action-buttons button {
  min-height:28px!important; height:28px!important; padding:0 9px!important; font-size:8.5px!important;
  border-radius:6px!important;
}
html body[data-view="payroll"] .payroll-primary-action { border-color:#2563eb!important; background:#2563eb!important; }
html body[data-view="payroll"] .payroll-section-card {
  min-height:0!important; padding:0!important; overflow:hidden!important;
}
html body[data-view="payroll"] .payroll-section-head { min-height:38px!important; padding:0 12px!important; }
html body[data-view="payroll"] .payroll-section-head h2 { font-size:12px!important; }
html body[data-view="payroll"] .payroll-section-head p { font-size:7.5px!important; }
html body[data-view="payroll"] .payroll-section-head > span {
  min-height:0!important; padding:3px 7px!important; font-size:7.5px!important;
}
html body[data-view="payroll"] .payroll-lines-card { min-height:94px!important; }
html body[data-view="payroll"] .payroll-empty-state { min-height:56px!important; padding:8px 12px!important; }
html body[data-view="payroll"] .payroll-empty-icon { width:26px!important; height:26px!important; }
html body[data-view="payroll"] .payroll-empty-state strong { font-size:9px!important; }
html body[data-view="payroll"] .payroll-empty-state p { font-size:7.5px!important; }
html body[data-view="payroll"] .payroll-alert { margin:7px 10px 0!important; padding:6px 8px!important; }
html body[data-view="payroll"] .payroll-alert strong { font-size:8px!important; }
html body[data-view="payroll"] .payroll-alert small { font-size:7.5px!important; }
html body[data-view="payroll"] .payroll-wps-card .table-wrap,
html body[data-view="payroll"] .payroll-section-card .table-wrap {
  max-height:none!important; overflow-x:auto!important; overflow-y:visible!important; scrollbar-width:thin;
}
html body[data-view="payroll"] .payroll-section-card table { min-width:720px!important; table-layout:auto!important; }
html body[data-view="payroll"] .payroll-section-card th,
html body[data-view="payroll"] .payroll-section-card td {
  height:30px!important; padding:5px 11px!important; font-size:8px!important;
}
html body[data-view="payroll"] .payroll-section-card th:first-child,
html body[data-view="payroll"] .payroll-section-card td:first-child { width:30%!important; }

@media (max-width:1180px) {
  html body[data-view="payroll"] .payroll-kpis { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  html body[data-view="payroll"] .payroll-summary { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html body[data-view="payroll"] .payroll-summary-exception { grid-column:1 / -1!important; border-top:1px solid #e5eaf0!important; }
  html body[data-view="payroll"] .payroll-action-panel { grid-template-columns:1fr auto!important; }
  html body[data-view="payroll"] .payroll-workflow {
    grid-column:1!important; grid-row:2!important; justify-self:start!important;
  }
  html body[data-view="payroll"] .payroll-action-buttons {
    grid-column:2!important; grid-row:1 / span 2!important;
  }
}
@media (max-width:760px) {
  html body[data-view="payroll"] .view { padding:16px 12px 24px!important; }
  html body[data-view="payroll"] .payroll-kpis { grid-template-columns:1fr!important; }
  html body[data-view="payroll"] .payroll-summary { grid-template-columns:1fr!important; }
  html body[data-view="payroll"] .payroll-summary > div { min-height:0!important; padding:11px 12px!important; border-right:0!important; border-bottom:1px solid #e5eaf0!important; }
  html body[data-view="payroll"] .payroll-summary > div:last-child { border-bottom:0!important; }
  html body[data-view="payroll"] .payroll-summary-exception { grid-column:auto!important; }
  html body[data-view="payroll"] .payroll-action-panel { grid-template-columns:1fr!important; }
  html body[data-view="payroll"] .payroll-workflow,
  html body[data-view="payroll"] .payroll-action-buttons { grid-column:1!important; grid-row:auto!important; }
  html body[data-view="payroll"] .payroll-action-buttons {
    display:grid!important; grid-template-columns:1fr!important;
  }
}