/* Portal Payroll MyTuitionA+ — same design language as Portal Staf 3.0:
   green-tinted greys, a deep-green sidebar, white top bar, DM Sans / Plus Jakarta Sans. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --page: #f5f6f2; --panel: #ffffff; --chrome: #ffffff; --chrome-line: #e4e8e1;
  --gray-1: #ffffff; --gray-2: #f7f8f5; --gray-3: #eff2ec; --gray-4: #e7ebe3; --gray-5: #dfe5db; --gray-6: #d2dbcd;
  --gray-7: #c1ccbc; --gray-8: #a3b19e; --gray-9: #84917e; --gray-10: #667362; --gray-11: #61705f; --gray-12: #26352b;
  --line: #e7ebe3; --line-strong: #d5ddd0; --placeholder: #8a9686;
  --brand: #315b45; --brand-soft: #eaf0e5; --gold: #b9954b;
  --green-3: #e6f6eb; --green-9: #30a46c; --green-11: #1a7049;
  --red-3: #feebec; --red-9: #e5484d; --red-11: #ce2c31;
  --amber-3: #fff4d5; --amber-9: #e0a93a; --amber-11: #8a5a00;
  --on-accent: #ffffff;
  --shadow-sm: 0 1px 2px rgba(35,58,39,.05);
  --shadow-card: 0 1px 3px #233a2710, 0 0 0 1px var(--line);
  --shadow-card-hover: 0 5px 20px #233a2710, 0 0 0 1px var(--line-strong);
  --shadow-pop: 0 0 0 1px var(--line), 0 8px 16px -4px rgba(0,0,0,.08), 0 24px 48px -12px rgba(0,0,0,.18);
  --scrim: rgba(0,0,0,.32);
  --heading: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);

  /* Day / tag hues: soft background + readable text */
  --c-orange-bg: #fbeadb;  --c-orange-fg: #9a5a17;
  --c-red-bg: #fde3e3;     --c-red-fg: #b42323;
  --c-yellow-bg: #fbf1cc;  --c-yellow-fg: #8a6a00;
  --c-blue-bg: #dfeaff;    --c-blue-fg: #1f56c4;
  --c-green-bg: #dcf3e3;   --c-green-fg: #1d7a3e;
  --c-pink-bg: #fbe1f2;    --c-pink-fg: #a3247a;
  --c-teal-bg: #d8f3ea;    --c-teal-fg: #0f7a59;
  --c-purple-bg: #ebe5ff;  --c-purple-fg: #5b3fc4;
  --c-grey-bg: #e9ece6;    --c-grey-fg: #4a5548;
  --c-crimson-bg: #fcd6d6; --c-crimson-fg: #a31515;
  --c-amber-bg: #fdf0d2;   --c-amber-fg: #8d5a00;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #141e19; --panel: #1c2922; --chrome: #1a261f; --chrome-line: #2b3b30;
  --gray-1: #141e19; --gray-2: #202e25; --gray-3: #28392d; --gray-4: #304337; --gray-5: #374b3d; --gray-6: #405546;
  --gray-7: #4d6353; --gray-8: #69816d; --gray-9: #829a83; --gray-10: #9aae98; --gray-11: #b3c1ad; --gray-12: #e9eee4;
  --line: #304034; --line-strong: #435847; --placeholder: #7f937e;
  --brand: #b9d3a6; --brand-soft: #2c402e; --gold: #d7b773;
  --green-3: #132d21; --green-11: #3dd68c;
  --red-3: #3b1219; --red-11: #ff9592;
  --amber-3: #302008; --amber-11: #f1c35a;
  --on-accent: #141e19;
  --shadow-sm: 0 0 #0000;
  --shadow-card: 0 0 0 1px var(--line);
  --shadow-card-hover: 0 0 0 1px var(--line-strong);
  --shadow-pop: 0 0 0 1px var(--line-strong), 0 24px 48px -12px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);

  --c-orange-bg: #3b2a1c;  --c-orange-fg: #e7b27a;
  --c-red-bg: #3e1f1f;     --c-red-fg: #f19a9a;
  --c-yellow-bg: #3a3218;  --c-yellow-fg: #e9cf7a;
  --c-blue-bg: #1c2c44;    --c-blue-fg: #8ab4ff;
  --c-green-bg: #1d3324;   --c-green-fg: #86d9a0;
  --c-pink-bg: #3a1f33;    --c-pink-fg: #f08ad0;
  --c-teal-bg: #173229;    --c-teal-fg: #4fd1a5;
  --c-purple-bg: #2b2342;  --c-purple-fg: #b9a2ff;
  --c-grey-bg: #2a3a2f;    --c-grey-fg: #c5d1c1;
  --c-crimson-bg: #4a1a1a; --c-crimson-fg: #ff7b7b;
  --c-amber-bg: #3a2f17;   --c-amber-fg: #f2c46d;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--gray-7) transparent; }
body {
  background: var(--page); color: var(--gray-12);
  font: 14px/1.45 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-family: var(--heading); letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ph { font-size: 18px; line-height: 1; flex-shrink: 0; }
.tnum, .num { font-variant-numeric: tabular-nums; }
.muted { color: var(--gray-10); }
.grow { flex: 1; }
.min-w-0 { min-width: 0; }
@media (max-width: 767px), (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* ---------- Sidebar ---------- */
.sidebar {
  /* local palette: works in both themes */
  --panel: #284235; --gray-2: #223c2e; --gray-3: #2d4838; --gray-9: #92aa97; --gray-10: #a1b5a3; --gray-11: #b7c8b8; --gray-12: #f3f4e9;
  --line: #ffffff13; --line-strong: #ffffff26;
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: 240px; max-width: 85vw;
  display: flex; flex-direction: column; gap: 24px; overflow-y: auto; overscroll-behavior: contain;
  padding: max(24px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #1d3528; color: var(--gray-12);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.sidebar[data-open="true"] { transform: none; visibility: visible; box-shadow: var(--shadow-pop); transition: transform 350ms var(--ease-drawer), visibility 0s; }
.backdrop { position: fixed; inset: 0; z-index: 45; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  .sidebar { transform: none; visibility: visible; box-shadow: none !important; transition: none; }
  .backdrop { display: none; }
  .shell { padding-left: 240px; }
  .lg-hide { display: none !important; }
}
.side-top { display: flex; flex-direction: column; gap: 26px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.brand-mark {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 39px; height: 43px;
  border: 1px solid #dfc79255; border-radius: 12px 12px 12px 3px; color: #eddbad; background: #dfc7920c;
  font-family: var(--heading); font-size: 25px; font-weight: 800; letter-spacing: -2px;
}
.brand-mark > span { align-self: flex-start; margin: 7px 0 0 1px; font-size: 15px; letter-spacing: 0; }
.brand-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-name { font-family: var(--heading); font-size: 17px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.brand-company { font-size: 10px; letter-spacing: .1px; color: var(--gray-10); }
.nav { display: flex; flex-direction: column; gap: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 6px; }
.nav-group-label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 9px; background: #d9e4ba12; color: #e7edd9; font-size: 12px; font-weight: 600; }
.nav-group-label .ph { color: #cfdbb2; font-size: 17px; }
.nav-items { display: flex; flex-direction: column; gap: 3px; margin-left: 20px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--gray-11); text-align: left;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.nav-item .ph { font-size: 16px; color: var(--gray-9); }
.nav-item[aria-current="page"] { background: #d9e4ba1a; color: #f5f3dc; }
.nav-item[aria-current="page"] .ph { color: #f5f3dc; }
.nav-item:active { transform: scale(.98); }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.side-label { display: block; padding: 0 4px; margin-bottom: 8px; font-size: 10px; font-weight: 500; letter-spacing: .5px; color: var(--gray-10); }
.sidebar .segmented { padding: 4px; border-radius: 9px; background: #12271c80; box-shadow: none; }
.sidebar .segmented button { height: 30px; font-size: 11px; color: var(--gray-11); }
.sidebar .segmented button[aria-pressed="true"] { background: #3b5140; color: #f1f1df; box-shadow: 0 1px 3px #0002; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.user-avatar { display: grid; place-items: center; flex-shrink: 0; width: 35px; height: 37px; border-radius: 10px; color: #e7dcbb; background: #e7dcbb17; }
.user-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-role { font-size: 10px; color: var(--gray-10); }
.user-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-line { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 10.5px; color: var(--gray-10); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--gray-9); }
.status-dot[data-state="connecting"] { animation: pulse 1.2s ease-in-out infinite; }
.status-dot[data-state="online"] { background: #79bd88; box-shadow: 0 0 0 3px #79bd8822; }
.status-dot[data-state="offline"] { background: #e0a93a; }
.status-dot[data-state="error"] { background: #e5484d; }
@keyframes pulse { 50% { opacity: .35; } }
@media (hover: hover) and (pointer: fine) { .sidebar .nav-item:not([aria-current]):hover { background: #ffffff0c; color: #f3f4e9; } }

/* ---------- Header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 24px 0;
  background: var(--chrome); border-bottom: 1px solid var(--chrome-line);
}
.page-title { font-size: 18px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.month-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; border-radius: 10px; background: var(--gray-3); box-shadow: inset 0 0 0 1px var(--line); }
.month-nav .btn-icon { width: 30px; height: 30px; }
.month-label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 128px; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.06); }
.month-label input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.head-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 767px) {
  .app-header { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .page-title { font-size: 16px; }
  .head-actions .btn span { display: none; }
  .head-actions .btn { width: 36px; padding: 0; }
  .month-label { min-width: 104px; padding: 0 6px; font-size: 12px; }
}
@media (max-width: 479px) { .page-title { display: none; } .month-nav { margin-left: 0; } .head-actions { margin-left: auto; } }

#view { display: flex; flex-direction: column; gap: 16px; padding: 24px; min-height: calc(100dvh - 64px); }
@media (max-width: 767px) { #view { padding: 16px; } }
@media (min-width: 1440px) { #view { padding: 28px 40px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.btn .ph { font-size: 16px; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; pointer-events: none; }
.btn-primary { background: var(--gray-12); color: var(--gray-1); box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--panel); color: var(--gray-12); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.btn-ghost { color: var(--gray-11); }
.btn-danger { color: var(--red-11); }
.btn-icon { width: 32px; height: 32px; padding: 0; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-sm.btn-icon { width: 30px; padding: 0; }
.link { color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse) { .btn { height: 40px; } .btn-icon { width: 40px; height: 40px; } }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: color-mix(in srgb, var(--gray-12) 88%, var(--gray-1)); }
  .btn-secondary:hover { background: var(--gray-2); }
  .btn-ghost:hover { background: var(--gray-3); color: var(--gray-12); }
  .btn-danger:hover { background: var(--red-3); }
}

/* ---------- Segmented, chips, badges ---------- */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gray-3); box-shadow: inset 0 0 0 1px var(--line); flex-shrink: 0; }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--gray-11); transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.segmented button .ph { font-size: 15px; }
.segmented button[aria-pressed="true"] { background: var(--panel); color: var(--gray-12); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.08); }
.segmented.is-block { display: flex; width: 100%; }
.segmented.is-block button { flex: 1; min-width: 0; padding: 0 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--gray-3); color: var(--gray-11); }
.badge .ph { font-size: 13px; }
.badge-ok { background: var(--green-3); color: var(--green-11); }
.badge-warn { background: var(--amber-3); color: var(--amber-11); }
.badge-bad { background: var(--red-3); color: var(--red-11); }
.badge-brand { background: var(--brand-soft); color: var(--brand); }
/* Dimuktamadkan: solid, so a finalised month stands out from the three working states */
.badge-final { background: var(--gray-12); color: var(--gray-1); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Forms ---------- */
.input {
  display: block; width: 100%; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--gray-12); box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus { outline: none; border-color: var(--gray-8); box-shadow: 0 0 0 3px var(--gray-4); }
.input:disabled { background: var(--gray-2); color: var(--gray-10); box-shadow: none; }
.input-static { display: flex; align-items: center; background: var(--gray-2); box-shadow: none; font-weight: 600; }
textarea.input { height: auto; min-height: 64px; padding: 8px 12px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23849182' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.input-sm { height: 30px; padding: 0 8px; font-size: 12.5px; }
@media (pointer: coarse) { .input { height: 40px; } .input-sm { height: 34px; } }
.label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--gray-12); }
.hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--gray-10); }
.field { min-width: 0; }
.field.span-2 { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .form-grid, .form-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
.section-t { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.section-t:first-child { margin-top: 0; }
.section-t::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.checkbox {
  appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; flex-shrink: 0; display: grid; place-content: center;
  border-radius: 4px; border: 1px solid var(--gray-8); background: var(--panel); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease;
}
.checkbox::after { content: ""; width: 10px; height: 10px; background: var(--gray-1); opacity: 0; transform: scale(.6); transition: opacity 120ms ease, transform 160ms var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat; }
.checkbox:checked { background: var(--gray-12); border-color: var(--gray-12); }
.checkbox:checked::after { opacity: 1; transform: none; }
.checkbox:disabled { opacity: .5; cursor: default; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; cursor: pointer; }
.check-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; cursor: pointer; }
.check-card:has(:checked) { background: var(--green-3); color: var(--green-11); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-9) 30%, transparent); }
.line-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
/* Gaji extra earnings / deductions: kind | description or record | amount | remove, then (earnings) the pay type
   under the description. On phones the kind takes the first row beside the remove button. */
.line-row.lr2 { grid-template-columns: 172px minmax(0, 1fr) 110px 34px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.line-row.lr2 .lr-sub { grid-column: 2 / 4; }
.line-row.lr2 span.lr-sub { margin: -2px 0 0; }
@media (max-width: 639px) {
  .line-row.lr2 { grid-template-columns: minmax(0, 1fr) 110px 34px; }
  .line-row.lr2 .lr-kind { grid-column: 1 / 3; }
  .line-row.lr2 .lr-x { grid-column: 3; grid-row: 1; }
  .line-row.lr2 .lr-sub { grid-column: 1 / 3; }
}
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* Profil Pekerja */
.form-grid.kpi-grid { grid-template-columns: 140px minmax(0, 1fr); }
@media (max-width: 639px) { .form-grid.kpi-grid { grid-template-columns: minmax(0, 1fr); } }
.note-list { border-top: 1px solid var(--line); }
.note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.note:last-child { border-bottom: 0; }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-10); }
.note-text { grid-column: 1 / -1; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
/* Tetapan: contribution rules by pay type, ticks centred as on HR's table */
.table.rules th:not(:first-child), .table.rules td:not(:first-child) { text-align: center; }
.table.rules .checkbox { margin: 0 auto; }
details.more { margin-top: 18px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
details.more > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; margin-left: auto; color: var(--gray-10); font-weight: 400; font-size: 16px; }
details.more[open] > summary::after { content: "−"; }
details.more > .more-body { padding: 0 14px 14px; }

/* ---------- Cards & layout ---------- */
.card { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-card); min-width: 0; }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.card-head.flat { border-bottom: 0; padding-bottom: 6px; }
.card-title { font-family: var(--heading); font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
h2.card-title { font-size: 17px; }
.card-sub { margin-top: 3px; font-size: 12px; color: var(--gray-10); }
.card-ic { display: grid; place-items: center; flex-shrink: 0; width: 31px; height: 31px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.card-ic .ph { font-size: 17px; }
.card-body { padding: 18px 20px 20px; }
.card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--gray-2); border-radius: 0 0 14px 14px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .hint { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.side-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1099px) { .split { grid-template-columns: minmax(0, 1fr); } }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 44px 24px; color: var(--gray-11); }
.empty .ph { font-size: 26px; color: var(--gray-9); margin-bottom: 6px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; background: var(--amber-3); color: var(--amber-11); }
.notice .ph { margin-top: 1px; }
.notice.is-info { background: var(--brand-soft); color: var(--brand); }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.stat-k { font-size: 11.5px; color: var(--gray-10); }
.stat-v { margin-top: 4px; font-family: var(--heading); font-size: 22px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-v small { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--gray-10); }

/* Month bar (days, public holidays, data status) */
.month-bar { display: flex; flex-wrap: wrap; align-items: stretch; }
.mb-item { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 20px; min-width: 0; }
.mb-item + .mb-item { border-left: 1px solid var(--line); }
.mb-hol { flex: 1; }
.mb-k { font-size: 11.5px; color: var(--gray-10); }
.mb-v { font-family: var(--heading); font-size: 20px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.mb-v small { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--gray-10); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hol-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; border-radius: 7px; font-size: 12px; font-weight: 500; background: var(--c-amber-bg); color: var(--c-amber-fg); }
.hol-chip button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: inherit; opacity: .7; }
.hol-chip button .ph { font-size: 12px; }
.hol-add { display: inline-flex; gap: 6px; }
.hol-add input[type=number] { width: 64px; }
.hol-add input:not([type]) { width: 150px; }
@media (max-width: 767px) { .mb-item + .mb-item { border-left: 0; border-top: 1px solid var(--line); } .mb-item { flex-basis: 100%; } }

/* Staff picker */
.picker { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pick-label { margin-bottom: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-10); }
.pick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--gray-12); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.pick:active { transform: scale(.96); }
.pick small { font-size: 10px; color: var(--gray-10); }
.pick[aria-pressed="true"] { background: var(--gray-12); color: var(--gray-1); box-shadow: inset 0 0 0 1px var(--gray-12); }
.pick[aria-pressed="true"] small { color: var(--gray-6); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-9); flex-shrink: 0; }
.dot.ok { background: var(--green-9); }
@media (hover: hover) and (pointer: fine) { .pick:not([aria-pressed="true"]):hover { background: var(--gray-2); } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: 14px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; text-align: left; white-space: nowrap; }
.table th { padding: 10px 12px; font-size: 11.5px; font-weight: 500; color: var(--gray-11); background: var(--gray-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 18px; }
.table th:last-child, .table td:last-child { padding-right: 18px; }
.table .num { text-align: right; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.group td { padding-top: 14px; padding-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--panel); }
.table tfoot td { font-weight: 700; background: var(--gray-2); border-top: 1px solid var(--line); border-bottom: 0; }
.table .strong { font-weight: 700; }
.table td.wrap { white-space: normal; min-width: 220px; }
.table-click tbody tr[data-act] { cursor: pointer; }
.cell-name { font-weight: 600; }
.cell-sub { font-size: 11.5px; color: var(--gray-10); }
@media (hover: hover) and (pointer: fine) { .table tbody tr:not(.group):hover td { background: var(--gray-2); } }

/* ---------- Data cards (Bulanan / preview) ---------- */
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1199px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .teams { grid-template-columns: minmax(0, 1fr); } }
.team-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.team-head { display: flex; align-items: center; gap: 8px; font-family: var(--heading); font-size: 14px; font-weight: 700; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 600; }
.data-card { overflow: hidden; }
.dc-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; }
.dc-name { font-family: var(--heading); font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.dc-full { margin: 2px 0 8px; font-size: 11.5px; color: var(--gray-10); }
.dc-btns { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.rows { margin: 0; border-top: 1px solid var(--line); }
.rows .row { display: grid; grid-template-columns: 42% 58%; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.rows .row:last-child { border-bottom: 0; }
.rows dt, .rows dd { margin: 0; padding: 7px 16px; }
.rows dt { color: var(--gray-10); }
.rows dd { text-align: right; overflow-wrap: anywhere; font-weight: 500; }
.rows .sub { color: var(--gray-10); font-weight: 400; }

/* ---------- Calendar (Takwim style) ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-h { padding-bottom: 4px; font-size: 11px; font-weight: 500; color: var(--gray-10); text-align: center; }
.cal-d { display: flex; flex-direction: column; min-height: 48px; padding: 5px 6px; border-radius: 9px; background: var(--gray-2); font-size: 12px; font-weight: 600; color: var(--gray-11); font-variant-numeric: tabular-nums; }
.cal-d.sun > span { color: var(--red-11); }
.cal-d.today { box-shadow: inset 0 0 0 1.5px var(--gray-12); }
.cal-d small { margin-top: auto; font-size: 9.5px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 11.5px; color: var(--gray-11); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; }

/* Date picker pop-over */
.dp { position: relative; min-width: 0; }
.dp-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); box-shadow: var(--shadow-sm); text-align: left; }
.dp.open .dp-btn, .dp-btn:focus-visible { border-color: var(--gray-8); box-shadow: 0 0 0 3px var(--gray-4); outline: none; }
.dp-btn b { white-space: nowrap; font-weight: 600; }
.dp-btn .days { flex: 1; min-width: 0; font-size: 12px; color: var(--gray-10); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-btn .ph-ld { flex: 1; color: var(--placeholder); }
.dp-btn > .ph { margin-left: auto; color: var(--gray-9); font-size: 16px; }
.dp:has(.dp-btn:disabled) .dp-btn { background: var(--gray-2); }
@media (pointer: coarse) { .dp-btn { height: 40px; } }
.dp-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(292px, 86vw); padding: 12px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-pop); }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dp-grid .h { padding: 2px 0 4px; text-align: center; font-size: 10.5px; font-weight: 500; color: var(--gray-10); }
.dp-day { aspect-ratio: 1; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--gray-12); background: var(--gray-2); font-variant-numeric: tabular-nums; transition: background-color 120ms ease, transform 160ms var(--ease-out); }
.dp-day:active { transform: scale(.92); }
.dp-day.sun { color: var(--red-11); }
.dp-day.hol { box-shadow: inset 0 -3px 0 var(--amber-9); }
.dp-day.taken { opacity: .35; }
.dp-day.on { background: var(--gray-12); color: var(--gray-1); opacity: 1; }
.dp-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.dp-foot span { margin-right: auto; font-size: 12px; font-weight: 500; color: var(--gray-11); }
.off-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 8px; }
@media (hover: hover) and (pointer: fine) { .dp-day:not(.on):hover { background: var(--gray-4); } }

/* Payslip preview */
.slip-sec { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.slip-h { margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-10); }
.slip-line { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 13px; }
.slip-line .l { flex: 1; min-width: 0; }
.slip-line .n { font-size: 11px; color: var(--gray-10); }
.slip-line .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.slip-line.total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-weight: 700; }
.slip-line .tag-ovr { margin-left: 6px; }
.slip-net { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: var(--brand-soft); color: var(--brand); }
.slip-net b { font-family: var(--heading); font-size: 22px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.slip-meta { padding: 12px 20px 16px; font-size: 11.5px; color: var(--gray-10); }

/* ---------- Dialog ---------- */
.overlay { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; transition: visibility 0s linear 200ms; }
.overlay[data-open="true"] { visibility: visible; transition: none; }
.overlay-backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 200ms ease; }
.overlay[data-open="true"] .overlay-backdrop { opacity: 1; }
.dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 92dvh; overflow: hidden; background: var(--panel); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-pop); transform: translateY(100%); transition: transform 200ms var(--ease-out); }
.overlay[data-open="true"] .dialog { transform: none; transition: transform 400ms var(--ease-drawer); }
@media (min-width: 640px) {
  .overlay { align-items: center; padding: 16px; }
  .dialog { max-width: 600px; max-height: min(820px, 90dvh); border-radius: 16px; opacity: 0; transform: scale(.96); transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); }
  .overlay[data-open="true"] .dialog { opacity: 1; transform: none; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
  .dialog.dialog-lg { max-width: 820px; }
}
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { font-size: 17px; }
.dialog-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.dialog-footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--gray-2); }
.ot-entry { padding: 16px; margin-bottom: 12px; border-radius: 12px; background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--line); }
.ot-entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
.live { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 13px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 80; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 380px; margin: 0 auto;
  padding: 12px 16px; border-radius: 12px; background: var(--panel); color: var(--gray-12); box-shadow: var(--shadow-pop);
  font-size: 13px; font-weight: 500; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(calc(100% + 16px)); transition: opacity 300ms ease, transform 300ms ease;
}
.toast[data-visible="true"] { opacity: 1; transform: none; }
@media (min-width: 640px) { .toast { left: auto; right: 24px; bottom: 24px; width: 380px; margin: 0; } }

/* ---------- Login (always dark, night sky, same as Portal Staf) ---------- */
body.locked .shell, body.locked .sidebar, body.locked .backdrop { display: none; }
.login {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse 120% 90% at 50% 35%, #0b0e19 0%, #05060c 55%, #020308 100%);
  color: #ececec; color-scheme: dark; transition: opacity 420ms ease-out;
}
.login[data-leaving] { opacity: 0; pointer-events: none; }
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.auth-shell {
  position: relative; z-index: 1; width: 100%; max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr);
  overflow: hidden; border-radius: 16px; background: rgba(24,24,27,.3);
  -webkit-backdrop-filter: blur(4px) saturate(130%); backdrop-filter: blur(4px) saturate(130%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 24px 48px -12px rgba(0,0,0,.6);
  transition: opacity 220ms ease-out, transform 220ms ease-out, filter 220ms ease-out;
}
.login[data-leaving] .auth-shell { opacity: 0; transform: scale(.96); filter: blur(8px); }
.auth-brand { display: grid; place-items: center; padding: 36px 24px 28px; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(closest-side at 50% 45%, rgba(242,180,60,.14), transparent); }
.auth-card { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 28px; }
@media (min-width: 768px) {
  .auth-shell { grid-template-columns: 1.1fr 1fr; }
  .auth-brand { min-height: 440px; padding: 48px 40px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.08); }
  .auth-card { padding: 48px 40px; }
}
.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.auth-head h1 { font-size: 20px; font-weight: 650; color: #f4f4f5; }
.auth-card label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: #e4e4e7; }
.auth-card .in { width: 100%; height: 40px; background: rgba(30,41,64,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 0 12px; color: #f4f4f5; }
.auth-card .in::placeholder { color: #71717a; }
.auth-card .in:focus { outline: none; border-color: #7aa7ff; box-shadow: 0 0 0 3px rgba(122,167,255,.2); }
.pw-wrap { position: relative; }
.pw-wrap .in { padding-right: 44px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 30px; border-radius: 6px; color: #a1a1aa; }
.pw-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
.pw-toggle[aria-pressed="true"] { color: #fff; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; border-radius: 9px; background: #f4f4f5; color: #111; font-weight: 600; font-size: 13.5px; }
.auth-btn:hover { background: #fff; }
.auth-btn:disabled { opacity: .6; }
.login .segmented { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.login .segmented button { color: #a1a1aa; height: 26px; padding: 0 9px; font-size: 12px; }
.login .segmented button[aria-pressed="true"] { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.login-err { background: rgba(255,123,123,.12); color: #ff9d9d; padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.logo-stage { width: min(300px, 78%); display: flex; flex-direction: column; align-items: center; gap: 20px; perspective: 900px; }
.logo-3d { position: relative; width: 100%; transform-style: preserve-3d; animation: logo-swing 7s cubic-bezier(.37,0,.63,1) infinite alternate; }
.logo-3d img { display: block; width: 100%; height: auto; }
.logo-3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255,244,214,.55) 50%, transparent 58%) 0 0 / 300% 100% no-repeat;
  -webkit-mask: url(logo-dark.png) center / contain no-repeat; mask: url(logo-dark.png) center / contain no-repeat;
  animation: logo-glint 7s cubic-bezier(.37,0,.63,1) infinite alternate;
}
.logo-floor { width: 72%; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.2), transparent); animation: logo-floor 7s cubic-bezier(.37,0,.63,1) infinite alternate; }
@keyframes logo-swing { from { transform: rotateX(4deg) rotateY(-30deg); } to { transform: rotateX(4deg) rotateY(30deg); } }
@keyframes logo-floor { from { transform: translateX(-5%) scaleX(.87); } 50% { transform: translateX(0) scaleX(1); } to { transform: translateX(5%) scaleX(.87); } }
@keyframes logo-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}

/* ---------- Print ---------- */
#print { display: none; }
@page { size: A4 landscape; margin: 8mm; }
@media print {
  body { background: #fff; color: #000; font-size: 9.5px; }
  .shell, .sidebar, .backdrop, .overlay, .toast, .login { display: none !important; }
  #print { display: block; }
  .ps-title { background: #1d3528; color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 4px; border: 1px solid #000; }
  .ps-sub { text-align: center; border: 1px solid #000; border-top: 0; padding: 3px; margin-bottom: 12px; line-height: 1.35; }
  .ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
  .ps-team { background: #ddd; border: 1px solid #000; text-align: center; font-weight: 700; padding: 3px; margin-bottom: 10px; font-size: 11px; }
  .ps-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; break-inside: avoid; }
  .ps-table td { border: 1px solid #000; padding: 2px 5px; text-align: center; vertical-align: middle; }
  .ps-table td.l { background: #eee; font-weight: 700; width: 38%; text-transform: uppercase; }
  .ps-table .sub { color: #000; }
  .ps-foot { margin-top: 10px; font-style: italic; font-size: 9px; }
  .otp { font-size: 10.5px; }
  .otp-ref { text-align: right; font-style: italic; font-weight: 700; font-size: 8.5px; }
  .otp h1 { text-align: center; font-size: 15px; margin: 6px 0 16px; }
  .otp h4 { margin: 14px 0 4px; font-size: 11px; }
  .otp-info { width: 70%; }
  .otp-info td { text-align: left; }
  .otp-info td.l { text-align: center; width: 30%; background: #fff; }
  .otp-main tr.h td { font-weight: 700; background: #eee; }
  .otp-main td.notes { white-space: pre-line; }
  .otp-main tr.tot td { font-weight: 700; }
  .otp-box { border: 1px solid #000; padding: 6px 8px; min-height: 110px; margin-top: 16px; line-height: 1.6; }

  /* Payslips: one per A4 page, colours kept. The page itself has no margin (so no browser header/footer); the slip pads itself. */
  .pslip { width: auto; padding: 14mm 15mm; break-after: page; page-break-after: always; }
  .pslip:last-child { break-after: auto; page-break-after: auto; }
}

/* ---------- Payslip (screen view and print share one design) ----------
   Always light: it is a document, whatever theme the portal uses. */
.pslip {
  width: 820px; padding: 36px 40px 28px; background: #fff; color: #1b2a20;
  font: 12px/1.45 'DM Sans', ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pslip * { box-sizing: border-box; }
.pslip-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding-bottom: 16px; }
.pslip-logo { display: block; width: 148px; height: auto; }
.pslip-co { padding-left: 22px; border-left: 1px solid #dfe5db; }
.pslip-co-name { font: 800 15.5px/1.2 'Plus Jakarta Sans', 'DM Sans', sans-serif; letter-spacing: .02em; color: #1d3528; text-transform: uppercase; }
.pslip-co-sub { margin-top: 4px; font-size: 10.5px; color: #5d6b5f; }
.pslip-doc { text-align: right; }
.pslip-doc-t { font: 800 21px/1 'Plus Jakarta Sans', 'DM Sans', sans-serif; letter-spacing: .16em; color: #1d3528; }
.pslip-doc-m { margin-top: 6px; font-size: 13px; font-weight: 600; color: #3b4a3f; }
.pslip-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border: 1px solid #b9954b; border-radius: 4px; color: #8a6a28; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; }
.pslip-badge.draft { border-color: #c2412d; color: #c2412d; }
.pslip-gold { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1d3528 0%, #1d3528 62%, #b9954b 62%, #e6cf94 100%); }
.pslip-emp { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 16px; }
.pslip-kv { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid #edf0ea; }
.pslip-kv span { color: #5d6b5f; }
.pslip-kv b { font-weight: 600; color: #1b2a20; overflow-wrap: anywhere; }
.pslip-cut { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 8px 12px; border-radius: 6px; background: #f3f6f0; font-size: 11px; color: #3b4a3f; }
.pslip-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.pslip-t { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pslip-t th.cap { padding: 7px 8px; background: #1d3528; color: #fff; font: 700 10.5px/1.2 'Plus Jakarta Sans', 'DM Sans', sans-serif; letter-spacing: .14em; text-align: center; }
.pslip-t thead tr + tr th { padding: 5px 8px; background: #eef2eb; color: #3b4a3f; font-size: 10.5px; font-weight: 600; text-align: left; border-bottom: 1px solid #d5ddd0; }
.pslip-t td { height: 27px; padding: 4px 8px; border-bottom: 1px solid #edf0ea; vertical-align: middle; }
.pslip-t .no { width: 34px; text-align: center; color: #84917e; }
.pslip-t .am { width: 96px; text-align: right; white-space: nowrap; }
.pslip-t .nt { color: #84917e; font-size: 10px; }
.pslip-t tfoot td { height: auto; padding: 7px 8px; background: #f3f6f0; font-weight: 700; border-top: 1px solid #d5ddd0; border-bottom: 0; }
.pslip-t tfoot td:first-child { text-align: right; color: #3b4a3f; }
.pslip-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.pslip-ids, .pslip-er { padding: 4px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3e8df; }
.pslip-ids .pslip-kv:last-child, .pslip-er .pslip-kv:last-child { border-bottom: 0; }
.pslip-er .pslip-kv { grid-template-columns: minmax(0, 1fr) auto; }
.pslip-er .pslip-kv b { text-align: right; }
.pslip-right { display: flex; flex-direction: column; gap: 10px; }
.pslip-net { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 8px; background: #1d3528; color: #fff; }
.pslip-net span { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: #cfdbb2; }
.pslip-net b { font: 800 24px/1 'Plus Jakarta Sans', 'DM Sans', sans-serif; letter-spacing: -.01em; color: #e6cf94; }
.pslip-fine { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 10px; border-top: 1px solid #e3e8df; font-size: 9.5px; color: #84917e; }
/* In the window and on the Slip Gaji page: the slip on a grey desk, scrolls sideways on small screens */
.pslip-view { background: var(--gray-3); overflow-x: auto; }
.pslip-view .pslip { margin: 0 auto; border-radius: 4px; box-shadow: 0 2px 14px rgba(0,0,0,.12); }
.pslip-desk { padding: 24px; border-radius: 0 0 14px 14px; }
@media (max-width: 639px) { .pslip-desk { padding: 16px; } }
@media (min-width: 640px) { .dialog.dialog-xl { max-width: 940px; max-height: 94dvh; } }
@media (max-width: 639px) { .dialog-footer .btn span { display: none; } }

/* ---------- Log Perubahan (change log) ---------- */
.audit { padding: 4px 0 8px; }
.audit-day { padding: 14px 20px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.audit-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 9px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.audit-day + .audit-row { border-top: 0; }
.audit-time { color: var(--gray-10); font-variant-numeric: tabular-nums; }
.audit-ch { margin-top: 2px; font-size: 12px; color: var(--gray-11); overflow-wrap: anywhere; }
@media (max-width: 639px) { .audit-row { grid-template-columns: 42px minmax(0, 1fr); } .audit-row .badge { grid-column: 2; justify-self: start; } }