:root {
  --bg: #0b1020;
  --panel: #121a33;
  --panel-2: #0f172e;
  --text: #e7ecff;
  --muted: rgba(231, 236, 255, 0.75);
  --border: rgba(231, 236, 255, 0.12);
  --accent: #7c3aed;
  --accent-2: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(124, 58, 237, 0.25), transparent 60%),
              radial-gradient(900px 600px at 70% 0%, rgba(34, 197, 94, 0.18), transparent 55%),
              var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(10px);
}

.topbar__title { display: flex; gap: 10px; align-items: center; }
.topbar__logo { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.topbar__status { display: flex; gap: 10px; align-items: center; }

.layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: calc(100vh - 56px);
}

.nav {
  padding: 14px;
  border-right: 1px solid var(--border);
  background: rgba(18, 26, 51, 0.35);
}

.nav__item {
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid var(--border);
  background: rgba(18, 26, 51, 0.55);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 140ms ease;
}
.nav__item:hover { transform: translateY(-1px); border-color: rgba(231, 236, 255, 0.22); }
.nav__item.is-active { border-color: rgba(124, 58, 237, 0.55); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }
.nav__sub {
  display: grid;
  gap: 6px;
  margin: 6px 0 12px 14px;
}
.nav__sub[hidden] { display: none; }
.nav__subitem {
  background: rgba(18, 26, 51, 0.45);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(231, 236, 255, 0.12);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: 140ms ease;
}
.nav__subitem:hover { transform: translateY(-1px); border-color: rgba(231, 236, 255, 0.22); }
.nav__subitem.is-active { border-color: rgba(124, 58, 237, 0.55); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }

.content { padding: 18px; min-width: 0; }
h1 { margin: 0 0 14px; font-size: 24px; }
h2 { margin: 0 0 12px; font-size: 16px; }

.cards { display: grid; gap: 14px; }
.cards--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 14px;
}
.card {
  background: rgba(18, 26, 51, 0.65);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.card--muted {
  background: rgba(15, 23, 46, 0.45);
  box-shadow: none;
}
.card--subtle {
  background: rgba(15, 23, 46, 0.38);
  box-shadow: none;
  padding: 12px;
}
.card--collapsible { padding: 0; }
.card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}
.card__header::-webkit-details-marker { display: none; }
.card__header h2 { margin: 0; }
.card--collapsible:not([open]) .card__header { border-bottom: none; }
.card__body { padding: 14px; }
.collapse__chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  transition: transform 140ms ease;
}
.card--collapsible[open] .collapse__chevron { transform: rotate(180deg); }

.row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.stack { display: grid; gap: 10px; }
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
.tab {
  border: 1px solid var(--border);
  background: rgba(15, 23, 46, 0.6);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: 140ms ease;
}
.tab:hover { transform: translateY(-1px); border-color: rgba(231, 236, 255, 0.22); }
.tab.is-active {
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(124, 58, 237, 0.25);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
}
.settings-actions {
  position: sticky;
  top: 70px;
  z-index: 5;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -4px 14px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 26, 51, 0.94);
  backdrop-filter: blur(10px);
}
.tab-panel { display: grid; gap: 14px; }
.settings-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 23, 46, 0.4);
  display: grid;
  gap: 12px;
}
.settings-section h3 { margin: 0; font-size: 13px; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}
.grow { flex: 1; }

.report-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.report-workspace--single {
  grid-template-columns: 1fr;
}
.report-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.report-nav-panel {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18, 26, 51, 0.65);
  box-shadow: var(--shadow);
}
.nav .report-nav-panel {
  position: static;
  margin-top: 8px;
  padding: 12px;
  background: rgba(18, 26, 51, 0.58);
  box-shadow: none;
}
.report-nav-panel__header h2 {
  margin: 0;
  font-size: 16px;
}
.report-nav-group {
  border-top: 1px solid rgba(231, 236, 255, 0.08);
  padding-top: 8px;
}
.report-nav-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.report-nav-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.report-nav-group summary::-webkit-details-marker {
  display: none;
}
.report-nav-group summary::after {
  content: '>';
  color: var(--muted);
  font-size: 13px;
  transition: transform 0.15s ease;
}
.report-nav-group[open] summary {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.12);
  color: var(--text);
}
.report-nav-group[open] summary::after {
  transform: rotate(90deg);
}
.report-nav-group__items {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-left: 8px;
}
.report-nav-item {
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.report-nav-item:hover {
  border-color: rgba(231, 236, 255, 0.14);
  background: rgba(231, 236, 255, 0.06);
}
.report-nav-item.active {
  border-color: rgba(124, 58, 237, 0.75);
  background: rgba(124, 58, 237, 0.2);
}
.report-controls {
  display: grid;
  gap: 12px;
}
.report-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18, 26, 51, 0.65);
  box-shadow: var(--shadow);
}
.report-panel__header,
.report-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.report-panel__header h2,
.report-preview__header h2 {
  margin: 0;
}
.report-scope {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(231, 236, 255, 0.18);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
}
.report-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.report-form--builder {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.report-form--range {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.report-form .field {
  min-width: 0;
}
.report-form .field input,
.report-form .field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.report-form__wide {
  grid-column: 1 / -1;
}
.report-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
}
.report-options[hidden] {
  display: none;
}
.report-options .report-form__wide {
  grid-column: 1 / -1;
}
.report-specific-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid rgba(231, 236, 255, 0.1);
  border-radius: 10px;
  background: rgba(15, 23, 46, 0.32);
}
.report-specific-options[hidden] {
  display: none;
}
.report-specific-options .report-form__wide {
  grid-column: 1 / -1;
}
.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--text);
  font-size: 13px;
}
.report-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.report-preview {
  min-width: 0;
  overflow: hidden;
}
.report-preview .tablewrap {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.table-scrollbar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: rgb(15, 23, 46);
}
.table-scrollbar[hidden] {
  display: none;
}
.table-scrollbar__spacer {
  height: 1px;
}
.report-document {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.report-document[hidden] {
  display: none;
}
.report-document__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(231, 236, 255, 0.12);
  border-radius: 8px;
  background: rgba(15, 23, 46, 0.55);
}
.report-document__bar span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.report-document__frame {
  width: 100%;
  min-height: 760px;
  border: 0;
  border-radius: 8px;
  background: #eee;
}
.standard-report-sheet {
  box-sizing: border-box;
  width: 1120px;
  min-height: 790px;
  margin: 0 auto;
  padding: 34px 42px 28px;
  background: #fff;
  color: #111;
  font: 11px/1.35 Arial, Helvetica, sans-serif;
}
.standard-report-sheet header {
  margin-bottom: 28px;
  text-align: center;
}
.standard-report-sheet h1 {
  margin: 0 0 7px;
  color: #111;
  font-size: 25px;
  text-decoration: underline;
  text-underline-offset: 7px;
}
.standard-report-sheet header p {
  margin: 4px 0;
}
.standard-report-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 20px;
  margin: 0 0 22px;
}
.standard-report-meta div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
}
.standard-report-meta dt {
  font-weight: 700;
}
.standard-report-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.standard-report-tablewrap {
  overflow-x: auto;
}
.standard-report-sheet table {
  width: 100%;
  border-collapse: collapse;
  color: #111;
  font-size: 10px;
}
.standard-report-sheet th,
.standard-report-sheet td {
  padding: 5px 6px;
  border: 0;
  border-bottom: 1px solid #bbb;
  background: #fff;
  color: #111;
  text-align: left;
  vertical-align: top;
}
.standard-report-sheet th {
  border-bottom-color: #111;
  font-weight: 700;
  vertical-align: bottom;
}
.standard-report-sheet .num {
  text-align: right;
  white-space: nowrap;
}
.standard-report-row--employee td {
  border-top: 1px solid #777;
}
.standard-report-row--summary td {
  border-top: 1px solid #111;
  font-weight: 700;
}
.standard-report-sheet footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 72px;
  padding-top: 6px;
  border-top: 1px solid #111;
  font-size: 9px;
}
.standard-report-supplement {
  min-height: 0;
  margin-top: 20px;
}
.standard-report-supplement h3 {
  margin: 20px 0 10px;
  color: #111;
  font-size: 14px;
}
#reportDocument:has(.standard-report-sheet) {
  overflow-x: auto;
}
@media (max-width: 700px) {
  .standard-report-sheet {
    min-width: 760px;
    padding: 28px 30px 24px;
  }
}
@media print {
  .standard-report-sheet {
    width: 100%;
    min-height: 0;
    padding: 0;
  }
  .standard-report-sheet thead { display: table-header-group; }
  .standard-report-sheet tr { break-inside: avoid; }
}
.crystal-report {
  width: 1120px;
  min-height: 790px;
  margin: 0 auto;
  padding: 18px 36px 24px;
  border-radius: 2px;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.25;
}
.crystal-report__header {
  margin-bottom: 14px;
  text-align: center;
}
.crystal-report__header h1 {
  margin: 0 0 3px;
  color: #111;
  font-size: 18px;
}
.crystal-report__header p {
  margin: 4px 0 0;
}
.crystal-report__columns,
.crystal-report__line {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 72px 88px 92px 180px;
  gap: 10px;
  align-items: baseline;
}
.crystal-report__columns {
  padding: 0 0 5px 0;
  border-bottom: 1px solid #8a8a8a;
  font-weight: 700;
  text-align: right;
}
.crystal-report__columns span:first-child {
  text-align: left;
}
.crystal-report__line {
  min-height: 20px;
  padding: 2px 0;
}
.crystal-report__branch {
  margin-top: 10px;
}
.crystal-report__summary {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid #8a8a8a;
}
.crystal-report__branch h3,
.crystal-report__branch h4,
.crystal-report__branch h5 {
  margin: 5px 0 3px;
  color: #111;
  font-size: 10px;
  font-weight: 700;
}
.crystal-report__branch h4 {
  margin-left: 12px;
}
.crystal-report__branch h5 {
  margin-left: 24px;
}
.crystal-report__period {
  margin: 7px 0 2px 44px;
  font-weight: 700;
}
.crystal-report__desc {
  padding-left: 44px;
}
.crystal-report__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.crystal-report__sign {
  display: inline-block;
  min-width: 10px;
  text-align: center;
}
.payslip-run-report {
  padding: 18px;
  border: 1px solid rgba(231, 236, 255, 0.12);
  border-radius: 8px;
  background: rgba(15, 23, 46, 0.72);
}
.payslip-run-report__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.payslip-run-report__header h1 {
  margin: 0;
  font-size: 18px;
}
.payslip-run-report__header p {
  margin: 4px 0 0;
  color: var(--muted);
}
.payslip-run-report__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.payslip-run-report__stats div {
  padding: 10px 12px;
  border: 1px solid rgba(231, 236, 255, 0.12);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.08);
}
.payslip-run-report__stats span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.payslip-run-report__stats strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.payslip-run-report__tablewrap {
  max-height: 620px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.payslip-run-report__table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}
.payslip-run-report__table th,
.payslip-run-report__table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(231, 236, 255, 0.1);
  text-align: left;
  white-space: nowrap;
}
.payslip-run-report__table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgb(17, 24, 49);
  color: var(--muted);
  font-size: 11px;
}
.payslip-run-report__table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.payslip-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
}
.report-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.report-meta__item {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(231, 236, 255, 0.12);
  border-radius: 8px;
  background: rgba(15, 23, 46, 0.38);
}
.report-meta__item strong {
  display: block;
  overflow-wrap: anywhere;
}
.report-meta__item span,
.report-stat span,
.report-field span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.report-stat {
  padding: 10px 12px;
  border: 1px solid rgba(231, 236, 255, 0.14);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.08);
}
.report-stat strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.report-detail {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(231, 236, 255, 0.12);
  border-radius: 10px;
  background: rgba(15, 23, 46, 0.44);
}
.report-detail[hidden] {
  display: none;
}
.report-detail__section {
  display: grid;
  gap: 8px;
}
.report-detail__section h3 {
  margin: 0;
  font-size: 13px;
}
.report-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.report-field {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(4, 12, 28, 0.35);
}
.report-field strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.field { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea {
  height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 46, 0.75);
  color: var(--text);
  outline: none;
}
.field textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}
.field input[type="date"] {
  color-scheme: dark;
}
.field .value {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 46, 0.55);
  color: var(--text);
  display: flex;
  align-items: center;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(124, 58, 237, 0.6); }
.password-entry { position: relative; display: block; }
.password-entry input { width: 100%; padding-right: 64px; }
.password-entry .password-entry__toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); min-height: 30px; padding: 4px 9px; border: 0; border-radius: 7px; background: #e8f0ed; color: #214b48; font: inherit; font-weight: 700; cursor: pointer; }
.password-entry .password-entry__toggle:focus-visible { outline: 2px solid #267ab5; outline-offset: 2px; }

.btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(124, 58, 237, 0.65);
  background: rgba(124, 58, 237, 0.25);
  color: var(--text);
  cursor: pointer;
  transition: 140ms ease;
}
.btn:hover { transform: translateY(-1px); background: rgba(124, 58, 237, 0.35); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn--secondary {
  border-color: rgba(231, 236, 255, 0.22);
  background: rgba(231, 236, 255, 0.06);
}
.btn--tiny {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}
.btn--danger {
  border-color: rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.22);
}
.btn--locked {
  border-color: rgba(124, 58, 237, 0.9);
  background: rgba(124, 58, 237, 0.55);
  color: #fff;
}
.btn--locked:disabled {
  opacity: 1;
  cursor: default;
}

.muted { color: var(--muted); }
.link { color: var(--text); text-decoration: none; border-bottom: 1px dashed rgba(231, 236, 255, 0.3); }
.link:hover { border-bottom-color: rgba(231, 236, 255, 0.6); }

.pill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(231, 236, 255, 0.06);
}
.pill--ok { border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.12); }
.pill--warn { border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.12); }
.pill--bad { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.14); }

.tablewrap { overflow: auto; border-radius: 12px; border: 1px solid var(--border); max-height: 540px; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(231, 236, 255, 0.08);
  text-align: left;
  white-space: nowrap;
}
.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  font-weight: 600;
  background: rgb(15, 23, 46);
}
.table th.num,
.table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table tr:hover td { background: rgba(124, 58, 237, 0.06); }
.table tr.report-row--employee-start td {
  border-top: 8px solid rgba(15, 23, 46, 0.95);
  font-weight: 600;
}

.status-message {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(231, 236, 255, 0.04);
  line-height: 1.45;
  white-space: pre-line;
}

.status-message:empty { display: none; }
.table tr.report-row--summary td {
  font-weight: 700;
  background: rgba(20, 184, 166, 0.08);
}
.table tfoot td {
  background: rgba(15, 23, 46, 0.5);
  font-weight: 600;
  border-top: 1px solid rgba(231, 236, 255, 0.12);
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(18, 26, 51, 0.9);
  box-shadow: var(--shadow);
  color: var(--text);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}
.modal__card {
  width: min(720px, 100%);
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .nav { position: sticky; top: 56px; display: flex; gap: 10px; overflow: auto; }
  .nav__item { margin: 0; width: auto; white-space: nowrap; }
  .grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .report-workspace { grid-template-columns: 1fr; }
  .report-nav-panel { position: static; }
  .nav .report-nav-panel { flex: 0 0 280px; max-height: 70vh; overflow: auto; }
  .report-form--builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .report-form--range { grid-template-columns: 1fr; }
  .report-form--builder { grid-template-columns: 1fr; }
  .report-options { grid-template-columns: 1fr; }
  .report-specific-options { grid-template-columns: 1fr; }
  .report-actions { justify-content: stretch; }
  .report-actions .btn { flex: 1 1 auto; }
}

.statutory-day-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.statutory-day-toolbar--filters {
  flex-wrap: wrap;
}

.statutory-day-toolbar--filters .field:not(.grow) {
  min-width: 190px;
}

.statutory-day-configuration {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  border-left: 5px solid var(--accent);
}

.statutory-day-configuration p {
  margin: 4px 0 0;
}

.statutory-day-configuration__values {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.statutory-day-configuration__values > span {
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  font-size: .78rem;
}

.statutory-day-configuration__values strong {
  color: var(--text);
  font-size: .9rem;
}

.statutory-day-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.statutory-day-summary__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.statutory-day-summary__item span {
  color: var(--muted);
  font-size: .82rem;
}

.statutory-day-summary__item strong {
  font-size: 1.45rem;
}

.statutory-day-guidance {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  font-size: .86rem;
}

.statutory-day-list {
  display: grid;
  gap: 14px;
}

.statutory-day-card {
  display: grid;
  gap: 14px;
}

.statutory-day-card__head,
.statutory-day-card__body,
.statutory-day-decision,
.statutory-day-date-choice {
  display: flex;
  gap: 12px;
}

.statutory-day-card__head {
  justify-content: space-between;
  align-items: start;
}

.statutory-day-card__head h2,
.statutory-day-card__head p,
.statutory-day-card__body h3,
.statutory-day-card__body p {
  margin: 0;
}

.statutory-day-card__state {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.statutory-day-date-choice,
.statutory-day-decision {
  align-items: end;
  flex-wrap: wrap;
}

.statutory-day-date-choice > span {
  color: var(--muted);
  font-size: .82rem;
  align-self: center;
}

.statutory-day-link {
  width: 100%;
  border: 1px solid #e7b84b;
  border-radius: 7px;
  background: #fff7d6;
  color: #5a4300;
  padding: 4px 6px;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

.statutory-day-card__body > div {
  flex: 1 1 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.statutory-day-evidence ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.statutory-day-assignments,
.statutory-day-reasons {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}

.statutory-day-assignments summary,
.statutory-day-reasons summary {
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

.statutory-day-assignments ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}

.statutory-day-assignments li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(160px, 1fr);
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--panel);
}

.statutory-day-assignments small,
.statutory-day-assignments span,
.statutory-day-audit {
  color: var(--muted);
}

.statutory-day-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.statutory-day-signal {
  padding: 10px;
  border-radius: 8px;
  background: var(--panel);
}

.statutory-day-signal ul,
.statutory-day-card .status-message ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.statutory-day-signal.is-positive { border-left: 4px solid #18885b; }
.statutory-day-signal.is-negative { border-left: 4px solid #bd4753; }
.statutory-day-signal.is-review { border-left: 4px solid #d0921d; }
.statutory-day-audit { margin: 0; font-size: .8rem; }

@media (max-width: 1000px) {
  .statutory-day-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statutory-day-guidance { grid-template-columns: 1fr; }
  .statutory-day-card__body { flex-direction: column; }
  .statutory-day-configuration { align-items: stretch; flex-direction: column; }
  .statutory-day-configuration__values { justify-content: flex-start; }
  .statutory-day-assignments li,
  .statutory-day-signals { grid-template-columns: 1fr; }
}

/* NZ Payroll V2 shell and workforce workspaces. Payroll documents and
   calculation screens keep their proven structure. */
:root {
  --bg: #f3f7f4;
  --panel: #ffffff;
  --panel-2: #f6faf7;
  --text: #102b24;
  --muted: #60756f;
  --border: #d7e2dc;
  --accent: #145844;
  --accent-2: #d7f458;
  --shadow: 0 12px 32px rgba(24, 67, 54, 0.09);
}

body {
  background: linear-gradient(180deg, #edf4f0 0, #f7faf8 280px, #f3f7f4 100%);
}

.topbar {
  min-height: 66px;
  padding: 12px 20px;
  border-color: rgba(255,255,255,.09);
  background: #0c3027;
  color: #fff;
  box-shadow: 0 5px 18px rgba(8, 36, 29, .16);
}
.topbar .pill { color: #edf7f1; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.topbar .btn--secondary { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.topbar__logo { width: 38px; height: 38px; }

.layout { grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100vh - 66px); }
.nav { padding: 18px 14px; border-color: var(--border); background: rgba(255,255,255,.68); }
.nav__item, .nav__subitem {
  border-color: transparent;
  background: transparent;
  color: var(--text);
  font-weight: 650;
}
.nav__item:hover, .nav__subitem:hover { border-color: #cbdcd3; background: #edf5f0; }
.nav__item.is-active, .nav__subitem.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(20,88,68,.2);
}
.nav .report-nav-panel, .report-nav-panel, .report-panel, .settings-section,
.card, .card--muted, .card--subtle {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
}
.nav .report-nav-panel { background: #f7faf8; box-shadow: none; }
.report-nav-group { border-color: var(--border); }
.report-nav-group summary, .report-nav-item { color: var(--muted); }
.report-nav-group[open] summary, .report-nav-item.active {
  color: var(--accent); border-color: #b9d5c8; background: #eaf5ef; box-shadow: none;
}
.report-nav-item:hover { border-color: var(--border); background: #f0f6f2; }

.content { padding: 26px clamp(18px, 3vw, 44px); }
h1 { font-size: 28px; color: #102b24; }
h2 { color: #102b24; }
.card { border-radius: 16px; }
.card__header { border-color: var(--border); }

.field input, .field select, .field textarea, .field .value {
  color: var(--text);
  border-color: #cddbd4;
  background: #fbfdfc;
}
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] {
  color-scheme: light;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #4b9478;
  box-shadow: 0 0 0 3px rgba(75,148,120,.12);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { color: #7c8c87; background: #edf1ef; }
.btn {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  font-weight: 700;
}
.btn:hover { background: #0d4635; }
.btn--secondary { color: #163a30; border-color: #cbdad3; background: #eef4f0; }
.btn--secondary:hover { background: #e2ece7; }
.btn--danger { color: #8f2730; border-color: #e5b7bc; background: #fae9eb; }
.btn--danger:hover { background: #f4d9dd; }

.payroll-group-settings { display: grid; gap: 8px; margin: 14px 0; }
.payroll-group-item { align-items: center; background: #f5f8f7; border: 1px solid #d9e4e1; border-radius: 10px; display: flex; justify-content: space-between; padding: 10px 12px; }
.payroll-group-item strong { color: #173f3f; }
.payroll-group-add { align-items: end; }
.organisation-structure-panel { padding: 22px; border: 1px solid #d9e4e1; border-radius: 16px; background: #fff; }
.organisation-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.organisation-panel-head h3 { margin: 2px 0 4px; }
.organisation-panel-head p { margin: 0; }
.organisation-eyebrow { color: #607971; font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.organisation-tree { display: grid; gap: 9px; }
.organisation-root { display: grid; grid-template-columns: 90px minmax(150px, 1fr); align-items: center; gap: 12px; padding: 13px 15px; border-radius: 11px; color: #fff; background: #0b4b5b; }
.organisation-root__level { color: #d5ebed; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.organisation-root small { display: block; margin-top: 3px; color: #c9e2e5; }
.organisation-node { margin-left: calc(var(--organisation-depth, 0) * 19px); }
.organisation-node__main { display: grid; grid-template-columns: 105px minmax(190px, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #d9e4e1; border-radius: 10px; background: #f7faf8; }
.organisation-node[data-type="company"] > .organisation-node__main { margin-top: 1px; border-left: 4px solid #0b4b5b; background: #fbfdfc; }
.organisation-node[data-type="branch"] > .organisation-node__main { border-left: 4px solid #4b9478; }
.organisation-node[data-type="department"] > .organisation-node__main { border-left: 4px solid #8ebaa6; }
.organisation-node[data-type="shift"] > .organisation-node__main { border-left: 4px solid #bdcec6; }
.organisation-node__level { display: flex; align-items: center; gap: 7px; color: #547168; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.organisation-expand { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #cadbd3; border-radius: 8px; color: #285a49; background: #f2f7f4; cursor: pointer; }
.organisation-expand span { display: block; font-size: 20px; line-height: 1; transition: transform .15s ease; }
.organisation-expand[aria-expanded="true"] span { transform: rotate(90deg); }
.organisation-node.is-collapsed > .organisation-node__children { display: none; }
.organisation-node__children { display: grid; gap: 8px; margin-top: 8px; }
.organisation-node__identity small { display: block; margin-top: 3px; color: #70847d; }
.organisation-node__actions { display: flex; gap: 7px; flex-wrap: wrap; }
.organisation-node__actions .btn { padding: 7px 10px; font-size: 12px; }
.organisation-unit-form { display: grid; gap: 12px; padding: 15px; border: 1px solid #cfddd7; border-radius: 12px; background: #f5f9f7; }
.organisation-unit-form[hidden] { display: none; }
.organisation-shift-fields { padding: 14px; border: 1px solid #cfddd7; border-radius: 10px; }
.organisation-shift-fields[hidden] { display: none; }
.organisation-working-days { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #d9e4e1; border-radius: 10px; }
.organisation-working-days legend { color: #46645a; font-size: 12px; font-weight: 700; }
.organisation-working-days label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.organisation-working-days input { width: auto; margin: 0; }
.organisation-empty { padding: 18px; border: 1px dashed #c8d8d1; border-radius: 10px; color: #627970; text-align: center; }
@media (max-width: 900px) {
  .organisation-panel-head { align-items: flex-start; flex-direction: column; }
  .organisation-node { margin-left: calc(var(--organisation-depth, 0) * 9px); }
  .organisation-node__main { grid-template-columns: 1fr; }
  .organisation-root { grid-template-columns: 1fr; }
}
.pill { color: #315b4e; border-color: #c9ddd3; background: #eef7f2; font-weight: 650; }
.pill--ok, .status-approved, .status-paid { color: #0d6948; border-color: #a9dbc4; background: #e2f5eb; }
.pill--warn, .status-submitted { color: #825a0c; border-color: #ead49e; background: #fff7df; }
.pill--bad, .status-rejected { color: #9b3038; border-color: #e6b5ba; background: #fbe8ea; }
.status-draft, .status-not_started { color: #536963; background: #eff3f1; }
.table th { color: #46645a; background: #edf4f0; }
.table th, .table td { border-color: #e2e9e5; }
.table tr:hover td { background: #f3f8f5; }
.table tfoot td { background: #edf4f0; border-color: #dbe6e0; }
.table tr.report-row--employee-start td { border-color: #edf4f0; }
.status-message { border-color: #ceddd5; background: #f2f7f4; }
.status-message--error { color: #902f38; border-color: #e3b1b7; background: #fbeaec; }
.toast { color: #fff; border-color: rgba(255,255,255,.15); background: #153e33; }
.modal { background: rgba(8, 39, 31, .56); }
.settings-actions { border-color: var(--border); background: rgba(243,247,244,.96); }
.tab { color: var(--text); border-color: var(--border); background: #f3f7f4; }
.tab.is-active { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: none; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.page-heading h1 { margin-bottom: 4px; }
.page-heading p { margin: 0; }
.eyebrow { color: #36745e; font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.workforce-list { display: grid; gap: 16px; margin-top: 16px; }
#empEditPayHistoryNotice { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rate-history { margin-top: 16px; }
.is-rate-editor #empSummaryCard,
.is-rate-editor #empTerminationCard,
.is-rate-editor #empSettingsCard > summary,
.is-rate-editor #empSettingsCard > .card__body > p,
.is-rate-editor #empSettingsCard > .card__body > .grid,
.is-rate-editor #empSettingsCard > .card__body > .row {
  display: none;
}
.is-rate-editor #empPayRateChange {
  background: #fff;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.is-rate-editor #empPayRateChange > .grid,
.is-rate-editor #empPayRateRulesEditor > .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}
.is-rate-editor #empPayRateRulesEditor { margin: 24px 0; padding: 24px; }
.is-rate-editor #empPayRateRulesEditor summary { margin-bottom: 20px; }
.is-rate-editor { max-width: 1500px; margin-inline: auto; }
.is-rate-editor #empSettingsCard > .card__body { padding: 24px; }
.is-rate-editor #empPayRateChange > .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.is-rate-editor #empPayRateRulesEditor > .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.is-rate-editor .field { gap: 6px; }
.is-rate-editor .field > span { font-size: 12px; }
.is-rate-editor .field input,
.is-rate-editor .field select {
  min-height: 38px;
  height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
}
.is-rate-editor #empPayRateEditorTitle { font-size: 20px; }
.is-rate-editor #empPayRateEditorHelp { font-size: 13px; margin: 12px 0 20px; }
.is-rate-editor #empPayRateKeepRulesWrap { margin-top: 20px; font-size: 13px; }
.is-rate-editor #empPayRateRulesEditor {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafcfb;
  box-shadow: none;
}
.is-rate-editor #empPayRateRulesEditor summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}
.is-rate-editor #empPayRateRulesEditor summary .muted { font-size: 11px; }
@media (max-width: 900px) {
  .is-rate-editor #empPayRateChange > .grid,
  .is-rate-editor #empPayRateRulesEditor > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .is-rate-editor #empSettingsCard > .card__body { padding: 16px; }
  .is-rate-editor #empPayRateChange > .grid,
  .is-rate-editor #empPayRateRulesEditor > .grid { grid-template-columns: minmax(0, 1fr); }
}
.workforce-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.workforce-card__header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.workforce-card__header h2, .workforce-card__header p { margin: 0; }
.workforce-card__footer { justify-content: flex-end; margin-top: 14px; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.work-day { min-width: 145px; padding: 10px; border: 1px solid #cbd9d2; border-radius: 12px; background: #f5faf7; }
.work-day__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; margin-bottom: 8px; color: #285a49; font-size: 11px; }
.work-day .field { margin-top: 7px; }
.work-day .field input, .work-day .field select { width: 100%; }
.time-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.roster-actions { margin-bottom: 12px; }
.roster-template-bar { margin-bottom: 16px; }
.empty-state { padding: 28px; color: var(--muted); text-align: center; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); }
  .page-heading { align-items: stretch; flex-direction: column; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .nav { top: 66px; background: rgba(255,255,255,.96); }
  .workforce-card__header { flex-direction: column; }
}

/* Fiji-style workforce shell. The proven NZ payroll document and calculator
   components below this shell retain their existing markup and behaviour. */
html { scrollbar-gutter: stable; }
.topbar {
  height: 78px;
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 10px 22px;
  overflow: visible;
  z-index: 40;
}
.topbar__title { white-space: nowrap; }
.topbar__status { justify-self: end; min-width: 0; }
.topbar .nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.topbar .nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #b9d0c8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: none;
}
.topbar .nav__item::before {
  content: attr(data-icon);
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.topbar .nav__item::after { display: none; }
.topbar .nav__item:hover,
.topbar .nav__item.is-active { color: #fff; background: #164d3f; transform: none; }
.topbar .nav__sub {
  position: absolute;
  top: 70px;
  left: 50%;
  z-index: 65;
  width: 310px;
  padding: 8px;
  border: 1px solid #2b6657;
  border-radius: 12px;
  background: #0c3027;
  box-shadow: 0 16px 38px rgba(4,40,30,.28);
  transform: translateX(-50%);
}
.topbar .nav__subitem { color: #c8d9d3; background: transparent; }
.topbar .nav__subitem:hover,
.topbar .nav__subitem.is-active { color: #fff; background: #164d3f; box-shadow: none; }
.topbar .report-nav-panel { display: none; }
.layout { display: block; min-height: calc(100vh - 78px); }
.content { width: 100%; max-width: 1800px; margin: 0 auto; padding: 24px 38px 72px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon-button { width: 40px; min-width: 40px; padding-inline: 0; font-size: 22px; }
.view-toggle { display: flex; gap: 7px; }
.view-toggle button { width: 38px; height: 38px; border: 1px solid #cbdad3; border-radius: 10px; background: #fff; color: #547068; font-size: 18px; cursor: pointer; }
.view-toggle button.is-active { border-color: #287c62; background: #287c62; color: #fff; }

/* Reports retain the complete BOSS Pay catalogue after moving to top navigation. */
#view-reports .report-workspace {
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  gap: 18px;
}
#view-reports .report-nav-panel {
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
#view-reports .report-nav-panel__header h2 { font-size: 18px; }

@media (max-width: 900px) {
  #view-reports .report-workspace { grid-template-columns: minmax(0, 1fr); }
  #view-reports .report-nav-panel { position: static; max-height: none; }
}

/* Employee directory and employee file */
.employee-directory-heading { align-items: center; }
.employee-directory-tool { margin-bottom: 2px; }
.employee-directory-card { padding: 0; overflow: hidden; }
.employee-directory-card > .row { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.employee-directory-card .tablewrap { border: 0; border-radius: 0; }
.employee-directory-card .table th,
.employee-directory-card .table td { padding: 13px 14px; vertical-align: middle; }
.employee-directory-card .table td small,
.employee-directory-identity small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.employee-name-button { border: 0; padding: 0; background: transparent; color: #285b91; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.employee-name-button:hover { text-decoration: underline; }
.employee-edit-workspace { display: grid; gap: 14px; }
.employee-edit-workspace__head { position: sticky; top: 88px; z-index: 8; align-items: center; padding: 10px 0; background: rgba(243,247,244,.96); }
#view-employees.is-editing .employee-directory-heading,
#view-employees.is-editing .employee-directory-card,
#view-employees.is-editing .employee-directory-tool { display: none !important; }
.employee-profile-page { max-width: 1650px; margin: 0 auto; }
.employee-profile-workspace { display: grid; gap: 1rem; }
.employee-profile-workspace[hidden] { display: none; }
.employee-profile-workspace__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.employee-profile-workspace__head h1 { margin: .15rem 0 0; }
#employeeProfileWorkspaceHost > .card,
#employeeProfileWorkspaceHost > details.card { margin-top: 0; }
.employee-notes { padding: 0; overflow: hidden; }
.employee-notes__head { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.employee-notes__head h2 { margin: 3px 0 4px; }
.employee-notes__head p { margin: 0; }
.employee-notes__body { display: grid; gap: 13px; padding: 18px 20px 20px; }
.employee-notes__body textarea { min-height: 210px; resize: vertical; }
.employee-notes__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.employee-notes__footer .muted { font-size: 10px; }
.employee-payslips { padding: 0; overflow: hidden; }
.employee-payslips__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.employee-payslips__head h2 { margin: 3px 0 4px; }
.employee-payslips__head p { margin: 0; }
.employee-payslips > .status-message { margin: 14px 20px 18px; }
.employee-payslips__tablewrap { border: 0; border-radius: 0; }
.employee-payslips__table { min-width: 1080px; }
.employee-payslips__table th { white-space: nowrap; }
.employee-payslips__table th,
.employee-payslips__table td { padding: 11px 12px; vertical-align: middle; font-size: 11px; }
.employee-payslips__table td:first-child { min-width: 180px; }
.employee-payslips__table td.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.employee-payslip-latest { background: #f1f8f4; }
.employee-payslip-state { display: block; width: max-content; margin-top: 5px; padding: 3px 6px; border-radius: 999px; background: #dff3e7; color: #176045; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.employee-payslip-state.is-imported { background: #edf1f0; color: #5a6d67; }
.employee-payslip-period-separator { margin: 0 5px; color: var(--muted); }
.employee-payslip-actions { display: flex; gap: 5px; white-space: nowrap; }
.island-page .employee-payslip-action { min-height: 28px; padding: 4px 7px; border-radius: 7px; font-size: 10px; }
.employee-payslip-imported { white-space: nowrap; }
.employee-profile-toolbar { position: sticky; top: 78px; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -8px -6px 18px; padding: 9px 6px; border-bottom: 1px solid #dce5e1; background: rgba(243,247,244,.96); backdrop-filter: blur(8px); }
.employee-profile-context { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.employee-profile-context__name { max-width: 190px; overflow: hidden; color: #244c40; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.employee-profile-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.island-page .employee-profile-toolbar .btn { min-height: 32px; padding: 6px 8px; border-radius: 8px; font-size: 10.5px; line-height: 1.1; }
.employee-profile-more { position: relative; }
.employee-profile-more > summary { list-style: none; cursor: pointer; }
.employee-profile-more > summary::-webkit-details-marker { display: none; }
.employee-profile-more__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 35; display: grid; gap: 7px; width: 230px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(10,55,43,.2); }
.employee-profile-more__menu .btn { width: 100%; justify-content: flex-start; }
.employee-profile-hero { position: relative; display: flex; align-items: center; gap: 18px; min-height: 142px; padding: 22px 28px; border-radius: 18px; background: linear-gradient(112deg,#0c4738 0%,#17664f 72%,#25785d 100%); color: #fff; box-shadow: 0 16px 35px rgba(20,75,59,.14); }
.employee-profile-avatar { display: grid; place-items: center; flex: 0 0 74px; width: 74px; height: 74px; border: 3px solid #fff; border-radius: 50%; background: #d9f45e; color: #14392f; font-size: 20px; font-weight: 900; }
.employee-profile-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.employee-profile-identity { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; }
.employee-profile-identity h1 { margin: 0; color: #fff; font-size: 25px; line-height: 1.05; }
.employee-profile-id { font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.employee-profile-subtitle { color: #d7e8e2; font-size: 13px; }
.employee-profile-badges { margin-left: auto; align-self: flex-start; display: flex; gap: 8px; }
.employee-profile-badges span { padding: 6px 9px; border-radius: 8px; background: #eef8f2; color: #174b3a; font-size: 10px; font-weight: 800; }
.employee-section-nav { position: static; display: flex; gap: 6px; margin-top: 12px; padding: 8px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 7px 20px rgba(26,76,61,.08); }
.employee-section-nav button { padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #49665c; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.employee-section-nav button:hover, .employee-section-nav button.is-active { background: #e8f4ee; color: #0c5a43; }
.employee-profile-page .card h2 { font-size: 16px; }
.employee-profile-page .card h3 { font-size: 14px; }
.employee-profile-page .muted, .employee-profile-page .profile-data-note { font-size: 11px; }
#employeeProfileHero, #employeeWorkAssignments, #employeeProfileAttendance, #employeePayrollHistory { scroll-margin-top: 92px; }
.employee-collapsible-section { padding: 0; overflow: clip; }
.employee-collapsible-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; cursor: pointer; list-style: none; }
.employee-collapsible-summary::-webkit-details-marker { display: none; }
.employee-collapsible-summary::after { content: '\203A'; color: #315d4f; font-size: 26px; font-weight: 800; transform: rotate(90deg); transition: transform .15s ease; }
.employee-collapsible-section[open] > .employee-collapsible-summary::after { transform: rotate(-90deg); }
.employee-collapsible-summary > span:first-child { display: grid; gap: 4px; }
.employee-collapsible-summary strong { color: #102d24; font-size: 18px; }
.employee-collapsible-body { display: grid; gap: 14px; padding: 0 20px 20px; border-top: 1px solid var(--border); }
.employee-collapsible-body > .profile-section-head { margin-top: 16px; }
.employee-document-list { display: grid; gap: 9px; }
.employee-document-drop-zone { position: relative; display: grid; place-items: center; gap: 8px; min-height: 150px; width: 100%; margin: 0 0 20px; padding: 24px; border: 2px dashed #9abdb2; border-radius: 14px; background: #fff; cursor: pointer; text-align: center; transition: border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.employee-document-drop-zone:hover,.employee-document-drop-zone:focus-within,.employee-document-drop-zone.is-dragging { border-color: #087c6a; background: #eef9f5; box-shadow: 0 0 0 3px rgba(8,124,106,.12); }
.employee-document-drop-zone.has-file { border-style: solid; border-color: #50a77f; background: #f1fbf6; }
.employee-document-drop-zone.has-error { border-color: #b24b43; background: #fff5f4; }
.employee-document-drop-zone input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.employee-document-drop-zone strong { color: #174b3a; font-size: 15px; }
.employee-document-drop-zone > span:not(.employee-document-drop-icon) { max-width: 760px; color: #71847d; font-size: 12px; font-weight: 600; }
.employee-document-drop-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e5f4ef; color: #087c6a; font-size: 25px; }
.employee-document-upload-form { display: grid; grid-template-columns: minmax(180px,1fr) minmax(160px,.65fr); gap: 12px; margin-bottom: 20px; padding: 16px; border: 1px solid #dbe5e1; border-radius: 14px; background: #f7faf8; }
.employee-document-upload-form[hidden] { display: none; }
.employee-document-upload-form .wide { grid-column: 1 / -1; }
.employee-document-file-status { margin: -5px 0 0; color: #61756e; font-size: 12px; font-weight: 750; }
.employee-document-file-status.error { color: #9b3d39; }
.employee-document-form-actions { display: flex; align-items: center; gap: 10px; }
@media(max-width:720px) { .employee-document-upload-form { grid-template-columns: 1fr; } .employee-document-upload-form .wide { grid-column: auto; } .employee-document-drop-zone { min-height: 130px; padding: 20px 14px; } }
.employee-document-row { display: grid; grid-template-columns: minmax(280px,1fr) auto auto; align-items: center; gap: 16px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.employee-document-details { display: flex; align-items: center; gap: 11px; min-width: 0; }
.employee-document-details div { min-width: 0; }
.employee-document-details strong, .employee-document-details small { display: block; overflow-wrap: anywhere; }
.employee-document-details small { margin-top: 3px; color: var(--muted); }
.employee-document-meta { display: grid; gap: 2px; color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
.employee-document-actions { flex-wrap: nowrap; }
.employee-readiness { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 12px; padding: 15px 18px; border-left: 5px solid #2b916c; }
.employee-readiness.has-issues { border-left-color: #c3434d; background: #fffafa; }
.employee-readiness h2, .employee-readiness p { margin: 0; }
.employee-readiness h2 { margin-top: 3px; font-size: 18px; }
.employee-readiness__items { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.employee-readiness__items span { padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.readiness-ok { background: #ddf4e7; color: #176143; }
.readiness-issue { background: #fde7e9; color: #a32734; }
.readiness-info { background: #edf2ef; color: #587068; }
.profile-workforce-sections { display: grid; gap: 18px; margin-top: 18px; }
.profile-workforce-sections:empty { display: none; }
.profile-workforce-sections > section { scroll-margin-top: 92px; }
.profile-loading { padding: 70px; text-align: center; }
.profile-primary-grid { display: grid; grid-template-columns: minmax(520px,.95fr) minmax(620px,1.15fr); gap: 18px; margin-top: 18px; }
.profile-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.profile-summary-card, .employee-fact-card, .employee-leave-card, .employee-attendance-card, .employee-attendance-summary { padding: 22px; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.profile-stat { min-height: 92px; padding: 15px; border-radius: 14px; background: #f4f7f5; }
.profile-stat span { display: block; color: #39705f; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.profile-stat strong { display: block; margin: 8px 0 4px; color: #073f32; font-size: 19px; }
.profile-stat small { display: block; color: #788a84; font-size: 11px; line-height: 1.35; }
.employee-facts-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.employee-fact-list { display: grid; gap: 11px; margin: 0; }
.employee-fact-list div { display: grid; grid-template-columns: minmax(110px,.85fr) minmax(0,1.15fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #edf1ef; }
.employee-fact-list dt { color: #758780; font-size: 11px; }
.employee-fact-list dd { margin: 0; overflow-wrap: anywhere; color: #203a32; font-size: 12px; font-weight: 700; }
.employee-leave-card { margin-top: 18px; }
.employee-leave-workspace { margin-top: 18px; padding: 22px; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.profile-section-head h2, .profile-section-head p { margin: 0; }
.attendance-month-control { display: flex; align-items: center; gap: 10px; }
.attendance-month-control strong { min-width: 150px; text-align: center; }
.attendance-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.attendance-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid #ccd8d3; border-radius: 3px; vertical-align: -1px; }
.attendance-legend .worked::before { border-color: #64ba92; background: #d9f4e6; }
.attendance-legend .planned::before { border-color: #96cbb4; background: #eef8f3; }
.attendance-legend .approved::before { border-color: #e1b84d; background: #fff4c9; }
.attendance-legend .pending::before { border-color: #d4a46b; background: #fff0df; }
.attendance-legend .public-holiday::before { border-color: #d6c45c; background: #fff8ce; }
.attendance-legend .off::before { background: #eef1ef; }
.attendance-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; }
.attendance-calendar__weekday { padding: 4px; color: #557168; font-size: 10px; font-weight: 850; text-align: center; text-transform: uppercase; }
.attendance-day { min-height: 64px; padding: 7px 6px; overflow: hidden; border: 1px solid #d5dfda; border-radius: 8px; background: #f1f3f2; }
.attendance-day.is-outside { visibility: hidden; }
.attendance-day strong { display: block; margin-bottom: 4px; font-size: 10px; }
.attendance-day span, .attendance-day small { display: block; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.attendance-day small { margin-top: 4px; color: #60756d; }
.attendance-day.worked { border-color: #76c49e; background: #dff5e9; }
.attendance-day.planned { border-color: #b6d6c7; background: #eff8f3; }
.attendance-day.approved_leave, .attendance-day.recorded_leave { border-color: #e3bd54; background: #fff5cf; }
.attendance-day.pending_leave { border-color: #dfa96b; background: #fff1e0; }
.attendance-day.public_holiday { border-color: #d6c45c; background: #fff8ce; }
.attendance-day.no_record { border-color: #e3e9e6; background: #f8faf9; color: #8b9893; }
.attendance-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.attendance-summary-grid .profile-stat { background: #f6f8f7; }
.profile-data-note { margin: 14px 0 0; color: #74867f; font-size: 11px; line-height: 1.45; }
.leave-workspace-grid { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.6fr); gap: 20px; align-items: start; }
.leave-request-form[hidden] + .leave-history { grid-column: 1 / -1; }
.leave-request-form { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #f8faf9; }
.leave-request-form h3, .leave-history h3 { margin-top: 0; }
.leave-request-form .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.leave-request-form .grow { grid-column: 1 / -1; }
.employee-advance-workspace { padding: 16px; }
.employee-advance-tabs { display: inline-flex; align-items: center; margin: 0 0 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.employee-advance-tabs .btn { min-height: 34px; border: 0; border-radius: 0; box-shadow: none; font-size: 10px; }
.employee-advance-tabs .btn + .btn { border-left: 1px solid var(--border); }
.employee-advance-tabs .btn.is-active { background: #eaf2ff; color: #1f4f98; }
.employee-advance-panel[hidden] { display: none; }
.employee-advance-workspace .employee-leave-workspace { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.employee-advance-workspace .employee-leave-workspace .profile-section-head h2 { font-size: 18px; }
.employee-advance-workspace .employee-leave-workspace .muted { font-size: 10px; }
.employee-advance-form { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #f8faf9; }
.employee-advance-form > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.employee-advance-form .field { gap: 5px; font-size: 10px; font-weight: 750; }
.employee-advance-form .field small { min-height: 24px; font-size: 8px; line-height: 1.35; color: var(--muted); }
.employee-advance-form .grow { grid-column: 1 / -1; }
.employee-advance-form textarea { min-height: 68px; }
.employee-advance-form .row { margin-top: 12px; }
.employee-advance-note { margin: 12px 0; padding: 10px 12px; border-radius: 9px; background: #eef4f1; color: #4f6c62; font-size: 9px; }
.employee-advance-list { display: grid; gap: 9px; }
.employee-advance-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) minmax(145px, .8fr) minmax(160px, 1fr) auto; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff; font-size: 10px; }
.employee-advance-row small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }
.employee-advance-row__actions { display: flex; gap: 6px; justify-content: flex-end; }

@media (max-width: 1100px) {
  .employee-advance-form > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-advance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-advance-row__actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .employee-advance-tabs { display: flex; }
  .employee-advance-tabs .btn { flex: 1; }
  .employee-advance-form > .grid, .employee-advance-row { grid-template-columns: 1fr; }
}
.leave-history { min-width: 0; display: grid; align-content: start; gap: 14px; }
.leave-history h3, .leave-history .tablewrap, .leave-history .recorded-leave-history { margin: 0; }
.leave-history .table { min-width: 760px; }
.leave-history-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.leave-history-actions .btn { padding: 6px 8px; font-size: 10px; }
.recorded-leave-history { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #f8faf9; }
.recorded-leave-history summary, .roster-template-manager > summary, .roster-history-panel > summary { cursor: pointer; color: #315d4f; font-weight: 800; }
.recorded-leave-history .tablewrap { margin-top: 10px; }
.employee-financial-fields { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #f8faf9; }
.employee-financial-fields h3, .employee-financial-fields p { margin: 0; }
.employee-financial-fields > .grid { margin-top: 14px; }
.employee-adjustments { display: grid; gap: 14px; background: #fff; }
.employee-adjustments__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.employee-adjustments__head h3 { margin: 3px 0 4px; font-size: 20px; }
.employee-adjustments__head .muted { max-width: 760px; font-size: 11px; line-height: 1.45; }
.employee-adjustment-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.employee-adjustment-summary > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #f3f8f6; }
.employee-adjustment-summary small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.employee-adjustment-summary strong { font-size: 18px; }
.employee-adjustment-form { display: grid; gap: 13px; margin-top: 0; padding: 15px; }
.employee-adjustment-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.employee-adjustment-form__head h4, .employee-adjustment-records__head h4 { margin: 0 0 3px; font-size: 14px; }
.employee-adjustment-form__head p { font-size: 10px; }
.employee-adjustment-form > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.employee-adjustments__advanced { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #f8faf9; }
.employee-adjustments__advanced summary { cursor: pointer; font-size: 10px; font-weight: 800; }
.employee-adjustments__advanced > .grid { margin-top: 12px; }
.employee-adjustment-form__actions { display: flex; align-items: center; gap: 9px; }
.employee-adjustment-records { display: grid; gap: 9px; }
.employee-adjustment-records__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.employee-adjustment-records__head .muted { font-size: 9px; }
.deduction-plan-list { display: grid; gap: 10px; margin-top: 14px; }
.employee-adjustment-records .deduction-plan-list { margin-top: 0; }
.deduction-plan-row { display: grid; grid-template-columns: minmax(135px, .7fr) minmax(190px, 1.3fr) minmax(90px, auto) auto auto; align-items: center; gap: 14px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.deduction-plan-row small { display: block; margin-top: 4px; color: var(--muted); }
.deduction-plan-row__heading { justify-content: flex-start; gap: 8px; }
.deduction-plan-row__amount { text-align: right; white-space: nowrap; }
.deduction-plan-row__amount.is-addition { color: #047857; }
.deduction-plan-row__amount.is-deduction { color: #b42318; }
.deduction-plan-editor { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.employee-adjustment-form.deduction-plan-editor { margin-top: 0; }

@media (max-width: 1100px) {
  .employee-adjustment-form > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deduction-plan-row { grid-template-columns: minmax(130px, .8fr) minmax(180px, 1.2fr) auto; }
  .deduction-plan-row > .pill { justify-self: start; }
}

@media (max-width: 700px) {
  .employee-adjustments__head, .employee-adjustment-records__head { align-items: stretch; flex-direction: column; }
  .employee-adjustment-summary, .employee-adjustment-form > .grid { grid-template-columns: 1fr; }
  .deduction-plan-row { grid-template-columns: 1fr; gap: 8px; }
  .deduction-plan-row__amount { text-align: left; }
}
.deduction-plan-editor > .grid { margin-bottom: 14px; }
.employee-engagement-blocks { display: grid; gap: 16px; }
.employee-engagement-blocks form.card--muted { display: grid; gap: 14px; padding: 16px; box-shadow: none; }
#workAssignmentForm { scroll-margin-top: 92px; }
.employee-engagement-blocks details.is-disabled { opacity: .62; }
.engagement-block-form { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #f8faf9; }
.engagement-block-form .grow { grid-column: 1 / -1; }
.engagement-block-list { display: grid; gap: 10px; }
.engagement-block-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfb; }
.engagement-block-row small { display: block; margin-top: 4px; color: var(--muted); }
.engagement-block-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.engagement-label { color: #27634e !important; font-weight: 750; }
.engagement-warning { color: #a12b35 !important; font-weight: 750; }
.engagement-context { margin: -3px 0 10px; padding: 8px 10px; border-radius: 9px; background: #edf7f2; color: #315d4f; font-size: 11px; }

/* Compact weekly roster */
.roster-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px 16px; }
.roster-toolbar .roster-search { flex: 1; max-width: 440px; }
.workforce-filterbar { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); gap: 12px; margin-bottom: 14px; padding: 12px 16px; box-shadow: none; }
.workforce-filterbar .field { margin: 0; }
.workforce-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 10px 14px; box-shadow: none; }
.workforce-pager .row { justify-content: flex-end; }
.workforce-page-size { display: flex; align-items: center; gap: 6px; margin: 0; }
.workforce-page-size select { width: 76px; }
.week-control { display: flex; align-items: end; gap: 7px; }
.roster-total { align-self: center; font-size: 12px; white-space: nowrap; }
.roster-grid-wrap { padding: 0; overflow: auto; }
.roster-template-manager { margin-bottom: 14px; padding: 14px 16px; box-shadow: none; }
.roster-template-list { display: grid; gap: 8px; margin-top: 12px; }
.roster-template-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: #f8faf9; }
.roster-template-row small { color: var(--muted); }
.roster-history-panel { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.roster-history-list { display: grid; gap: 8px; margin-top: 12px; }
.roster-history-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 9px; border-radius: 9px; background: #f4f7f5; font-size: 11px; }
.roster-history-row small { color: var(--muted); }
.roster-table { width: 100%; min-width: 1250px; border-collapse: collapse; }
.roster-table th { padding: 13px 10px; background: #f8faf9; color: #62756e; font-size: 11px; text-align: left; white-space: nowrap; }
.roster-table td { padding: 9px 8px; border-top: 1px solid #e5ebe8; font-size: 12px; }
.roster-employee { min-width: 210px; }
.roster-employee small { display: block; margin-top: 3px; color: #788a84; }
.roster-role { min-width: 190px; color: #516b62; }
.shift { display: flex; min-width: 94px; min-height: 50px; border: 1px solid #bfd2ca; border-radius: 12px; background: #eaf6ef; flex-direction: column; align-items: center; justify-content: center; color: #1e6949; font-size: 10px; font-weight: 800; }
.shift small { margin-top: 3px; color: #274f43; }
.shift.off { border-color: #d5dcda; background: #eef0ef; color: #7c8984; }
.roster-action { border: 0; border-radius: 8px; padding: 8px 10px; background: #edf3f0; color: #265546; font-weight: 750; white-space: nowrap; cursor: pointer; }
.workforce-dialog { width: min(1120px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 18px; color: var(--text); box-shadow: 0 24px 80px rgba(4,44,35,.3); }
.workforce-dialog::backdrop { background: rgba(3,31,25,.58); }
.workforce-dialog__shell { display: grid; gap: 18px; padding: 24px; }
.workforce-dialog__head, .workforce-dialog__footer, .roster-editor-settings { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.workforce-dialog__head { align-items: start; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.workforce-dialog__head h2, .workforce-dialog__head p { margin: 0; }
.roster-editor-days { display: grid; grid-template-columns: repeat(7,minmax(125px,1fr)); gap: 8px; overflow-x: auto; }
.roster-editor-days .work-day { min-width: 125px; box-shadow: none; }

/* Compact Fiji-style weekly timesheets */
.timesheet-toolbar { display: grid; grid-template-columns: auto minmax(260px,1fr) auto auto; align-items: end; gap: 20px; margin-bottom: 16px; padding: 16px; }
.timesheet-search { width: 100%; max-width: 520px; justify-self: center; }
.timesheet-clock { min-width: 130px; }
.timesheet-summary { align-self: center; padding: 12px 15px; border: 1px solid #ddb74f; border-radius: 11px; background: #fff5d7; color: #273d35; white-space: nowrap; }
.timesheet-queue { display: flex; align-items: center; gap: 8px; margin: -2px 0 16px; padding: 0 4px; overflow-x: auto; }
.timesheet-queue > strong { margin-right: 4px; color: #315d4f; font-size: 11px; white-space: nowrap; }
.timesheet-queue button { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #cbdad3; border-radius: 999px; background: #fff; color: #49665c; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.timesheet-queue button:hover { border-color: #6aa88e; background: #edf7f2; }
.timesheet-queue button.has-warning { border-color: #e4a2a7; background: #fff1f2; color: #a32734; }
.timesheet-queue b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e8f1ed; color: #174b3a; }
.timesheet-queue button.has-warning b { background: #f8d6d9; color: #92232d; }
.timesheet-pending-leave { margin-bottom: 16px; border-color: #e5bd54; background: #fff8e7; }
.timesheet-pending-head, .timesheet-pending-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.timesheet-pending-head { margin-bottom: 10px; }
.timesheet-pending-head p, .timesheet-pending-head h2 { margin: 0; }
.timesheet-pending-head > strong { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; background: #d99713; color: #fff; }
.timesheet-pending-row { padding: 12px; border: 1px solid #ead7a6; border-radius: 11px; background: #fff; }
.timesheet-pending-row + .timesheet-pending-row { margin-top: 8px; }
.timesheet-pending-row small, .timesheet-pending-row .leave-approval-note { display: block; margin-top: 4px; color: #6f766f; }
.timesheet-pending-row .leave-approval-note { color: #7b5b13; font-size: 11px; font-weight: 700; }
.timesheet-pending-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.timesheet-list { display: grid; gap: 18px; }
.intake-workflow, .intake-help { margin-bottom: 16px; padding: 20px; }
.intake-workflow__steps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.intake-workflow__steps span { padding: 8px 12px; border: 1px solid #bfd8ca; border-radius: 999px; background: #eef8f1; color: #15543d; font-size: 12px; font-weight: 700; }
.intake-workflow .grid { grid-template-columns: minmax(210px,1fr) minmax(210px,1fr) minmax(280px,2fr); align-items: end; }
.intake-workflow .intake-workflow__source-grid { grid-template-columns: repeat(2,minmax(240px,1fr)); }
.intake-workflow .row { margin-top: 16px; }
.migration-source-help { margin-top: 14px; padding: 12px 14px; border-left: 4px solid #2582bd; border-radius: 8px; background: #eef7fd; color: #315869; font-size: 13px; line-height: 1.45; }
.migration-mapping { margin-top: 18px; padding: 18px; border: 1px solid #c9dcd3; border-radius: 14px; background: #fbfdfc; }
.migration-mapping[hidden] { display: none; }
.migration-mapping__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.migration-mapping__head h2, .migration-mapping__head p { margin: 0; }
.migration-mapping__head strong { padding: 8px 11px; border-radius: 999px; background: #e5f3eb; color: #17533e; font-size: 12px; white-space: nowrap; }
.migration-mapping > p { margin: 12px 0; }
.migration-mapping__table select { width: 100%; min-width: 190px; }
.migration-mapping__table td:first-child { width: 34%; }
.migration-mapping__table td:last-child { max-width: 260px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.intake-approval { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 12px; border: 1px solid #dfc98e; border-radius: 10px; background: #fff9e9; color: #5b4212; font-size: 12px; line-height: 1.4; }
.intake-approval[hidden] { display: none; }
.intake-approval input { flex: none; margin-top: 2px; }
.intake-workflow .status-message { margin-top: 16px; }
.intake-preview { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; }
.intake-preview th, .intake-preview td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.intake-preview th { background: #eef5f1; color: #315b4e; }
.intake-preview-wrap { max-height: 360px; overflow: auto; }
.intake-help p { margin: 8px 0; line-height: 1.55; }
.payrun-intake-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 12px 16px; }
.timesheet-day__missing-time { display: block; margin-top: 7px; color: #825a0c; font-size: 10px; font-weight: 700; }
.timesheet-day__allocation { display: block; margin: -4px 0 8px; color: #825a0c; font-size: 10px; font-weight: 800; }
.timesheet-day__hourly-leave { margin-top: 4px; padding: 7px; border: 1px solid #e5c76f; border-radius: 9px; background: #fffaf0; }
.timesheet-list.is-grid { grid-template-columns: 1fr; }
.timesheet-view-toggle button { width: auto; min-width: 92px; padding: 0 10px; font-size: 12px; font-weight: 700; }
.timesheet-card { padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.timesheet-card__summary { display: grid; grid-template-columns: minmax(180px,1.4fr) minmax(420px,4fr) 132px; gap: 16px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.timesheet-card__summary.has-quick-action { grid-template-columns: minmax(180px,1.4fr) minmax(360px,4fr) 132px 105px; }
.timesheet-card__summary::-webkit-details-marker { display: none; }
.timesheet-card__summary::marker { content: ''; }
.timesheet-card__summary:hover { background: #f5faf7; }
.timesheet-card__identity { display: grid; gap: 3px; min-width: 0; }
.timesheet-card__identity strong { color: #184e3c; font-size: 15px; }
.timesheet-card__identity small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.timesheet-card__identity::after { content: 'Open week'; color: #28694f; font-size: 11px; font-weight: 700; }
.timesheet-card__editor[open] .timesheet-card__identity::after { content: 'Close week'; }
.timesheet-week-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; min-width: 0; }
.timesheet-week-day { display: grid; gap: 2px; min-width: 0; padding: 6px 4px; border: 1px solid #d9e4dd; border-radius: 7px; background: #f4f7f5; text-align: center; }
.timesheet-week-day.has-hours { border-color: #abdbc0; background: #e5f7ed; }
.timesheet-week-day.leave,
.timesheet-week-day.leave.has-hours { border-color: #e3b341; background: #fff1b8; box-shadow: inset 0 0 0 1px #f4cf6b; }
.timesheet-week-day.leave b,
.timesheet-week-day.leave small { color: #6d4a00; }
.timesheet-week-day b { font-size: 10px; }
.timesheet-week-day small { color: #426459; font-size: 10px; white-space: nowrap; }
.timesheet-card__detail { padding: 0 16px 16px; border-top: 1px solid var(--border); }
.timesheet-card__detail > .engagement-context { margin-top: 12px; }
.timesheet-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.timesheet-card__head .employee-name-button { font-size: 16px; }
.timesheet-card__head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.timesheet-card__totals { display: grid; justify-items: end; gap: 3px; }
.timesheet-card__totals strong { font-size: 18px; }
.timesheet-card__totals span { color: var(--muted); font-size: 11px; }
.timesheet-card__totals small { padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.timesheet-card__quick-action { min-width: 100px; white-space: nowrap; }
.timesheet-card__body { display: grid; grid-template-columns: minmax(0,1fr) 145px; gap: 10px; }
.timesheet-days { display: grid; grid-template-columns: repeat(7,minmax(140px,1fr)); gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.timesheet-day { min-width: 140px; padding: 10px; border: 1px solid #bad5c8; border-radius: 13px; background: #edf8f2; }
.timesheet-day.off { border-color: #d2d8d5; background: #f0f1f1; }
.timesheet-day.leave { border-color: #dfa92f; background: #fff5cf; box-shadow: inset 0 0 0 1px #f0ca65; }
.timesheet-day.leave .timesheet-day__heading,
.timesheet-day.leave .timesheet-day__hours { color: #6d4a00; }
.timesheet-day__heading { display: flex; justify-content: space-between; gap: 8px; color: #315d4f; font-size: 10px; }
.timesheet-day__hours { margin: 10px 0 8px; color: #1c744f; font-size: 23px; font-weight: 850; }
.timesheet-day.off .timesheet-day__hours { color: #98a49f; }
.timesheet-day .field { margin-top: 7px; }
.timesheet-day .field span { font-size: 9px; }
.timesheet-day .field input, .timesheet-day .field select { width: 100%; min-width: 0; padding: 7px; font-size: 11px; }
.timesheet-day__type { margin-top: 0 !important; }
.timesheet-day .time-pair { grid-template-columns: minmax(0, 1fr); }
.timesheet-day .time-pair input { min-width: 140px; font-size: 14px; }
.timesheet-day-more { margin-top: 7px; }
.timesheet-day-more summary { color: #61766e; font-size: 9px; cursor: pointer; }
.timesheet-actions { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 10px; border: 1px solid #c7d5ce; border-radius: 13px; background: #fbfcfb; }
.timesheet-actions .btn { width: 100%; }
.timesheet-import-tools { margin-top: 18px; box-shadow: none; }
.timesheet-import-tools > summary { cursor: pointer; color: #45655a; font-weight: 750; }
.timesheet-import-tools__body { margin-top: 16px; }

@media (max-width: 1280px) {
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; padding-inline: 12px; }
  .topbar .nav { justify-content: flex-start; gap: 5px; overflow-x: auto; }
  .topbar .nav__item { width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .topbar__status .pill:not(#authStatus) { display: none; }
  .timesheet-toolbar { grid-template-columns: 1fr 1fr; }
  .timesheet-list.is-grid { grid-template-columns: 1fr; }
  .profile-primary-grid { grid-template-columns: 1fr; }
  .profile-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workforce-filterbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 66px; grid-template-columns: auto 1fr; }
  .topbar__title strong { display: none; }
  .topbar .nav { order: 3; grid-column: 1 / -1; width: 100%; justify-content: flex-start; }
  .topbar__status { grid-column: 2; grid-row: 1; }
  .content { padding: 20px 12px 60px; }
  .page-heading, .employee-profile-toolbar, .employee-profile-hero { align-items: stretch; flex-direction: column; }
  .employee-profile-toolbar { top: 112px; }
  .employee-profile-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .employee-profile-more__menu { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; }
  .employee-section-nav { top: 188px; }
  .employee-readiness { align-items: stretch; flex-direction: column; }
  .employee-readiness__items { justify-content: flex-start; }
  .employee-profile-badges { margin-left: 0; }
  .profile-summary-grid, .profile-primary-grid, .employee-facts-grid { grid-template-columns: 1fr; }
  .attendance-summary-grid { grid-template-columns: 1fr; }
  .leave-workspace-grid { grid-template-columns: 1fr; }
  .engagement-block-row { grid-template-columns: 1fr; align-items: start; }
  .engagement-block-actions { justify-content: flex-start; }
  .attendance-calendar { grid-template-columns: repeat(7,minmax(64px,1fr)); overflow-x: auto; }
  .timesheet-toolbar { grid-template-columns: 1fr; }
  .timesheet-card__summary { grid-template-columns: 1fr; gap: 8px; }
  .timesheet-week-strip { overflow-x: auto; grid-template-columns: repeat(7,minmax(62px,1fr)); }
  .timesheet-card__summary .timesheet-card__totals { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
  .intake-workflow .grid { grid-template-columns: 1fr; }
  .intake-workflow .intake-workflow__source-grid { grid-template-columns: 1fr; }
  .migration-mapping__head { align-items: flex-start; flex-direction: column; }
  .payrun-intake-link { align-items: stretch; flex-direction: column; }
  .timesheet-search { max-width: none; }
  .workforce-filterbar { grid-template-columns: 1fr; }
  .workforce-pager { align-items: stretch; flex-direction: column; }
  .timesheet-card__body { grid-template-columns: 1fr; }
  .timesheet-actions { flex-direction: row; }
  .timesheet-pending-row { align-items: stretch; flex-direction: column; }
  .timesheet-pending-row .actions .btn { flex: 1; }
  .workforce-dialog__head, .workforce-dialog__footer, .roster-editor-settings { align-items: stretch; flex-direction: column; }
}
.termination-weekdays {
  gap: .75rem;
  flex-wrap: wrap;
}

.termination-weekdays label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.session-locked .topbar .nav,
.session-locked .content > .view {
  visibility: hidden;
}

/* User administration: explicit editors and compact, responsive access rows. */
.users-card { min-width: 0; }
.grid.user-invite-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.user-invite-grid .field { min-width: 0; }
.user-invite-grid input, .user-invite-grid select { width: 100%; min-width: 0; box-sizing: border-box; }
.user-invite-panel, .user-access-editor { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 16px 0; scroll-margin-top: 110px; }
.user-invite-panel summary { cursor: pointer; font-weight: 700; color: var(--text); }
.user-invite-panel summary:focus-visible, .user-permission input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.user-permission-fieldset { min-width: 0; padding: 0; margin: 18px 0; border: 0; }
.user-permission-fieldset legend { padding: 0 0 10px; font-size: 13px; font-weight: 700; }
.user-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.user-permission { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; cursor: pointer; }
.user-permission:has(input:checked) { background: #eaf5ef; border-color: #89b9a4; }
.user-permission input { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 17px; margin: 0; }
.user-permission span { overflow-wrap: anywhere; }
.user-access-editor > .field { max-width: 320px; }
.users-list-heading { margin-top: 24px; }
.users-card .users-tablewrap { max-height: none; overflow: visible; }
#usersTable { table-layout: fixed; }
#usersTable th, #usersTable td { white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
#usersTable th { position: static; }
#usersTable th:first-child { width: 23%; }
#usersTable th:last-child { width: 23%; }
.user-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.user-row-actions .btn { height: auto; min-height: 36px; padding: 8px 10px; }
.user-status { text-transform: capitalize; }
#usersTable .user-row--highlight { background: #fff4cf; }

@media (max-width: 1100px) {
  #usersTable, #usersTable tbody, #usersTable tr, #usersTable td { display: block; width: auto; }
  #usersTable thead { display: none; }
  #usersTable tr { padding: 12px; border-bottom: 1px solid var(--border); }
  #usersTable td { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 10px; padding: 6px 0; border: 0; }
  #usersTable td::before { content: attr(data-label); color: var(--muted); }
  #usersTable td[colspan] { display: block; }
  #usersTable td:first-child { font-weight: 700; }
}

@media (max-width: 680px) {
  .grid.user-invite-grid, .user-permission-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Payroll Island control-centre presentation; NZ payroll workflows remain shared. */
:root { --accent: #127b78; --shadow: 0 10px 28px rgba(21,53,59,.045); }
body { background: #f3f7f6; }
.topbar { background: #093f4e; min-height: 94px; height: 94px; gap: 18px; }
.topbar .nav__item { font-size: 0; width: 46px; padding: 0; color: #a4c3cb; }
.topbar .nav__item::before { font-size: 23px; font-weight: 500; }
.topbar .nav__item:hover,.topbar .nav__item.is-active { background: #125466; }
.topbar .nav__item::after { display: none; }
.topbar .nav__item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.topbar__status .pill { font-size: 11px; }
.content { padding: 28px 32px 60px; }
.control-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.control-heading h1 { font-size: clamp(24px,2vw,32px); letter-spacing: -.8px; margin: 7px 0; }
.control-heading p { margin: 0; }
.eyebrow { color: #748b90; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; margin: 0 0 10px; }
.control-filters { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.control-filters .field { margin: 0; min-width: 130px; }
.control-filters > span { margin-left: auto; font-size: 12px; }
.control-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; margin: 20px 0; }
#view-dashboard .card { background: #fff; border: 1px solid #dce6e5; border-radius: 18px; box-shadow: var(--shadow); padding: 25px; margin: 0; }
#view-dashboard .metric { display: flex; align-items: center; gap: 14px; padding: 22px 18px; }
.metric .eyebrow { font-size: 10px; letter-spacing: .4px; margin-bottom: 8px; }
.metric strong { display: block; font-size: clamp(17px,1.3vw,23px); letter-spacing: -.5px; }
.metric small { display: block; margin-top: 7px; color: #748b90; font-size: 11px; }
.metric-icon { display: grid; place-items: center; width: 45px; height: 48px; border-radius: 14px; flex: 0 0 auto; font-size: 20px; font-weight: 800; }
.blue { background: #e8efff; color: #4678df; }.amber { background: #fff2dd; color: #cf8616; }.green { background: #e3f5ec; color: #18a478; }.red { background: #ffedeb; color: #d86559; }.purple { background: #efebff; color: #7960dd; }
.control-main { display: grid; grid-template-columns: 1.8fr 1fr; gap: 18px; }
.control-main h2,.control-bottom h2 { font-size: 19px; margin: 0 0 18px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 18px; font-size: 12px; margin-bottom: 15px; color: #79a0f7; }.chart-legend span:last-child { color: #27aa80; }
.payroll-chart { height: 260px; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; border-bottom: 1px solid #dce6e5; background: repeating-linear-gradient(to top,transparent 0,transparent 64px,#eff4f3 65px); }
.chart-month { display: flex; flex-direction: column; min-width: 0; justify-content: flex-end; align-items: center; }.chart-bars { height: 226px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }.chart-bar { width: 13px; background: #79a0f7; border-radius: 5px 5px 0 0; }.chart-bar.net { background: #27aa80; }.chart-month small { font-size: 10px; color: #748b90; margin: 12px 0 6px; }
#dashboardChartNote { font-size: 12px; margin-top: 17px; }
.cycle-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }.cycle-title h2 { margin: 0; overflow-wrap: anywhere; }.cycle-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0; }.cycle-summary div { background: #f3f7f6; padding: 15px; border-radius: 12px; }.cycle-summary small { display: block; color: #748b90; margin-bottom: 8px; }.cycle-summary strong { font-size: 17px; }.cycle-steps { display: flex; gap: 7px; margin: 26px 0; }.cycle-step { flex: 1; border-top: 3px solid #dce6e5; padding-top: 10px; text-align: center; font-size: 11px; color: #748b90; }.cycle-step.done { border-color: #27aa80; color: #127b78; }.cycle-card > .btn { width: 100%; }.empty-cycle { padding: 28px 0; }.empty-cycle p { line-height: 1.7; }
.control-bottom { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 20px; }.control-bottom p.muted { font-size: 13px; line-height: 1.7; min-height: 45px; }.control-actions { display: flex; flex-wrap: wrap; gap: 8px; }.control-health { margin-top: 20px; font-size: 12px; }
@media(max-width:1200px) { .control-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }.topbar__status #dbStatus { display: none; } }
@media(max-width:800px) { .control-main,.control-bottom { grid-template-columns: 1fr; }.control-metrics { grid-template-columns: 1fr 1fr; }.content { padding: 20px 14px; }.control-heading { align-items: flex-start; }.control-filters { flex-wrap: wrap; }.control-filters > span { margin-left: 0; }.payroll-chart { gap: 4px; }.topbar { height: auto; }.topbar .nav__item { min-width: 40px; width: 40px; } }
@media(max-width:480px) { .control-metrics { grid-template-columns: 1fr; }.control-heading { flex-direction: column; } }

/* Shared Payroll Island page system and matching navigation positions. */
:root { --accent: #267ab5; --border: #e0e8e7; --radius: 17px; --muted: #829095; --text: #172a30; }
.island-page .report-document__bar {
  border-color: var(--border);
  background: #f6faf7;
}
.island-page .payslip-run-report {
  color: var(--text);
  border-color: var(--border);
  background: #fff;
  box-shadow: 0 7px 23px #163b4210;
}
.island-page .payslip-run-report__header p,
.island-page .payslip-run-report__stats span {
  color: #60756f;
}
.island-page .payslip-run-report__stats div {
  border-color: #d7e2dc;
  background: #f6faf7;
}
.island-page .payslip-run-report__tablewrap {
  border-color: #d7e2dc;
  background: #fff;
}
.island-page .payslip-run-report__table th,
.island-page .payslip-run-report__table td {
  border-bottom-color: #e0e8e7;
}
.island-page .payslip-run-report__table th {
  background: #edf3f0;
  color: #425a52;
}
.topbar { height: 88px; min-height: 88px; padding: 10px 30px; grid-template-columns: 180px minmax(0,1fr) auto; box-shadow: 0 9px 26px #12353f14; }
.topbar__title { position: relative; padding-bottom: 10px; gap: 8px; }.topbar__title strong { font-size: 18px; }.topbar__logo { width: 40px; height: 40px; }.island-brand-caption { position: absolute; left: 48px; top: 32px; color: #8cb7c1; font-size: 8px; letter-spacing: 1.4px; }
.topbar .nav { gap: 9px; justify-content: center; }.topbar .nav > .nav__item,.island-nav-toggle { position: relative; display: grid; place-items: center; width: 45px; min-width: 45px; height: 48px; margin: 0; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: #9bbcc5; cursor: pointer; }
.topbar .nav__item::before { display: none; }.topbar svg { width: 23px; height: 23px; flex: 0 0 auto; }.island-nav-toggle:hover,.island-nav-toggle.is-active,.topbar .nav > .nav__item.is-active { background: #125465; color: #fff; }
.island-nav-group { position: relative; }.island-nav-label { position: absolute; top: 57px; left: 50%; transform: translateX(-50%); width: max-content; font-size: 11px; color: #fff; background: #083f4c; padding: 8px 11px; border-radius: 6px; box-shadow: 0 5px 15px #12353f20; visibility: hidden; pointer-events: none; z-index: 80; }
.nav__item:hover > .island-nav-label,.nav__item:focus-visible > .island-nav-label,.island-nav-toggle:hover > .island-nav-label,.island-nav-toggle:focus-visible > .island-nav-label { visibility: visible; }
.island-nav-menu { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 85; min-width: 230px; width: max-content; max-width: 340px; max-height: min(70vh,650px); overflow-y: auto; border: 1px solid #dbe6e6; border-radius: 13px; padding: 8px; background: #fff; box-shadow: 0 18px 40px #183e4933; }
.topbar .nav .island-menu-item { display: block; width: 100%; height: auto; min-height: 39px; padding: 11px 14px; margin: 0; text-align: left; border: 0; border-radius: 7px; font: 600 12px/1.5 system-ui,sans-serif; color: #344f59; background: transparent; box-shadow: none; cursor: pointer; white-space: normal; }.island-menu-item svg { display: none; }.island-menu-item .island-nav-label { position: static; transform: none; color: inherit; padding: 0; background: none; box-shadow: none; visibility: visible; font: inherit; }.topbar .nav .island-menu-item:hover,.topbar .nav .island-menu-item.is-active,.topbar .nav .island-menu-item.active { color: #1e6b8b; background: #eaf3f5; }
.topbar__status { gap: 12px; }.topbar__status #dbStatus { display: none; }.topbar__status #apiStatus { font-size: 10px; background: transparent; color: #b2d0d2; border: 0; padding: 0; }.topbar__status #apiStatus::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dfad42; margin-right: 6px; }.topbar__status #apiStatus.pill--ok::before { background: #55c590; }.topbar__status #apiStatus.pill--bad::before { background: #ed7777; }
.island-help { display: grid; place-items: center; padding: 0; width: 34px; height: 34px; color: #b2d0d2; background: transparent; border: 0; cursor: pointer; }.island-account { background: #145568 !important; border: 0 !important; padding: 10px 14px !important; color: #fff; border-radius: 13px; }.island-help-dialog { width: min(580px,92vw); background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px; color: var(--text); }.island-help-dialog::backdrop { background: #0b394970; }.island-help-dialog p { font-size: 14px; line-height: 1.8; }
.content { max-width: 1800px; padding: 28px 40px 70px; }.layout { min-height: calc(100vh - 88px); }.island-page .page-heading,.island-page > .control-heading { margin-bottom: 24px; }.island-page .page-heading h1 { font-size: 26px; letter-spacing: -.65px; line-height: 1.3; margin: 4px 0 6px; }.island-page .page-heading .muted { font-size: 14px; line-height: 1.6; margin: 0; }.island-page .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
.island-page .card,.island-page .report-panel,.island-page .settings-section { background: #fff; border: 1px solid #e0e8e7; border-radius: 17px; box-shadow: 0 7px 23px #163b4210; }.island-page .card { padding: 23px 25px; }.island-page h2 { font-size: 18px; margin-bottom: 14px; }.island-page h3 { font-size: 16px; }.island-page .card > p.muted { font-size: 13px; line-height: 1.65; }
.island-page .btn { background: #267ab5; border: 1px solid transparent; border-radius: 10px; box-shadow: 0 5px 12px #267ab522; font-size: 13px; font-weight: 700; min-height: 39px; }.island-page .btn--secondary { background: #edf3f1; color: #435a5d; box-shadow: none; }.island-page .btn--danger { background: #b64949; }.island-page .btn:hover:not(:disabled) { filter: brightness(.97); transform: none; }.island-page .btn:disabled { opacity: .48; cursor: not-allowed; }
.island-page input:not([type=checkbox]):not([type=radio]),.island-page select,.island-page textarea { background: #fbfcfc; color: #20363b; border: 1px solid #dfe7e6; border-radius: 9px; min-height: 40px; font-size: 13px; padding: 9px 11px; }.island-page .field > span { color: #647b7f; font-size: 11px; font-weight: 600; margin-bottom: 5px; }.island-page :is(input,select,textarea):focus { outline: 2px solid #267ab533; border-color: #267ab5; }.island-page input[type=checkbox] { accent-color: #267ab5; }
.island-page .table { background: #fff; }.island-page .table th { background: #f7faf9; color: #73878a; font-size: 10px; letter-spacing: .55px; text-transform: uppercase; font-weight: 750; padding: 16px 13px; }.island-page .table td { font-size: 12px; padding: 17px 13px; border-bottom-color: #edf2f0; }.island-page .tablewrap { border-color: #e3eae8; border-radius: 14px; }.island-page .table tr:hover td { background: #f8fbfa; }.island-page .status-message { border-radius: 12px; font-size: 13px; }.island-page .pill { font-size: 10px; background: #edf4f1; border-color: transparent; color: #41685e; }
.island-directory-toolbar { display: flex; gap: 18px; margin: 0 0 18px; padding: 14px 18px !important; }.island-directory-toolbar .field { display: flex; align-items: center; gap: 13px; margin: 0; }.island-directory-toolbar .field span { white-space: nowrap; margin: 0; }.island-directory-toolbar input { width: min(510px,100%); }.employee-directory-card { padding: 0 !important; overflow: hidden; }.employee-directory-card .tablewrap { border: 0; border-radius: 0; }.employee-directory-card .workforce-pager { padding: 14px 20px; }
.island-page .roster-toolbar,.island-page .timesheet-toolbar { padding: 16px; }.island-extra-filters { margin: 0 0 16px; }.island-extra-filters > summary { color: #637c81; font-size: 12px; cursor: pointer; padding: 6px 0; }.island-extra-filters .workforce-filterbar { margin-top: 8px; padding: 14px 18px; }.island-page .workforce-pager { padding: 12px 18px; }.island-page .timesheet-card { background: #fff; border-radius: 18px; box-shadow: 0 6px 22px #163b4210; border-color: #e0e8e7; }.island-page .timesheet-day { background: #f1f9f5; border-color: #cdded5; }.island-page .timesheet-day.leave { border-color: #dfa92f; background: #fff5cf; }.island-page .timesheet-card__summary { padding: 18px 20px; }.island-page .timesheet-day.is-off { background: #f0f2f2; }.island-page .view-toggle button.is-active { background: #267ab5; border-color: #267ab5; }
.island-new-run .grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.island-new-run-actions { display: flex; gap: 12px; margin-top: 18px; }.island-run-steps { display: flex; gap: 16px; justify-content: space-around; padding: 18px 24px !important; }.island-run-steps > div { display: flex; gap: 12px; align-items: center; color: #94a1a4; font-size: 12px; }.island-run-steps span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #dce5e4; border-radius: 50%; }.island-run-steps .is-current { color: #267ab5; }.island-run-steps .is-current span { border-color: #267ab5; background: #eff7fc; }.island-run-steps .is-complete { color: #29836a; }.island-run-steps .is-complete span { background: #e8f5ee; border-color: #29836a; }
#view-payrun > .cards { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.island-new-run,.island-run-steps,.island-existing-run { grid-column: 1 / -1; }.island-intake-note { font-size: 12px; padding: 12px 18px !important; background: #f4f8fa !important; }.island-existing-run .row { margin: 14px 0; }.island-existing-run .tablewrap { margin-top: 22px; }
.island-page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }.island-page-actions .settings-actions { margin: 0; display: flex; gap: 10px; }.island-settings-caption { display: none; }#view-settings > .cards > .card { padding: 0; border: 0; background: transparent; box-shadow: none; }.island-page .tabs { border-bottom: 1px solid #dce7e4; padding-bottom: 10px; margin-bottom: 22px; gap: 10px; }.island-page .tab { color: #647b80; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 11px 17px; }.island-page .tab.is-active { color: #fff; background: #267ab5; }.island-page .settings-section { padding: 24px; margin-bottom: 18px; }.settings-section .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.island-country { display: flex; align-items: center; gap: 20px; }.island-country .eyebrow,.island-country .muted { margin: 0; }.island-country .muted { margin-left: auto; font-size: 12px; }
#view-settings > .cards > .card { display: block; min-width: 0; overflow: visible; }
#view-settings .tab-panel[hidden] { display: none !important; }
#view-settings .tab-panel:not([hidden]) { display: grid; }
#view-settings .settings-section { color: #20363b; background: #fff; border: 1px solid #e0e8e7; border-radius: 16px; box-shadow: 0 7px 23px #163b4210; }
#view-settings .settings-section .muted { color: #647b7f; }
#view-settings .settings-section h3 { color: #112d34; }
#view-settings .settings-section label { color: #20363b; }
#settings-pay-rules { gap: 0; }
#settings-pay-rules #islandPayRateRules { display: grid; gap: 14px; }
.pay-rules-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 0 12px; }
.pay-rules-toolbar__actions { display: flex; align-items: center; gap: 9px; }
.pay-rules-add-help { border: 1px solid #d9e7e3; background: #f4f9f7; border-radius: 13px; padding: 17px; }
.pay-rules-add-help p { margin: 7px 0 13px; color: #587175; font-size: 13px; line-height: 1.55; }
.pay-rules-list { display: grid; overflow: hidden; border: 1px solid #dfe8e6; border-radius: 16px; background: #fff; }
.pay-rule-row { border-bottom: 1px solid #e5ecea; }
.pay-rule-row:last-child { border-bottom: 0; }
.pay-rule-row > summary { display: grid; grid-template-columns: minmax(0,1fr) auto 22px; align-items: center; gap: 18px; min-height: 78px; padding: 16px 20px; cursor: pointer; list-style: none; }
.pay-rule-row > summary::-webkit-details-marker { display: none; }
.pay-rule-row > summary:hover { background: #fbfdfc; }
.pay-rule-main { min-width: 0; display: grid; gap: 5px; }
.pay-rule-main > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pay-rule-main strong { color: #102e34; font-size: 14px; }
.pay-rule-main p { margin: 0; color: #678085; font-size: 12px; }
.pay-rule-main .pill { display: inline-flex; width: fit-content; padding: 4px 8px; font-size: 10px; }
.pay-rule-expired { padding: 4px 8px; border-radius: 999px; background: #f6eded; color: #945050; font-size: 10px; font-weight: 750; }
.pay-rule-chevron { color: #779095; font-size: 22px; line-height: 1; transition: transform .15s ease; }
.pay-rule-row[open] .pay-rule-chevron { transform: rotate(180deg); }
.pay-rule-row.is-expired { opacity: .76; }
.pay-rule-action { white-space: nowrap; }
.pay-rule-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding: 17px 20px 19px; background: #f7faf9; border-top: 1px solid #e7efed; }
.pay-rule-details > div { display: grid; gap: 4px; }
.pay-rule-details > div > span { color: #71878b; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pay-rule-details > div > strong { color: #29464c; font-size: 12px; font-weight: 700; }
.pay-rule-details p { grid-column: 1 / -1; margin: 0; color: #60797e; font-size: 12px; }
.pay-rules-empty { padding: 34px 22px; color: #668085; font-size: 13px; text-align: center; }
.reimbursements-list { display: grid; gap: 10px; margin-top: 16px; }
.reimbursement-row { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid #dfe8e6; border-radius: 12px; background: #fbfdfc; }
.reimbursement-row p,.reimbursement-row small { display: block; margin: 5px 0 0; color: #657d81; font-size: 12px; }
#view-settings .settings-actions:not(.island-settings-savebar) { position: static; background: transparent; border: 0; }
#settings-defaults.tab-panel { gap: 16px; padding-bottom: 82px; }
#settings-defaults .settings-section { margin: 0; }
#settings-defaults .settings-section h3 { color: #112d34; font-size: 17px; }
#settings-defaults .settings-section > .muted { margin: 0; font-size: 12px; line-height: 1.65; }
#settings-defaults .field:has(input[type="checkbox"]) { min-height: 42px; }
#settings-defaults .field:has(input[type="checkbox"]) { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
#settings-defaults .field:has(input[type="checkbox"]) input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.island-nz-statutory { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px !important; background: #f4f8f6 !important; box-shadow: none !important; }
.island-nz-statutory .eyebrow,.island-nz-statutory .muted { margin: 0; }
.island-nz-statutory .eyebrow { color: #528075; }
.island-nz-statutory strong { font-size: 14px; }
.island-nz-statutory .muted { font-size: 12px; text-align: right; }
.island-page-actions .settings-actions.island-settings-savebar { position: fixed; z-index: 70; top: auto; left: 16px; right: 16px; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 11px 14px; border: 1px solid #0d4552; border-radius: 14px 14px 0 0; background: #083f4c; box-shadow: 0 -8px 24px #12353f1a; }
.island-settings-savebar-copy { display: grid; gap: 3px; color: #fff; }
.island-settings-savebar-copy strong { font-size: 12px; }
.island-settings-savebar-copy span { color: #b4cdd0; font-size: 10px; }
.island-page-actions .settings-actions.island-settings-savebar #btnLoadTenantSettings { order: 2; }
.island-page-actions .settings-actions.island-settings-savebar #btnSaveTenantSettings { order: 3; }
#view-reports .report-workspace { display: block; }#view-reports .report-main { width: 100%; }#view-reports .report-builder { padding: 24px; }#view-reports .report-panel__header { margin-bottom: 18px; }#view-reports .report-form--builder { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.island-report-picker { grid-column: 1 / -1; }#view-reports .report-options { grid-column: 1 / -1; }#view-reports .report-form__wide,#view-reports .report-specific-options { grid-column: 1 / -1; }.island-report-generate { justify-content: flex-start; margin-top: 20px; }#view-reports .report-preview { margin-top: 0; }
#view-reports .report-preview-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; margin:20px 0 10px; }
#view-reports .report-preview-actions .btn { border-radius:10px; }
#view-ird-filing .cards,#view-users .cards { gap: 18px; }.island-page .user-invite-panel,.island-page .user-access-editor { background: #f8fbfa; border-color: #dce7e4; }.island-page .employee-profile-toolbar { top: 101px; }.island-page .employee-section-nav { top: 181px; }
@media(max-width:1300px) { .topbar { grid-template-columns: 150px minmax(0,1fr) auto; padding: 10px 18px; gap: 8px; }.topbar .nav { gap: 3px; }.topbar .nav > .nav__item,.island-nav-toggle { width: 40px; min-width: 40px; }.topbar__status #apiStatus { display: none; }.topbar__status { gap: 7px; }.island-account { font-size: 10px; } }
@media(max-width:950px) { .topbar { height: auto; grid-template-columns: 1fr auto; }.topbar .nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-around; width: 100%; }.topbar__status { grid-column: 2; grid-row: 1; }.content { padding: 24px 20px 60px; }.island-page .employee-profile-toolbar,.island-page .employee-section-nav { position: static; }.island-nav-menu { position: fixed; top: 135px; left: 20px; right: 20px; transform: none; width: auto; max-width: none; }.island-new-run .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .island-page .page-heading { flex-direction: column; align-items: stretch; }.island-page-actions { justify-content: flex-start; }.island-directory-toolbar,.island-directory-toolbar .field { flex-direction: column; align-items: stretch; }.island-directory-toolbar input { width: 100%; }#view-payrun > .cards { grid-template-columns: 1fr; }.settings-section .grid,#view-reports .report-form--builder { grid-template-columns: 1fr; }.island-country { flex-wrap: wrap; }.island-country .muted { margin-left: 0; }.island-run-steps { gap: 8px; }.island-run-steps > div { flex-direction: column; text-align: center; }.island-page .card { padding: 18px; }.topbar .nav > .nav__item,.island-nav-toggle { width: 32px; min-width: 32px; padding: 6px; }.topbar svg { width: 21px; height: 21px; }.topbar .nav { gap: 0; }.topbar__title strong { display: inline; }.content { padding: 20px 12px 60px; }.island-help-dialog { padding: 20px; }.island-nz-statutory { align-items: flex-start; flex-direction: column; }.island-nz-statutory .muted { text-align: left; }.island-page-actions .settings-actions.island-settings-savebar { left: 8px; right: 8px; padding: 9px 10px; }.island-settings-savebar-copy span { max-width: 180px; } }
@media(max-width:700px) { .pay-rules-toolbar,.pay-rule-row > summary { align-items: stretch; flex-direction: column; }.pay-rules-toolbar { display: flex; }.pay-rules-toolbar__actions { justify-content: flex-end; }.pay-rule-row > summary { display: grid; grid-template-columns: 1fr auto; gap: 12px; }.pay-rule-main { grid-column: 1 / -1; }.pay-rule-chevron { display: none; }.pay-rule-details { grid-template-columns: 1fr; } }
@media(max-width:700px) { .reimbursement-row { align-items: stretch; flex-direction: column; } }

.topbar .nav { overflow: visible; }

@media(min-width:951px) { .island-page .employee-profile-toolbar { top: 88px; } }

.island-page .table .island-empty-state { padding: 42px 24px; text-align: center; color: #829095; font-size: 13px; } .island-import-guide > summary { cursor: pointer; font-weight: 650; font-size: 13px; color: #526f79; } .island-import-guide > .card { border: 0; box-shadow: none; padding: 18px 0 0; }
/* Keep pointer hover separate from the selected page and keyboard focus. */
.topbar .nav > .nav__item:hover:not(.is-active),
.topbar .island-nav-toggle:hover:not(.is-active):not([aria-expanded="true"]) { background: transparent; color: #9bbcc5; }
.topbar .island-nav-toggle[aria-expanded="true"] { background: #125465; color: #fff; }
.topbar .island-nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .topbar .nav > .nav__item:hover:not(.is-active),
  .topbar .island-nav-toggle:hover:not(.is-active) { background: #125465; color: #fff; }
}
.island-nav-group:has(.island-nav-toggle[aria-expanded="true"])::after { content: ''; position: absolute; top: 48px; left: 50%; transform: translateX(-50%); width: 230px; height: 10px; z-index: 84; }
/* Only the current section gets a filled navigation highlight. */
.topbar .nav > .nav__item:not(.is-active),
.topbar .nav > .nav__item:not(.is-active):hover,
.topbar .island-nav-toggle:not(.is-active),
.topbar .island-nav-toggle:not(.is-active):hover,
.topbar .island-nav-toggle:not(.is-active)[aria-expanded="true"] { background: transparent; color: #9bbcc5; }
.island-notification-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 1px 4px; border-radius: 10px; color: #fff; background: #b64949; font: 700 10px/14px system-ui,sans-serif; }
.island-notifications .island-nav-menu { width: 300px; padding: 14px; }
.island-notifications h2 { margin: 0 0 8px; font-size: 16px; color: #20363b; }
.island-notifications p,.island-notifications [role="status"] { font-size: 12px; line-height: 1.6; color: #647b7f; }
.island-leave-notification { display: grid; gap: 3px; margin-top: 8px; padding: 10px 0; border-top: 1px solid #dce7e4; color: #435a5d; font-size: 12px; line-height: 1.45; }.island-leave-notification strong { color: #20363b; font-size: 13px; }.island-leave-notification small { color: #708589; }.island-leave-notification__actions { display: flex; gap: 7px; margin-top: 4px; }.topbar .island-leave-notification__actions .btn { min-height: 31px; flex: 1; margin: 0; padding: 6px 9px; border-radius: 8px; font-size: 12px; }
.hr-template-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 16px; }
.hr-template-source { display: grid; grid-template-columns: 2fr 3fr; gap: 18px; margin-bottom: 20px; }
.hr-template-picker { background: #f7faf9; padding: 20px; border: 1px solid #d5e4e4; border-radius: 16px; }
.hr-template-drop { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; padding: 24px; border: 2px dashed #95c9c1; border-radius: 16px; background: #f5faf8; cursor: pointer; }
.hr-template-drop input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.hr-template-drop span,.hr-template-drop small { color: #647b7f; }.hr-template-drop.is-dragging { background: #dfefeb; border-color: #267ab5; }
.hr-template-metadata { display: grid; grid-template-columns: 1.4fr 1fr 2fr; gap: 14px; margin-bottom: 18px; }
.hr-template-workspace { display: grid; grid-template-columns: minmax(0,1fr) 265px; gap: 18px; }
.hr-template-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 7px; background: #edf4f1; border: 1px solid #d4e3df; border-radius: 10px 10px 0 0; }
.hr-template-toolbar button { border: 0; background: transparent; padding: 8px 10px; color: #345859; cursor: pointer; border-radius: 6px; }
.hr-template-toolbar button:hover { background: #dceae5; }.hr-template-toolbar #hrSave { margin-left: auto; background: #267ab5; color: #fff; }
.hr-template-editor { min-height: 480px; padding: 22px; border: 1px solid #d4e3df; border-top: 0; background: #fff; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.hr-template-editor p { margin: 0 0 20px; }.hr-template-editor img { max-width: 100%; height: auto; }.hr-template-editor:focus { outline: 2px solid #267ab533; }
.hr-template-fields { background: #f1f6f4; padding: 17px; border-radius: 15px; max-height: 590px; overflow-y: auto; }
.hr-template-fields h3 { font-size: 13px; }.hr-template-fields button { display: block; width: 100%; text-align: left; padding: 10px 12px; margin: 8px 0; color: #23657a; background: #fff; border: 1px solid #c8deda; border-radius: 10px; cursor: pointer; }
#hrStatus.hr-error { color: #ac3333; }
@media(max-width:900px) { .hr-template-source,.hr-template-metadata { grid-template-columns: 1fr; }.hr-template-workspace { grid-template-columns: minmax(0,1fr) 200px; } }
@media(max-width:600px) { .hr-template-workspace { grid-template-columns: 1fr; }.hr-template-header { align-items: flex-start; flex-direction: column; } }
#settings-documents,.hr-template-workspace > div,.hr-template-source > *,.hr-template-metadata > * { min-width: 0; }
#settings-documents input,#settings-documents select { width: 100%; min-width: 0; }
.hr-template-header .row { flex-wrap: wrap; }
@media(max-width:600px) { #settings-documents .hr-template-toolbar button { padding: 7px; }.hr-template-editor { padding: 16px; }.hr-template-fields { max-height: 360px; } }
#settings-documents { padding: 24px; background: #fff; border: 1px solid #dbe6e6; border-radius: 17px; }
@media(max-width:600px) { #settings-documents { padding: 16px; }.hr-template-header .row { width: 100%; }.hr-template-header .btn { min-width: 0; } }
.connected-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.connected-app-summary { display: flex; align-items: flex-start; gap: 18px; }.connected-app-summary h2 { margin: 5px 0 10px; font-size: 18px; }.connected-app-summary .eyebrow { margin: 0; }.connected-app-summary p { line-height: 1.6; }
.connected-app-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; flex-shrink: 0; font-weight: 800; background: #e4f5f1; color: #008783; }.connected-app-icon--xero { background: #e4f1fc; color: #087dc5; }.connected-app-icon--myob { background: #f1e9fc; color: #7c35b2; }.connected-app-icon--whatsapp { background: #e4f7e9; color: #11994a; }
.connected-app-footer { border-top: 1px solid #e8eeee; padding-top: 17px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.connected-app-status { display: inline-block; padding: 6px 10px; border-radius: 20px; background: #fff0dc; color: #a86500; font-size: 11px; font-weight: 750; }
.connected-app-setup { margin: 18px 0; scroll-margin-top: 105px; }.connected-app-setup summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; }.connected-app-setup summary small { display: block; margin-top: 5px; color: #647b7f; font-weight: 400; }.connected-app-setup summary::after { content: '⌄'; }.connected-app-setup[open] summary { margin-bottom: 20px; }.connected-app-setup .grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.connected-app-setup input { min-width: 0; width: 100%; }
@media(max-width:800px) { .connected-app-grid { grid-template-columns: 1fr; }.connected-app-setup .grid { grid-template-columns: 1fr; } }

.history-import { margin-top: 20px; padding: 28px; } .history-drop { margin: 20px 0; padding: 32px; text-align: center; border: 2px dashed #9bc9c5; border-radius: 16px; background: #f5faf9; } .history-drop.is-dragging { background: #dff2ed; border-color: #087f72; } .history-file-input { display: block; margin-top: 12px; max-width: 100%; } .history-preview { padding: 20px; border: 1px solid #dbe5e4; border-radius: 14px; margin: 14px 0; } .history-table-wrap { overflow-x: auto; } .history-preview table { width: 100%; } .history-preview td, .history-preview th { padding: 12px; text-align: left; } .history-preview select { min-width: 220px; } .history-source-text { white-space: pre-wrap; font: inherit; background: #f5faf9; padding: 16px; } #employeeHistory { padding: 24px; margin-top: 20px; }
.island-page .employee-profile-toolbar { position: sticky; top: var(--boss-header-height, 88px); }
@media(max-width:950px) { .island-page .employee-profile-toolbar { position: static; } }
/* Keep the original Payroll Island artwork intact and identify the NZ edition. */
.topbar { grid-template-columns: 220px minmax(0,1fr) auto; }
.topbar__title.payroll-island-brand { gap: 6px; padding-bottom: 0; }
.payroll-island-brand .topbar__logo { width: 184px; height: 68px; object-fit: contain; }
.payroll-island-brand .island-brand-caption { display: none; }
.payroll-island-nz { align-self: center; margin-top: -5px; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .8px; }
@media(max-width:1300px) { .topbar { grid-template-columns: 200px minmax(0,1fr) auto; } .payroll-island-brand .topbar__logo { width: 166px; height: 62px; } }
@media(max-width:950px) { .topbar { grid-template-columns: minmax(0,1fr) auto; } }
@media(max-width:480px) { .payroll-island-brand .topbar__logo { width: 145px; height: 54px; } .payroll-island-nz { font-size: 14px; } }
.payroll-country-switcher { position: relative; flex-shrink: 0; margin-top: -5px; }
.payroll-country-switcher > summary { cursor: pointer; list-style: none; padding: 7px 2px; font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; }
.payroll-country-switcher > summary::-webkit-details-marker { display: none; }
.payroll-country-switcher > summary span { font-size: 12px; }
.payroll-country-switcher > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 5px; }
.payroll-country-menu { position: absolute; top: 100%; left: -150px; z-index: 90; width: 240px; padding: 8px; border: 1px solid #dbe6e6; border-radius: 13px; background: #fff; box-shadow: 0 18px 40px #183e4933; }
.payroll-country-menu a { display: block; padding: 12px; border-radius: 8px; text-decoration: none; color: #20363b; }
.payroll-country-menu a:hover,.payroll-country-menu a:focus-visible,.payroll-country-menu a[aria-current] { background: #eaf3f5; }
.payroll-country-menu small,.payroll-login-countries small { display: block; margin-top: 4px; font-size: 11px; color: #647b7f; }
.payroll-country-menu p { margin: 8px 12px; color: #647b7f; font-size: 11px; line-height: 1.5; }
.payroll-login-countries { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.payroll-login-countries a { display: block; padding: 16px; border: 1px solid #dbe6e6; border-radius: 10px; text-decoration: none; color: #20363b; background: #fff; }
.payroll-login-countries a[aria-current],.payroll-login-countries a:hover,.payroll-login-countries a:focus-visible { border-color: #128b89; background: #eaf7f4; }
.payroll-country-note { font-size: 12px; }
.payroll-default-button { width:100%; padding:10px; border:1px solid #dbe6e6; border-radius:8px; background:#eaf7f4; color:#20363b; cursor:pointer; }

.registration-card { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.registration-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.registration-heading h2, .registration-heading p, .registration-panel h3 { margin: 0; }
.registration-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0; padding: 0; list-style: none; }
.registration-steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-weight: 700; }
.registration-steps li span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--panel-2); }
.registration-steps li.is-active { border-color: var(--accent); color: var(--accent); background: #edf8f3; }
.registration-steps li.is-active span { background: var(--accent); color: #fff; }
.registration-steps li.is-complete { color: #18704f; }
.registration-steps li.is-complete span { background: #d8f2e5; color: #145844; }
.registration-panel { min-height: 250px; }
.registration-panel h3 { margin-bottom: 16px; }
.registration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.registration-grid .field small { color: var(--muted); font-weight: 400; }
.registration-compliance-note { display: grid; grid-template-columns: 170px 1fr; gap: 12px; margin-top: 18px; padding: 14px; border-left: 4px solid var(--accent); border-radius: 8px; background: #edf8f3; }
.registration-compliance-note span { color: var(--muted); }
.registration-review { display: grid; grid-template-columns: minmax(140px, .45fr) 1fr; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.registration-review dt, .registration-review dd { margin: 0; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.registration-review dt { color: var(--muted); background: var(--panel-2); font-weight: 700; }
.registration-terms { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); font-weight: 650; }
.registration-terms input { margin-top: 3px; }
.registration-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

@media(max-width:700px) {
  .registration-steps { grid-template-columns: repeat(2, 1fr); }
  .registration-grid { grid-template-columns: 1fr; }
  .registration-compliance-note { grid-template-columns: 1fr; }
  .registration-heading { align-items: stretch; flex-direction: column; }
}
@media(max-width:480px) { .payroll-country-switcher > summary { font-size: 14px; } .payroll-login-countries a { padding: 12px; } }

/* Fiji roster-builder parity, with NZ payroll calculations retained. */
#rosterEditorDialog.workforce-dialog { width: min(1320px, calc(100vw - 32px)); }
#rosterEditorDialog .workforce-dialog__shell { gap: 16px; }
.roster-builder-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.roster-mode-wrap { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.roster-mode { display: flex; overflow: hidden; border: 1px solid #aebbb6; border-radius: 20px; }
.roster-mode button { min-height: 38px; padding: 8px 18px; border: 0; border-left: 1px solid #aebbb6; background: #fff; color: #405850; cursor: pointer; }
.roster-mode button:first-child { border-left: 0; }
.roster-mode button.is-active { background: #e2e7fa; color: #263f76; font-weight: 800; }
.roster-editor-settings { flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.roster-editor-settings .field { min-width: 130px; }
.roster-editor-settings .grow { min-width: 230px; }
.roster-public-holiday-setting { display: flex; align-items: flex-start; gap: 9px; min-width: 245px; max-width: 330px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.roster-public-holiday-setting input { margin-top: 3px; }
.roster-public-holiday-setting span { display: grid; gap: 2px; }
.roster-public-holiday-setting small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.roster-hours-summary { display: grid; min-width: 145px; align-content: center; padding: 5px 0; }
.roster-hours-summary span,.roster-hours-summary small { color: var(--muted); font-size: 10px; }
.roster-hours-summary strong { color: #0d5544; font-size: 16px; }
.roster-salary-summary { display: grid; grid-template-columns: 210px 1fr; gap: 18px; padding: 13px 18px; border-left: 4px solid #157b78; border-radius: 10px; background: #edf7f5; color: #537068; font-size: 12px; }
.roster-salary-summary[hidden] { display: none; }
.roster-salary-summary strong { color: #173f35; }
.roster-builder-body { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 0; overflow: hidden; border: 1px solid #dbe4df; border-radius: 14px; background: #fff; }
.roster-builder-work { min-width: 0; padding: 10px; }
.roster-all-times { display: grid; grid-template-columns: 48px 92px 1fr 1fr; gap: 8px; margin-bottom: 5px; }
.roster-all-times .btn { min-height: 28px; padding: 4px 10px; justify-self: end; }
#rosterEditorDialog .roster-editor-days { display: grid; grid-template-columns: 48px 92px minmax(0,1fr) minmax(0,1fr); gap: 0; overflow: visible; }
#rosterEditorDialog .roster-editor-days .work-day { display: contents; }
#rosterEditorDialog .roster-editor-days .work-day > strong,
#rosterEditorDialog .roster-editor-days .work-day > label { min-width: 0; min-height: 47px; box-sizing: border-box; padding: 7px 9px; border-top: 1px solid #e0e6e3; background: #fff; }
#rosterEditorDialog .roster-editor-days .work-day.is-off > strong,
#rosterEditorDialog .roster-editor-days .work-day.is-off > label { background: #f7f9f8; color: #9aa7a2; }
#rosterEditorDialog .roster-editor-days .work-day > strong { display: flex; align-items: center; color: #2d5548; font-size: 11px; }
#rosterEditorDialog .roster-editor-days .field { margin: 0; }
#rosterEditorDialog .roster-editor-days .field span { display: block; font-size: 9px; }
#rosterEditorDialog .roster-editor-days .field input { width: 100%; min-height: 29px; padding: 2px 6px; border: 0; background: transparent; color: #416879; font-size: 11px; }
.roster-working-switch { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.roster-working-switch input { position: absolute; opacity: 0; }
.roster-working-switch > span { position: relative; width: 30px; height: 18px; border-radius: 20px; background: #aebbb6; }
.roster-working-switch > span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.roster-working-switch input:checked + span { background: #3268a6; }
.roster-working-switch input:checked + span::after { transform: translateX(12px); }
.roster-working-switch em { font-style: normal; font-size: 10px; }
.roster-pattern-anchor { max-width: 230px; margin: 0 0 12px; }
.roster-segments { display: grid; gap: 8px; margin-bottom: 10px; }
.roster-segment { display: grid; grid-template-columns: 80px 95px 1fr 1fr 38px; gap: 9px; align-items: end; padding: 10px; border: 1px solid #e0e6e3; border-radius: 11px; background: #fafcfb; }
.roster-segment-working { display: flex; align-items: center; gap: 6px; min-height: 42px; font-size: 11px; }
.roster-segment-remove { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f5e7e7; color: #a33b3b; font-size: 20px; cursor: pointer; }
.roster-preview-calendar { min-width: 0; padding: 12px; border-left: 1px solid #dfe6e2; background: #fbfcfb; }
.roster-preview-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.roster-preview-head div { display: flex; align-items: center; gap: 7px; }
.roster-preview-head button { border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.roster-preview-weekdays,.roster-preview-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; }
.roster-preview-weekdays { margin: 10px 0 5px; color: #788a83; text-align: center; font-size: 9px; }
.roster-preview-day { min-width: 0; height: 43px; overflow: hidden; padding: 4px; border: 1px solid #dfe6e2; border-radius: 6px; background: #eff2f0; color: #687b74; font-size: 9px; }
.roster-preview-day.is-planned { border-color: #a8d9b8; background: #e7f6ec; color: #17623d; }
.roster-preview-day.is-outside { opacity: .45; }
.roster-preview-day small { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; overflow: hidden; font-size: 7px; line-height: 1.1; }
.roster-preview-day small em { overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .roster-builder-head { align-items: stretch; flex-direction: column; }
  .roster-editor-settings { justify-content: flex-start; }
  .roster-builder-body { grid-template-columns: 1fr; }
  .roster-preview-calendar { border-top: 1px solid #dfe6e2; border-left: 0; }
}
@media (max-width: 700px) {
  .roster-mode-wrap,.roster-editor-settings { align-items: stretch; flex-direction: column; }
  .roster-salary-summary { grid-template-columns: 1fr; }
  .roster-mode { width: 100%; }
  .roster-mode button { flex: 1; padding-inline: 8px; }
  .roster-segment { grid-template-columns: 75px 1fr 1fr; }
  .roster-segment-working { grid-column: 2; grid-row: 1; }
}
/* Employee opening-history entry */
.employee-opening-history-form { display: grid; gap: 18px; margin: 18px 0 28px; padding: 20px; border: 1px solid #d7e3df; border-radius: 14px; background: #f8fbfa; }
.employee-opening-history-form .grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.employee-opening-history-form .grow { grid-column: 1 / -1; }
@media(max-width:900px) { .employee-opening-history-form .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .employee-opening-history-form .grid { grid-template-columns: 1fr; } .employee-opening-history-form .grow { grid-column: auto; } }

.timesheet-card__pay-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.timesheet-termination-indicator { display: inline-block; width: fit-content; margin-top: 5px; padding: 4px 8px; border-radius: 999px; background: #fbe5e5; color: #8c2525; font-size: 11px; font-weight: 800; }
.timesheet-termination-indicator.is-draft { background: #fff2ce; color: #795600; }
.is-termination-editor #empSummaryCard,
.is-termination-editor #empSettingsCard { display: none; }
#empTerminationAdvanced { margin: 20px 0; }
#empTerminationAdvanced > summary { cursor: pointer; font-weight: 700; margin-bottom: 16px; }
#empTerminationCard label[hidden] { display: none; }
.ts-add-payment { position: relative; }
.ts-add-payment > button { font-size: 24px; min-width: 46px; }
.ts-add-payment__options:not([hidden]) { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 280px; padding: 12px; background: white; border: 1px solid #d7e4e4; border-radius: 12px; box-shadow: 0 12px 30px #00394626; display: grid; gap: 8px; }
.ts-add-payment__options button { text-align: left; white-space: normal; }
.ts-add-payment__options small { display: block; font-weight: normal; }
.timesheet-card__summary { grid-template-columns: minmax(180px,1.4fr) minmax(240px,4fr) minmax(300px,auto); }
.timesheet-card__summary.has-quick-action { grid-template-columns: minmax(180px,1.4fr) minmax(200px,4fr) minmax(300px,auto) 105px; }
@media (max-width: 900px) { .timesheet-card__summary, .timesheet-card__summary.has-quick-action { grid-template-columns: 1fr; } .timesheet-card__pay-actions { justify-content: flex-start; flex-wrap: wrap; } }

.ts-earnings { padding: 16px; border: 1px solid #d3e2df; border-radius: 12px; margin-bottom: 16px; }
.ts-earning-row { display: grid; grid-template-columns: minmax(220px,2fr) minmax(80px,.5fr) minmax(100px,.6fr) minmax(120px,1fr) auto auto; gap: 12px; align-items: end; margin-bottom: 12px; }
.ts-earning-amount { padding-bottom: 14px; font-weight: 700; }
@media (max-width: 900px) { .ts-earning-row { grid-template-columns: 1fr 1fr; } }

/* Match the Fiji Payroll weekly-timesheet presentation while retaining NZ rules. */
.timesheet-card__summary,
.timesheet-card__summary.has-quick-action { grid-template-columns: minmax(300px,1fr) minmax(0,1.5fr) auto; align-items: center; gap: 15px; padding: 17px 18px 12px; }
.timesheet-card__summary.has-quick-action { grid-template-columns: minmax(280px,1fr) minmax(0,1.5fr) auto auto; }
.timesheet-card__identity { align-content: start; gap: 4px; }
.timesheet-card__identity strong { color: #405b92; font-size: 17px; }
.timesheet-card__identity small { font-size: 11px; white-space: normal; }
.timesheet-card__identity::after { display: none; }
.timesheet-card__review { display: grid; justify-items: start; gap: 5px; margin-top: 4px; }
.timesheet-card__review strong { width: fit-content; padding: 5px 9px; border-radius: 7px; background: #e9eeec; color: #3e5a50; font-size: 11px; font-weight: 850; }
.timesheet-card__review strong.status-rejected,
.timesheet-card__review strong.status-mixed { background: #fbe2e4; color: #a32734; }
.timesheet-card__review strong.status-paid { background: #e1e2f3; color: #4c5192; }
.timesheet-card__review small { color: #697c75; font-size: 10px; }
.timesheet-card__middle { display: grid; min-width: 0; gap: 10px; }
.timesheet-card__extras { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; flex-wrap: wrap; }
.timesheet-card__extras > b { color: #6d7e78; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.timesheet-card__extras .ts-add-payment > button { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 10px; background: #2d7fbd; color: #fff; font-size: 24px; }
.timesheet-card__totals { justify-items: end; gap: 4px; white-space: nowrap; }
.timesheet-card__totals strong { color: #152d26; font-size: 20px; }
.timesheet-card__totals span { font-size: 12px; }
.timesheet-roster-variance { color: #08765f !important; font-size: 11px !important; font-weight: 750; }
.timesheet-roster-variance.over,
.timesheet-roster-variance.under { color: #c63838 !important; }
.timesheet-card__detail { padding: 0 17px 17px; border-top: 0; }
.timesheet-card__body { grid-template-columns: minmax(700px,1fr) 165px; align-items: stretch; gap: 14px; }
.timesheet-days { grid-template-columns: repeat(7,minmax(96px,1fr)); gap: 9px; padding-bottom: 0; }
.timesheet-day { min-width: 0; min-height: 142px; padding: 10px 9px; border-color: #b9c7c1; border-radius: 12px; background: #f2faf5; }
.timesheet-day.off { border-color: #c7c7ce; background: #eeeef1; }
.timesheet-day__heading { font-size: 10px; }
.timesheet-day__summary { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 8px; margin: 9px 0 7px; white-space: nowrap; }
.timesheet-day__hours { margin: 0; font-size: 21px; }
.timesheet-day__type { min-width: 0; }
.timesheet-day__type select { margin: 0; text-overflow: ellipsis; }
.timesheet-day .field { margin-top: 5px; }
.timesheet-day .time-pair { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; }
.timesheet-day .time-pair input { min-width: 0; height: 32px; padding: 7px 5px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 11px; text-align: center; }
.timesheet-day .time-pair input:disabled { overflow: visible; color: #243c47; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 1; }
.timesheet-day .field input,
.timesheet-day .field select { height: 32px; padding: 7px 5px; border-radius: 6px; font-size: 11px; }
.timesheet-day > .field { width: 72px; }
.timesheet-day > .field input { height: 31px; padding: 6px 5px; }
.timesheet-day__lock { display: block; margin-top: 7px; color: #7f8d88; font-size: 10px; }
.timesheet-day-more { margin-top: 6px; }
.timesheet-card.is-read-only .timesheet-day-more { display: none; }
.timesheet-actions { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 11px; border-color: #9fa9a5; background: #fafafb; }
.timesheet-actions__label { color: #6c7c76; font-size: 10px; font-weight: 750; }
.timesheet-actions .btn { width: 100%; min-width: 0; }
.timesheet-card__locked { background: #5a5fa3 !important; color: #fff !important; opacity: 1 !important; }
@media (max-width: 1700px) {
  .timesheet-card__summary,
  .timesheet-card__summary.has-quick-action { grid-template-columns: minmax(260px,1fr) minmax(240px,1fr) auto; }
  .timesheet-card__summary.has-quick-action .timesheet-card__quick-action { grid-column: 3; }
  .timesheet-card__body { grid-template-columns: 1fr; }
  .timesheet-actions { display: grid; grid-template-columns: minmax(180px,1fr) repeat(4,auto); align-items: end; }
  .timesheet-days { grid-template-columns: repeat(7,minmax(130px,1fr)); overflow-x: auto; }
}
@media (max-width: 760px) {
  .timesheet-card__summary,
  .timesheet-card__summary.has-quick-action { grid-template-columns: 1fr; gap: 12px; }
  .timesheet-card__extras { justify-content: flex-start; }
  .timesheet-card__totals { justify-items: start; }
  .timesheet-card__detail { padding-inline: 12px; }
  .timesheet-actions { grid-template-columns: 1fr; }
  .timesheet-actions .btn { width: 100%; }
}

#leaveSummaryDrop label.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
#leaveSummaryDrop .history-file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#leaveSummaryDrop label.btn:focus-within { outline: 2px solid #087f72; outline-offset: 3px; }

.island-report-category > summary { list-style: none; }
.island-report-category > summary::after { content: " +"; float: right; }
.island-report-category[open] > summary::after { content: " -"; }
.topbar .nav .island-report-category > .report-nav-item { padding-left: 28px; font-weight: 400; }

/* Certificate of Earnings follows the employee/date/year form. */
#view-reports .certificate-form[hidden], #view-reports .certificate-export[hidden] { display: none; }
#view-reports .certificate-form { grid-column: 1 / -1; display: grid; grid-template-columns: 140px minmax(0, 350px); align-items: center; gap: 12px 20px; padding: 12px 0 0; }
#view-reports .certificate-mode { max-width: 750px; }
#view-reports .certificate-mode .island-report-picker, #view-reports .certificate-mode #reportRangeOptions, #view-reports .certificate-mode .report-options, #view-reports .certificate-mode .report-form__wide, #view-reports .certificate-mode > .report-actions, #view-reports .certificate-mode .report-scope { display: none; }
.certificate-employee { display: flex; }
.certificate-employee select { min-width: 0; flex: 1; border-radius: 4px 0 0 4px; }
.certificate-employee .btn { border-radius: 0 4px 4px 0; }
.certificate-employee .btn[aria-pressed="true"] { background: #159aca; color: white; }
.certificate-dates { display: flex; align-items: center; gap: 24px; }
.certificate-dates input { width: 145px; min-width: 0; }
.certificate-basis { display: flex; gap: 25px; border: 0; padding: 0; margin: 0; }
.certificate-basis label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.certificate-basis input { width: auto; }
.certificate-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px solid #eee; padding-top: 18px; margin-top: 24px; }
.certificate-export, #certificateLoadStatus { grid-column: 1 / -1; }
.certificate-export .btn { display: inline-block; margin: 4px; }
@media (max-width:600px) { #view-reports .certificate-form { grid-template-columns: 1fr; } .certificate-form > span:empty { display: none; } .certificate-dates { gap: 8px; } }

#reportPayslipListOptions .certificate-dates { gap: 8px; }
#reportPayslipListOptions .certificate-dates select { width: 130px; min-width: 0; }
#reportPayslipListOptions .certificate-dates .btn { padding: 8px; }
#payslipListFrequency { width: 135px; }
#payslipListStatus { grid-column: 1 / -1; }

#reportTrialBalanceOptions .certificate-dates { gap:8px; }
#reportTrialBalanceOptions .certificate-dates select { width:130px; min-width:0; }
#trialFrequency { width:160px; }
.trial-basis { display:flex; gap:24px; flex-wrap:wrap; }
.trial-basis label { display:flex; align-items:center; gap:6px; }
.trial-basis input { width:auto; }
#trialStatus { grid-column:1 / -1; }

/* Report options share the reference card layout. */
#view-reports .report-builder { max-width:750px; border-radius:5px; background:white; padding:0; overflow:hidden; }
#view-reports .report-builder .report-panel__header { padding:18px 30px 10px; border-bottom:1px solid #eee; }
#view-reports .report-builder .report-panel__header h2 { font-size:18px; }
#view-reports .report-builder .report-scope { display:none; }
#view-reports .report-builder .report-form--builder { display:block; padding:22px 30px 0; }
#view-reports .report-builder .certificate-form { padding-top:8px; grid-template-columns:140px minmax(0,390px); gap:10px 20px; }
#view-reports .legacy-report-controls { display:none; }
#view-reports .certificate-form .certificate-dates { gap:18px; min-width:0; }
#view-reports .certificate-form .certificate-dates select { width:132px; min-width:0; }
#view-reports .certificate-form input,#view-reports .certificate-form select { border-radius:4px; padding:7px; font-size:16px; background:white; }
#view-reports .certificate-form input[type="checkbox"],#view-reports .certificate-form input[type="radio"] { width:auto; }
#view-reports .certificate-form select[id$="Frequency"] { width:135px; }
#view-reports .certificate-form label { font-size:16px; font-weight:normal; }
#view-reports .certificate-form .btn,#view-reports .report-actions .btn { border-radius:4px; padding:9px 12px; }
#view-reports .certificate-form .btn:not(.btn--secondary),#view-reports .report-actions .btn:not(.btn--secondary),#view-reports .certificate-form .certificate-actions .btn--secondary,#view-reports .report-actions .btn--secondary { background:#267ab5; color:white; }
#view-reports .certificate-form .btn:hover:not(:disabled),#view-reports .report-actions .btn:hover:not(:disabled) { background:#1f69a0; }
#view-reports .report-actions { justify-content:space-between; border-top:1px solid #eee; margin-top:30px; padding:18px 30px; }
#view-reports .certificate-actions { margin:24px -30px 0; padding:18px 30px; }
#view-reports .report-advanced { margin:20px 0; font-size:13px; }
#view-reports .certificate-mode .report-advanced,#view-reports .certificate-mode #reportExportPanel { display:none; }
#view-reports .certificate-mode.payroll-variance-mode > .report-actions { display:flex; }
#view-reports .certificate-mode.payroll-reconciliation-mode > .report-actions { display:flex; }
.payroll-reconciliation-fields { grid-column:1 / -1; display:grid; grid-template-columns:auto 96px auto 96px; align-items:center; gap:20px 28px; max-width:485px; }
.payroll-reconciliation-fields select { width:96px; }
#sharedSpecific { grid-column:1 / -1; }
#sharedSpecific:empty { display:none; }
#view-reports #sharedSpecific .report-specific-options:not([hidden]) { display:grid; grid-template-columns:140px minmax(0,390px); gap:10px 20px; margin:0; border:0; padding:0; background:transparent; }
#view-reports #sharedSpecific .checkline { grid-column:2; display:flex; justify-content:flex-start; }
#view-reports #sharedSpecific .field { grid-column:1 / -1; display:grid; grid-template-columns:140px minmax(0,390px); gap:20px; align-items:center; }
#view-reports #sharedSpecific .field input,#view-reports #sharedSpecific .field select { width:100%; }
#view-reports #sharedSpecific .field > span:last-child:has(input[type="radio"]) { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
#view-reports #sharedSpecific .field > span:last-child:has(input[type="radio"]) > label { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:inherit; font:inherit; }
#view-reports #sharedSpecific .field input[type="radio"] { width:auto; min-height:0; margin:0; }
.payroll-variance-form .payroll-variance-period { display:flex; align-items:center; gap:0; }
.payroll-variance-form .payroll-variance-period select { width:132px; border-radius:4px 0 0 4px !important; }
.payroll-variance-form .payroll-variance-period .btn { border-radius:0 4px 4px 0 !important; padding:8px 11px; }
.payroll-variance-form > input[type="date"] { width:132px; }
.payroll-variance-thresholds { display:grid; gap:7px; }
.payroll-variance-thresholds > label { display:grid; grid-template-columns:minmax(0,1fr) 126px; align-items:center; gap:18px; }
.payroll-variance-thresholds > label > span:first-child { display:flex; align-items:center; gap:7px; }
.payroll-variance-thresholds .variance-percent { display:grid; grid-template-columns:1fr 42px; align-items:stretch; }
.payroll-variance-thresholds .variance-percent input { width:100%; border-radius:4px 0 0 4px !important; }
.payroll-variance-thresholds .variance-percent > span { display:grid; place-items:center; border:1px solid var(--line); border-left:0; border-radius:0 4px 4px 0; color:#267ab5; background:white; }
.shared-run-fields { grid-column:1 / -1; display:grid; grid-template-columns:140px minmax(0,390px); gap:10px 20px; align-items:center; }
#view-reports #reportSharedOptions [hidden],#view-reports #reportExportPanel[hidden] { display:none; }
#sharedStatus { grid-column:1 / -1; }
#reportExportPanel { padding:0 30px 20px; }
@media(max-width:600px) {
  #view-reports .report-builder .certificate-form,#view-reports #sharedSpecific .report-specific-options:not([hidden]),#view-reports #sharedSpecific .field,.shared-run-fields { grid-template-columns:minmax(0,1fr); }
  #view-reports #sharedSpecific .checkline { grid-column:1; }
  #view-reports .certificate-form .certificate-dates { flex-wrap:wrap; gap:8px; }
  #view-reports .report-builder .report-form--builder { padding:18px 20px 0; }
  #view-reports .certificate-actions { margin-left:-20px; margin-right:-20px; padding:18px 20px; }
  .payroll-reconciliation-fields { grid-template-columns:auto minmax(0,120px); gap:10px 20px; }
}

#view-reports { background: #dcedf3; padding: 20px; border-radius: 6px; }
.summary-block:last-of-type h3 { font-weight: 700; }

#view-reports .report-builder .island-report-picker { display:none; }
#view-reports .payment-mode label[for="sharedEmployee"], #view-reports .payment-mode .certificate-employee, #view-reports .payment-mode .report-advanced { display:none; }

#view-reports .hours-mode .report-advanced { display:none; }
#view-reports #hoursOptions { display:grid; grid-template-columns:140px minmax(0,390px); gap:8px 20px; }
#view-reports #hoursOptions[hidden] { display:none; }
.hours-sheet { background:white; color:black; width:794px; box-sizing:border-box; padding:40px 56px; font:12px Arial,sans-serif; white-space:pre-wrap; line-height:1.5; }
#reportDocument:has(.hours-sheet) { overflow-x:auto; }
@media print { .hours-sheet { width:100%; padding:0; } }
@media(max-width:600px) { #view-reports #hoursOptions { grid-template-columns:1fr; } }

.hours-day { display:grid; grid-template-columns:140px 50px 1fr; border-bottom:1px solid black; padding:2px 0; }

#view-reports .other-income-mode .report-advanced { display:none; }
#view-reports #otherIncomeOptions .field > span:last-child { display:flex; gap:24px; }
#view-reports #otherIncomeOptions input[type=radio] { width:auto; }
.income-sheet { background:white; color:black; width:794px; box-sizing:border-box; padding:40px 56px; font:12px Arial,sans-serif; }
.income-sheet h1 { text-align:center; text-decoration:underline; text-underline-offset:8px; font-size:26px; }
.income-sheet > p { text-align:center; }
.income-columns,.income-line { display:grid; grid-template-columns:56% 12% 16% 16%; padding:4px 0; }
.income-columns { border-bottom:1px solid black; margin-top:28px; }
.income-columns span:not(:first-child),.income-line span:not(:first-child) { text-align:right; }
.income-heading,.income-total,.income-gross { font-weight:bold; }
.income-heading { padding-left:16px; text-decoration:underline; }
.income-item { padding-left:24px; border-bottom:1px solid black; }
.income-branchTotal,.income-gross { margin:24px 0; }
.income-branch { text-decoration:underline; }
.income-sheet footer { margin-top:48px; border-top:1px solid black; }
#reportDocument:has(.income-sheet) { overflow-x:auto; }
@media print { .income-sheet { width:100%; padding:0; } .income-line { break-inside:avoid; } }
#view-reports #otherIncomeOptions { background:transparent; border:0; border-radius:0; padding:0; margin:0; }
#view-reports #otherIncomeOptions .field > span:first-child { font:inherit; color:inherit; text-transform:none; letter-spacing:normal; }
#view-reports #otherIncomeOptions .field > span:last-child > label { display:inline-flex; flex-direction:row; align-items:center; gap:8px; color:inherit; font:inherit; }
#view-reports #otherIncomeOptions input[type=radio] { min-height:0; margin:0; }
#view-reports #otherIncomeOptions .field { font:14px Arial,sans-serif; color:#20363b; }
#view-reports #otherIncomeOptions .field > span { font:inherit; color:inherit; margin:0; }

#view-reports #reportAllowanceHistoryOptions .field > span:last-child { display:flex; gap:24px; }
#view-reports #reportAllowanceHistoryOptions input[type=radio] { width:auto; }
#view-reports #reportAllowanceHistoryOptions { background:transparent; border:0; border-radius:0; padding:0; margin:0; }
#view-reports #reportAllowanceHistoryOptions .field > span:first-child { font:inherit; color:inherit; text-transform:none; letter-spacing:normal; }
#view-reports #reportAllowanceHistoryOptions .field > span:last-child > label { display:inline-flex; flex-direction:row; align-items:center; gap:8px; color:inherit; font:inherit; }
#view-reports #reportAllowanceHistoryOptions input[type=radio] { min-height:0; margin:0; }
#view-reports #reportAllowanceHistoryOptions .field { font:14px Arial,sans-serif; color:#20363b; }
#view-reports #reportAllowanceHistoryOptions .field > span { font:inherit; color:inherit; margin:0; }

#view-reports #reportDeductionHistoryOptions .field > span:last-child { display:flex; gap:24px; }
#view-reports #reportDeductionHistoryOptions input[type=radio] { width:auto; }
#view-reports #reportDeductionHistoryOptions { background:transparent; border:0; border-radius:0; padding:0; margin:0; }
#view-reports #reportDeductionHistoryOptions .field > span:first-child { font:inherit; color:inherit; text-transform:none; letter-spacing:normal; }
#view-reports #reportDeductionHistoryOptions .field > span:last-child > label { display:inline-flex; flex-direction:row; align-items:center; gap:8px; color:inherit; font:inherit; }
#view-reports #reportDeductionHistoryOptions input[type=radio] { min-height:0; margin:0; }
#view-reports #reportDeductionHistoryOptions .field { font:14px Arial,sans-serif; color:#20363b; }
#view-reports #reportDeductionHistoryOptions .field > span { font:inherit; color:inherit; margin:0; }
#view-reports #reportDeductionHistoryOptions .checkline { margin-left:0; font:14px Arial,sans-serif; }
#view-reports #reportDeductionHistoryOptions .checkline input { width:auto; min-height:0; }
.deduction-sheet .income-columns,.deduction-sheet .income-line { grid-template-columns:65% 15%; }
.deduction-balance .income-columns,.deduction-balance .income-line { grid-template-columns:60% 20% 20%; }
.deduction-sheet .income-item { border:0; }

.staff-leave-calendar { background:white; padding:24px; border-radius:8px; }
.staff-calendar-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; }
.staff-calendar-layout aside { display:flex; flex-direction:column; gap:12px; }
.staff-calendar-layout aside p { font-size:12px; color:#54666e; }
.staff-calendar-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.staff-calendar-toolbar input { margin-left:auto; width:180px; }
.staff-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-left:1px solid #d1d9dc; border-top:1px solid #d1d9dc; }
.staff-calendar-weekday,.staff-calendar-day { border-right:1px solid #d1d9dc; border-bottom:1px solid #d1d9dc; padding:5px; }
.staff-calendar-weekday { text-align:center; font-weight:bold; }
.staff-calendar-day { min-height:120px; }
.staff-calendar-day time { display:block; text-align:right; margin-bottom:5px; }
.staff-calendar-day.outside-month { background:#eef0f1; color:#68767d; }
.staff-calendar-day.calendar-today { background:#e8f5fc; }
.staff-calendar-event { background:#def1ed; border-left:3px solid #16776c; border-radius:4px; padding:5px; margin-bottom:4px; overflow-wrap:anywhere; font-size:12px; color:#133f3d; }
.staff-calendar-event strong,.staff-calendar-event span,.staff-calendar-event small { display:block; }
.staff-calendar-event.pending { background:#fff6dd; border:1px dashed #ad7410; }
#view-reports.leave-calendar-mode .report-workspace { display:block; }
#view-reports.leave-calendar-mode .report-preview,#view-reports.leave-calendar-mode .report-builder { display:none; }
@media(max-width:750px) { .staff-calendar-layout { grid-template-columns:1fr; } .staff-calendar-layout>div { overflow-x:auto; } .staff-calendar-grid { min-width:650px; } }
@media print { body:has(.leave-calendar-mode) .app-header,body:has(.leave-calendar-mode) .sidebar,body:has(.leave-calendar-mode) .staff-calendar-layout aside,body:has(.leave-calendar-mode) .staff-calendar-toolbar,body:has(.leave-calendar-mode) .report-preview,body:has(.leave-calendar-mode) .report-builder { display:none!important; } .staff-calendar-layout { display:block; } .staff-calendar-day { min-height:100px; break-inside:avoid; } }

#view-reports.leave-calendar-mode .island-page-actions,#view-reports.leave-calendar-mode .report-preview-actions { display:none; }
@media print { body:has(.leave-calendar-mode) .topbar,body:has(.leave-calendar-mode) .island-topbar,body:has(.leave-calendar-mode) nav { display:none!important; } }

#view-reports .leave-history-mode #sharedFrequencyLabel,#view-reports .leave-history-mode #sharedFrequency,#view-reports .leave-history-mode .shared-range-only:has(#sharedPeriodFrom),#view-reports .leave-history-mode label[for=sharedPeriodFrom],#view-reports .leave-history-mode #reportSharedOptions>span.shared-range-only { display:none; }
#view-reports .leave-history-mode #reportLeaveTakenOptions { margin:0;padding:0;border:0;background:transparent; }
#view-reports .leave-history-mode #reportLeaveTakenOptions .field { grid-template-columns:146px 1fr; }
#view-reports .leave-history-mode #reportLeaveTakenOptions .field>span { font:inherit;color:inherit;text-transform:none;letter-spacing:normal; }
#leaveHistoryGrouping { grid-column:1/-1;display:grid;grid-template-columns:146px 1fr;gap:14px 16px; }
#leaveHistoryGrouping[hidden] { display:none; }
#leaveHistoryGrouping>div { display:flex;gap:24px;flex-wrap:wrap; }
#leaveHistoryGrouping label { display:inline-flex;align-items:center;gap:8px; }
#leaveHistoryGrouping input { width:auto;min-height:0;margin:0; }

.calendar-import { margin-bottom:20px;padding:12px;border:1px solid #d1d9dc;border-radius:6px; }
.calendar-match { display:grid;grid-template-columns:250px minmax(200px,400px);gap:12px;align-items:center;margin:8px 0; }
@media print { .calendar-import { display:none!important; } }

#view-reports .entitlement-mode #sharedFrequencyLabel,#view-reports .entitlement-mode #sharedFrequency,#view-reports .entitlement-mode label[for=sharedPeriodFrom],#view-reports .entitlement-mode .certificate-dates:has(#sharedPeriodFrom),#view-reports .entitlement-mode #reportSharedOptions>span.shared-range-only { display:none; }
#view-reports .entitlement-summary-mode .shared-range-only { display:none; }
#view-reports .entitlement-mode .checkline input { width:auto;min-height:0; }

#view-reports .entitlement-mode .report-advanced { display:none; }

#view-reports .pay-rate-mode label[for=sharedEmployee],#view-reports .pay-rate-mode #sharedEmployee,#view-reports .pay-rate-mode #sharedArchived { display:none; }

#view-reports .pay-rate-mode #entitlementAsAt { width:132px; }
#view-reports .pay-rate-mode #payRateCurrentLabel { grid-column:2; display:flex; align-items:center; gap:8px; white-space:nowrap; }
#view-reports .pay-rate-mode #payRateCurrentLabel[hidden] { display:none; }
.history-assessment{margin:18px 0;padding:20px;border:1px solid #c9ded8;border-radius:18px;background:#f8fbfa}.history-assessment__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.history-assessment__head h3{margin:2px 0 0}.history-assessment__head>strong{color:#14635b;white-space:nowrap}.history-assessment__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.history-assessment__grid article{display:flex;flex-direction:column;gap:7px;min-height:128px;padding:16px;border:1px solid #dce8e5;border-radius:14px;background:#fff}.history-assessment__grid article>strong{font-size:1rem;color:#123f3b}.history-assessment__grid article>span{line-height:1.4}.history-assessment__grid article>small{margin-top:auto;color:#607975;line-height:1.4}.history-assessment__grid .history-assessment__ok{border-color:#9bd3bd;background:#f2fbf7}.history-assessment__grid .history-assessment__warn{border-color:#e2bf78;background:#fff9ed}.history-companion-reports{margin-top:16px;border-top:1px solid #dce8e5;padding-top:14px}.history-companion-reports summary{cursor:pointer;font-weight:700;color:#173f3b}.history-companion-reports__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}.history-companion-reports__list .btn{display:flex;min-height:92px;align-items:flex-start;flex-direction:column;text-align:left;white-space:normal}.history-companion-reports__list span{font-size:.78rem;font-weight:400;line-height:1.35;color:#607975}@media(max-width:1150px){.history-assessment__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-companion-reports__list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.history-assessment__head{display:block}.history-assessment__head>strong{display:block;margin-top:8px;white-space:normal}.history-assessment__grid,.history-companion-reports__list{grid-template-columns:1fr}}

.fbt-workbench__header,.fbt-journal{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}.fbt-workbench__header h2{margin:.15rem 0}.fbt-period{margin:22px 0 14px}.fbt-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0 20px}.fbt-summary article{padding:15px;border:1px solid #dce8e5;border-radius:14px;background:#f7faf9}.fbt-summary span,.fbt-summary strong{display:block}.fbt-summary span{font-size:.78rem;color:#607975}.fbt-summary strong{margin-top:6px;color:#103d39}.fbt-form-panel{margin:0 0 20px;padding:15px 18px;border:1px solid #c9ded8;border-radius:14px;background:#f8fbfa}.fbt-form-panel>summary{cursor:pointer;font-weight:700}.fbt-form-panel form{margin-top:18px}.fbt-form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.fbt-asset-fields{margin:18px 0;padding:16px;border:1px solid #dce8e5;border-radius:12px;background:#fff}.fbt-asset-fields legend{padding:0 8px;font-weight:700}.fbt-account-island-picker{display:grid;grid-template-columns:minmax(240px,2fr) auto minmax(280px,2fr);align-items:end;gap:12px;margin-top:16px;padding:15px;border-radius:12px;background:#edf7f4}.fbt-account-island-picker[hidden]{display:none}.fbt-account-island-picker .status-message{grid-column:1/-1;margin:0}.fbt-vehicle-calculation{margin-top:14px;padding:13px 15px;border-radius:10px;background:#edf7f4;color:#164f48}.fbt-vehicle-calculation strong{display:block;font-size:1.05rem}.fbt-vehicle-calculation small{display:block;margin-top:4px}.fbt-asset-cell strong,.fbt-asset-cell small,#fbtTable td strong,#fbtTable td small{display:block}.fbt-match-warning{color:#9a5a00}.fbt-journal{margin-top:20px;padding-top:18px;border-top:1px solid #dce8e5}.fbt-journal h3{margin:0 0 4px}.fbt-disclaimer{margin-top:14px}.btn--small{min-height:34px;padding:7px 10px;font-size:.82rem}@media(max-width:1200px){.fbt-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.fbt-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fbt-account-island-picker{grid-template-columns:1fr auto}.fbt-account-island-picker .field:last-of-type{grid-column:1/-1}}@media(max-width:700px){.fbt-summary,.fbt-form-grid,.fbt-account-island-picker{grid-template-columns:1fr}.fbt-account-island-picker .field:last-of-type{grid-column:auto}.fbt-journal{align-items:stretch}.fbt-journal>*{width:100%}}
.fbt-employee-picker{padding:10px;border:1px solid #dce8e5;border-radius:12px;background:#fff}.fbt-employee-picker label{font-weight:600}.fbt-employee-picker label+select{margin-top:4px}.fbt-employee-picker small{line-height:1.35}
.fbt-return-panel { margin-top: 20px; }
.fbt-check-field { justify-content: center; }
.fbt-check-field span { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.fbt-check-field input, .fbt-check-list input { width: auto; }
.fbt-classification-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.fbt-classification-grid section { padding: 14px; border: 1px solid #dce8e5; border-radius: 12px; background: #fff; }
.fbt-classification-grid h4 { margin: 0 0 5px; }
.fbt-check-list { display: grid; gap: 7px; max-height: 180px; overflow: auto; }
.fbt-check-list label { display: flex; align-items: center; gap: 8px; }
.fbt-income-list { display: grid; gap: 8px; }
.fbt-income-list label { display: grid; grid-template-columns: 1fr minmax(120px, .8fr); align-items: center; gap: 8px; }
.fbt-income-list input { min-width: 0; }
.fbt-return-result { margin-top: 18px; }
.fbt-return-result:empty { display: none; }
.fbt-return-result table { margin-top: 12px; }
.fbt-return-warnings { padding: 12px 16px; border-radius: 10px; background: #fff3d8; color: #744900; }
.fbt-return-warnings li + li { margin-top: 5px; }
.fbt-workpaper-actions { display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px; }
.fbt-saved-workpapers { margin-top:20px;padding-top:16px;border-top:1px solid #dce8e5; }
.fbt-saved-workpapers h4 { margin:0 0 10px; }
.fbt-saved-workpapers article { display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.35fr) auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #e1ebe8; }
.fbt-saved-workpapers article:first-child { border-top:0; }
.fbt-saved-workpapers strong,.fbt-saved-workpapers small { display:block; }
.fbt-saved-workpapers small { margin-top:3px;color:#607975; }
@media(max-width:700px) { .fbt-classification-grid { grid-template-columns: 1fr; } }
@media(max-width:700px) { .fbt-saved-workpapers article { grid-template-columns:1fr; } .fbt-workpaper-actions { justify-content:flex-start; } }

/* Public New Zealand product home */
body.public-home {
  overflow-x: hidden;
  color: #183d3a;
  background: #f4f8f6;
}
body.public-home .topbar {
  position: relative;
  min-height: 76px;
  padding: 12px clamp(22px, 4vw, 68px);
  border-bottom-color: rgba(206, 224, 219, .38);
  background: #064d59;
  box-shadow: none;
}
body.public-home .topbar .nav,
body.public-home .topbar__status { display: none !important; }
body.public-home .topbar__logo { width: auto; height: 44px; }
body.public-home .payroll-country-switcher summary { color: #fff; }

.nz-home {
  min-height: calc(100vh - 76px);
  padding: clamp(34px, 5vw, 78px) clamp(22px, 5vw, 84px) 28px;
  color: #183d3a;
  background:
    radial-gradient(circle at 12% 8%, rgba(76, 197, 176, .2), transparent 32%),
    radial-gradient(circle at 86% 3%, rgba(110, 151, 235, .16), transparent 28%),
    linear-gradient(180deg, #f8fbfa 0%, #edf6f3 58%, #f8fbfa 100%);
}
.nz-home h1,.nz-home h2,.nz-home h3,.nz-home p { margin-top: 0; }
.nz-home h1,.nz-home h2,.nz-home h3 { color: #082f36; }
.nz-home .eyebrow {
  margin-bottom: 12px;
  color: #397069;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.nz-home__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr);
  align-items: center;
  gap: clamp(34px, 6vw, 92px);
  max-width: 1420px;
  margin: 0 auto;
}
.nz-home__hero-copy { max-width: 810px; }
.nz-home h1 {
  max-width: 800px;
  margin-bottom: 22px;
  font-size: clamp(2.65rem, 6vw, 5.55rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.nz-home__lead {
  max-width: 720px;
  color: #476762;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.58;
}
.nz-home__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nz-home__actions .btn {
  min-height: 50px;
  padding: 13px 22px;
  border-color: #087a72;
  background: #087a72;
  color: #fff;
  font-size: .98rem;
  box-shadow: 0 12px 25px rgba(8, 122, 114, .18);
}
.nz-home__actions .btn--secondary {
  border-color: #c4d8d3;
  background: rgba(255,255,255,.82);
  color: #174944;
  box-shadow: none;
}
.nz-home__status {
  max-width: 690px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid #e2c47a;
  border-radius: 12px;
  background: #fff8e8;
  color: #6d4c05;
}
.nz-home__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}
.nz-home__proof li { padding-top: 15px; border-top: 1px solid #c9ddd8; }
.nz-home__proof strong,.nz-home__proof span { display: block; }
.nz-home__proof strong { margin-bottom: 5px; color: #123e3a; }
.nz-home__proof span { color: #64807b; font-size: .84rem; line-height: 1.45; }
.nz-home__position {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  background: linear-gradient(145deg, #074c58 0%, #073a47 100%);
  color: rgba(255,255,255,.78);
  box-shadow: 0 28px 65px rgba(7, 58, 71, .22);
}
.nz-home__position::after {
  position: absolute;
  right: -90px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(68, 203, 177, .14);
  content: '';
}
.nz-home__country {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 30px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-weight: 800;
}
.nz-home__position .eyebrow { color: #88d9cb; }
.nz-home__position h2 { max-width: 520px; color: #fff; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.13; }
.nz-home__position-list { margin-top: 34px; }
.nz-home__position-list div { padding: 17px 0; border-top: 1px solid rgba(255,255,255,.14); }
.nz-home__position-list span,.nz-home__position-list strong { display: block; }
.nz-home__position-list span { margin-bottom: 5px; color: #8edbce; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.nz-home__position-list strong { color: #fff; font-size: .98rem; }
.nz-home__secure { position: relative; z-index: 1; margin: 24px 0 0; font-size: .8rem; line-height: 1.5; }
.nz-home__section,.nz-home__compliance,.nz-home__cta,.nz-home__footer { max-width: 1420px; margin-right: auto; margin-left: auto; }
.nz-home__section { padding: clamp(76px, 9vw, 130px) 0 36px; }
.nz-home__section-heading { display: grid; grid-template-columns: .8fr 1.3fr; gap: 18px 60px; align-items: end; }
.nz-home__section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.nz-home__section-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.08; letter-spacing: -.035em; }
.nz-home__section-heading > p:last-child { margin-bottom: 2px; color: #5e7975; font-size: 1.04rem; line-height: 1.62; }
.nz-home__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 42px; }
.nz-home__features article { min-height: 236px; padding: 28px; border: 1px solid #d4e4e0; border-radius: 20px; background: rgba(255,255,255,.78); }
.nz-home__features article > span { color: #159184; font-size: .8rem; font-weight: 800; }
.nz-home__features h3 { margin: 42px 0 10px; font-size: 1.2rem; }
.nz-home__features p { color: #617c77; line-height: 1.58; }
.nz-home__compliance {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(34px, 7vw, 96px);
  margin-top: 62px;
  padding: clamp(34px, 5vw, 62px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(29, 75, 70, .08);
}
.nz-home__compliance h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.1; }
.nz-home__compliance p { color: #617c77; line-height: 1.62; }
.nz-home__compliance ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.nz-home__compliance li { position: relative; padding: 13px 0 13px 28px; border-bottom: 1px solid #e2ece9; color: #254e49; }
.nz-home__compliance li::before { position: absolute; left: 0; color: #159184; font-weight: 800; content: '✓'; }
.nz-home__cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 28px; padding: 32px 38px; border: 1px solid #d1e2de; border-radius: 22px; background: rgba(255,255,255,.7); }
.nz-home__cta h2 { margin-bottom: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.nz-home__cta .nz-home__actions { margin-top: 0; flex-shrink: 0; }
.nz-home__footer { display: flex; justify-content: space-between; gap: 24px; padding: 34px 0 4px; color: #6c827e; font-size: .85rem; }
.nz-home__footer nav { display: flex; gap: 20px; }
.nz-home__footer a { color: #335f59; }
@media (max-width: 960px) {
  .nz-home__hero,.nz-home__section-heading,.nz-home__compliance { grid-template-columns: 1fr; }
  .nz-home__features { grid-template-columns: 1fr; }
  .nz-home__features article { min-height: auto; }
  .nz-home__features h3 { margin-top: 24px; }
  .nz-home__cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
  body.public-home .topbar { min-height: 66px; padding: 10px 18px; }
  body.public-home .topbar__logo { height: 38px; }
  .nz-home { padding: 30px 18px 24px; }
  .nz-home h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); letter-spacing: -.04em; }
  .nz-home__actions { align-items: stretch; flex-direction: column; }
  .nz-home__actions .btn { width: 100%; }
  .nz-home__proof,.nz-home__compliance ul { grid-template-columns: 1fr; }
  .nz-home__position { padding: 26px 22px; border-radius: 22px; }
  .nz-home__section { padding-top: 72px; }
  .nz-home__compliance { margin-top: 42px; padding: 28px 22px; }
  .nz-home__cta { padding: 28px 22px; }
  .nz-home__cta .nz-home__actions { width: 100%; }
  .nz-home__footer { align-items: flex-start; flex-direction: column; }
}

/* Cross-country account and organisation switcher */
#authStatus.island-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  padding: 7px 12px !important;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
#authStatus.island-account[hidden] { display: none; }
.account-chip__avatar,
.account-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #0b4b5b;
  background: #dff5f4;
  font-weight: 900;
  font-size: 16px;
}
.account-chip__identity { display: grid; min-width: 0; line-height: 1.15; }
.account-chip__identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-chip__identity small { margin-top: 3px; color: #b7d8d8; font-size: 11px; }
.account-menu-dialog,
.organisation-switch-dialog {
  border: 1px solid #c9dcd6;
  color: #173b3a;
  background: #fff;
  box-shadow: 0 24px 70px #062e3960;
}
.account-menu-dialog::backdrop,
.organisation-switch-dialog::backdrop { background: #0b394970; backdrop-filter: blur(2px); }
.account-menu-dialog {
  position: fixed;
  inset: 88px 22px auto auto;
  width: min(355px, calc(100vw - 28px));
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  background: #0b4b5b;
  color: #fff;
}
.account-menu__identity { display: flex; align-items: center; gap: 14px; padding: 4px 4px 18px; border-bottom: 1px solid #ffffff2f; }
.account-menu__identity > div { display: grid; gap: 4px; }
.account-menu__identity strong { font-size: 17px; }
.account-menu__identity span:not(.account-avatar) { color: #b9d4d4; font-size: 13px; }
.account-menu__identity small { color: #fff; font-weight: 800; }
.account-menu__actions { display: grid; gap: 3px; padding-top: 14px; }
.account-menu__actions button,
.account-menu__close {
  padding: 12px 10px;
  border: 0;
  border-radius: 10px;
  color: #e9f5f3;
  background: transparent;
  text-align: left;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.account-menu__actions button:hover,
.account-menu__actions button:focus-visible,
.account-menu__close:hover,
.account-menu__close:focus-visible { background: #ffffff16; }
.account-menu__actions .account-menu__signout { color: #ffb7a8; }
.account-menu__close { position: absolute; top: 10px; right: 10px; width: auto; padding: 8px; font-size: 11px; }
.organisation-switch-dialog {
  width: min(760px, calc(100vw - 30px));
  padding: 30px;
  border-radius: 22px;
}
.organisation-switch__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.organisation-switch__head h2 { margin: 6px 0 8px; font-size: clamp(26px, 4vw, 38px); }
.organisation-switch__head p:last-child { max-width: 570px; margin: 0; color: #637b75; font-size: 16px; line-height: 1.55; }
.organisation-switch__list { display: grid; gap: 12px; margin-top: 24px; }
.organisation-switch__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 17px 20px;
  border: 1px solid #c9dcd6;
  border-radius: 15px;
  color: #173f45;
  background: #f8fbfa;
  text-align: left;
  cursor: pointer;
}
.organisation-switch__item:hover:not(:disabled),
.organisation-switch__item:focus-visible { border-color: #4b9478; background: #edf8f3; }
.organisation-switch__item:disabled { cursor: default; opacity: 1; }
.organisation-switch__item strong { display: block; font-size: 19px; }
.organisation-switch__item small { display: block; margin-top: 5px; color: #637b75; font-size: 13px; }
.organisation-switch__badge { padding: 7px 12px; border-radius: 999px; color: #17664c; background: #dff5ea; font-size: 12px; font-weight: 900; }
@media (max-width: 620px) {
  #authStatus.island-account { min-width: 48px; padding: 5px !important; }
  .account-chip__identity { display: none; }
  .organisation-switch-dialog { padding: 22px; }
  .organisation-switch__head { grid-template-columns: 1fr; }
  .organisation-switch__head .btn { justify-self: start; }
}