/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.28_@types+node@22.20.5_babel-plugin-react-compiler@1.0.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.28_@types+node@22.20.5_babel-plugin-react-compiler@1.0.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../packages/ui-tokens/src/fonts.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Atkinson Hyperlegible Next, self-hosted (SIL OFL 1.1, see fonts/OFL.txt). Latin subset, 400/600/700, no italics. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/atkinson-hyperlegible-next-latin-400-normal.b8f43676.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/atkinson-hyperlegible-next-latin-600-normal.601fad7e.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/atkinson-hyperlegible-next-latin-700-normal.a699a5df.woff2) format("woff2");
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.28_@types+node@22.20.5_babel-plugin-react-compiler@1.0.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.28_@types+node@22.20.5_babel-plugin-react-compiler@1.0.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../packages/ui-tokens/src/tokens.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Ujrah design tokens (docs/reference/Brand_Design_Guide_v0.2.md).
 * Keep in step with tokens.ts, the React Native copy; tokens.test.ts fails when the two drift.
 * Light theme only (R1).
 */
:root {
  /* Palette (guide section 2). Kunyit is a fill colour (bars, surfaces, underlines) and never a text colour. */
  --uj-nila: #22306e;
  --uj-nila-dalam: #161f4a;
  --uj-kunyit: #e3a21a;
  --uj-dakwat: #141a2e;
  --uj-kabus: #eef1f7;
  --uj-putih: #ffffff;
  --uj-garis: #d8dde8;
  --uj-kelabu: #5b6478;

  /* State colours. Always paired with an icon and a word, never colour alone. Information uses Nila. */
  --uj-daun: #1d7a4e;
  --uj-amaran: #a15c00;
  --uj-bahaya: #b42318;

  /* Text colours: the only tokens a font colour may use. Kunyit is deliberately absent (2.2:1 on Putih). */
  --uj-text-primary: var(--uj-dakwat);
  --uj-text-secondary: var(--uj-kelabu);
  --uj-text-link: var(--uj-nila);
  --uj-text-on-nila: var(--uj-putih);
  --uj-text-on-kunyit: var(--uj-dakwat);
  --uj-text-success: var(--uj-daun);
  --uj-text-warning: var(--uj-amaran);
  --uj-text-danger: var(--uj-bahaya);

  /* Surfaces and lines */
  --uj-surface-page: var(--uj-putih);
  --uj-surface-subtle: var(--uj-kabus);
  --uj-surface-brand: var(--uj-nila);
  --uj-surface-brand-pressed: var(--uj-nila-dalam);
  --uj-border: var(--uj-garis);

  /* Accrual bar (signature component, guide section 1): the segments shared by the worker app and the employer worker detail */
  --uj-accrual-available: var(--uj-kunyit);
  --uj-accrual-accrued: rgba(34, 48, 110, 0.4);
  --uj-accrual-withdrawn: var(--uj-nila);
  --uj-accrual-remaining: var(--uj-kabus);
  --uj-accrual-cutoff: var(--uj-dakwat);

  /* Spacing, unit 4 (guide section 4) */
  --uj-space-4: 4px;
  --uj-space-8: 8px;
  --uj-space-12: 12px;
  --uj-space-16: 16px;
  --uj-space-24: 24px;
  --uj-space-32: 32px;
  --uj-space-48: 48px;
  --uj-gutter: 20px;
  --uj-touch-min: 48px;

  /* Radius: controls 10, large surfaces 16, chips 999 */
  --uj-radius-control: 10px;
  --uj-radius-surface: 16px;
  --uj-radius-chip: 999px;

  /* Type (guide section 3): one family, weights 400/600/700 */
  --uj-font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --uj-font-weight-regular: 400;
  --uj-font-weight-semibold: 600;
  --uj-font-weight-bold: 700;

  --uj-type-amount-xl-size: 40px;
  --uj-type-amount-xl-line: 44px;
  --uj-type-amount-xl-weight: 700;
  --uj-type-amount-l-size: 28px;
  --uj-type-amount-l-line: 32px;
  --uj-type-amount-l-weight: 700;
  --uj-type-title-size: 22px;
  --uj-type-title-line: 28px;
  --uj-type-title-weight: 700;
  --uj-type-heading-size: 18px;
  --uj-type-heading-line: 24px;
  --uj-type-heading-weight: 600;
  --uj-type-body-size: 16px;
  --uj-type-body-line: 24px;
  --uj-type-body-weight: 400;
  --uj-type-body-strong-size: 16px;
  --uj-type-body-strong-line: 24px;
  --uj-type-body-strong-weight: 600;
  --uj-type-caption-size: 14px;
  --uj-type-caption-line: 20px;
  --uj-type-caption-weight: 400;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.28_@types+node@22.20.5_babel-plugin-react-compiler@1.0.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.28_@types+node@22.20.5_babel-plugin-react-compiler@1.0.0_react-dom@19.3.1_react@19.3.1__react@19.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Employer portal styles. Every colour, space, radius and type size comes from @ujrah/ui-tokens.
 * Flat: Garis hairlines, no shadows except the one on the bottom-fixed action bar (guide section 4).
 * Text colours only from --uj-text-*; Kunyit is never a text colour.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--uj-surface-page);
  color: var(--uj-text-primary);
  font-family: var(--uj-font-family);
  font-size: var(--uj-type-body-size);
  line-height: var(--uj-type-body-line);
  font-weight: var(--uj-type-body-weight);
}

h1 {
  margin: 0;
  font-size: var(--uj-type-title-size);
  line-height: var(--uj-type-title-line);
  font-weight: var(--uj-type-title-weight);
}

h2 {
  margin: 0;
  font-size: var(--uj-type-heading-size);
  line-height: var(--uj-type-heading-line);
  font-weight: var(--uj-type-heading-weight);
}

p {
  margin: 0;
}

a {
  color: var(--uj-text-link);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--uj-type-caption-size);
}

:focus-visible {
  outline: 2px solid var(--uj-nila);
  outline-offset: 2px;
}

.num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.block {
  display: block;
}

.body-strong {
  font-size: var(--uj-type-body-strong-size);
  line-height: var(--uj-type-body-strong-line);
  font-weight: var(--uj-type-body-strong-weight);
}

.hint {
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  color: var(--uj-text-secondary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-loading {
  padding: var(--uj-space-24) 0;
  color: var(--uj-text-secondary);
}

/* ---------- Shell ---------- */

.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  /* Above the sticky top bar (z 6), so a pinned nav tooltip overflowing to the right is not painted under it.
     Dialog backdrops (z 10) and toasts (z 20) still cover everything. */
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-24);
  padding: var(--uj-space-24) var(--uj-space-16);
  background: var(--uj-surface-brand);
  color: var(--uj-text-on-nila);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar :focus-visible {
  outline-color: var(--uj-putih);
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
}

.brand {
  display: flex;
  flex-direction: column;
  padding: 0 var(--uj-space-12);
}

.brand-logo {
  height: 26px;
  width: auto;
  align-self: flex-start;
}

.brand-name {
  font-size: var(--uj-type-title-size);
  line-height: var(--uj-type-title-line);
  font-weight: var(--uj-type-title-weight);
}

.brand-sub,
.sidebar-hint {
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  color: var(--uj-text-on-nila);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--uj-space-12);
  min-height: var(--uj-touch-min);
  padding: var(--uj-space-8) var(--uj-space-12);
  border-radius: var(--uj-radius-control);
  color: var(--uj-text-on-nila);
  font-size: var(--uj-type-body-strong-size);
  line-height: var(--uj-type-body-strong-line);
  font-weight: var(--uj-type-body-strong-weight);
  text-decoration: none;
}

.nav-link:hover,
.nav-active {
  background: var(--uj-surface-brand-pressed);
}

/* A menu page for another role: dimmed, a lock instead of its icon, not a link. Hover and focus still open its tooltip. */
.nav-link.nav-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nav-link.nav-disabled:hover {
  background: transparent;
}

.nav-button {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.sidebar-foot {
  margin-top: auto;
  padding-top: var(--uj-space-16);
  border-top: 1px solid var(--uj-surface-brand-pressed);
}

.sidebar-hint {
  padding: 0 var(--uj-space-12);
}

.content {
  min-width: 0;
  padding: var(--uj-space-32);
  max-width: 1120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-24);
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-8);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-24);
}

/* ---------- Buttons: 48px high, each with a one-line hint ---------- */

.action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uj-space-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uj-space-8);
  min-height: var(--uj-touch-min);
  padding: var(--uj-space-8) var(--uj-space-24);
  border-radius: var(--uj-radius-control);
  border: 2px solid var(--uj-nila);
  font-family: inherit;
  font-size: var(--uj-type-body-strong-size);
  line-height: var(--uj-type-body-strong-line);
  font-weight: var(--uj-type-body-strong-weight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--uj-surface-brand);
  color: var(--uj-text-on-nila);
}

.btn-primary:hover:not(:disabled) {
  background: var(--uj-surface-brand-pressed);
  border-color: var(--uj-nila-dalam);
}

.btn-secondary {
  background: var(--uj-putih);
  color: var(--uj-text-link);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--uj-surface-subtle);
}

.btn-small {
  min-height: 44px;
  padding: var(--uj-space-4) var(--uj-space-16);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--uj-surface-subtle);
  border-color: var(--uj-border);
  color: var(--uj-text-secondary);
  cursor: not-allowed;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--uj-text-link);
  text-decoration: underline;
  cursor: pointer;
}

/* The one shadow allowed: the bar of actions fixed to the bottom of the screen. */
.action-bar {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: var(--uj-space-16) var(--uj-space-4);
  background: var(--uj-surface-page);
  border-top: 1px solid var(--uj-border);
  box-shadow: 0 -4px 12px rgba(20, 26, 46, 0.08);
}

/* ---------- Help tips: the round "?" and the explanation it opens (no shadow: a Garis hairline on Kabus) ---------- */

.helptip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: var(--uj-space-4);
  padding: 0;
  border: 0;
  border-radius: var(--uj-radius-chip);
  background: transparent;
  color: var(--uj-text-link);
  vertical-align: middle;
  cursor: help;
}

/* The picture is 18px and the button 24px; this widens what a finger can hit to 44px without changing the layout. */
.helptip::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.helptip:hover {
  background: var(--uj-surface-subtle);
}

.tip-pop {
  position: fixed;
  z-index: 30;
  box-sizing: border-box;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--uj-space-12) var(--uj-space-16);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-control);
  background: var(--uj-surface-subtle);
  color: var(--uj-text-primary);
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  font-weight: var(--uj-type-body-weight);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    visibility 0s linear 120ms;
}

.tip-pop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.tip-line {
  display: block;
}

.tip-line + .tip-line {
  margin-top: var(--uj-space-4);
}

/* Reduced motion: no scaling, only a short fade. */
@media (prefers-reduced-motion: reduce) {
  .tip-pop {
    transform: none;
    transition:
      opacity 120ms linear,
      visibility 0s linear 120ms;
  }
}

.label-row {
  display: flex;
  align-items: center;
}

.heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Fields ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
  max-width: 480px;
}

.field-label {
  font-size: var(--uj-type-body-strong-size);
  line-height: var(--uj-type-body-strong-line);
  font-weight: var(--uj-type-body-strong-weight);
}

.input {
  min-height: var(--uj-touch-min);
  padding: var(--uj-space-8) var(--uj-space-12);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-control);
  background: var(--uj-putih);
  color: var(--uj-text-primary);
  font-family: inherit;
  font-size: var(--uj-type-body-size);
  line-height: var(--uj-type-body-line);
}

.input:focus-visible {
  border-color: var(--uj-nila);
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--uj-space-4);
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  color: var(--uj-text-danger);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--uj-space-12);
}

.check input,
.choice input {
  width: 24px;
  height: 24px;
  margin: 12px 0 0;
  accent-color: var(--uj-nila);
}

.check label {
  display: block;
  padding-top: var(--uj-space-12);
}

.find-form {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--uj-space-16);
}

.find-form .field {
  flex: 1 1 280px;
}

.find-form .action {
  /* lines the button up with the input, below the label */
  padding-top: 28px;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-8);
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 640px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--uj-space-12);
  min-height: var(--uj-touch-min);
  padding: var(--uj-space-8) var(--uj-space-16);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-control);
  cursor: pointer;
}

.choice > span {
  display: flex;
  flex-direction: column;
  padding: var(--uj-space-8) 0;
}

.choice-on {
  border: 2px solid var(--uj-nila);
  padding: calc(var(--uj-space-8) - 1px) calc(var(--uj-space-16) - 1px);
  background: var(--uj-surface-subtle);
}

/* ---------- Upload ---------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uj-space-8);
  padding: var(--uj-space-24);
  border: 2px dashed var(--uj-border);
  border-radius: var(--uj-radius-surface);
  background: var(--uj-putih);
}

.dropzone-over {
  border-color: var(--uj-nila);
  background: var(--uj-surface-subtle);
}

.dropzone-file {
  display: flex;
  align-items: center;
  gap: var(--uj-space-12);
  flex-wrap: wrap;
}

.dropzone .sr-only:focus-visible + label {
  outline: 2px solid var(--uj-nila);
  outline-offset: 2px;
}

.dropzone-template {
  margin-top: var(--uj-space-8);
}

/* ---------- Results and tables ---------- */

.results:focus {
  outline: none;
}

.results {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-24);
}

.table-block {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-8);
}

.count {
  margin-left: var(--uj-space-8);
  padding: 0 var(--uj-space-8);
  border-radius: var(--uj-radius-chip);
  background: var(--uj-surface-subtle);
  font-size: var(--uj-type-caption-size);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--uj-type-body-size);
  line-height: var(--uj-type-body-line);
}

.table th,
.table td {
  padding: var(--uj-space-12) var(--uj-space-16);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--uj-border);
}

.table th.right,
.table td.right {
  text-align: right;
}

.table th {
  background: var(--uj-surface-subtle);
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  font-weight: var(--uj-type-body-strong-weight);
  white-space: nowrap;
}

.table td.num {
  white-space: nowrap;
}

/* Columns of running text keep a readable width; the table scrolls sideways instead of squeezing them. */
.table td.prose {
  min-width: 260px;
}

.tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: calc(var(--uj-space-12) * -1) calc(var(--uj-space-16) * -1);
  cursor: pointer;
}

.tick input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--uj-nila);
}

/* One cell, before and after: the arrow and the words for a screen reader carry the meaning, so the two values need no colour. */
.change {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uj-space-8);
}

.change code {
  padding: 2px var(--uj-space-8);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-control);
  background: var(--uj-putih);
  font-size: var(--uj-type-caption-size);
  overflow-wrap: anywhere;
}

.change-after {
  font-weight: var(--uj-type-body-strong-weight);
}

.cell-action {
  margin-top: var(--uj-space-8);
}

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

.row-number {
  font-weight: var(--uj-type-body-strong-weight);
}

/* ---------- Chips and notices ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--uj-space-4);
  padding: 2px var(--uj-space-12) 2px var(--uj-space-8);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-chip);
  background: var(--uj-putih);
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  font-weight: var(--uj-type-body-strong-weight);
  white-space: nowrap;
}

.chip-success {
  color: var(--uj-text-success);
}
.chip-warning {
  color: var(--uj-text-warning);
}
.chip-danger {
  color: var(--uj-text-danger);
}
.chip-info {
  color: var(--uj-text-link);
}
.chip-neutral {
  color: var(--uj-text-secondary);
}

.chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uj-space-8);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--uj-space-12);
  padding: var(--uj-space-16);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
  background: var(--uj-surface-subtle);
}

.notice-title {
  font-weight: var(--uj-type-body-strong-weight);
}

.notice-body {
  color: var(--uj-text-primary);
}

.notice-success > svg {
  color: var(--uj-text-success);
}
.notice-warning > svg {
  color: var(--uj-text-warning);
}
.notice-danger > svg {
  color: var(--uj-text-danger);
}
.notice-info > svg {
  color: var(--uj-text-link);
}

.empty {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-16);
  padding: var(--uj-space-24);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
  background: var(--uj-surface-subtle);
}

.empty-message {
  font-weight: var(--uj-type-body-strong-weight);
  max-width: 560px;
}

/* ---------- Dashboard ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: var(--uj-space-16);
  gap: var(--uj-space-16);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
  padding: var(--uj-space-24);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
}

.stat-value {
  font-size: var(--uj-type-amount-xl-size);
  line-height: var(--uj-type-amount-xl-line);
  font-weight: var(--uj-type-amount-xl-weight);
}

.stat-unit {
  font-size: var(--uj-type-body-size);
  line-height: var(--uj-type-body-line);
  font-weight: var(--uj-type-body-weight);
  color: var(--uj-text-secondary);
}

.stat-label {
  font-weight: var(--uj-type-body-strong-weight);
}

/* ---------- Month at a glance: the accrual bar's grammar as a five-stage line (flat: Garis hairlines, no shadow) ---------- */

.cycle {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-16);
  padding: var(--uj-space-24);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
}

.cycle-head {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
}

/* On a narrow screen the line keeps its width and scrolls sideways instead of squeezing the words. */
.cycle-scroll {
  overflow-x: auto;
  padding-bottom: var(--uj-space-8);
}

.cycle-track {
  position: relative;
  min-width: 720px;
  padding-top: 44px;
}

.cycle-rail {
  position: absolute;
  top: 54px;
  left: 10%;
  right: 10%;
  height: 4px;
  border-radius: var(--uj-radius-chip);
  background: var(--uj-accrual-remaining);
}

.cycle-fill {
  width: calc(var(--cycle-pos) * 100%);
  height: 100%;
  border-radius: var(--uj-radius-chip);
  background: var(--uj-accrual-withdrawn);
}

.cycle-today {
  position: absolute;
  top: 0;
  left: calc(10% + var(--cycle-pos) * 80%);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cycle-today span {
  padding: 2px var(--uj-space-12);
  border-radius: var(--uj-radius-chip);
  background: var(--uj-surface-brand);
  color: var(--uj-text-on-nila);
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  font-weight: var(--uj-type-body-strong-weight);
}

/* The stem from the label down to the line (behind the dots). */
.cycle-today::after {
  content: "";
  width: 2px;
  height: 30px;
  background: var(--uj-surface-brand);
}

.cycle-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cycle-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uj-space-4);
  padding: 0 var(--uj-space-8);
  text-align: center;
}

/* The cutoff: a dashed vertical line through its dot, as on the accrual bar. */
.cycle-stage[data-key="CUTOFF"]::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  height: 40px;
  border-left: 2px dashed var(--uj-accrual-cutoff);
  transform: translateX(-1px);
}

.cycle-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: var(--uj-space-4);
  border: 2px solid var(--uj-border);
  border-radius: var(--uj-radius-chip);
  background: var(--uj-putih);
  color: var(--uj-text-on-nila);
}

.cycle-stage[data-state="done"] .cycle-dot {
  border-color: var(--uj-nila);
  background: var(--uj-nila);
}

.cycle-stage[data-state="current"] .cycle-dot {
  border: 6px solid var(--uj-nila);
}

.cycle-stage[data-state="upcoming"] .cycle-name {
  color: var(--uj-text-secondary);
}

.cycle-word {
  color: var(--uj-text-link);
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  font-weight: var(--uj-type-body-strong-weight);
}

.cycle-caption {
  max-width: 200px;
}

/* ---------- Worker ---------- */

.worker-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uj-space-16);
  padding: var(--uj-space-16) var(--uj-space-24);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
}

/* The worker list: a row is one big target; the picked row is marked with the same navy as the form's choices. */
.table tbody tr.row-pick {
  cursor: pointer;
}

.table tbody tr.row-pick:hover,
.table tbody tr.row-on {
  background: var(--uj-surface-subtle);
}

.row-pick .link {
  min-height: var(--uj-touch-min);
  display: inline-flex;
  align-items: center;
}

.worker-panel {
  padding: var(--uj-space-24);
  border: 1px solid var(--uj-nila);
  border-radius: var(--uj-radius-surface);
}

/* Focus lands here when a worker is picked; the border already marks the panel. */
.worker-panel:focus {
  outline: none;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uj-space-16);
}

.pager-buttons {
  display: flex;
  gap: var(--uj-space-16);
}

/* ---------- Dialog ---------- */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--uj-gutter);
  background: rgba(20, 26, 46, 0.5);
}

.dialog {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-16);
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--uj-space-24);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
  background: var(--uj-putih);
}

.dialog-body ul {
  margin: var(--uj-space-8) 0 0;
  padding-left: var(--uj-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uj-space-24);
  padding-top: var(--uj-space-8);
}

/* ---------- Login and invitation ---------- */

.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uj-space-24);
  padding: var(--uj-space-48) var(--uj-gutter);
  min-height: 100vh;
  background: var(--uj-surface-subtle);
}

.auth-logo {
  height: 34px;
  width: auto;
}

.auth-brand {
  font-size: var(--uj-type-title-size);
  line-height: var(--uj-type-title-line);
  font-weight: var(--uj-type-title-weight);
  color: var(--uj-text-link);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-16);
  width: 100%;
  max-width: 440px;
  padding: var(--uj-space-32);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
  background: var(--uj-putih);
}

.auth-card .field {
  max-width: none;
}

.auth-switch {
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
}

/* ---------- Small screens: the sidebar becomes a bar across the top ---------- */

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    height: auto;
    gap: var(--uj-space-8);
    padding: var(--uj-space-12) var(--uj-gutter);
  }

  .sidebar nav ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sidebar-foot {
    margin-top: 0;
    padding-top: var(--uj-space-8);
  }

  .content {
    padding: var(--uj-space-24) var(--uj-gutter);
  }
}

/* ---------- Guide: task sections, numbered steps and screenshot slots (flat: Garis hairlines, no shadow) ---------- */

.guide {
  max-width: 760px;
}

.guide-toc ol {
  margin: var(--uj-space-8) 0 0;
  padding-left: var(--uj-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
}

.guide-section {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-16);
  padding-top: var(--uj-space-24);
  border-top: 1px solid var(--uj-border);
}

.guide-steps {
  margin: 0;
  padding-left: var(--uj-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-12);
}

.guide-steps li > ul,
.guide-list {
  margin: var(--uj-space-8) 0 0;
  padding-left: var(--uj-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-4);
}

.guide-list {
  margin: 0;
}

.guide-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-8);
}

.guide-figure-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: var(--uj-space-24);
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
  background: var(--uj-surface-subtle);
  color: var(--uj-text-secondary);
}

.guide-figure-img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--uj-border);
  border-radius: var(--uj-radius-surface);
}

.guide-figure-img[hidden] {
  display: none;
}

/* ---------- Invoice detail: opens under its row; flat, Garis hairline, no shadow ---------- */

.analysis-row > td {
  background: var(--uj-surface-subtle);
}

.analysis {
  padding: var(--uj-space-8) 0;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--uj-space-12) var(--uj-space-24);
  gap: var(--uj-space-12) var(--uj-space-24);
  margin: 0;
}

.facts dt {
  font-size: var(--uj-type-caption-size);
  line-height: var(--uj-type-caption-line);
  color: var(--uj-text-secondary);
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}