:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #18202f;
  --muted: #647084;
  --line: #dce2ea;
  --accent: #0f766e;
  --accent-dark: #18202f;
  --warn-bg: #fff1f2;
  --warn-line: #fecdd3;
  --warn-ink: #be123c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a {
  color: inherit;
}

strong,
b {
  font-weight: 600;
}

.center-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(100%, 420px);
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 50px rgba(24, 32, 47, 0.08);
}

.signup-card {
  width: min(100%, 520px);
}

.menu-panel-group a {
	margin-bottom:5px;
}

.auth-card .platform-brand-link.eyebrow {
  margin-bottom: 10px;
}

.auth-card h1 {
  margin-bottom: 22px;
  font-size: 25px;
  line-height: 1.2;
}

.auth-card h1 + .muted {
  margin-bottom: 18px;
}

.auth-card p {
  font-size: 15px;
}

.tenant-status-card .primary-button {
  width: fit-content;
  margin-top: 6px;
  padding-right: 18px;
  padding-left: 18px;
}

.auth-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
  margin: 16px 0 0;
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 600;
}

.auth-card-footer a {
  text-decoration: none;
}

.auth-card-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-link {
  display: inline-flex;
  text-decoration: none;
}

.topbar .brand-link {
  margin-bottom: 0;
  font-size: 14px;
}

.brand-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.platform-brand-link {
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.platform-brand-logo {
  display: block;
  width: auto;
  height: 20px;
  object-fit: contain;
}

.platform-brand-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.platform-brand-name {
  color: #17202d;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.topbar h1 .platform-brand-link {
  font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
th {
  font-weight: 600 !important;
}

h1 {
  margin-bottom: 22px;
  font-size: 25px;
}

.muted {
  color: var(--muted);
  line-height: 1.5;
}

.login-form {
  display: grid;
  gap: 16px;
}

.account-name-field {
  display: grid;
  gap: 7px;
}

.account-name-field span {
  margin-bottom: 0;
}

.account-name-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  min-width: 0;
}

.account-name-label-row > span:first-child {
  font-size: 14px;
  font-weight: 600;
}

.account-name-example {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

.account-name-control {
  display: block;
}

.account-name-status {
  display: inline-flex;
  min-width: 0;
  justify-content: center;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.account-name-status[hidden] {
  display: none;
}

.account-name-status[data-state="available"] {
  border-color: #99f6e4;
  background: #ecfdf5;
  color: #047857;
}

.account-name-status[data-state="taken"],
.account-name-status[data-state="invalid"],
.account-name-status[data-state="error"] {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.account-name-status[data-state="checking"] {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.signup-security-check {
  display: grid;
  gap: 8px;
}

.signup-security-check > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

label span {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
}

.inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.inline-toggle span {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.settings-section-gap {
  margin-bottom: 20px;
}

.settings-inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

.settings-option-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfe;
}

.settings-option-box > span {
  display: grid;
  gap: 2px;
}

.settings-option-box > span small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.company-email-form {
  gap: 14px;
}

.company-email-form .checkbox-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.company-email-enabled {
  justify-content: flex-start;
  width: min(100%, 520px);
}

.company-email-enabled input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

.company-email-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  max-width: 760px;
}

.company-email-choice {
  align-items: flex-start;
  min-height: 76px;
  padding: 14px;
}

.company-email-choice input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin-top: 3px;
  padding: 0;
}

.company-email-choice > span {
  gap: 4px;
}

.company-email-choice strong {
  font-size: 14px;
  line-height: 1.35;
}

.compact-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.compact-field span {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.compact-field input {
  width: 96px;
}

.inline-admin-form,
.inline-action-form,
.inline-field-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.inline-action-form {
  width: auto;
}

.inline-field-row input,
.inline-field-row select,
.inline-admin-form input,
.inline-admin-form select {
  min-width: 92px;
}

.settings-save-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.settings-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.table-pager {
  justify-content: space-between;
  padding: 12px 16px;
}

.payroll-advanced-panel {
  display: grid;
  gap: 16px;
  padding: 16px 20px 20px;
}

.accordion-head {
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.accordion-head + .accordion-panel {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.accordion-toggle::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}

.accordion-toggle[aria-expanded="false"]::before {
  transform: rotate(-45deg);
}

.save-status {
  min-width: 56px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.save-status.success {
  color: var(--accent-dark);
}

.save-status.error {
  color: var(--warn-ink);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 8px !important;
  font-size:14px !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
  padding: 8px;
  font-size: 15px;
}

textarea {
  min-height: 118px;
  padding: 12px;
  line-height: 1.45;
  resize: vertical;
  padding: 6px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(15, 118, 110, 0.16);
  padding: 8px;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.primary-button:hover {
  background: var(--accent-dark);
}

.center-page .primary-button {
  background: #17202d;
}

.center-page .primary-button:hover {
  background: #263244;
}

.alert {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--warn-line);
  border-radius: 6px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 14px;
}

.notice {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 14px;
  font-weight: 600;
}

.credential-box {
  display: grid;
  gap: 6px;
  margin: 20px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.credential-box span {
  color: var(--muted);
  font-size: 13px;
}

code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #eef2f7;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
}

.topbar > div {
  display: grid;
  gap: 3px;
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.topbar nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.topbar nav a.topbar-signup-link {
  border-color: var(--accent-dark);
  background: var(--accent);
  color: #fff;
}

.topbar nav a.topbar-login-link {
  border-color: #bfdbfe;
  background: #2563eb;
  color: #fff;
}

.topbar nav a:hover {
  filter: brightness(0.97);
}

.topbar-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.topbar-link-button:hover {
  filter: brightness(0.97);
}

.app-menu {
  position: relative;
}

.attention-menu {
  position: relative;
}

.attention-button,
.topbar-help-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
}

.topbar nav .topbar-help-button {
  color: #475569;
}

.attention-button:hover,
.attention-button[aria-expanded="true"],
.topbar-help-button:hover {
  border-color: #5eead4;
  background: #f8fffd;
  color: #0f766e;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.attention-button svg,
.topbar-help-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.topbar-help-button svg {
  width: 21px !important;
  min-width: 21px;
  height: 21px !important;
  stroke-width: 1.8;
}

.attention-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
}

.attention-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 22;
  width: min(370px, calc(100vw - 32px));
  max-height: min(76vh, 600px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(24, 32, 47, 0.16);
}

.attention-panel[hidden] {
  display: none;
}

.attention-panel-head {
  display: grid;
  gap: 3px;
  margin-bottom: 7px;
  padding: 10px 12px 12px;
}

.attention-panel-head strong {
  color: var(--ink);
  font-size: 15px;
}

.attention-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.attention-list {
  display: grid;
  gap: 4px;
}

.topbar nav .attention-item {
  display: grid;
  align-content: center;
  justify-content: stretch;
  gap: 3px;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}

.topbar nav .attention-item:hover {
  background: #f8fafc;
}

.topbar nav .attention-item.attention {
  background: #fffbeb;
}

.topbar nav .attention-item.warning {
  background: #fff7ed;
}

.topbar nav .attention-item strong,
.topbar nav .attention-item span {
  display: block;
}

.topbar nav .attention-item strong {
  font-size: 14px;
  line-height: 1.25;
}

.topbar nav .attention-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.attention-empty {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.attention-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 4px 10px 4px 5px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.menu-button:hover,
.menu-button[aria-expanded="true"] {
  border-color: #5eead4;
  background: #f8fffd;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.menu-username {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.menu-button[aria-expanded="true"] .menu-caret {
  transform: rotate(225deg) translateY(-2px);
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  display: grid;
  width: min(328px, calc(100vw - 32px));
  max-height: min(76vh, 680px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(24, 32, 47, 0.16);
}

.menu-panel-admin {
  width: min(664px, calc(100vw - 32px));
}

.menu-panel-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.menu-panel-group {
  min-width: 0;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  padding: 10px 12px 12px;
}

.menu-panel-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.menu-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.menu-panel-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-group-label {
  margin: 10px 10px 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.topbar nav .menu-panel a {
  display: grid;
  align-content: center;
  justify-content: stretch;
  gap: 3px;
  min-height: 56px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.topbar nav .menu-panel a strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.topbar nav .menu-panel a span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.topbar nav .menu-panel a .menu-item-description {
  display: -webkit-box;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topbar nav .menu-panel a:hover,
.topbar nav .menu-panel a.is-active {
  background: #ecfdf5;
  color: var(--accent-dark);
}

.topbar nav .menu-panel a:hover span,
.topbar nav .menu-panel a.is-active span {
  color: #47645f;
}

.topbar nav .menu-panel a.danger-link {
  color: #be123c;
}

.topbar nav .menu-panel a.danger-link:hover {
  background: #fff1f2;
}

.topbar nav .menu-panel a.danger-link span {
  color: #9f5061;
}

.topbar nav .menu-panel .menu-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.topbar nav .menu-panel .menu-logout-button:hover {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
}


.compact-button {
  min-height: 38px;
  padding: 0 14px;
}

.icon-label-button {
  gap: 8px;
}

.icon-label-button span:first-child {
  font-size: 20px;
  line-height: 1;
}

.shell {
  width: min(1120px, calc(100% - 40px));
  margin: 32px auto;
}

.shell.full-shell {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  padding-right: 32px;
  padding-left: 32px;
}

.payroll-shell {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 40px;
}

.payroll-shell > .section-head,
.payroll-shell > .report-card-grid,
.payroll-shell > .payroll-action-grid,
.payroll-shell > .settings-section-gap {
  margin-bottom: 0;
}

.payroll-shell > .settings-section-head:first-child {
  margin-top: 0;
}

.onboarding-guide-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdfa 100%);
  color: #17202d;
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.07);
}

.onboarding-guide-banner strong,
.onboarding-guide-banner p {
  margin: 0;
}

.onboarding-guide-banner strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}

.onboarding-guide-banner p {
  max-width: 760px;
  color: #4d5d73;
  font-size: 14px;
  line-height: 1.5;
}

.onboarding-guide-kicker {
  color: #0f766e;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.onboarding-guide-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.onboarding-guide-actions .compact-button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: none;
}

.onboarding-guide-actions .secondary-button {
  border-color: rgba(15, 118, 110, 0.18);
  background: rgba(255, 255, 255, 0.58);
  color: #0f766e;
}

.onboarding-guide-actions .primary-button {
  border: 1px solid rgba(15, 118, 110, 0.2);
  background: rgba(204, 251, 241, 0.72);
  color: #18202f;
}

.onboarding-guide-actions .secondary-button:hover,
.onboarding-guide-actions .primary-button:hover {
  border-color: rgba(15, 118, 110, 0.32);
  background: rgba(255, 255, 255, 0.78);
  color: #0f766e;
}

.app-page-head {
  align-items: start;
  padding-bottom: 4px;
}

.app-page-head h2 {
  margin-bottom: 7px;
  font-size: 25px;
}

.app-page-head .muted {
  max-width: 680px;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.hero-panel h2 {
  margin-bottom: 10px;
  font-size: 25px;
  letter-spacing: 0;
}

.status-stack {
  display: grid;
  gap: 12px;
}

.status-stack div,
.workspace-grid article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.status-stack span,
.workspace-grid p {
  color: var(--muted);
}

.status-stack span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #ccfbf1;
  color: #134e4a;
  font-weight: 600;
}

.workspace-grid h3 {
  margin-bottom: 8px;
}

.workspace-grid p {
  margin-bottom: 0;
  line-height: 1.5;
}

.table-panel {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  margin-bottom:30px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  text-transform: uppercase;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.empty-state {
  display: grid;
  gap: 4px;
  padding: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

.empty-state strong {
  color: var(--ink);
}

.inline-empty {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfe;
}

.field-key {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.data-table .field-key {
  display: inline;
  margin: 0 0 0 7px;
  white-space: nowrap;
}

.field-key-highlight {
  display: inline-flex !important;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-weight: 600;
}

.type-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #ccfbf1;
  color: #134e4a;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

#tblSections .type-badge,
#tblAdditional .type-badge {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.settings-section-head {
  margin-top: 30px;
}

.company-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
}

.company-panel {
  margin-bottom: 0;
}

.advanced-page-settings .attendance-settings-section,
.advanced-page-attendance .payroll-settings-section:not(.attendance-settings-section),
.advanced-page-attendance .payroll-settings-group-label {
  display: none;
}

.advanced-page-attendance .attendance-settings-section {
  display: block;
}

.advanced-page-attendance .payroll-settings-accordion {
  gap: 14px;
}

.system-check-section {
  display: none !important;
}

.settings-shell {
  max-width: 1120px;
}

.user-access-panel {
  overflow: hidden;
}

.company-summary-logo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.company-summary-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.company-summary-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  flex: 1;
}

.company-summary-content > div {
  display: grid;
  align-content: start;
  gap: 3px;
}

.company-summary strong {
  font-size: 18px;
}

.company-summary span {
  color: var(--muted);
}

.pre-line-text {
  white-space: pre-line;
}

.section-head h2 {
  margin-bottom: 0;
  font-size: 22px;
}

.section-head .muted {
  max-width: 420px;
  margin: 0;
}

.root-badge {
  display: inline-flex;
  margin-left: 8px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.status-pill {
  display: inline-flex;
  min-width: 40px;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.status-pill.yes {
  border-color: #99f6e4;
  background: #ccfbf1;
  color: #134e4a;
}

#tblSections .status-pill,
#tblSections .status-pill.yes,
#tblAdditional .status-pill,
#tblAdditional .status-pill.yes {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compact-select {
  min-height: 34px;
  min-width: 130px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 6px 28px 6px 10px;
  font-size: 13px;
}

.applicant-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.detail-list {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px 14px;
  margin: 0;
}

.detail-list dt {
  color: var(--muted);
  font-size: 12px;
}

.detail-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.detail-block {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.detail-block strong {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.detail-block span {
  color: var(--ink);
  white-space: pre-wrap;
}

.compact-panel-head {
  margin-bottom: 10px;
}

.inline-upload-form,
.note-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.inline-upload-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.inline-upload-form input,
.note-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fff;
}

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

.note-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcfe;
}

.note-item p {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
}

.note-item span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.secondary-button,
.danger-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.danger-button {
  border-color: #fecdd3;
  color: #be123c;
}

.reserve-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.reserve-button:hover {
  border-color: #93c5fd;
  background: #dbeafe;
}

.invoice-generated-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  background: #dcfce7;
  color: #166534;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.invoice-generated-button:hover {
  border-color: #86efac;
  background: #bbf7d0;
}

.secondary-button:disabled,
.danger-button:disabled,
.reserve-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.muted-link {
  display: inline-flex;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.42);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: min(100%, 560px);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.payroll-modal {
  width: min(100%, 1080px);
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.payroll-modal-run-view {
  width: 90vw;
  max-width: calc(100vw - 40px);
}

.payroll-modal-full {
  width: calc(100vw - 40px);
  max-width: none;
}

.payroll-modal-dashboard-request {
  width: min(100%, 760px);
}

.payroll-modal-employee-profile {
  width: min(88vw, 1320px);
  max-width: calc(100vw - 40px);
}

.payroll-modal-compliance-detail {
  width: min(100%, 980px);
}

.payroll-modal-detail-view {
  width: min(100%, 900px);
}

.payroll-modal-wide {
  width: min(calc(100vw - 40px), 1280px);
}

.modal-copy {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.payroll-modal > h2 {
  margin: 0;
  padding: 22px 58px 14px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  line-height: 1;
}

.icon-button:hover {
  border-color: #c8d2df;
  background: #f8fafc;
}

.user-form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.payroll-form {
  width: 100%;
}

.payroll-modal-section {
  display: grid;
  gap: 12px;
}

.payroll-modal-section h3 {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom:30px;
}

.payroll-approvals-view {
  display: grid;
  gap: 16px;
}

.payroll-approvals-view .table-panel,
.payroll-approvals-view .modal-table-wrap {
  margin-bottom: 0;
}

.payroll-approvals-view .table-panel {
  overflow: hidden;
}

.payroll-approvals-view .table-panel > .modal-table-wrap {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.payroll-approvals-view > .modal-table-wrap {
  background: var(--panel);
}

.modal-data-table {
  width: 100%;
}

.modal-data-table th,
.modal-data-table td {
  padding: 10px 12px;
}

.payroll-detail-modal {
  display: grid;
  gap: 16px;
  padding: 18px 20px 22px;
}

.payroll-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid #d8e5e8;
  border-radius: 8px;
  background: #f8fbfc;
}

.payroll-detail-hero h3,
.payroll-detail-hero p {
  margin: 0;
}

.payroll-detail-hero h3 {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.payroll-detail-hero > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.payroll-detail-hero > div > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

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

.payroll-detail-facts > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-detail-facts span,
.payroll-detail-section dt,
.payroll-detail-note h3 {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-detail-facts strong {
  color: var(--ink);
  font-size: 16px;
}

.payroll-detail-section,
.payroll-detail-note {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-detail-section h3,
.payroll-detail-note h3 {
  margin: 0;
}

.payroll-detail-section dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
}

.payroll-detail-section dl > div {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid #edf1f5;
}

.payroll-detail-section dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.payroll-detail-note p {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
}

.quantity-input {
  max-width: 96px;
}

.material-availability-note {
  color: var(--muted);
  font-weight: 600;
}

.material-availability-note.is-warning {
  color: #c2410c;
}

.date-input-wrap {
  display: grid;
  gap: 5px;
}

.date-input-wrap span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.event-expenses-shell {
  display: grid;
  gap: 16px;
  padding: 20px;
}

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

.expense-overview-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.expense-overview-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.expense-overview-card strong {
  font-size: 20px;
}

.expense-entry-form,
.event-charge-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 140px auto;
  gap: 12px;
  align-items: end;
}

.event-final-invoice-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.event-charge-actions {
  display: flex;
  gap: 8px;
}

.event-expense-section {
  padding-top: 4px;
}

.event-expense-box {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.expense-context-panel {
  display: grid;
  gap: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.expense-context-total {
  margin-top: -4px;
}

.event-settlement-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #5eead4;
  border-radius: 8px;
  background: #f0fdfa;
  box-shadow: 0 8px 22px rgba(15, 118, 110, 0.08);
}

.event-settlement-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
}

.event-settlement-toggle input:disabled + span {
  color: var(--muted);
}

.event-settlement-panel p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.event-status-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.event-expense-section h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.event-summary-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.event-summary-accordion-panel {
  display: grid;
  gap: 14px;
}

.event-summary-accordion-panel[hidden] {
  display: none;
}

.report-filter-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-filter-form select,
.report-filter-form input {
  width: auto;
  min-width: 150px;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.approval-request-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

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

.public-capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.public-home {
  background:
    linear-gradient(180deg, #f7f8f5 0%, #f3f6f8 46%, #ffffff 100%);
  color: #17202d;
}

.public-home .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 16px max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(23, 32, 45, 0.08);
  background: rgba(247, 248, 245, 0.88);
  backdrop-filter: blur(18px);
}

.public-home .topbar h1 .platform-brand-link {
  color: #17202d;
  font-size: 18px;
}

.public-home .topbar .platform-brand-logo {
  height: 20px;
}

.public-home .topbar nav a {
  min-height: 38px;
  border-color: rgba(23, 32, 45, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: #17202d;
}

.public-home .topbar nav a.topbar-signup-link {
  border-color: #17202d;
  background: #17202d;
  color: #fff;
}

.public-home .topbar nav a.topbar-login-link {
  border-color: rgba(23, 32, 45, 0.12);
  background: #fff;
  color: #17202d;
}

.public-home .primary-button,
.public-home .topbar nav a.topbar-signup-link {
  border: 1px solid #17202d;
  background: #17202d;
  color: #fff;
}

.public-home .primary-button:hover,
.public-home .topbar nav a.topbar-signup-link:hover {
  background: #263244;
}

.public-home .login-button,
.public-home .topbar nav a.topbar-login-link {
  border: 1px solid rgba(23, 32, 45, 0.14);
  background: #fff;
  color: #17202d;
}

.public-home .login-button:hover,
.public-home .topbar nav a.topbar-login-link:hover {
  background: #f3f5f7;
}

.public-page {
  display: grid;
  gap: 24px;
  width: min(1180px, calc(100vw - 48px));
  padding-top: 12px;
  padding-bottom: 56px;
}

.public-hero-band {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(470px, 1.06fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding: clamp(22px, 2.5vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(23, 32, 45, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(238, 242, 239, 0.76)),
    radial-gradient(circle at 16% 16%, rgba(15, 118, 110, 0.12), transparent 34%);
  box-shadow: 0 22px 70px rgba(23, 32, 45, 0.08);
}

.public-hero-copy {
  display: grid;
  align-content: start;
  gap: 14px;
}

.public-hero-copy .eyebrow {
  margin: 0;
  color: #52606f;
  font-size: 12px;
  letter-spacing: 0;
}

.public-hero-band h2 {
  margin: 0;
  color: #111827;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: 0;
}

.public-hero-text {
  margin: 0;
  max-width: 610px;
  color: #536170;
  font-size: 15px;
  line-height: 1.68;
}

.public-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.public-hero-actions .compact-button {
  min-height: 46px;
  padding-right: 20px;
  padding-left: 20px;
  border-radius: 999px;
}

.public-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 560px);
  margin: 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 45, 0.09);
  border-radius: 8px;
  background: rgba(23, 32, 45, 0.09);
}

.public-hero-stats div {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.public-hero-stats dt,
.public-hero-stats dd {
  margin: 0;
}

.public-hero-stats dt {
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.public-hero-stats dd {
  color: #111827;
  font-size: 20px;
  font-weight: 600;
}

.public-hero-panel {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 420px;
}

.public-hero-panel::before {
  position: absolute;
  inset: 46px -20px -20px 46px;
  border: 1px solid rgba(23, 32, 45, 0.08);
  border-radius: 8px;
  background: #e7ebe8;
  content: "";
}

.public-hero-panel img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: left top;
  border: 1px solid rgba(23, 32, 45, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(23, 32, 45, 0.16);
}

.public-preview-strip {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: min(82%, 430px);
  margin: -78px 24px 24px auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.88);
  color: #fff;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.25);
  backdrop-filter: blur(14px);
}

.public-preview-strip span {
  color: #c7d2fe;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.public-preview-strip strong {
  font-size: 18px;
  line-height: 1.35;
}

.public-section {
  border: 1px solid rgba(23, 32, 45, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 50px rgba(23, 32, 45, 0.05);
}

.public-section {
  padding: clamp(22px, 2.5vw, 28px);
}

.public-section .section-head {
  margin-bottom: 24px;
}

.public-section .section-head h2 {
  color: #111827;
  font-size: 25px;
  line-height: 1.25;
}

.public-section-mint .eyebrow {
  color: #0f766e;
}

.public-section-blue .eyebrow {
  color: #0f766e;
}

.public-section-rose .eyebrow {
  color: #0f766e;
}

.public-page .report-card {
  position: relative;
  min-height: 210px;
  padding: 20px;
  border-color: rgba(23, 32, 45, 0.08);
  background: #fff;
  box-shadow: none;
}

.public-page .report-card span {
  color: #627083;
}

.public-page .report-card strong {
  max-width: 290px;
  color: #111827;
  font-size: 21px;
  line-height: 1.2;
}

.public-page .report-card small {
  color: #5b6675;
  line-height: 1.58;
}

.public-card-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #f5f8f6;
  color: #17202d !important;
  font-size: 12px !important;
  font-weight: 600;
}

.public-pricing-spotlight {
  display: grid;
  grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr);
  gap: 14px;
  align-items: stretch;
}

.public-price-main,
.public-price-details {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: 28px;
  border: 1px solid rgba(23, 32, 45, 0.08);
  border-radius: 8px;
  background: #fff;
}

.public-price-main {
  border-color: rgba(23, 32, 45, 0.12);
  background: #17202d;
}

.public-price-main > span {
  color: #d1d5db;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.public-price-main > strong {
  color: #fff;
  font-size: 25px;
  line-height: 1;
}

.public-price-main small {
  color: #cbd5e1;
}

.public-price-details p {
  color: #536170;
}

.public-price-details p {
  max-width: 760px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.public-price-details dl {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e5e9ef;
}

.public-price-details dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.public-price-details dt,
.public-price-details dd {
  margin: 0;
  font-size: 15px;
}

.public-price-details dt {
  color: #667085;
}

.public-price-details dd {
  color: #17202d;
  font-weight: 600;
  text-align: right;
}

.public-price-inclusions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-price-inclusions span {
  padding: 8px 10px;
  border: 1px solid #dfe6ea;
  border-radius: 999px;
  background: #f7f9f8;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.public-price-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 14px;
  align-items: end;
  margin-top: 14px;
  padding: 20px;
  border: 1px solid rgba(23, 32, 45, 0.08);
  border-radius: 8px;
  background: #fff;
}

.public-price-calculator > div {
  display: grid;
  gap: 6px;
}

.public-price-calculator span,
.public-price-calculator small {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.public-price-calculator strong {
  color: #17202d;
  font-size: 25px;
  line-height: 1.1;
}

.public-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.public-access-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(23, 32, 45, 0.08);
  border-radius: 8px;
  background: #fff;
}

.public-access-card span {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.public-access-card h3,
.public-access-card p {
  margin: 0;
}

.public-access-card h3 {
  color: #111827;
  font-size: 23px;
}

.public-access-card p {
  color: #5b6675;
  font-size: 15px;
  line-height: 1.6;
}

.public-price-details dt,
.public-price-details dd,
.public-price-details p,
.public-access-card p,
.public-contact-detail p,
.public-contact-form-panel p,
.public-contact-aside p:not(.eyebrow),
.auth-card p {
  font-size: 15px;
}

.public-access-card .compact-button {
  width: fit-content;
  min-height: 42px;
  margin-top: 8px;
  padding-right: 18px;
  padding-left: 18px;
  border-radius: 999px;
}

.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(23, 32, 45, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #17202d;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.login-button:hover {
  background: #f3f5f7;
}

.public-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 26px;
  margin-top: 0;
  padding: 26px max(24px, calc((100vw - 1180px) / 2));
  border-top: 1px solid rgba(23, 32, 45, 0.08);
  background: #fff;
}

.public-footer-brand {
  display: grid;
  gap: 5px;
}

.public-footer-brand strong {
  color: var(--accent-dark);
  font-size: 16px;
}

.public-footer-brand span,
.public-footer-copy {
  color: var(--muted);
  font-size: 13px;
}

.public-footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.public-footer-links a,
.public-footer-links button {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.public-footer-links a:hover,
.public-footer-links button:hover,
.public-contact-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-footer-copy {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.public-info-page {
  min-height: calc(100vh - 182px);
}

.public-info-hero {
  width: 100%;
  margin-bottom: 20px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.public-info-hero h2 {
  max-width: none;
  margin-bottom: 14px;
  font-size: 25px;
  line-height: 1.2;
}

.public-info-hero > p:last-child,
.public-contact-hero > p {
  max-width: none;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.public-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.public-info-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.public-info-card h3,
.public-info-card p {
  margin: 0;
}

.public-info-card p {
  color: var(--muted);
  line-height: 1.58;
}

.public-info-card .primary-button {
  width: fit-content;
  margin-top: auto;
}

.public-email-button {
  width: fit-content;
  margin-top: 24px;
  text-decoration: none;
}

.public-contact-link {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.public-contact-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1.45fr) minmax(270px, .75fr);
  gap: 18px;
  align-items: start;
}

.public-contact-form-panel,
.public-contact-aside {
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.public-contact-form-panel h2 {
  margin-bottom: 8px;
  font-size: 25px;
}

.public-contact-intro {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(23, 32, 45, 0.08);
}

.public-contact-intro h2,
.public-contact-intro p {
  margin-bottom: 0;
}

.public-contact-intro h2 {
  margin-bottom: 8px;
}

.public-contact-form-panel > .muted {
  margin-bottom: 22px;
}

.public-contact-form {
  position: relative;
  display: grid;
  gap: 18px;
}

.public-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.public-contact-message {
  grid-column: 1 / -1;
}

.public-contact-message textarea {
  min-height: 150px;
}

.public-contact-submit {
  width: fit-content;
}

.public-honeypot {
  position: absolute;
  left: -10000px;
  height: 1px;
  overflow: hidden;
}

.public-contact-aside {
  display: grid;
  gap: 16px;
  background: #f7fbfa;
}

.public-contact-aside h3,
.public-contact-aside p {
  margin: 0;
}

.public-contact-aside p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.65;
}

.public-contact-detail {
  display: grid;
  gap: 5px;
  padding-top: 15px;
  border-top: 1px solid #d9eee9;
}

.public-contact-detail span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.public-terms-overlay {
  z-index: 80;
}

.public-terms-modal {
  width: min(100%, 720px);
}

.public-terms-content {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.public-terms-content p {
  margin: 0;
  line-height: 1.58;
}

.public-terms-content section {
  display: grid;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.public-terms-content h3 {
  margin: 0;
  font-size: 15px;
}

.public-terms-content section p {
  color: var(--muted);
  font-size: 14px;
}

.public-terms-content a {
  color: var(--accent-dark);
  font-weight: 600;
}

.public-terms-note {
  padding: 14px;
  border-radius: 8px;
  background: #f0fdfa;
  color: var(--accent-dark);
  font-size: 14px;
}

.report-card,
.report-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.report-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.report-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.report-card strong {
  font-size: 24px;
}

.admin-dashboard-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 0;
}

.admin-dashboard-metrics .report-card {
  min-height: 122px;
  align-content: space-between;
}

.dashboard-action-card-slot {
  display: contents;
}

.dashboard-action-card-slot[hidden] {
  display: none;
}

.dashboard-metric-link {
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dashboard-metric-link:hover,
.dashboard-metric-link:focus-visible {
  border-color: #99f6e4;
  box-shadow: 0 8px 22px rgba(15, 118, 110, .1);
  transform: translateY(-1px);
}

.dashboard-metric-link small {
  color: var(--accent-dark);
}

.dashboard-tabs {
  display: grid;
}

.dashboard-tab-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-tab-button {
  min-height: 38px;
  margin-bottom: -1px;
  border: 1px solid #bae6fd;
  border-bottom-color: #99f6e4;
  border-radius: 8px 8px 0 0;
  background: #e0f2fe;
  color: #075985;
  cursor: pointer;
  font-weight: 600;
  padding: 8px 14px;
}

.dashboard-tab-button[data-dashboard-tab="payroll-runs"] {
  border-color: #fde68a;
  border-bottom-color: var(--line);
  background: #fffbeb;
  color: #92400e;
}

.dashboard-tab-button:hover,
.dashboard-tab-button:focus-visible {
  border-color: #5eead4;
  background: #ccfbf1;
  color: #0f766e;
  outline: none;
}

.dashboard-tab-button.is-active {
  border-color: #0f766e;
  border-bottom-color: var(--line);
  background: #0f766e;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.14);
}

.dashboard-tab-button[data-dashboard-tab="payroll-runs"].is-active {
  border-color: #2563eb;
  border-bottom-color: var(--line);
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
}

.dashboard-tab-panel {
  display: grid;
  gap: 16px;
}

.dashboard-tab-panel[hidden] {
  display: none;
}

.billing-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}

.company-billing-section {
  display: grid;
  gap: 18px;
  padding: 16px;
}

.billing-summary-grid .report-card {
  min-height: 100px;
  align-content: space-between;
}

.billing-total-card {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.billing-payment-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) minmax(460px, 1.15fr);
  gap: 20px;
  align-items: start;
  margin-top: 0;
}

.billing-current-panel {
  order: 1;
}

.billing-payment-panel {
  order: 2;
}

.billing-payment-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.billing-payment-panel .payroll-form {
  padding: 16px;
}

.billing-payment-panel .form-actions {
  margin-bottom: 0;
}

.billing-current-invoice {
  display: grid;
  gap: 0;
  margin: 16px;
  padding: 0;
}

.billing-current-invoice div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.billing-current-invoice div:last-child {
  border-bottom: 0;
}

.billing-current-invoice dt,
.billing-current-invoice dd {
  margin: 0;
  font-size: 13px;
}

.billing-current-invoice dt {
  color: var(--muted);
}

.billing-current-invoice dd {
  text-align: right;
}

.billing-current-invoice .billing-current-due {
  align-items: center;
}

.billing-due-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(16, 185, 129, 0.38);
  border-radius: 8px;
  background: rgba(236, 253, 245, 0.9);
  color: #065f46;
  white-space: nowrap;
}

.billing-due-badge strong {
  font-size: 14px;
  font-weight: 700;
}

.billing-due-badge small {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  text-transform: uppercase;
}

.billing-due-badge.is-due-soon {
  border-color: rgba(245, 158, 11, 0.4);
  background: #fffbeb;
  color: #92400e;
}

.billing-due-badge.is-overdue {
  border-color: rgba(220, 38, 38, 0.34);
  background: #fef2f2;
  color: #991b1b;
}

.billing-current-invoice .billing-current-total {
  align-items: baseline;
  padding-top: 16px;
}

.billing-current-invoice .billing-current-total dd {
  color: var(--accent-dark);
  font-size: 22px;
  font-weight: 600;
}

.billing-table-scroll {
  margin: 16px 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.billing-table-scroll .data-table {
  table-layout: fixed;
}

.billing-table-scroll .data-table th,
.billing-table-scroll .data-table td {
  white-space: normal;
}

.billing-table-scroll .data-table th:nth-child(1),
.billing-table-scroll .data-table td:nth-child(1) {
  width: 20%;
}

.billing-table-scroll .data-table th:nth-child(2),
.billing-table-scroll .data-table td:nth-child(2) {
  width: 24%;
}

.billing-table-scroll .data-table th:nth-child(6),
.billing-table-scroll .data-table td:nth-child(6) {
  width: 14%;
}

.billing-table-scroll .billing-payment-history-table th:nth-child(1),
.billing-table-scroll .billing-payment-history-table td:nth-child(1) {
  width: 24%;
}

.billing-table-scroll .billing-payment-history-table th:nth-child(2),
.billing-table-scroll .billing-payment-history-table td:nth-child(2) {
  width: 24%;
}

.billing-table-scroll .billing-payment-history-table th:nth-child(6),
.billing-table-scroll .billing-payment-history-table td:nth-child(6) {
  width: 18%;
}

.billing-records-panel {
  margin-top: 0;
}

.billing-lower-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.billing-click-row {
  cursor: pointer;
}

.billing-click-row:hover {
  background: #f8fafc;
}

.billing-click-row:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: -2px;
}

.billing-detail-modal {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}

.billing-detail-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.billing-detail-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}

.billing-detail-list div:last-child {
  border-bottom: 0;
}

.billing-detail-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.billing-detail-list strong {
  margin: 0;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600 !important;
  overflow-wrap: anywhere;
  text-align: right;
}

.billing-receipt-preview {
  max-width: 100%;
  max-height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
}

.billing-compact-table {
  width: 100%;
}

.billing-payment-history-table {
  width: 100%;
}

.billing-table-footer {
  justify-content: flex-start !important;
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}

.admin-queue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-queue-panel .payroll-panel-head {
  align-items: start;
}

.dashboard-queue-panel .payroll-panel-head > div {
  display: grid;
  gap: 4px;
}

.dashboard-queue-panel .payroll-panel-head span,
.dashboard-runs-panel .payroll-panel-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-queue-list {
  display: grid;
}

.dashboard-queue-table-wrap {
  margin: 15px;
  overflow: auto;
}

.dashboard-queue-table {
  width: 100%;
}

.dashboard-queue-table .interactive-row {
  cursor: pointer;
}

.dashboard-queue-table .interactive-row:hover,
.dashboard-queue-table .interactive-row:focus {
  background: #f0fdfa;
  outline: none;
}

.dashboard-queue-more {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.dashboard-queue-list > .muted {
  margin: 0;
  padding: 22px 16px;
}

.dashboard-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 70px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.dashboard-queue-row:last-child {
  border-bottom: 0;
}

.dashboard-queue-row > div:first-child,
.dashboard-queue-meta {
  display: grid;
  gap: 5px;
}

.dashboard-queue-row span {
  color: var(--muted);
  font-size: 13px;
}

.dashboard-queue-meta {
  justify-items: end;
  white-space: nowrap;
}

.dashboard-queue-empty {
  display: grid;
  gap: 5px;
  padding: 26px 16px;
  color: var(--muted);
  text-align: center;
}

.dashboard-queue-empty strong {
  color: var(--ink);
}

.dashboard-queue-warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.dashboard-queue-warning strong {
  color: #92400e;
}

.dashboard-panel-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-section-head {
  margin-top: 4px;
  margin-bottom: 0;
}

.dashboard-runs-panel .payroll-panel-head > div {
  display: grid;
  gap: 4px;
}

.payroll-action-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-height: 138px;
  border-left: 4px solid #9aa8ba;
}

.payroll-action-card > div {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.payroll-action-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-action-card strong {
  font-size: 25px;
  line-height: 1;
}

.payroll-action-card small {
  min-height: 40px;
  color: #526277;
  font-size: 13px;
  line-height: 1.45;
  text-transform: none;
}

.payroll-action-card.needs-work {
  border-left-color: #d97706;
}

.payroll-action-card.attention {
  border-left-color: #2563eb;
}

.payroll-action-card.done {
  border-left-color: #15803d;
}

.payroll-action-card.metric-employees {
  border-left-color: #0f766e;
}

.payroll-action-card.metric-leave {
  border-left-color: #7c3aed;
}

.payroll-action-card.metric-requests {
  border-left-color: #0891b2;
}

.payroll-action-card.metric-ready-pay {
  border-left-color: #15803d;
}

.payroll-wizard-preflight {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #9aa8ba;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.payroll-wizard-preflight.needs-work {
  border-left-color: #d97706;
}

.payroll-wizard-preflight.done {
  border-left-color: #15803d;
}

.payroll-wizard-preflight > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.payroll-wizard-preflight p,
.payroll-wizard-preflight ul {
  margin: 0;
  color: #526277;
  line-height: 1.5;
}

.payroll-wizard-preflight ul {
  padding-left: 18px;
}

.payroll-wizard-preflight .secondary-button {
  justify-self: start;
}

.setup-shell {
  max-width: 1120px;
}

.setup-welcome {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
}

.setup-welcome p {
  margin: 0;
  color: #526277;
}

.setup-guide-panel {
  display: grid;
  gap: 0;
  margin-bottom: 18px;
  overflow: hidden;
}

.setup-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.setup-guide-step {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 208px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.setup-guide-step.done {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.setup-guide-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

.setup-guide-step.done .setup-guide-number {
  background: #ccfbf1;
  color: #0f766e;
}

.setup-guide-step .status-pill {
  justify-self: start;
}

.setup-guide-step > strong {
  font-size: 15px;
}

.setup-guide-step p {
  margin: 0 0 3px;
  color: #526277;
  line-height: 1.45;
}

.setup-guide-step .compact-button {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

.setup-status-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 20px;
}

.setup-status-primary {
  display: grid;
  gap: 8px;
}

.setup-status-primary .system-check-pill {
  justify-self: start;
}

.setup-status-panel strong {
  font-size: 18px;
}

.setup-status-panel p {
  max-width: 560px;
  margin: 0;
  color: #526277;
  line-height: 1.5;
}

.setup-progress-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
  gap: 8px;
}

.setup-checklist-panel {
  gap: 0;
  overflow: hidden;
}

.setup-details-summary {
  cursor: pointer;
  list-style: none;
}

.setup-details-summary::-webkit-details-marker {
  display: none;
}

.setup-details-summary::after {
  content: "Show";
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
}

.setup-checklist-panel[open] .setup-details-summary::after {
  content: "Hide";
}

.setup-checklist {
  display: grid;
  gap: 10px;
  padding: 0;
}

.setup-check-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #d97706;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.setup-check-item.done {
  border-left-color: #15803d;
}

.setup-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fffbeb;
  color: #92400e;
  font-weight: 600;
}

.setup-check-item.done .setup-check-mark {
  background: #f0fdf4;
  color: #166534;
}

.setup-check-copy {
  display: grid;
  gap: 6px;
}

.setup-check-copy > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.setup-check-copy p {
  margin: 0;
  color: #526277;
  line-height: 1.45;
}

.setup-import-panel {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.setup-accordion {
  margin-top: 0;
}

.setup-accordion-panel {
  padding: 16px;
}

.setup-accordion-panel[hidden] {
  display: none;
}

.setup-import-content {
  display: grid;
  gap: 16px;
  padding: 0;
}

.setup-import-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) auto;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.setup-template-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.setup-import-results {
  max-height: 520px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.setup-import-panel textarea {
  min-height: 182px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.setup-import-panel .payroll-panel-head span {
  max-width: 720px;
}

.app-user-form .compact-section-head {
  margin-bottom: 12px;
}

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

.setup-bulk-grid {
  width: 100%;
}

.setup-bulk-grid th,
.setup-bulk-grid td {
  white-space: nowrap;
}

.setup-bulk-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
}

.setup-sticky-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}

.setup-bulk-grid thead .setup-sticky-col {
  background: #f8fafc;
}

.setup-grid-input {
  width: 180px;
  min-height: 34px;
  border: 1px solid #d7e0ec;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fff;
  color: #172033;
  font-size: 12px;
}

.setup-grid-input:focus {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, 0.14);
}

.payroll-system-table {
  width: 100%;
}

.system-check-pill {
  display: inline-flex;
  align-items: center;
  min-width: 58px;
  justify-content: center;
  border: 1px solid #d7e0ec;
  border-radius: 999px;
  padding: 4px 8px;
  color: #526277;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.system-check-pill.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.system-check-pill.warn {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.system-check-pill.fail {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.report-panel {
  padding: 18px;
}

.report-panel-head {
  margin-bottom: 10px;
}

.report-chart {
  display: flex;
  align-items: end;
  min-height: 240px;
  gap: 14px;
  overflow-x: auto;
  padding: 20px 4px 4px;
}

.report-bar-group {
  display: grid;
  gap: 8px;
  min-width: 58px;
  justify-items: center;
}

.report-bars {
  display: flex;
  align-items: end;
  gap: 6px;
  height: 170px;
}

.report-bar {
  display: block;
  width: 18px;
  border-radius: 5px 5px 0 0;
}

.report-bar.profit {
  background: #0f766e;
}

.report-bar.profit.negative {
  background: #be123c;
}

.report-bar.expense {
  background: #f59e0b;
}

.report-bar-group strong {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.report-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.report-wide-chart,
.report-breakdown {
  display: grid;
  gap: 12px;
}

.report-row-bar {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
}

.report-row-bar > strong {
  grid-row: span 2;
  color: var(--muted);
  font-size: 12px;
}

.report-row-bar > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
}

.report-row-track {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.report-row-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.report-row-track i.income {
  background: #0f766e;
}

.report-row-track i.expense {
  background: #f59e0b;
}

.report-row-bar em,
.report-breakdown-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-align: right;
}

.report-breakdown-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
}

.report-breakdown-row strong {
  font-size: 13px;
}

.report-breakdown-row span {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.report-breakdown-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #be123c;
}

.report-table {
  width: 100%;
}

.payroll-shell .data-table {
  width: 100%;
}

.payroll-summary-grid .report-card strong {
  font-size: 22px;
}

.payroll-form .muted {
  margin: 0;
}

.payroll-note {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  margin:10px 20px;
}

.payroll-quick-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}

.payroll-quick-actions > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-run-view {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payroll-run-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.payroll-run-toolbar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.payroll-run-toolbar > div:first-child span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.payroll-run-toolbar select {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 28px 0 10px;
}

.payroll-run-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
}

.payroll-run-actions .compact-button {
  min-height: 34px;
  padding: 0 10px;
}

.payroll-actions-menu {
  position: relative;
}

.payroll-actions-menu > summary {
  list-style: none;
  cursor: pointer;
}

.payroll-actions-menu > summary::-webkit-details-marker {
  display: none;
}

.payroll-menu-trigger {
  width: 40px;
  padding: 0;
}

.burger-icon {
  display: grid;
  gap: 4px;
}

.burger-icon i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.payroll-actions-menu > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 4;
  display: grid;
  gap: 6px;
  width: 185px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}

.payroll-actions-menu > div > * {
  width: 100%;
}

.payroll-approval-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.payroll-review-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.payroll-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.payroll-review-head > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

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

.payroll-followups {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: #526277;
  font-size: 13px;
}

.payroll-followups summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
}

.payroll-followups ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.table-search-input {
  width: min(240px, 100%);
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.run-branch-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 8px 4px 0;
  padding: 3px 8px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.compact-toolbar {
  flex-wrap: nowrap;
  padding-left: 16px;
}

.compact-toolbar .table-search-input {
  width: 220px;
}

.compact-toolbar .compact-field select {
  width: 74px;
}

.run-items-toolbar {
  justify-content: flex-end;
  margin: 0 0 2px;
  padding: 0 2px 0 16px;
}

.auto-grid-toolbar {
  min-height: 60px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.table-pager {
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.company-settings-accordion {
  max-width: 1120px;
}

.company-email-panel {
  padding: 4px 0;
}

.company-email-form {
  max-width: 100%;
}

.reports-shell {
  max-width: 1180px;
}

.reports-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-action-card {
  cursor: pointer;
  text-align: left;
}

.report-action-card strong {
  font-size: 18px;
}

.report-action-card small {
  color: var(--muted);
  line-height: 1.45;
}

.report-download-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 16px 10px;
}

.report-download-note {
  margin: 6px 16px 18px;
}

.public-error-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.not-found-shell {
  display: grid;
  min-height: calc(100vh - 84px);
  place-items: start center;
  padding: 72px 20px 32px;
}

.not-found-panel {
  width: min(100%, 440px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.not-found-panel h2 {
  margin: 6px 0 8px;
  font-size: 25px;
  line-height: 1.2;
}

.not-found-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.not-found-panel .public-error-actions {
  margin-top: 18px;
}

.payroll-review-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-left: 4px solid #d97706;
  border-radius: 8px;
  padding: 12px;
}

.payroll-review-card.done {
  border-left-color: #15803d;
}

.payroll-review-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-review-card strong {
  font-size: 24px;
  line-height: 1;
}

.payroll-review-card p {
  margin: 0;
  color: #526277;
  font-size: 12px;
  line-height: 1.4;
}

.payroll-review-issues {
  display: grid;
  gap: 10px;
}

.payroll-review-issues div {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.payroll-review-issues ul {
  margin: 0;
  padding-left: 18px;
  color: #526277;
  line-height: 1.5;
}

.payroll-exception-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  padding: 14px;
}

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

.payroll-exception-list article {
  display: grid;
  gap: 8px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.payroll-exception-list article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.payroll-exception-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.payroll-exception-list p {
  margin: 0;
  color: #526277;
  line-height: 1.5;
}

.payroll-exception-list ul {
  margin: 0;
  padding-left: 18px;
  color: #526277;
}

.payroll-status-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.payroll-status-control span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.payroll-items-table {
  width: 100%;
}

.payroll-employee-table {
  width: 100%;
}

.payroll-final-table {
  width: 100%;
}

.payroll-dashboard-table {
  width: 100%;
}

.payroll-leave-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-leave-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.portal-shell {
  max-width: 1180px;
}

.portal-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.portal-summary-grid .report-card {
  min-height: 106px;
  align-content: space-between;
  border-left: 4px solid #0f766e;
}

.portal-summary-grid .report-card:nth-child(2) {
  border-left-color: #2563eb;
}

.portal-summary-grid .report-card:nth-child(3) {
  border-left-color: #7c3aed;
}

.portal-summary-grid .report-card:nth-child(4) {
  border-left-color: #c2410c;
}

.portal-summary-grid .report-card:nth-child(5) {
  border-left-color: #db2777;
}

.portal-accordion {
  gap: 12px;
}

.portal-split-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.portal-split-panel[hidden] {
  display: none;
}

.portal-mini-card-grid,
.portal-balance-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.portal-mini-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-balance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.portal-mini-card,
.portal-balance-card {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #0f766e;
  border-radius: 8px;
  background: #fff;
}

.portal-mini-card:nth-child(2),
.portal-balance-card:nth-child(2n) {
  border-left-color: #2563eb;
}

.portal-mini-card:nth-child(3),
.portal-balance-card:nth-child(3n) {
  border-left-color: #7c3aed;
}

.portal-mini-card:nth-child(4),
.portal-balance-card:nth-child(4n) {
  border-left-color: #c2410c;
}

.portal-mini-card span,
.portal-balance-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.portal-mini-card strong,
.portal-balance-card strong {
  font-size: 22px;
}

.portal-balance-card small {
  color: var(--muted);
  font-size: 13px;
}

.portal-empty-inline {
  margin: 0;
}

.payroll-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.payroll-panel-head strong {
  font-size: 14px;
}

.payroll-panel-head > div {
  display: grid;
  gap: 4px;
}

.payroll-panel-head > span,
.payroll-panel-head > div > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.support-compose-panel {
  max-width: none;
  overflow: hidden;
}

.support-accordion-panel {
  overflow: hidden;
}

.support-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.support-accordion-head::-webkit-details-marker {
  display: none;
}

.support-accordion-head i {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}

.support-accordion-panel:not([open]) .support-accordion-head,
.enterprise-inner-accordion:not([open]) .support-accordion-head {
  border-bottom: 0;
}

.support-accordion-panel:not([open]) .support-accordion-head i,
.enterprise-inner-accordion:not([open]) .support-accordion-head i {
  transform: rotate(-45deg);
}

.support-accordion-body {
  padding: 16px;
}

.support-accordion-panel:not([open]) .support-accordion-body,
.enterprise-inner-accordion:not([open]) .support-accordion-body {
  display: none;
}

.support-release-note-list {
  display: grid;
  gap: 12px;
}

.support-release-note-policy {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #dbe7f3;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.support-release-note {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.support-release-note-copy {
  display: grid;
  gap: 6px;
}

.support-release-note h3,
.support-release-note p,
.support-release-note ol {
  margin: 0;
}

.support-release-note h3 {
  color: var(--ink);
  font-size: 16px;
}

.support-release-note p,
.support-release-note li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.support-release-note ol {
  display: grid;
  gap: 6px;
  padding-left: 20px;
}

.support-release-note .form-actions {
  justify-content: flex-start;
}

.support-release-note[hidden] {
  display: none;
}

.support-release-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.support-conversations-body {
  padding: 0;
}

.support-knowledge-panel {
  overflow: hidden;
  margin-bottom: 0;
}

.support-shell {
  gap: 12px;
}

.support-shell .app-page-head {
  margin-bottom: 4px;
}

.support-actions-accordion,
.support-actions-accordion .table-panel {
  margin-bottom: 0;
}

.support-kb-body {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.support-kb-toolbar {
  display: block;
}

.support-kb-search {
  width: 100%;
}

.support-kb-list {
  display: grid;
  gap: 12px;
}

.support-kb-topic {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.support-kb-topic[hidden] {
  display: none;
}

.support-kb-topic header {
  display: grid;
  gap: 5px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.support-kb-category {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.support-kb-topic h3,
.support-kb-topic h4,
.support-kb-topic p,
.support-kb-topic ul {
  margin: 0;
}

.support-kb-topic h3 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
}

.support-kb-topic section {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.support-kb-topic section:last-child {
  border-bottom: 0;
}

.support-kb-topic h4 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.support-kb-topic p,
.support-kb-topic li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.support-kb-topic ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
}

.support-kb-topic li::marker {
  color: var(--accent-dark);
}

.support-kb-prompt {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.support-kb-empty {
  margin: 0;
}

.support-summary-table {
  width: 100%;
}

.support-conversation-modal {
  width: min(100%, 860px);
}

.support-modal-body {
  display: grid;
  gap: 20px;
  padding: 18px 20px 22px;
}

.support-modal-overview {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #d4ebe7;
  border-radius: 10px;
  background: #f7fbfa;
}

.support-modal-overview-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}

.support-modal-overview-head > div {
  display: grid;
  gap: 3px;
}

.support-modal-overview-head strong {
  color: var(--ink);
  font-size: 16px;
}

.support-modal-overview-head small {
  color: var(--muted);
}

.support-modal-kicker {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.support-modal-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.support-modal-details div {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid #d9eee9;
}

.support-modal-details span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.support-modal-details strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-thread-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0;
}

.support-thread-entry {
  width: fit-content;
  max-width: min(82%, 650px);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 4px;
  background: #fbfcfe;
}

.support-thread-entry.from-tenant {
  align-self: flex-start;
  background: #f7f9fc;
}

.support-thread-entry.from-ispsms {
  align-self: flex-end;
  border-color: #bfe7df;
  border-radius: 12px 12px 4px 12px;
  background: #edf9f6;
}

.support-thread-entry.from-ispsms span strong {
  color: var(--accent-dark);
}

.support-thread-entry span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.support-thread-entry p {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.support-attachment-preview {
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: 174px;
  margin-top: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent-dark);
  cursor: pointer;
  text-align: left;
}

.support-attachment-preview:hover {
  border-color: var(--accent);
}

.support-attachment-preview img {
  display: block;
  width: 160px;
  height: 96px;
  border-radius: 5px;
  object-fit: cover;
}

.support-attachment-preview span {
  display: block;
  max-width: 160px;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-image-overlay {
  z-index: 120;
}

.support-image-modal {
  width: min(100%, 980px);
}

.support-image-full {
  display: block;
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - 130px);
  margin: 0 auto 18px;
  object-fit: contain;
}

.support-modal-reply,
.support-enterprise-reply {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.support-thread-focused td {
  background: #f0fdfa;
}

.support-row-unread td {
  background: #effbf8;
  font-weight: 600;
}

.support-row-unread td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.support-row-unread .field-key {
  font-weight: 400;
}

@media (max-width: 720px) {
  .support-kb-search {
    width: 100%;
  }

  .support-kb-topic header,
  .support-kb-topic section {
    padding-right: 14px;
    padding-left: 14px;
  }

  .support-modal-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-thread-entry {
    max-width: 94%;
  }
}

.recovery-create-panel {
  max-width: none;
  overflow: hidden;
}

.recovery-detail-panel {
  overflow: hidden;
}

.recovery-detail-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payroll-year-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-year-filter input {
  width: 92px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-transform: none;
}

.payroll-leave-table {
  width: 100%;
}

.payroll-balance-table,
.payroll-leave-types-table {
  width: 100%;
}

.payroll-leave-types-table input[type="text"],
.payroll-leave-types-table input:not([type]) {
  min-width: 220px;
}

.payroll-report-view {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payroll-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.payroll-report-head h3 {
  margin: 0;
  font-size: 18px;
}

.payroll-report-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.payroll-report-head > strong {
  white-space: nowrap;
}

.employee-request-detail {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.employee-request-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.employee-request-person {
  min-width: 0;
}

.employee-request-person h3 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.employee-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.employee-request-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.employee-request-status {
  flex: 0 0 auto;
}

.employee-request-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.employee-request-facts article,
.employee-request-timeline div,
.employee-request-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.employee-request-facts article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.employee-request-facts span,
.employee-request-timeline span,
.employee-request-note span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.employee-request-facts strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.employee-request-timeline {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 10px;
}

.employee-request-timeline div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  background: #fbfcfe;
}

.employee-request-timeline strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.employee-request-note {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.employee-request-note p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

.employee-request-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.employee-profile-link {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.employee-profile-link:hover,
.employee-profile-link:focus-visible {
  color: var(--accent-dark);
  text-decoration-color: currentColor;
}

.employee-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.employee-name-cell img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid #dce2ea;
  border-radius: 999px;
  object-fit: cover;
}

.employee-profile-detail {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(180deg, #f8fafc 0, #ffffff 220px);
}

.employee-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #d7e7e3;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.employee-profile-photo {
  width: 92px;
  height: 92px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  object-fit: cover;
  background: #f8fafc;
}

.employee-profile-photo-empty {
  display: grid;
  place-items: center;
  background: #eef2f7;
  color: var(--accent-dark);
  font-size: 25px;
  font-weight: 600;
}

.employee-profile-identity {
  min-width: 0;
}

.employee-profile-identity h3 {
  margin: 2px 0 0;
  font-size: 25px;
  line-height: 1.2;
}

.employee-profile-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.employee-profile-metrics article,
.employee-profile-sections article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.employee-profile-metrics article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 15px;
}

.employee-profile-metrics span,
.employee-profile-sections span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.employee-profile-metrics strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.2;
}

.employee-profile-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.employee-profile-sections article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 15px;
}

.employee-profile-sections h4 {
  margin: 0;
  font-size: 14px;
}

.employee-profile-sections div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.employee-profile-sections strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.employee-profile-mini-list {
  display: grid;
  gap: 8px;
}

.employee-profile-mini-list div {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.employee-profile-mini-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.compliance-detail-modal {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.compliance-detail-head {
  margin: 0;
  border: 1px solid #d7e7e3;
  border-radius: 8px;
  background: #fbfefd;
}

.compliance-detail-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compliance-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.compliance-detail-grid article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.compliance-detail-grid h4 {
  margin: 0;
  font-size: 14px;
}

.compliance-detail-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compliance-detail-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.compliance-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

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

.payroll-report-grid article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-report-grid h4 {
  margin: 0 0 2px;
  font-size: 14px;
}

.payroll-report-grid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  border-bottom: 1px solid #eef2f7;
}

.payroll-report-grid div:last-child {
  border-bottom: 0;
}

.payroll-report-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.payroll-report-grid strong {
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.payroll-annual-view {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payroll-compliance-view {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.payroll-audit-view {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.audit-alert-settings-form {
  margin: 16px 18px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.audit-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audit-filter-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  padding: 8px 10px;
}

.audit-filter-chip:hover,
.audit-filter-chip.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.audit-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: #475569;
  font-size: 12px;
}

.audit-summary-strip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.audit-severity-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #64748b;
}

.audit-severity-dot.critical::before {
  background: #dc2626;
}

.audit-severity-dot.sensitive::before {
  background: #d97706;
}

.audit-severity-dot.info::before {
  background: #2563eb;
}

.audit-category-pill,
.audit-severity-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  padding: 6px 8px;
}

.audit-category-pill {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

.audit-severity-pill {
  text-transform: capitalize;
}

.audit-severity-pill.critical {
  background: #fee2e2;
  color: #991b1b;
}

.audit-severity-pill.sensitive {
  background: #fef3c7;
  color: #92400e;
}

.audit-severity-pill.info {
  background: #dbeafe;
  color: #1e40af;
}

.payroll-final-view {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.payroll-final-worksheet {
  display: grid;
  gap: 18px;
  width: min(100%, 840px);
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-annual-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-compliance-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-annual-table {
  width: 100%;
}

.payroll-compliance-table {
  width: 100%;
}

.payroll-audit-table {
  width: 100%;
}

.payroll-edit-section {
  display: grid;
  gap: 12px;
}

.payroll-edit-section h3 {
  margin: 0;
  font-size: 16px;
}

.payroll-edit-accordion {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-edit-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.payroll-edit-accordion summary::-webkit-details-marker {
  display: none;
}

.payroll-edit-accordion summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}

.payroll-edit-accordion[open] summary::after {
  content: "-";
}

.payroll-edit-accordion summary span {
  display: grid;
  gap: 3px;
}

.payroll-edit-accordion summary strong {
  font-size: 14px;
}

.payroll-edit-accordion summary small {
  color: var(--muted);
  font-size: 12px;
}

.payroll-edit-accordion-panel {
  display: grid;
  gap: 12px;
  padding: 0 15px 15px;
  border-top: 1px solid var(--line);
}

.payroll-edit-accordion-panel > .payroll-note {
  margin-top: 12px;
}

.employee-custom-field-grid {
  display: grid;
  gap: 10px;
}

.employee-custom-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.report-column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-column-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 600;
}

.payroll-settings-accordion {
  display: grid;
  gap: 12px;
}

.payroll-settings-accordion[data-ordered="false"] {
  visibility: hidden;
}

.payroll-settings-group-label {
  display: grid;
  gap: 3px;
  padding: 8px 2px 0;
}

.payroll-settings-group-label strong {
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.payroll-settings-group-label small {
  color: var(--muted);
  font-size: 12px;
}

.employees-accordion {
  padding: 0;
}

.employees-accordion [data-panel] {
  padding: 0 16px 16px;
}

.employees-accordion [data-panel] > .settings-section-head {
  margin-top: 16px;
}

.payroll-settings-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-settings-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.accordion-head-copy {
  display: grid;
  gap: 2px;
}

.accordion-head-copy strong {
  font-size: 14px;
}

.accordion-head-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.payroll-settings-accordion-head[aria-expanded="false"] {
  border-bottom: 0;
}

.payroll-settings-accordion-head i {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}

.payroll-settings-accordion-head[aria-expanded="false"] i {
  transform: rotate(-45deg);
}

.page-section-accordion {
  padding: 0;
}

.page-accordion-panel {
  padding: 16px;
}

.page-accordion-panel[hidden] {
  display: none;
}

.page-accordion-panel > .table-panel {
  overflow: hidden;
}

.super-admin-accordion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.super-admin-accordion-item {
  align-self: start;
}

.super-admin-accordion-panel {
  padding: 16px;
}

.super-admin-accordion-panel[hidden] {
  display: none;
}

.super-admin-accordion-panel > .settings-section-gap {
  margin-top: 0;
}

.enterprise-shell .super-admin-accordion-item {
  border-color: #d9e2ef;
}

.enterprise-shell .super-admin-accordion-panel {
  background: #fff;
}

.enterprise-shell .enterprise-accordion-content {
  display: grid;
  gap: 16px;
  margin: 0;
}

.enterprise-shell .enterprise-accordion-content > .section-head,
.enterprise-shell .enterprise-accordion-content > .table-filter-toolbar,
.enterprise-shell .enterprise-accordion-content > .settings-inline-form,
.enterprise-shell .enterprise-accordion-content > form,
.enterprise-shell .enterprise-accordion-content > .modal-table-wrap {
  margin: 0;
}

.enterprise-shell .enterprise-accordion-content > .section-head {
  padding: 0;
  border: 0;
}

.enterprise-shell .enterprise-accordion-content > .modal-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.enterprise-shell .enterprise-accordion-content .data-table {
  margin: 0;
}

.enterprise-shell .enterprise-accordion-content > .user-form,
.enterprise-shell .enterprise-accordion-content > .settings-inline-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.enterprise-inner-accordion {
  margin-top: 2px;
}


.enterprise-shell {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 40px;
}

.enterprise-shell[data-accordion-ready="0"] > .settings-section-gap {
  display: none;
}

.enterprise-shell .enterprise-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.enterprise-shell .report-card {
  min-height: 92px;
  align-content: space-between;
}

.enterprise-metric-action {
  width: 100%;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.enterprise-metric-action:hover,
.enterprise-metric-action:focus-visible {
  border-color: #99f6e4;
  box-shadow: 0 8px 22px rgba(15, 118, 110, .1);
}

.enterprise-feature-section {
  display: grid;
  gap: 16px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.enterprise-feature-section .section-head {
  margin-bottom: 0;
}

.enterprise-feature-section .section-head .muted {
  max-width: 760px;
  margin-top: 7px;
}

.enterprise-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.enterprise-analytics-grid .modal-table-wrap {
  margin: 0;
}

.enterprise-analytics-recommendations {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
}

.enterprise-analytics-recommendations span {
  color: var(--muted);
  line-height: 1.45;
}

.enterprise-billing-modal {
  width: min(100%, 920px);
}

.enterprise-billing-detail {
  display: grid;
  gap: 16px;
}

.enterprise-detail-list {
  margin: 0;
}

.enterprise-detail-list div {
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
}

.enterprise-attachment-panel,
.enterprise-note-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.enterprise-attachment-panel .payroll-panel-head {
  padding: 0;
  border: 0;
  background: transparent;
}

.enterprise-receipt-preview {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.enterprise-receipt-preview img {
  display: block;
  max-width: min(100%, 520px);
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.enterprise-linked-payments {
  display: grid;
  gap: 10px;
}

.enterprise-linked-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.enterprise-linked-payment div {
  display: grid;
  gap: 3px;
}

.enterprise-linked-payment span,
.enterprise-linked-payment small {
  color: var(--muted);
}

.enterprise-filter-toolbar {
  display: grid;
  grid-template-columns: 190px 112px auto minmax(260px, 320px);
  justify-content: end;
  gap: 12px;
  align-items: end;
  padding: 4px 0;
}

.enterprise-filter-toolbar .secondary-button {
  white-space: nowrap;
}

.enterprise-list-filter {
  padding: 4px 0 16px;
}

.enterprise-list-filter .payroll-field-grid {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.enterprise-list-filter .payroll-field {
  min-width: 128px;
}

.enterprise-list-filter .table-search-input {
  width: min(300px, 100%);
}

.enterprise-list-filter .secondary-button {
  white-space: nowrap;
}

.enterprise-company-table {
  width: 100%;
}

.enterprise-company-table .field-key {
  display: block;
  margin: 4px 0 0;
  white-space: normal;
}

.enterprise-company-action-cell {
  min-width: 360px;
}

.enterprise-company-actions {
  display: grid;
  gap: 8px;
}

.enterprise-company-actions .inline-field-row {
  flex-wrap: nowrap;
}

.enterprise-company-actions input[name="confirm_slug"] {
  min-width: 132px;
}

.enterprise-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 38px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.enterprise-restore-apply {
  margin-bottom: 6px;
}

.enterprise-shell .super-admin-accordion-grid {
  margin-top: 0;
}

.enterprise-shell .payroll-settings-accordion-head {
  min-height: 58px;
}

.enterprise-shell .accordion-head-copy small {
  font-weight: 400;
}


.payroll-tax-tables {
  display: grid;
  gap: 14px;
}

.payroll-tax-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-tax-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.payroll-tax-table-head h3 {
  margin: 0;
  font-size: 16px;
}

.payroll-tax-table-head span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-tax-table-head strong {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.payroll-tax-table .modal-table-wrap {
  border: 0;
  border-radius: 0;
}

.payroll-tax-grid {
  width: 100%;
}

.payroll-tax-grid input {
  min-width: 120px;
}

.payroll-inline-date {
  min-height: 34px;
  width: auto;
  max-width: 132px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.payroll-payslip-shell {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.payroll-payslip {
  display: grid;
  gap: 18px;
  width: min(100%, 840px);
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.payroll-payslip-head,
.payroll-payslip-grid,
.payroll-payslip-columns,
.payroll-payslip-net {
  display: grid;
  gap: 14px;
}

.payroll-payslip-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.payroll-payslip-head h2 {
  margin: 0;
  font-size: 25px;
}

.payroll-payslip-head div:last-child {
  text-align: right;
}

.payroll-payslip-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-payslip-grid div,
.payroll-payslip-timecard div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.payroll-payslip span,
.payroll-payslip-grid span,
.payroll-payslip-timecard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.payroll-payslip-section {
  display: grid;
  gap: 10px;
}

.payroll-payslip-section h3,
.payroll-payslip-columns h3 {
  margin: 0;
  font-size: 16px;
}

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

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

.payroll-payslip table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.payroll-payslip td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.payroll-payslip td:last-child {
  font-weight: 600;
  text-align: right;
}

.payroll-payslip tfoot td {
  border-bottom: 0;
  font-weight: 600;
}

.payroll-payslip-net {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  background: #f0fdfa;
}

.payroll-payslip-net strong {
  font-size: 25px;
}

.payroll-payslip-message {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #f8fafc;
}

.payroll-payslip-message h3,
.payroll-payslip-message p {
  margin: 0;
}

.payroll-payslip-message h3 {
  font-size: 14px;
}

.payroll-payslip-message p {
  color: var(--text);
  white-space: pre-line;
}

.payroll-payslip-notes {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  white-space: pre-line;
}

.payroll-pdf-renderer {
  position: fixed;
  left: -12000px;
  top: 0;
  width: 794px;
  background: #fff;
  pointer-events: none;
  z-index: -1;
}

.material-title-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-title-cell select {
  min-width: 180px;
}

.material-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.material-row-actions[hidden] {
  display: none;
}

.mini-button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.icon-only-button {
  width: 28px;
  padding: 0;
}

.material-picker-table {
  width: 100%;
}

.grand-total-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.grand-total-panel span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.grand-total-panel strong {
  font-size: 24px;
}

.event-readonly-notice {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e3a8a;
}

.event-readonly-notice strong {
  font-size: 14px;
}

.event-readonly-notice span {
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.quote-view-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.event-details-shell {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.event-details-view {
  display: grid;
  gap: 26px;
}

.event-return-form {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.quote-view-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.quote-export-page {
  width: min(100%, 794px);
  min-height: 1123px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: #fff;
}

.quote-export-capture {
  border: 0;
}

.quote-direct-export-holder {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 794px;
  pointer-events: none;
}

.quote-view {
  display: grid;
  gap: 22px;
  padding: 28px;
}

.quote-view-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.quote-company {
  display: flex;
  gap: 16px;
}

.quote-company img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.quote-company h2 {
  margin: 0 0 6px;
  font-weight: 600;
}

.quote-company span,
.quote-id-box span,
.quote-view-grid span,
.quote-view-total span {
  display: block;
  color: var(--muted);
}

.quote-document-title {
  margin: -4px 0 0;
  font-size: 24px;
  font-weight: 600;
}

.quote-company span {
  font-size: 13px;
  line-height: 1.45;
}

.quote-id-box {
  text-align: right;
}

.quote-id-box strong {
  font-size: 12px;
}

.quote-id-box em {
  display: block;
  max-width: 260px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.quote-id-box span {
  font-size: 12px;
}

.quote-view-section {
  display: grid;
  gap: 10px;
}

.quote-view-section h3 {
  margin: 0;
  font-size: 18px;
}

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

.quote-view-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.quote-view-table {
  width: 100%;
}

.quote-view-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.quote-view-total strong {
  font-size: 25px;
}

.event-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.event-status.active {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #5b21b6;
}

.event-status.ongoing {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #92400e;
}

.event-status.upcoming {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.event-status.pending {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.event-status.successful {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.event-status.suspended {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.event-status.cancelled {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

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

.payroll-field {
  display: grid;
  gap: 7px;
}

.payroll-field span {
  margin-bottom: 0;
}

.single-control,
.compound-control {
  display: grid;
  gap: 10px;
}

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

.compound-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compound-cell span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
}

.field-wide {
  grid-column: 1 / -1;
}

.section-rows {
  display: grid;
  gap: 14px;
}

.type-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.type-choice-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-weight: 600;
}

.type-choice-grid span {
  flex: 1;
  margin-bottom: 0;
}

.type-choice-grid input {
  width: 16px;
  height: 16px;
}

.section-row {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(150px, 1fr) 140px;
  gap: 12px;
  align-items: end;
  padding: 14px 48px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.section-row [data-options-field] {
  grid-column: 1 / -1;
}

.section-row-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  font-weight: 600;
}

.section-row-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.section-row-remove {
  position: absolute;
  top: 14px;
  right: 14px;
}

.add-row-button {
  justify-self: start;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfe;
  font-weight: 600;
}

.checkbox-grid input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.payroll-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5f6f86;
  font-size: 12px;
  font-weight: 600;
}

.payroll-inline-field input {
  width: 150px;
  min-height: 36px;
  border: 1px solid #d7e0ec;
  border-radius: 6px;
  padding: 7px 9px;
  color: #172033;
}

@media (max-width: 1160px) {
  .admin-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portal-summary-grid,
  .portal-mini-card-grid,
  .portal-balance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .billing-payment-layout,
  .billing-lower-grid {
    grid-template-columns: 1fr;
  }

  .enterprise-shell .enterprise-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .enterprise-analytics-grid {
    grid-template-columns: 1fr;
  }

  .enterprise-filter-toolbar {
    grid-template-columns: minmax(240px, 1fr) 180px 104px auto;
  }

  .enterprise-list-filter .payroll-field-grid {
    grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(110px, 150px)) auto;
  }

}

@media (max-width: 720px) {
  .company-email-choice-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}

@media (max-width: 980px) {
  .public-hero-band {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .public-hero-panel {
    min-height: auto;
  }

  .public-hero-panel img {
    min-height: 300px;
  }

  .public-preview-strip {
    width: calc(100% - 36px);
    margin-right: 18px;
    margin-bottom: 18px;
  }

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

}

@media (max-width: 760px) {
  .public-footer {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 18px;
    padding: 24px 20px;
  }

  .public-footer-links {
    flex-wrap: wrap;
  }

  .public-footer-copy {
    text-align: left;
    white-space: normal;
  }

  .public-info-grid {
    grid-template-columns: 1fr;
  }

  .public-info-hero {
    padding: 26px 20px;
  }

  .public-contact-layout,
  .public-contact-fields {
    grid-template-columns: 1fr;
  }

  .public-contact-form-panel,
  .public-contact-aside {
    padding: 22px 20px;
  }

  .topbar,
  .hero-panel,
  .workspace-grid,
  .section-head,
  .settings-head-actions {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }

  .applicant-detail-grid {
    grid-template-columns: 1fr;
  }

  .public-home .topbar .platform-brand-logo {
    height: 20px;
    max-width: min(260px, calc(100vw - 28px));
  }

  .topbar nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .public-home .topbar nav a {
    flex: 1;
    min-height: 34px;
    min-width: 0;
  }

  .attention-panel {
    left: 0;
    right: auto;
  }

  .menu-panel {
    left: auto;
    right: 0;
  }

  .menu-panel-admin {
    width: min(328px, calc(100vw - 32px));
  }

  .menu-panel-groups {
    grid-template-columns: 1fr;
  }

  .shell {
    width: min(100% - 28px, 1120px);
    margin-top: 18px;
  }

  .shell.full-shell {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
  }

  .enterprise-shell {
    gap: 16px;
  }

  .enterprise-filter-toolbar {
    grid-template-columns: 1fr;
  }

  .enterprise-filter-toolbar .secondary-button,
  .enterprise-filter-toolbar .table-search-input {
    width: 100%;
  }

  .enterprise-shell .enterprise-metric-grid {
    grid-template-columns: 1fr;
  }

  .enterprise-list-filter .payroll-field-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .enterprise-list-filter .table-search-input {
    width: 100%;
  }

  .portal-summary-grid,
  .portal-mini-card-grid,
  .portal-balance-grid,
  .portal-split-panel {
    grid-template-columns: 1fr;
  }

  .enterprise-list-filter .secondary-button {
    width: 100%;
  }

  .enterprise-company-actions .inline-field-row {
    flex-wrap: wrap;
  }

  .enterprise-company-action-cell {
    min-width: 270px;
  }

  .checkbox-grid {
    grid-template-columns: 1fr;
  }

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

  .employee-custom-field-row,
  .report-column-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-guide-banner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .onboarding-guide-actions {
    justify-content: stretch;
  }

  .onboarding-guide-actions .compact-button {
    width: 100%;
  }

  .expense-overview-grid,
  .expense-entry-form,
  .event-final-invoice-form,
  .event-charge-form {
    grid-template-columns: 1fr;
  }

  .compound-control {
    grid-template-columns: 1fr;
  }

  .section-row {
    grid-template-columns: 1fr;
  }

  .type-choice-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    display: grid;
    align-items: start;
  }

  .settings-head-actions {
    display: grid;
    width: 100%;
  }

  .settings-head-actions.table-filter-toolbar {
    display: flex !important;
    width: 100%;
  }

  .table-filter-panel-grid {
    grid-template-columns: 1fr;
  }
  
  .settings-head-actions .table-search-input {
    width: auto !important;
  }

  .report-filter-form,
  .report-card-grid,
  .setup-guide,
  .setup-status-panel,
  .setup-check-item,
  .setup-import-grid,
  .payroll-action-grid,
  .payroll-review-grid,
  .report-grid-two,
  .payroll-leave-layout,
  .payroll-report-grid,
  .payroll-annual-cards,
  .payroll-compliance-cards,
  .payroll-payslip-head,
  .payroll-payslip-grid,
  .payroll-payslip-columns,
  .payroll-payslip-timecard {
    display: grid;
    grid-template-columns: 1fr;
  }

  .public-error-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .table-toolbar {
    flex-wrap: wrap;
  }

  .compact-toolbar .table-search-input {
    width: min(220px, calc(100vw - 140px));
  }

  .admin-queue-grid {
    grid-template-columns: 1fr;
  }

  .billing-summary-grid,
  .billing-payment-fields {
    grid-template-columns: 1fr;
  }

  .dashboard-queue-row {
    align-items: start;
    flex-direction: column;
  }

  .dashboard-queue-meta {
    display: flex;
    align-items: center;
    justify-items: start;
    gap: 10px;
  }

  .public-card-grid {
    grid-template-columns: 1fr;
  }

  .public-hero-band,
  .public-capability-grid,
  .public-pricing-spotlight,
  .public-price-calculator,
  .public-access-grid {
    grid-template-columns: 1fr;
  }

  .public-page {
    width: min(100% - 28px, 1120px);
    padding-top: 6px;
    gap: 16px;
  }

  .public-hero-band,
  .public-section {
    padding: 14px;
  }

  .public-hero-copy {
    gap: 10px;
  }

  .public-hero-band h2 {
    font-size: 25px;
    line-height: 1.25;
  }

  .hero-panel h2 {
    font-size: 25px;
  }

  .public-hero-text {
    font-size: 13px;
    line-height: 1.42;
  }

  .public-hero-stats {
    display: none;
  }

  .public-hero-panel::before {
    inset: 28px -10px -10px 24px;
  }

  .public-hero-panel img {
    min-height: 118px;
    max-height: 136px;
  }

  .public-preview-strip {
    display: none;
  }

  .public-preview-strip strong {
    font-size: 14px;
  }

  .public-page .report-card {
    min-height: auto;
  }

  .public-price-main > strong {
    font-size: 25px;
  }

  .public-hero-actions,
  .public-access-card .compact-button {
    width: 100%;
  }

  .public-hero-actions {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .public-hero-actions .compact-button {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .payroll-run-toolbar,
  .payroll-report-head {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-request-hero,
  .employee-request-actions,
  .employee-profile-hero,
  .employee-profile-sections,
  .compliance-detail-grid {
    align-items: stretch;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .employee-request-facts,
  .employee-request-timeline,
  .employee-profile-metrics,
  .compliance-detail-cards {
    grid-template-columns: 1fr;
  }

  .employee-request-actions button {
    width: 100%;
  }

  .payroll-modal-employee-profile {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .payroll-detail-facts,
  .payroll-detail-section dl {
    grid-template-columns: 1fr;
  }

  .payroll-detail-hero {
    display: grid;
  }

  .employee-profile-photo,
  .employee-profile-photo-empty {
    width: 72px;
    height: 72px;
  }

  .payroll-run-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .payroll-run-actions .payroll-approval-actions,
  .payroll-run-actions .payroll-actions-menu {
    width: auto;
  }

  .payroll-status-control {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .report-filter-form select,
  .report-filter-form input {
    width: 100%;
  }
}

/* Keep every grid control strip predictable across responsive layouts. */
.table-pager,
.table-pagination,
.enterprise-pager {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  position: relative;
  z-index: 1;
}

.table-pager[hidden],
.table-pagination[hidden],
.enterprise-pager[hidden] {
  display: none !important;
}

.table-page-summary {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.table-page-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

.table-page-number,
.table-page-nav {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.table-page-number.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.table-page-ellipsis {
  padding: 0 4px;
  color: var(--muted);
  font-weight: 600;
}

.table-filter-toolbar,
.settings-head-actions.table-filter-toolbar,
.enterprise-filter-toolbar.table-filter-toolbar {
  display: flex !important;
  width: auto;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  overflow-x: auto;
}

.table-filter-toggle {
  width: max-content;
  margin: 0 0 14px;
  padding: 9px 14px;
}

.table-standard-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.table-standard-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.table-standard-action-row .table-filter-toggle {
  margin: 0;
}

.table-filter-toggle span:last-child {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.16s ease;
}

.table-filter-toggle.is-open span:last-child {
  transform: rotate(180deg);
}

.table-filter-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.table-filter-panel[hidden] {
  display: none;
}

.table-filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.table-filter-panel-head strong {
  font-size: 14px;
}

.table-filter-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

.table-filter-panel-grid .payroll-field {
  display: grid;
  gap: 6px;
}

.table-filter-panel-grid .payroll-field span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.table-filter-panel-grid select,
.table-filter-panel-grid input {
  width: 100%;
}

.table-filter-panel-grid button {
  align-self: end;
}

.settings-head-actions.table-filter-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.settings-section-head:has(.settings-head-actions.table-filter-toolbar) {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  gap: 12px;
}

.settings-section-head:has(.settings-head-actions.table-filter-toolbar) .settings-head-actions.table-filter-toolbar {
  width: 100%;
}

.table-filter-toolbar .table-search-input,
.table-filter-toolbar select,
.table-filter-toolbar button {
  flex: 0 0 auto;
}

.table-filter-toolbar .table-search-input {
  flex: 0 0 220px;
  order: 20;
  width: 220px;
  margin-left: auto;
}

.table-filter-toolbar .table-entries-field {
  order: 0;
}

.table-filter-toolbar select {
  width: auto;
  min-width: 92px;
}

.table-filter-toolbar .payroll-field {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.table-filter-toolbar .payroll-field span {
  margin: 0;
  font-size: 12px;
}

.table-entries-field::after {
  content: "entries per page";
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.auto-grid-toolbar .table-search-input {
  flex: 0 0 220px;
  width: 220px;
  min-width: 0;
}

.enterprise-filter-toolbar.table-filter-toolbar .table-search-input,
.enterprise-list-filter.table-filter-toolbar .table-search-input {
  order: 20;
  margin-left: auto;
}

.enterprise-list-filter.table-filter-toolbar .payroll-field-grid {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
}

.dashboard-runs-panel .payroll-panel-head {
  flex-wrap: wrap;
}

.dashboard-runs-panel .table-filter-toolbar {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  overflow-x: visible;
}

.dashboard-runs-panel .compact-toolbar .table-search-input {
  flex: 0 0 220px !important;
  width: 220px !important;
}

.dashboard-runs-panel .table-standard-action-row {
  justify-content: flex-end;
}

.dashboard-runs-panel .table-standard-actions {
  margin-left: auto;
}

.payroll-panel-head:has(.table-filter-toolbar) {
  align-items: stretch;
  flex-wrap: wrap;
}

.payroll-panel-head:has(.table-filter-toolbar) > div:first-child {
  flex: 1 1 100%;
}

.payroll-panel-head:has(.table-filter-toolbar) .table-standard-action-row,
.payroll-panel-head:has(.table-filter-toolbar) .table-filter-panel,
.payroll-panel-head:has(.table-filter-toolbar) .table-filter-toolbar {
  flex: 1 1 100%;
  width: 100%;
}

.table-filter-panel[hidden],
.payroll-panel-head:has(.table-filter-toolbar) .table-filter-panel[hidden],
.settings-section-head:has(.settings-head-actions.table-filter-toolbar) .table-filter-panel[hidden] {
  display: none !important;
}

.portal-timekeeping-panel,
.attendance-portal-settings {
  margin: 14px 0 18px;
  padding: 16px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: #fff;
}

.payroll-attendance-view .attendance-portal-settings {
  margin-top: 18px;
}

.attendance-feature-toggle {
  align-items: flex-start;
  margin-bottom: 12px;
}

.attendance-feature-toggle span,
.attendance-reminder-grid .settings-option-box span {
  display: grid;
  gap: 2px;
}

.attendance-feature-toggle small,
.attendance-reminder-grid .settings-option-box small,
.attendance-reminder-grid .payroll-field small {
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.attendance-reminder-grid {
  align-items: stretch;
}

.attendance-reminder-grid .payroll-field input {
  max-width: 140px;
}

.attendance-policy-box {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: #f7fbfa;
}

.attendance-policy-box h3,
.attendance-policy-box p {
  margin: 0;
}

.app-permission-section {
  margin: 12px 0 0;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.permission-option {
  min-height: 52px;
}

.portal-timekeeping-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.portal-timekeeping-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: #f8fafc;
}

.portal-timekeeping-grid span {
  display: block;
  color: var(--muted, #64748b);
  font-size: 12px;
}

.portal-timekeeping-grid strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.attendance-portal-settings .payroll-panel-head {
  margin-bottom: 12px;
}

.attendance-portal-head {
  align-items: flex-start;
  margin-bottom: 12px;
}

.attendance-portal-head .save-status {
  margin-top: 4px;
}


@media (max-width: 760px) {
  .portal-timekeeping-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-runs-panel .payroll-panel-head {
    display: grid;
    align-items: start;
  }

  .dashboard-runs-panel .table-filter-toolbar,
  .settings-section-head .table-filter-toolbar {
    width: 100%;
    justify-content: flex-start !important;
  }

  .dashboard-runs-panel .table-filter-toolbar {
    margin-left: 0;
    min-width: 0;
    padding-left: 0;
    overflow-x: visible;
  }

  .dashboard-runs-panel .table-search-input {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto !important;
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  .payslip-print,
  .payslip-print *,
  .payroll-print-area,
  .payroll-print-area * {
    visibility: visible;
  }

  .payslip-print,
  .payroll-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
    box-shadow: none;
  }

  .payroll-print-area + .payroll-print-area {
    position: static;
    margin-top: 16px;
  }

  .no-print {
    display: none;
  }
}