@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/archivo-700.woff2") format("woff2");
}

.tombol.tombol--arsip {
  color: var(--permukaan);
  background: var(--arsip);
  border-color: var(--arsip);
}

.tombol.tombol--arsip:hover {
  color: var(--permukaan);
  background: #1b4059;
}

.tombol.tombol--arsip-garis {
  color: var(--arsip);
  background: var(--permukaan);
  border-color: var(--arsip);
}

.tombol.tombol--arsip-garis:hover {
  color: var(--arsip);
  background: var(--arsip-muda);
}

.kepala-modal-prive {
  margin-bottom: 24px;
  display: flex;
  justify-content: flex-end;
}

.aksi-modal-prive,
.aksi-modal-prive-mobile {
  display: flex;
  gap: 12px;
}

.angka-modal-prive {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.angka-modal-prive > article {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.angka-modal-prive strong {
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", monospace;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.125;
  font-variant-numeric: tabular-nums;
}

.angka-modal-prive p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.46;
}

.teks-arsip {
  color: var(--arsip);
}

.teks-hijau {
  color: var(--hijau);
}

.teks-redup {
  color: var(--tinta-2);
}

.mono {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.riwayat-modal-prive {
  padding: 18px 20px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.riwayat-modal-prive > header {
  padding-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.riwayat-modal-prive > header span {
  color: var(--tinta-3);
  font-size: 0.71875rem;
}

.riwayat-modal-prive table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84375rem;
}

.riwayat-modal-prive th {
  padding: 0 12px 8px;
  color: var(--tinta-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.riwayat-modal-prive th:first-child,
.riwayat-modal-prive td:first-child {
  width: 96px;
  padding-left: 0;
}

.riwayat-modal-prive th:last-child,
.riwayat-modal-prive td:last-child {
  padding-right: 0;
}

.riwayat-modal-prive td {
  height: 40px;
  padding: 6px 12px;
  border-top: 1px solid var(--garis);
}

.riwayat-modal-prive tbody tr:first-child td {
  border-top-color: var(--garis-tebal);
}

.riwayat-modal-prive .angka {
  text-align: right;
  white-space: nowrap;
}

.riwayat-modal-prive tfoot td {
  padding-top: 9px;
  border-top: 2px solid var(--garis-tebal);
  font-size: 0.8125rem;
  font-weight: 600;
}

.pill-modal {
  padding: 2px 9px;
  display: inline-flex;
  color: var(--hijau);
  background: var(--hijau-muda);
  border: 1px solid #C9DCD2;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.pill-modal--prive {
  color: var(--arsip);
  background: var(--arsip-muda);
  border-color: #C6D5E0;
}

.informasi-modal-prive {
  margin-top: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--hijau-muda);
  border: 1px solid #C9DCD2;
  border-radius: 8px;
}

.informasi-modal-prive p {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.53;
}

.informasi-modal-prive span {
  padding-left: 20px;
  flex: none;
  color: var(--tinta-2);
  border-left: 1px solid #C9DCD2;
  font-size: 0.78125rem;
  line-height: 1.44;
}

.form-modal-prive {
  max-width: 920px;
}

.angka-modal-prive-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.angka-modal-prive-mobile article {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.angka-modal-prive-mobile span,
.angka-modal-prive-mobile small {
  color: var(--tinta-2);
  font-size: 0.75rem;
}

.angka-modal-prive-mobile strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.75rem;
  font-weight: 600;
}

.aksi-modal-prive-mobile {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.aksi-modal-prive-mobile .tombol {
  min-height: 48px;
}

.informasi-modal-prive-mobile {
  margin-top: 14px;
  padding: 13px 14px;
  background: var(--hijau-muda);
  border: 1px solid #C9DCD2;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.riwayat-modal-prive-mobile {
  margin-top: 18px;
}

.riwayat-modal-prive-mobile > .label-bagian {
  margin-bottom: 7px;
}

.riwayat-modal-prive-mobile article {
  min-height: 66px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-top: 0;
}

.riwayat-modal-prive-mobile article:first-of-type {
  border-top: 1px solid var(--garis);
  border-radius: 8px 8px 0 0;
}

.riwayat-modal-prive-mobile article:last-child {
  border-radius: 0 0 8px 8px;
}

.riwayat-modal-prive-mobile time,
.riwayat-modal-prive-mobile small {
  color: var(--tinta-3);
  font-size: 0.6875rem;
}

.riwayat-modal-prive-mobile strong,
.riwayat-modal-prive-mobile small {
  display: block;
}

.riwayat-modal-prive-mobile b {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
}

.halaman-wizard-prive .kerangka-mobile {
  padding-bottom: 0;
}

.halaman-wizard-prive .konten-mobile {
  min-height: calc(100dvh - 56px);
  padding: 0;
}

.bilah-wizard-prive {
  justify-content: flex-start;
  gap: 12px;
}

.bilah-wizard-prive a {
  width: 28px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--tinta-2);
  font-size: 1.75rem;
  line-height: 1;
}

.bilah-wizard-prive a:hover {
  text-decoration: none;
}

.bilah-wizard-prive strong {
  font-family: "Archivo", sans-serif;
  font-size: 1.0625rem;
}

.bilah-wizard-prive span {
  margin-left: auto;
  color: var(--arsip);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
}

.garis-progres-prive {
  height: 3px;
  background: var(--garis);
}

.garis-progres-prive i {
  height: 3px;
  display: block;
  background: var(--arsip);
}

.wizard-prive {
  min-height: calc(100dvh - 59px);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-prive > header h1,
.wizard-prive > header p {
  margin: 0;
}

.wizard-prive > header h1,
.judul-keperluan label {
  font-family: "Archivo", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.27;
}

.wizard-prive > header p {
  margin-top: 6px;
  color: var(--tinta-2);
  font-size: 0.84375rem;
  line-height: 1.48;
}

.nilai-prive {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--permukaan);
  border: 2px solid var(--arsip);
  border-radius: 8px;
}

.nilai-prive span {
  color: var(--tinta-2);
}

.nilai-prive strong {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", monospace;
  font-size: 2rem;
  line-height: 1.19;
  text-align: right;
}

.pilihan-cepat-prive {
  margin: 8px 0 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pilihan-cepat-prive button {
  min-height: 36px;
  color: var(--arsip);
  background: var(--arsip-muda);
  border: 1px solid #C6D5E0;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78125rem;
  font-weight: 600;
}

.papan-prive .tombol-papan button {
  min-height: 56px;
}

.kepala-pilih-rekening {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.kepala-pilih-rekening > strong {
  color: var(--arsip);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9375rem;
}

.pilihan-rekening-prive {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
}

.pilihan-rekening-prive label {
  position: relative;
}

.pilihan-rekening-prive input {
  position: absolute;
  opacity: 0;
}

.pilihan-rekening-prive label > span {
  min-height: 76px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.pilihan-rekening-prive label > span > i {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid var(--garis-tebal);
  border-radius: 50%;
}

.pilihan-rekening-prive label > span > b {
  min-width: 0;
  flex: 1;
  font-weight: 400;
}

.pilihan-rekening-prive strong,
.pilihan-rekening-prive small {
  display: block;
}

.pilihan-rekening-prive strong {
  font-size: 0.9375rem;
}

.pilihan-rekening-prive small {
  margin-top: 4px;
  color: var(--tinta-2);
  font-size: 0.75rem;
}

.pilihan-rekening-prive em {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 600;
}

.pilihan-rekening-prive input:checked + span {
  background: var(--arsip-muda);
  border: 2px solid var(--arsip);
}

.pilihan-rekening-prive input:checked + span > i {
  background: var(--arsip);
  border: 5px solid var(--arsip-muda);
  outline: 2px solid var(--arsip);
}

.pilihan-rekening-prive input:focus-visible + span {
  outline: 2px solid var(--arsip);
  outline-offset: 2px;
}

.catatan-netral-prive {
  margin-top: auto;
  padding: 12px 14px 12px 29px;
  position: relative;
  background: var(--arsip-muda);
  border-radius: 6px;
  font-size: 0.8125rem;
  line-height: 1.46;
}

.catatan-netral-prive::before {
  position: absolute;
  inset: 12px auto 12px 14px;
  width: 4px;
  content: "";
  background: var(--arsip);
  border-radius: 999px;
}

.judul-keperluan {
  display: flex;
  align-items: center;
  gap: 10px;
}

.judul-keperluan span {
  padding: 2px 9px;
  color: var(--tinta-2);
  background: #EFEEE9;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.wizard-prive textarea {
  width: 100%;
  min-height: 96px;
  padding: 14px;
  resize: vertical;
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 8px;
  font-size: 1rem;
}

.pilihan-keperluan-prive {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pilihan-keperluan-prive button {
  min-height: 38px;
  padding: 0 14px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.84375rem;
  font-weight: 600;
}

.ringkasan-prive,
.konfirmasi-prive dl {
  margin: 0;
  padding: 4px 14px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.ringkasan-prive > div,
.konfirmasi-prive dl > div {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--garis);
}

.ringkasan-prive > div:first-child,
.konfirmasi-prive dl > div:first-child {
  border-top: 0;
}

.ringkasan-prive dt,
.konfirmasi-prive dt {
  color: var(--tinta-2);
  font-size: 0.84375rem;
}

.ringkasan-prive dd,
.konfirmasi-prive dd {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.84375rem;
  font-weight: 600;
  text-align: right;
}

.aksi-wizard-prive {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aksi-wizard-prive .tombol {
  min-height: 52px;
}

.konfirmasi-prive {
  min-height: calc(100dvh - 56px);
  padding: 32px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.centang-prive {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--arsip);
  background: var(--arsip-muda);
  border: 1px solid #C6D5E0;
  border-radius: 50%;
  font-size: 1.875rem;
  font-weight: 600;
}

.konfirmasi-prive > p {
  max-width: 300px;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.56;
}

.konfirmasi-prive dl {
  width: 100%;
  text-align: left;
}

.konfirmasi-prive > small {
  max-width: 300px;
  color: var(--tinta-3);
  font-size: 0.8125rem;
  line-height: 1.46;
}

.aksi-konfirmasi-prive {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aksi-konfirmasi-prive .tombol:first-child {
  min-height: 52px;
}

[hidden] {
  display: none !important;
}

.status-sinkron {
  position: relative;
  z-index: 10;
  height: 40px;
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
}

.status-sinkron > div {
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
}

.status-sinkron__offline,
.status-sinkron__terkirim {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.28;
}

.status-sinkron__offline {
  color: #7A5A0E;
  background: var(--pasir-muda);
  border-bottom: 1px solid #E8CE86;
}

.status-sinkron__offline span,
.status-sinkron__terkirim span {
  flex: 1;
  color: var(--tinta);
}

.status-sinkron__offline button {
  padding: 0;
  color: var(--arsip);
  font-size: 0.75rem;
  font-weight: 600;
  background: transparent;
  border: 0;
}

.status-sinkron__mengirim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.status-sinkron__mengirim > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--tinta);
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.28;
}

.status-sinkron__mengirim b,
.status-sinkron__terkirim time {
  color: var(--tinta-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
  font-weight: 500;
}

.status-sinkron__mengirim > i {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--garis);
  border-radius: 2px;
}

.status-sinkron__mengirim > i span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--arsip);
}

.status-sinkron__terkirim {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-bottom: 1px solid #C7DAD0;
}

.panel-antrean {
  padding: 14px 16px;
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}

.panel-antrean > header,
.kartu-antrean > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.panel-antrean > header {
  margin-bottom: 10px;
}

.panel-antrean h2 {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-antrean > header span,
.kartu-antrean time {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
}

#daftar-antrean {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kartu-antrean,
.penjelasan-antrean {
  padding: 12px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.kartu-antrean strong {
  color: var(--tinta);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.357;
}

.kartu-antrean time {
  display: block;
  margin-top: 6px;
  color: var(--tinta-2);
}

.kartu-antrean p {
  margin: 6px 0 0;
  color: var(--bata);
  font-size: 0.75rem;
  line-height: 1.333;
}

.pill-antrean {
  flex: none;
  padding: 2px 8px;
  color: #7A5A0E;
  background: var(--pasir-muda);
  border: 1px solid #E8CE86;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.59375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill-antrean--gagal {
  color: var(--bata);
  background: var(--bata-muda);
  border-color: rgba(163, 43, 32, 0.3);
}

.penjelasan-antrean {
  margin-top: 10px;
}

.penjelasan-antrean strong {
  color: var(--tinta);
  font-size: 0.78125rem;
  line-height: 1.36;
}

.penjelasan-antrean p {
  margin: 6px 0 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  line-height: 1.333;
}

.pesan-aksi-offline {
  position: relative;
  z-index: 10;
  padding: 10px 16px;
  color: var(--bata);
  background: var(--bata-muda);
  border-bottom: 1px solid rgba(163, 43, 32, 0.3);
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.36;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../font/archivo-800.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/public-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/public-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../font/public-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../font/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../font/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  --kertas: #F4F3EE;
  --permukaan: #FFFFFF;
  --garis: #DFDDD4;
  --garis-tebal: #B9B6AA;
  --tinta: #13171A;
  --tinta-2: #5C6268;
  --tinta-3: #8B9096;
  --hijau: #1E5B45;
  --hijau-muda: #E4EDE8;
  --pasir: #D9A21B;
  --pasir-muda: #FAF0D7;
  --bata: #A32B20;
  --bata-muda: #F8E4E1;
  --arsip: #234E6B;
  --arsip-muda: #E3EAF0;
  color-scheme: light;
  font-family: "Public Sans", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--kertas);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--kertas);
}

body,
button,
input {
  font: inherit;
}

button,
input,
a,
div,
aside,
header,
main,
nav,
section,
article,
footer,
span,
table,
tr,
th,
td {
  box-sizing: border-box;
}

a {
  color: var(--arsip);
  text-decoration: none;
}

a:hover {
  color: var(--hijau);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--hijau);
  outline-offset: 2px;
}

button {
  border: 0;
}

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

.kerangka-desktop {
  min-height: 100dvh;
  background: var(--kertas);
}

.sidebar-desktop {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 248px;
  display: flex;
  flex-direction: column;
  background: var(--permukaan);
  border-right: 1px solid var(--garis);
}

.identitas-usaha {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--garis);
}

.nama-usaha {
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.identitas-pengguna {
  color: var(--tinta-2);
  font-size: 0.75rem;
  line-height: 1.333;
}

.menu-desktop {
  flex: 1;
  overflow-y: auto;
  padding-block: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-utama {
  position: relative;
  min-height: 40px;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta-3);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.429;
}

.menu-utama:hover {
  background: var(--kertas);
  color: var(--tinta);
  text-decoration: none;
}

.menu-utama.aktif {
  color: var(--hijau);
  background: var(--hijau-muda);
  font-weight: 600;
}

.menu-utama.aktif::before {
  content: "" / "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hijau);
}

.ikon-menu {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 4px;
}

.submenu-desktop {
  display: flex;
  flex-direction: column;
}

.submenu-desktop span,
.submenu-desktop a {
  min-height: 32px;
  padding: 6px 16px 6px 32px;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.538;
}

.submenu-desktop span.aktif,
.submenu-desktop a.aktif {
  color: var(--hijau);
  font-weight: 600;
}

.kaki-sidebar {
  min-height: 53px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--garis);
}

.avatar-kecil,
.avatar-atas {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hijau);
  background: var(--hijau-muda);
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

.avatar-kecil {
  width: 28px;
  height: 28px;
}

.nama-kaki {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.231;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tombol-keluar {
  padding: 3px 8px;
  color: var(--tinta-2);
  border: 1px solid var(--garis);
  border-radius: 5px;
  font-size: 0.75rem;
  line-height: 1.333;
}

.utama-desktop {
  min-width: 0;
  min-height: 100dvh;
  margin-left: 248px;
  display: flex;
  flex-direction: column;
}

.bilah-atas-desktop {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 64px;
  flex: none;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
}

.judul-bilah {
  flex: none;
  font-family: "Archivo", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pencarian-global {
  width: 100%;
  max-width: 420px;
  height: 36px;
  margin-inline: auto;
  padding-inline: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-3);
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 6px;
}

.pencarian-global input {
  min-width: 0;
  flex: 1;
  padding: 0;
  color: var(--tinta);
  background: transparent;
  border: 0;
  font-size: 0.8125rem;
}

.pencarian-global input::placeholder {
  color: var(--tinta-3);
  opacity: 1;
}

.pencarian-global input:focus-visible {
  outline: 0;
}

.pencarian-global:focus-within {
  border-color: var(--hijau);
  outline: 1px solid var(--hijau);
}

.aksi-bilah {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pemilih-periode {
  height: 36px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.notifikasi,
.notifikasi-mobile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-2);
  background: transparent;
  cursor: pointer;
}

.notifikasi {
  width: 36px;
  height: 36px;
}

.badge-notifikasi {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--permukaan);
  background: #B5442E;
  border: 1.5px solid var(--permukaan);
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
}

.avatar-atas {
  width: 32px;
  height: 32px;
}

.konten-desktop {
  min-width: 0;
  flex: 1;
  padding: 32px;
  background: var(--kertas);
}

.pindah-versi {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
  text-align: right;
  font-size: 0.6875rem;
  line-height: 1.455;
}

.kerangka-mobile {
  min-height: 100dvh;
  padding: 56px 0 calc(64px + env(safe-area-inset-bottom));
  background: var(--kertas);
}

.bilah-atas-mobile {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 56px;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
}

.judul-mobile {
  font-family: "Archivo", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.294;
  letter-spacing: -0.01em;
}

.notifikasi-mobile {
  width: 32px;
  height: 32px;
}

.aksi-bilah-mobile {
  display: flex;
  align-items: center;
  gap: 4px;
}

.keluar-mobile {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-2);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.notifikasi-mobile span {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  background: #B5442E;
  border: 1.5px solid var(--permukaan);
  border-radius: 999px;
}

.konten-mobile {
  min-height: calc(100dvh - 120px);
  padding: 16px;
  background: var(--kertas);
}

.nav-bawah {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: stretch;
  background: var(--permukaan);
  border-top: 1px solid var(--garis);
}

.butir-nav {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--tinta-3);
}

.butir-nav:hover {
  color: var(--hijau);
  text-decoration: none;
}

.butir-nav.aktif {
  color: var(--hijau);
}

.butir-nav > span:last-child {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.182;
}

.butir-nav.aktif > span:last-child,
.butir-catat > span:last-child {
  font-weight: 600;
}

.butir-catat {
  position: relative;
  padding-bottom: 8px;
  justify-content: flex-end;
  color: var(--hijau);
}

.tombol-catat {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--permukaan);
  background: var(--hijau);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(19, 23, 26, 0.18);
}

.pindah-versi-mobile {
  margin-bottom: 8px;
}

.kepala-halaman {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.label-bagian,
.label-kartu {
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kepala-halaman h1,
.kepala-halaman-mobile h1 {
  margin: 4px 0;
  font-family: "Archivo", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.kepala-halaman p,
.kepala-halaman-mobile p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.429;
}

.legenda-taksiran,
.legenda-mobile {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta-3);
  font-size: 0.75rem;
  line-height: 1.333;
}

.grid-kartu-angka {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.kartu-angka {
  min-width: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.nilai-kartu {
  overflow-wrap: break-word;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.154;
  font-variant-numeric: tabular-nums;
}

.keterangan-kartu {
  color: var(--tinta-3);
  font-size: 0.71875rem;
  line-height: 1.391;
}

.kartu-angka--positif {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #C9DCD2;
}

.kartu-angka--positif .label-kartu,
.kartu-angka--positif .keterangan-kartu {
  color: var(--hijau);
}

.kartu-angka--negatif {
  color: var(--bata);
  background: var(--bata-muda);
  border-color: #EFC7C1;
}

.baris-material {
  margin-bottom: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.daftar-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-material {
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta);
  background: var(--kertas);
  border: 1px solid var(--garis);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.333;
  white-space: nowrap;
}

.chip-material > span {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--warna-material);
  border-radius: 2px;
}

.panel-tabel {
  overflow: hidden;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.kepala-panel {
  min-height: 58px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--garis);
}

.kepala-panel > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.kepala-panel h2 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.368;
}

.kepala-panel span,
.catatan-panel,
.teks-sekunder {
  color: var(--tinta-3);
  font-size: 0.6875rem;
  line-height: 1.455;
}

.bungkus-tabel {
  width: 100%;
  overflow-x: auto;
}

.tabel-nota {
  width: 100%;
  min-width: 1088px;
  border-collapse: collapse;
}

.tabel-nota th {
  padding: 9px 8px;
  color: var(--tinta-2);
  border-bottom: 1px solid var(--garis-tebal);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.273;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  text-wrap: balance;
}

.tabel-nota td {
  padding: 10px 8px;
  color: var(--tinta);
  border-bottom: 1px solid var(--garis);
  font-size: 0.8125rem;
  line-height: 1.385;
  vertical-align: middle;
}

.tabel-nota :is(th, td).angka {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tabel-nota .nomor-polisi {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.teks-utama-sel {
  display: block;
  margin-bottom: 4px;
  white-space: nowrap;
}

.tabel-nota .chip-material {
  padding: 2px 6px;
  font-size: 0.625rem;
}

.tabel-nota .kolom-volume {
  width: 148px;
}

.volume-bulanan {
  display: inline-block;
  margin-bottom: 4px;
  white-space: nowrap;
}

.tabel-nota tfoot td {
  padding-top: 9px;
  border-top: 1px solid var(--tinta);
  border-bottom: 0;
  box-shadow: inset 0 3px 0 -2px var(--tinta);
  font-weight: 600;
}

.laba.positif,
.positif {
  color: var(--hijau);
}

.laba.negatif,
.negatif {
  color: var(--bata);
}

.kosong-tabel,
.keadaan-kosong {
  padding: 32px !important;
  color: var(--tinta-2) !important;
  text-align: center;
}

.pill-status {
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  color: var(--tinta-2);
  background: #EFEEE9;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.333;
  white-space: nowrap;
}

.pill--berjalan {
  color: #8A6410;
  background: var(--pasir-muda);
  border-color: #EDD9A2;
}

.pill--aman {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #C9DCD2;
}

.pill--lunas {
  color: var(--permukaan);
  background: var(--hijau);
  border-color: var(--hijau);
}

.pita-muatan {
  min-width: 112px;
}

.kepala-pita {
  min-height: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.angka-pita {
  color: var(--tinta);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.label-tidak-penuh {
  padding: 1px 5px;
  color: #8A6410;
  background: var(--pasir-muda);
  border: 1px solid #EDD9A2;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 600;
  white-space: nowrap;
}

.batang-pita {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: hidden;
  background: var(--garis);
  border-radius: 2px;
}

.isi-pita,
.takik-pita {
  position: absolute;
  inset: 0;
  display: block;
}

.isi-pita {
  right: auto;
  width: var(--isi-pita);
  background: var(--hijau);
  border-radius: 2px;
}

.pita--tidak-penuh .isi-pita {
  background: var(--pasir);
}

.pita--kosong .angka-pita {
  color: var(--tinta-3);
}

.penanda-taksiran {
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8A6410;
  background: var(--pasir-muda);
  border: 1px solid #EDD9A2;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.273;
  white-space: nowrap;
}

.dokumen-kendaraan {
  display: grid;
  grid-template-columns: 7px 30px 1fr;
  align-items: center;
  column-gap: 4px;
  white-space: nowrap;
}

.dokumen-kendaraan + .dokumen-kendaraan {
  margin-top: 4px;
}

.dokumen-kendaraan small {
  color: var(--tinta-3);
  font-size: 0.5625rem;
}

.titik-dokumen {
  width: 7px;
  height: 7px;
  background: var(--tinta-3);
  border-radius: 999px;
}

.titik-dokumen.aman {
  background: var(--hijau);
}

.titik-dokumen.peringatan {
  background: var(--pasir);
}

.titik-dokumen.bahaya {
  background: var(--bata);
}

.halaman-daftar-truk-mobile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kepala-halaman-mobile h1 {
  margin-top: 2px;
}

.kartu-ringkas-mobile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kartu-ringkas-mobile .nilai-kartu {
  font-size: 1.25rem;
  line-height: 1.2;
}

.daftar-chip-mobile {
  padding-bottom: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.daftar-kartu-truk {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kartu-truk-mobile {
  padding: 16px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.kepala-kartu-truk {
  padding-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--garis);
}

.nomor-polisi-mobile {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.jenis-truk-mobile {
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.538;
}

.angka-truk-mobile {
  padding-block: 12px;
  display: grid;
  grid-template-columns: 1.4fr 0.55fr 1fr;
  gap: 8px;
}

.angka-truk-mobile > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.angka-truk-mobile span,
.label-pita-mobile {
  color: var(--tinta-3);
  font-size: 0.6875rem;
  line-height: 1.455;
}

.angka-truk-mobile strong {
  overflow-wrap: break-word;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.538;
  font-variant-numeric: tabular-nums;
}

.bagian-pita-mobile {
  padding-top: 10px;
  border-top: 1px solid var(--garis);
}

.bagian-pita-mobile .batang-pita {
  height: 14px;
}

.bagian-pita-mobile .angka-pita {
  font-size: 0.75rem;
}

.kaki-kartu-truk {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 0.6875rem;
}

.kaki-kartu-truk .penanda-taksiran {
  grid-column: 1 / -1;
  justify-self: start;
}

.komposisi-biaya {
  height: 6px;
  overflow: hidden;
  background: var(--hijau-muda);
  border-radius: 2px;
}

.komposisi-biaya span {
  display: block;
  width: min(var(--porsi-biaya), 100%);
  height: 100%;
  background: var(--pasir);
}

.legenda-mobile {
  margin: 0;
  flex-wrap: wrap;
}

@media (pointer: coarse) {
  a,
  button {
    min-width: 24px;
    min-height: 24px;
  }
}

@media (max-width: 1100px) {
  .pencarian-global {
    max-width: 300px;
  }

  .grid-kartu-angka {
    gap: 16px;
  }
}

select,
textarea {
  box-sizing: border-box;
  font: inherit;
}

[x-cloak] {
  display: none !important;
}

.judul-mobile {
  display: flex;
  flex-direction: column;
}

.judul-mobile span {
  margin-top: 1px;
  color: var(--tinta-3);
  font-family: "Public Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Tombol selalu berkotak. Varian berwarna di bawah menimpa warna dan bingkainya. */
.tombol {
  min-height: 40px;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.tombol:hover {
  text-decoration: none;
}

.tombol--utama {
  color: var(--permukaan);
  background: var(--hijau);
  border-color: var(--hijau);
}

.tombol--utama:hover {
  color: var(--permukaan);
  background: #174936;
}

.tombol--sekunder {
  color: var(--tinta);
  background: var(--permukaan);
  border-color: var(--garis-tebal);
}

.tombol--bahaya {
  color: var(--permukaan);
  background: var(--bata);
  border-color: var(--bata);
}

.tombol--penuh {
  width: 100%;
}

.tombol-keluar {
  background: var(--permukaan);
  cursor: pointer;
}

.aksi-form,
.aksi-dialog {
  display: flex;
  align-items: center;
  gap: 8px;
}

.daftar-pesan {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pesan-sistem,
.pesan-form-error {
  padding: 12px 14px;
  color: var(--tinta);
  background: var(--pasir-muda);
  border: 1px solid #EDD9A2;
  border-radius: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.pesan-sistem--success {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #C9DCD2;
}

.pesan-sistem--error,
.pesan-form-error {
  color: var(--bata);
  background: var(--bata-muda);
  border-color: #EFC7C1;
}

.grid-ringkasan-empat,
.grid-dashboard-dua,
.grid-dashboard-tiga {
  display: grid;
  gap: 16px;
}

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

.grid-dashboard-dua {
  margin-top: 16px;
  grid-template-columns: 2fr 1fr;
}

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

.kartu-dashboard,
.panel-dashboard,
.kartu-form,
.ringkasan-pekerjaan,
.panel-perbandingan,
.kartu-operasi,
.kartu-timbunan,
.kartu-timbunan-mobile {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.kartu-dashboard,
.panel-dashboard {
  padding: 16px;
}

.angka-dashboard {
  margin-top: 8px;
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.23;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kepala-panel-ringkas {
  min-height: 27px;
  padding-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--garis);
}

.kepala-panel-ringkas h2,
.judul-daftar-supir,
.kelompok-tugas > h2 {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kepala-panel-ringkas span {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
}

.grafik-penjualan {
  height: 168px;
  margin-top: 14px;
  padding: 0 6px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  border-bottom: 1px solid var(--garis-tebal);
  border-left: 1px solid var(--garis);
}

.batang-penjualan {
  height: var(--tinggi);
  min-height: 2px;
  flex: 1;
  background: var(--hijau);
}

.sumbu-grafik {
  margin-top: 6px;
  padding-inline: 6px;
  display: flex;
  justify-content: space-between;
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
}

.baris-uang {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 104px;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--kertas);
  font-size: 0.8125rem;
}

.baris-uang > :last-child {
  font-family: "IBM Plex Mono", monospace;
  text-align: right;
}

.baris-uang--kepala {
  min-height: 29px;
  color: var(--tinta-3);
  border: 0;
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.baris-uang--total {
  margin-top: 6px;
  border-top: 3px double var(--tinta);
}

.baris-jatuh-tempo,
.baris-rit-dashboard,
.baris-peringatan {
  padding-block: 9px;
  border-top: 1px solid var(--kertas);
}

.baris-jatuh-tempo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
}

.baris-jatuh-tempo > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.baris-jatuh-tempo > span:last-child {
  flex: none;
  align-items: flex-end;
  font-family: "IBM Plex Mono", monospace;
}

.baris-jatuh-tempo small,
.keadaan-panel {
  color: var(--tinta-3);
  font-size: 0.6875rem;
}

.baris-rit-dashboard > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  font-size: 0.75rem;
}

.baris-rit-dashboard > div:first-child strong {
  font-family: "IBM Plex Mono", monospace;
}

.baris-rit-dashboard > div:first-child span {
  overflow: hidden;
  color: var(--tinta-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meter-dashboard {
  position: relative;
  height: 10px;
  margin-top: 7px;
  overflow: hidden;
  background: #EFEEE9;
  border-radius: 2px;
}

.meter-dashboard > span {
  display: block;
  width: min(var(--isi), 100%);
  height: 100%;
  background: var(--hijau);
}

.baris-peringatan {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.baris-peringatan > span {
  width: 20px;
  height: 20px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bata);
  background: var(--bata-muda);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.baris-peringatan p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.385;
}

.pill-mini {
  width: max-content;
  padding: 2px 8px;
  display: inline-flex;
  color: var(--tinta-2);
  background: #EFEEE9;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.65625rem;
  font-weight: 600;
  line-height: 1.4;
}

.pill-mini--bahaya {
  color: var(--bata);
  background: var(--bata-muda);
  border-color: var(--bata);
}

.pill-mini--peringatan {
  color: #8A6410;
  background: var(--pasir-muda);
  border-color: #EDD9A2;
}

.pill-mini--aman {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #C9DCD2;
}

.keadaan-panel {
  padding-block: 16px;
  line-height: 1.45;
}

.pemilih-jenis-pekerjaan {
  width: min(760px, 100%);
  margin: 64px auto;
  text-align: center;
}

.pemilih-jenis-pekerjaan h1,
.kepala-form-pekerjaan h1,
.kepala-wizard h1,
.merek-masuk + h1,
.salam-supir h1,
.tanggal-rit h1 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pemilih-jenis-pekerjaan header p {
  margin: 8px 0 24px;
  color: var(--tinta-2);
}

.pilihan-kartu-radio label > span {
  min-height: 120px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 8px;
}

.pilihan-kartu-radio small {
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.kepala-form-pekerjaan {
  margin-bottom: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.kepala-form-pekerjaan h1 {
  margin-top: 2px;
  font-size: 1.5rem;
}

.tata-form-pekerjaan,
.grid-detail-pekerjaan,
.tata-opname-desktop {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 16px;
}

.isi-form-pekerjaan {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bagian-form,
.kartu-form {
  padding: 20px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.bagian-form h2,
.ringkasan-pekerjaan h2,
.kartu-form h2,
.panel-perbandingan h2,
.hasil-opname-mobile h2 {
  margin: 0 0 16px;
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.grid-form {
  display: grid;
  gap: 14px;
}

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

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

.kelompok-field {
  display: contents;
}

.kelompok-field[hidden] {
  display: none;
}

.kolom-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kolom-form > label,
.dialog-konfirmasi label {
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}

.kolom-form :is(input, select, textarea),
.dialog-konfirmasi textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 4px;
  font-size: 0.875rem;
}

.kolom-form textarea,
.dialog-konfirmasi textarea {
  min-height: 80px;
  resize: vertical;
}

/* Kotak centang jangan ikut aturan input umum di atas — kalau ikut, dia jadi
   kotak selebar layar setinggi 40px dengan centang bawaan browser di dalamnya. */
.kolom-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  accent-color: var(--hijau);
  cursor: pointer;
}

.kolom-form:has(input[type="checkbox"]) {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.kolom-form:has(input[type="checkbox"]) > label {
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.kolom-form :is(input, select, textarea):focus {
  border-color: var(--hijau);
  outline: 1px solid var(--hijau);
}

.kolom-form :is(input, select, textarea):user-invalid,
.kolom-form--error :is(input, select, textarea) {
  background: var(--bata-muda);
  border-color: var(--bata);
}

.error-field {
  display: flex;
  gap: 5px;
  color: var(--bata);
  font-size: 0.75rem;
  line-height: 1.4;
}

.error-field span {
  font-weight: 700;
}

.bantuan-field {
  color: var(--tinta-3);
  font-size: 0.6875rem;
}

.ringkasan-pekerjaan,
.panel-perbandingan {
  position: sticky;
  top: 80px;
  padding: 20px;
}

.ringkasan-pekerjaan > div,
.ringkasan-wizard > div,
.daftar-rincian > div,
.panel-perbandingan dl > div,
.hasil-opname-mobile dl > div {
  padding-block: 9px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--kertas);
  font-size: 0.8125rem;
}

.ringkasan-pekerjaan > div strong,
.ringkasan-wizard dd,
.daftar-rincian dd,
.panel-perbandingan dd,
.hasil-opname-mobile dd {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  text-align: right;
}

.ringkasan-pekerjaan .total-perkiraan {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 3px double var(--tinta);
}

.ringkasan-pekerjaan .total-perkiraan strong,
.kotak-untung strong {
  color: var(--hijau);
}

.ringkasan-pekerjaan p,
.kotak-untung p {
  margin: 8px 0 0;
  color: var(--tinta-3);
  font-size: 0.6875rem;
}

.form-standar {
  width: min(920px, 100%);
}

.form-standar .kartu-form > .tombol {
  margin-top: 20px;
}

.daftar-kartu-operasi,
.daftar-tugas-supir {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daftar-tugas-desktop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.kartu-operasi,
.kartu-rit-supir {
  padding: 14px;
  color: var(--tinta);
}

.kartu-operasi:hover {
  border-color: var(--hijau);
  text-decoration: none;
}

.kartu-operasi header,
.kartu-rit-supir header,
.kartu-timbunan header,
.kartu-timbunan-mobile header,
.kepala-kartu-mobile,
.hasil-opname-mobile > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.kartu-operasi h2 {
  margin: 12px 0 4px;
  font-size: 1rem;
}

.kartu-operasi p,
.kartu-timbunan p,
.kartu-timbunan-mobile p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  line-height: 1.45;
}

.kartu-rit-supir {
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 8px;
}

.kartu-rit-supir header > strong,
.muatan-rit strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
}

.tujuan-rit {
  margin-top: 8px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

.truk-rit {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.truk-rit strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.875rem;
}

.truk-rit span {
  color: var(--tinta-2);
  font-size: 0.8125rem;
}

.muatan-rit {
  margin: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
}

.panel-rit-pekerjaan {
  margin-top: 16px;
}

.panel-rit-pekerjaan .daftar-tugas-supir {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.daftar-rincian,
.ringkasan-wizard,
.panel-perbandingan dl,
.hasil-opname-mobile dl {
  margin: 0;
}

.dialog-konfirmasi {
  width: min(480px, calc(100% - 32px));
  padding: 24px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(19, 23, 26, 0.2);
}

.dialog-konfirmasi::backdrop {
  background: rgba(19, 23, 26, 0.48);
}

.dialog-konfirmasi h1 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 1.25rem;
}

.dialog-konfirmasi p {
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.dialog-konfirmasi label,
.dialog-konfirmasi textarea {
  display: block;
}

.dialog-konfirmasi textarea {
  margin: 6px 0 16px;
}

.aksi-dialog {
  justify-content: flex-end;
}

.keadaan-kosong-lengkap {
  min-height: 320px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.ikon-kosong {
  width: 44px;
  height: 44px;
  border: 2px solid var(--garis-tebal);
  border-radius: 8px;
}

.keadaan-kosong-lengkap h2 {
  margin: 16px 0 6px;
  font-family: "Archivo", sans-serif;
  font-size: 1.125rem;
}

.keadaan-kosong-lengkap p {
  max-width: 460px;
  margin: 0 0 18px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.kesalahan-halaman {
  min-height: 520px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kesalahan-halaman h1 {
  margin: 18px 0 8px;
  font-family: "Archivo", sans-serif;
  font-size: 1.5rem;
}

.kesalahan-halaman p {
  max-width: 520px;
  margin: 0 0 20px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.kesalahan-halaman small {
  margin-top: 14px;
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
}

.ringkasan-timbunan {
  width: min(620px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.kartu-timbunan,
.kartu-timbunan-mobile {
  padding: 16px;
}

.kartu-timbunan h2,
.kartu-timbunan-mobile h2 {
  margin: 0 0 2px;
  font-size: 0.9375rem;
}

.chip-warna {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 4px;
  background: var(--warna-material);
  border-radius: 2px;
}

.kartu-timbunan header > div,
.kartu-timbunan-mobile header > div {
  min-width: 0;
  flex: 1;
}

.volume-timbunan {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.volume-timbunan strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2rem;
  line-height: 1.1;
}

.volume-timbunan span {
  color: var(--tinta-2);
}

.kartu-timbunan dl {
  margin: 14px 0 0;
}

.kartu-timbunan dl > div {
  padding-block: 6px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--kertas);
  font-size: 0.75rem;
}

.kartu-timbunan dd {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  text-align: right;
}

.baris-penyaring {
  margin-bottom: 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.panel-perbandingan h3 {
  margin: 20px 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-perbandingan > p {
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.kotak-status-opname {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid;
  border-radius: 6px;
}

.kotak-status-opname.aman {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #C9DCD2;
}

.kotak-status-opname.bahaya {
  color: var(--bata);
  background: var(--bata-muda);
  border-color: #EFC7C1;
}

.kotak-status-opname p {
  margin: 4px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

.halaman-masuk {
  min-height: 100dvh;
  padding: 32px;
  display: grid;
  place-items: center;
}

.kotak-masuk {
  width: min(420px, 100%);
  padding: 32px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(19, 23, 26, 0.1);
}

.merek-masuk {
  color: var(--hijau);
  font-family: "Archivo", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.merek-masuk + h1 {
  margin-top: 16px;
  font-size: 1.625rem;
}

.kotak-masuk > p {
  margin: 8px 0 24px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-bertumpuk {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wizard-mobile {
  min-height: calc(100dvh - 152px);
  display: flex;
  flex-direction: column;
}

.progres-wizard {
  margin-bottom: 20px;
  color: var(--tinta-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.progres-wizard > div {
  margin-top: 7px;
  display: flex;
  gap: 5px;
}

.progres-wizard i {
  height: 3px;
  flex: 1;
  background: var(--garis);
  border-radius: 2px;
}

.progres-wizard i.aktif {
  background: var(--hijau);
}

.kepala-wizard h1 {
  margin-bottom: 20px;
  font-size: 1.75rem;
  line-height: 1.15;
}

.form-wizard {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tombol-lanjut-wizard {
  min-height: 56px;
  margin-top: auto;
}

.pilihan-kartu-radio {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pilihan-kartu-radio--desktop {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: left;
}

.pilihan-kartu-radio.pilihan-kartu-radio--desktop label > span {
  min-height: 120px;
  padding: 20px;
}

.aksi-pemilih-jenis {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pilihan-kartu-radio label {
  position: relative;
  cursor: pointer;
}

.pilihan-kartu-radio input {
  position: absolute;
  opacity: 0;
}

.pilihan-kartu-radio label > span {
  min-height: 84px;
  padding: 16px;
}

.pilihan-kartu-radio input:checked + span {
  background: var(--hijau-muda);
  border: 2px solid var(--hijau);
}

.ringkasan-wizard {
  margin-bottom: 12px;
  padding: 4px 14px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.ringkasan-wizard dt,
.daftar-rincian dt,
.panel-perbandingan dt,
.hasil-opname-mobile dt {
  color: var(--tinta-2);
}

.kotak-untung {
  margin-bottom: 12px;
  padding: 16px;
  color: var(--hijau);
  background: var(--hijau-muda);
  border: 1px solid #C9DCD2;
  border-radius: 8px;
}

.kotak-untung span,
.kotak-untung strong {
  display: block;
}

.kotak-untung span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kotak-untung strong {
  margin-top: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.5rem;
}

.aksi-wizard {
  margin-top: auto;
  text-align: center;
}

.aksi-wizard a {
  margin-top: 12px;
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.beranda-mobile {
  margin-top: -6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.beranda-mobile .kartu-dashboard {
  padding: 12px;
}

.beranda-mobile .angka-dashboard {
  margin-top: 4px;
}

.baris-uang-mobile {
  padding-block: 3px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--kertas);
  font-size: 0.8125rem;
}

.baris-uang-mobile:first-of-type {
  margin-top: 6px;
}

.baris-uang-mobile span {
  color: var(--tinta-2);
}

.baris-uang-mobile strong {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}

.kartu-uang-mobile > a {
  margin-top: 6px;
  padding-top: 6px;
  display: block;
  border-top: 1px solid var(--kertas);
  color: var(--hijau);
  font-size: 0.8125rem;
  font-weight: 600;
}

.dua-angka-mobile {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.dua-angka-mobile > div + div {
  padding-left: 16px;
  border-left: 1px solid var(--garis);
}

.dua-angka-mobile span,
.kepala-kartu-mobile > span,
.angka-sebaris > span {
  color: var(--tinta-3);
  font-size: 0.75rem;
}

.dua-angka-mobile strong {
  margin-top: 2px;
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.25rem;
}

.angka-sebaris {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.angka-sebaris > strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.375rem;
}

.kartu-peringatan-mobile .baris-peringatan {
  padding-bottom: 0;
}

.beranda-supir,
.layar-supir,
.aksi-rit-mobile,
.master-mobile,
.timbunan-mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.peringatan-uang-jalan {
  padding: 14px;
  color: var(--tinta);
  background: var(--pasir-muda);
  border: 1px solid #EDD9A2;
  border-radius: 8px;
}

.peringatan-uang-jalan > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
}

.peringatan-uang-jalan > div span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peringatan-uang-jalan > div strong {
  grid-row: span 2;
  font-family: "IBM Plex Mono", monospace;
}

.peringatan-uang-jalan small,
.peringatan-uang-jalan p {
  color: #8A6410;
  font-size: 0.75rem;
}

.peringatan-uang-jalan p {
  margin: 10px 0;
}

.peringatan-uang-jalan a {
  color: var(--hijau);
  font-size: 0.8125rem;
  font-weight: 600;
}

.salam-supir h1,
.tanggal-rit h1 {
  font-size: 1.625rem;
}

.salam-supir p,
.tanggal-rit p {
  margin: 4px 0 0;
  color: var(--tinta-2);
  font-size: 0.8125rem;
}

.angka-supir {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 8px;
}

.angka-supir > div {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

.angka-supir > div + div {
  border-left: 1px solid var(--garis-tebal);
}

.angka-supir span {
  grid-column: 1 / -1;
  color: var(--tinta-2);
  font-size: 0.75rem;
}

.angka-supir strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2rem;
}

.angka-supir small {
  color: var(--tinta-2);
}

.kelompok-tugas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-aksi-supir {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kotak-foto {
  min-height: 104px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: var(--permukaan);
  border: 1px dashed var(--garis-tebal);
  border-radius: 8px;
  text-align: center;
}

.kotak-foto span {
  color: var(--tinta-2);
  font-size: 0.8125rem;
}

.kotak-foto input {
  width: 100%;
  margin-top: 6px;
  font-size: 0.75rem;
}

.input-volume-besar,
.lokasi-gps {
  padding: 16px;
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 8px;
}

.input-volume-besar > label {
  display: flex;
  justify-content: space-between;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.input-volume-besar label small {
  color: var(--tinta-3);
  font-weight: 400;
}

.input-volume-besar > div {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.input-volume-besar input {
  width: min(240px, calc(100% - 44px));
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--tinta);
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1.1;
}

.input-volume-besar > div > span {
  color: var(--tinta-2);
  font-size: 1.125rem;
}

.input-volume-besar > p,
.lokasi-gps p {
  margin: 10px 0 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  line-height: 1.45;
}

.pilihan-penuh {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pilihan-penuh span {
  min-height: 48px;
  display: grid;
  place-items: center;
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 6px;
  font-weight: 600;
}

.tombol-aksi-supir {
  min-height: 56px;
  margin-top: auto;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chip::-webkit-scrollbar {
  display: none;
}

/* Chip yang dibungkus <a> tidak boleh menyusut, dan span-nya harus punya
   tinggi sendiri — kalau tetap inline, padding atasnya terpotong oleh
   overflow milik baris ini. */
.filter-chip > * {
  flex: none;
}

.filter-chip a {
  display: block;
}

.filter-chip span {
  display: inline-block;
  padding: 7px 12px;
  color: var(--tinta-2);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.filter-chip span.aktif {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: var(--hijau);
  font-weight: 600;
}

.daftar-timbunan-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kartu-timbunan-mobile > strong {
  display: block;
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8125rem;
}

.hasil-opname-mobile {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.hasil-opname-mobile > header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--garis);
}

.hasil-opname-mobile > header span {
  color: var(--tinta-2);
  font-size: 0.75rem;
}

.tiga-angka-opname {
  padding-block: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tiga-angka-opname > div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
}

.tiga-angka-opname span {
  width: 100%;
  color: var(--tinta-3);
  font-size: 0.6875rem;
}

.tiga-angka-opname strong {
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.125rem;
}

.tiga-angka-opname small {
  color: var(--tinta-2);
}

@media (max-width: 1200px) {
  .grid-ringkasan-empat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-dashboard-tiga,
  .grid-timbunan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 600px) {
  .halaman-masuk {
    padding: 16px;
  }

  .kotak-masuk {
    padding: 24px 20px;
  }

  .grid-form,
  .grid-form--dua,
  .grid-form--tiga {
    grid-template-columns: 1fr;
  }

  .kartu-form {
    padding: 14px;
  }
}

/* M11b · uang, tagihan, armada, aset, laporan, dan master */
.kartu,
.panel-uang,
.panel-proyeksi,
.kertas-laporan {
  display: block;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.kartu {
  padding: 16px;
}

.kartu strong,
.kartu span,
.kartu small {
  display: block;
}

.kartu > strong {
  margin-block: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.25rem;
}

.kartu small,
.petunjuk-kartu,
.petunjuk-geser {
  color: var(--tinta-3);
  font-size: 0.75rem;
  line-height: 1.45;
}

.aksi-kepala,
.kepala-uang,
.kepala-uang-mobile,
.kepala-laporan,
.legenda-jadwal {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kepala-uang,
.kepala-laporan {
  margin-bottom: 24px;
  justify-content: space-between;
}

.kepala-uang p,
.kepala-laporan p {
  margin: 4px 0 0;
  color: var(--tinta-2);
}

.uang-utama {
  margin: 3px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.grid-uang-utama {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
  align-items: start;
  gap: 24px;
}

.kolom-uang-samping {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-uang {
  padding: 16px 18px;
}

.grafik-saldo {
  height: 190px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
  border-bottom: 1px solid var(--garis-tebal);
}

.grafik-saldo > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.grafik-saldo i {
  width: min(28px, 75%);
  height: max(4px, var(--tinggi));
  display: block;
  background: var(--hijau);
  border-radius: 3px 3px 0 0;
}

.grafik-saldo span {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
}

.daftar-mutasi > div,
.daftar-jadwal-mobile > div {
  padding-block: 9px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--garis);
  font-size: 0.75rem;
}

.daftar-mutasi time,
.daftar-jadwal-mobile time {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
}

.daftar-mutasi span,
.daftar-jadwal-mobile span {
  min-width: 0;
}

.daftar-mutasi strong,
.daftar-mutasi small,
.daftar-jadwal-mobile strong,
.daftar-jadwal-mobile small {
  display: block;
}

.daftar-mutasi small,
.daftar-jadwal-mobile small {
  margin-top: 2px;
  color: var(--tinta-3);
}

.daftar-mutasi b,
.daftar-jadwal-mobile b {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}

.panel-rekening small {
  display: block;
}

.teks-bahaya,
.negatif,
.pill-umur.bahaya {
  color: var(--bata);
}

.nomor-langkah {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--permukaan);
  background: var(--hijau);
  border-radius: 50%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
}

.ringkasan-form-uang,
.kotak-info {
  padding: 14px 16px;
  background: var(--hijau-muda);
  border: 1px solid #c9dcd2;
  border-radius: 6px;
}

.ringkasan-form-uang p,
.kotak-info {
  margin: 4px 0 0;
  color: var(--tinta-2);
  font-size: 0.8125rem;
}

.aksi-form {
  display: flex;
  justify-content: flex-end;
}

.papan-angka {
  width: min(100%, 360px);
  margin-inline: auto;
}

.nilai-papan {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.nilai-papan span {
  color: var(--tinta-2);
  font-size: 1.125rem;
}

.nilai-papan strong {
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", monospace;
  font-size: 2.75rem;
  line-height: 1.1;
}

.terbilang-papan {
  min-height: 18px;
  margin-top: 5px;
  color: var(--tinta-2);
  font-size: 0.75rem;
  text-align: center;
}

.acuan-papan {
  margin-block: 14px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  border-block: 1px solid var(--garis);
  font-size: 0.75rem;
}

.acuan-papan b {
  font-family: "IBM Plex Mono", monospace;
}

.pengali-papan,
.tombol-papan {
  display: grid;
  gap: 7px;
}

.pengali-papan {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 7px;
}

.tombol-papan {
  grid-template-columns: repeat(3, 1fr);
}

.pengali-papan button,
.tombol-papan button {
  min-height: 52px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis-tebal);
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.pengali-papan button {
  min-height: 42px;
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #c9dcd2;
  font-size: 0.75rem;
}

.grid-umur {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.kartu-umur {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 7px;
}

.kartu-umur.aktif {
  background: var(--hijau-muda);
  border-color: var(--hijau);
}

.kartu-umur span,
.kartu-umur small {
  color: var(--tinta-2);
  font-size: 0.75rem;
}

.kartu-umur strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.25rem;
}

.pill-umur {
  padding: 3px 8px;
  display: inline-block;
  color: var(--tinta-2);
  background: var(--pasir-muda);
  border-radius: 999px;
  font-size: 0.6875rem;
  white-space: nowrap;
}

.kalender-jatuh-tempo {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--garis);
  border: 1px solid var(--garis);
  gap: 1px;
}

.kepala-hari {
  padding: 8px;
  color: var(--tinta-2);
  background: var(--kertas);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.kotak-hari {
  min-height: 88px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--permukaan);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6875rem;
}

.kotak-hari.hari-ini {
  outline: 2px solid var(--hijau);
  outline-offset: -2px;
}

.legenda-jadwal {
  margin-bottom: 10px;
  font-size: 0.75rem;
}

.legenda-jadwal small {
  margin-left: auto;
  color: var(--tinta-3);
}

.panel-proyeksi {
  margin-top: 20px;
  padding: 18px;
}

.panel-proyeksi > header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.panel-proyeksi h2 {
  margin: 4px 0 0;
  font-size: 1.125rem;
}

.grid-uang-jalan,
.grid-detail-truk,
.grid-dashboard-dua {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.7fr);
  align-items: start;
  gap: 20px;
}

.rincian-periksa {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1fr);
  gap: 24px;
}

.rincian-periksa img,
.foto-nota {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: var(--kertas);
  border-radius: 6px;
}

.grid-ringkasan-lima {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.grid-detail-truk {
  margin-bottom: 20px;
}

.komposisi-biaya-besar {
  min-height: 160px;
  padding: 18px;
  display: flex;
  align-items: end;
  gap: 8px;
}

.komposisi-biaya-besar > div {
  height: max(18px, var(--porsi));
  flex: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  background: var(--hijau);
  border-radius: 3px 3px 0 0;
}

.komposisi-biaya-besar > div:nth-child(2) { opacity: 0.85; }
.komposisi-biaya-besar > div:nth-child(3) { opacity: 0.72; }
.komposisi-biaya-besar > div:nth-child(4) { opacity: 0.6; }
.komposisi-biaya-besar > div:nth-child(5) { opacity: 0.47; }
.komposisi-biaya-besar > div:nth-child(6) { opacity: 0.34; }

.komposisi-biaya-besar span {
  padding: 4px;
  color: var(--permukaan);
  font-size: 0.625rem;
  text-align: center;
}

.grafik-biaya-bulanan {
  height: 190px;
  padding: 18px 18px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 5px;
  border-bottom: 1px solid var(--garis-tebal);
}

.grafik-biaya-bulanan > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.grafik-biaya-bulanan i {
  width: 70%;
  height: max(3px, var(--tinggi));
  background: var(--hijau);
  border-radius: 2px 2px 0 0;
}

.grafik-biaya-bulanan span {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.5625rem;
}

.legenda-komposisi {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}

.legenda-komposisi span {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--tinta-2);
  font-size: 0.6875rem;
}

.legenda-komposisi i {
  width: var(--lebar);
  min-width: 3px;
  height: 5px;
  display: block;
  background: var(--hijau);
  border-radius: 3px;
}

.panel-armada-bawah {
  margin-top: 20px;
}

.peringatan-ringkas {
  margin: 8px 0 0;
  padding: 10px 12px;
  color: #8a6410;
  background: var(--pasir-muda);
  border: 1px solid #edd9a2;
  border-radius: 6px;
  font-size: 0.75rem;
}

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

.grid-aksi-cepat .kartu {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.grid-aksi-cepat .kartu strong {
  font-family: "Public Sans", sans-serif;
  font-size: 1rem;
}

.grid-aksi-cepat .kartu span {
  color: var(--tinta-2);
  font-size: 0.8125rem;
}

.form-sebaris {
  margin-left: 10px;
  display: inline;
}

.tautan-bahaya {
  padding: 0;
  color: var(--bata);
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.kepala-laporan h1 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 1.875rem;
}

.kepala-laporan small {
  color: var(--tinta-3);
}

.tombol--gelap {
  color: var(--permukaan);
  background: var(--tinta);
  border-color: var(--tinta);
}

.kelompok-laporan {
  margin-top: 26px;
}

.kelompok-laporan > header {
  margin-bottom: 10px;
}

.kelompok-laporan h2,
.kelompok-laporan p {
  margin: 0;
}

.kelompok-laporan h2 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kelompok-laporan p {
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: 0.75rem;
}

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

.kelompok-laporan:last-child .grid-laporan {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kartu-laporan {
  min-height: 108px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 7px;
}

.kartu-laporan span,
.kartu-laporan strong,
.kartu-laporan small {
  display: block;
}

.kartu-laporan > span {
  flex: 1;
}

.kartu-laporan small {
  margin-top: 4px;
  color: var(--tinta-2);
  font-size: 0.75rem;
  line-height: 1.4;
}

.kartu-laporan b {
  padding-top: 7px;
  color: var(--hijau);
  border-top: 1px solid var(--kertas);
  font-size: 0.75rem;
  text-align: right;
}

.kartu-laporan--opsional.belum-aktif {
  border-style: dashed;
}

.kartu-laporan--opsional em {
  margin-left: 8px;
  padding: 1px 7px;
  color: #8b6300;
  background: var(--pasir-muda);
  border-radius: 999px;
  font-family: "Public Sans", sans-serif;
  font-size: 0.65625rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kartu-laporan--opsional.belum-aktif b {
  color: var(--arsip);
}

.sakelar-istilah {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta-2);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.sakelar-istilah i {
  width: 34px;
  height: 20px;
  padding: 2px;
  display: flex;
  background: var(--garis-tebal);
  border-radius: 999px;
}

.sakelar-istilah i::after {
  width: 16px;
  height: 16px;
  content: "";
  background: var(--permukaan);
  border-radius: 50%;
}

.sakelar-istilah.aktif i {
  justify-content: end;
  background: var(--hijau);
}

.kertas-laporan {
  max-width: 960px;
  margin-inline: auto;
  padding: 32px 40px;
}

.kertas-laporan > .kop-laporan {
  margin-bottom: 28px;
  padding-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--tinta);
}

.kop-laporan > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
}

.kop-laporan > div:last-child {
  align-items: flex-end;
  text-align: right;
}

.kop-laporan strong {
  font-family: "Archivo", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
}

.kop-laporan span,
.kop-laporan time,
.kop-laporan small {
  color: var(--tinta-2);
}

.kop-laporan .npwp-laporan,
.kop-laporan time {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.kop-laporan small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.judul-dokumen {
  margin-bottom: 18px;
  text-align: center;
}

.judul-dokumen h1,
.judul-dokumen p {
  margin: 0;
}

.judul-dokumen h1 {
  font-family: "Archivo", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.judul-dokumen p {
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: 0.78125rem;
}

.tabel-laporan {
  min-width: 0;
}

.tabel-laporan .label-akuntansi {
  margin-top: 2px;
  display: block;
  color: var(--tinta-3);
  font-size: 0.71875rem;
  line-height: 1.25;
}

.baris-laporan--subtotal td,
.baris-laporan--total td {
  font-weight: 600;
}

.baris-laporan--total td {
  border-top: 3px double var(--tinta);
}

.baris-laporan.level-1 td:first-child {
  padding-left: 24px;
}

.catatan-kaki-laporan {
  margin-top: 18px;
  padding-top: 10px;
  color: var(--tinta-2);
  border-top: 1px solid var(--garis);
  font-size: 0.75rem;
}

.catatan-kaki-laporan p {
  margin: 4px 0 0;
}

.posisi-dua-kolom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

.posisi-dua-kolom > section + section {
  padding-left: 36px;
  border-left: 1px solid var(--garis);
}

.posisi-dua-kolom h2 {
  margin: 0 0 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--tinta);
  font-family: "Archivo", sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.posisi-dua-kolom h2 small {
  color: var(--tinta-3);
  font-family: "Public Sans", sans-serif;
  font-size: 0.71875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.posisi-dua-kolom .tabel-nota :is(th, td) {
  padding-inline: 0;
}

.bagian-catatan-keuangan {
  display: grid;
  gap: 10px;
}

.bagian-catatan-keuangan > section {
  padding: 14px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.bagian-catatan-keuangan > section > span {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.71875rem;
  font-weight: 600;
}

.bagian-catatan-keuangan h2,
.bagian-catatan-keuangan p {
  margin: 0;
}

.bagian-catatan-keuangan h2 {
  font-size: 0.875rem;
}

.bagian-catatan-keuangan p {
  margin-top: 5px;
  color: var(--tinta-2);
  font-size: 0.78125rem;
  line-height: 1.45;
}

.bagian-catatan-keuangan dl {
  margin: 7px 0 0;
}

.bagian-catatan-keuangan dl > div {
  padding-block: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--garis);
}

.bagian-catatan-keuangan dd {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bilah-akuntan {
  color: var(--permukaan);
  background: var(--tinta);
  border-color: #343a3f;
}

.sidebar-akuntan .identitas-pengguna,
.sidebar-akuntan .kaki-sidebar {
  color: var(--tinta-2);
}

.menu-akuntan {
  margin: 10px 8px;
  padding: 10px 0 8px;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 3px;
  color: var(--permukaan);
  background: var(--tinta);
  border-radius: 8px;
}

.menu-akuntan > span {
  margin: 0 8px 7px;
  color: var(--pasir);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-akuntan a {
  height: 36px;
  padding-inline: 12px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
  border-radius: 4px;
  font-size: 0.8125rem;
}

.menu-akuntan a.aktif {
  color: var(--permukaan);
  background: rgba(217, 162, 27, 0.16);
  border-left: 3px solid var(--pasir);
}

.bilah-akuntan .aksi-bilah,
.bilah-akuntan a {
  color: var(--permukaan);
}

.badge-mode {
  margin-right: auto;
  padding: 3px 9px;
  color: var(--tinta);
  background: var(--pasir);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 1200px) {
  .grid-ringkasan-lima {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-uang-utama,
  .grid-uang-jalan,
  .grid-detail-truk {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .kepala-uang-mobile {
    margin-bottom: 14px;
    align-items: start;
    justify-content: space-between;
  }

  .kepala-uang-mobile span,
  .kepala-uang-mobile strong,
  .kepala-uang-mobile small {
    display: block;
  }

  .kepala-uang-mobile span,
  .kepala-uang-mobile small {
    color: var(--tinta-2);
    font-size: 0.75rem;
  }

  .kepala-uang-mobile strong {
    margin-block: 2px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 2rem;
  }

  .kepala-uang-mobile > a {
    color: var(--hijau);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .daftar-rekening-mobile,
  .daftar-tagihan-mobile,
  .daftar-jadwal-mobile,
  .halaman-aset-mobile,
  .halaman-detail-truk-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .daftar-rekening-mobile article {
    min-height: 64px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: 7px;
  }

  .daftar-rekening-mobile strong,
  .daftar-rekening-mobile span {
    display: block;
  }

  .daftar-rekening-mobile span {
    margin-top: 3px;
    color: var(--tinta-3);
    font-size: 0.75rem;
  }

  .daftar-rekening-mobile b {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.9375rem;
  }

  .aksi-uang-mobile {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .aksi-uang-mobile .tombol {
    min-height: 48px;
  }

  /* Tombol ketiga sendirian di baris kedua: lebarkan penuh biar tidak menggantung */
  .aksi-uang-mobile .tombol:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .layar-form-uang-mobile .pilihan-kartu-radio label > span,
  .form-wizard .pilihan-kartu-radio label > span {
    min-height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }

  .pilihan-kartu-radio label > span strong,
  .pilihan-kartu-radio label > span small,
  .pilihan-kartu-radio label > span b {
    display: block;
  }

  .pilihan-kartu-radio label > span small {
    color: var(--tinta-3);
    font-size: 0.75rem;
  }

  .pilihan-kartu-radio label > span b {
    margin-top: 4px;
    font-family: "IBM Plex Mono", monospace;
  }

  .ringkasan-tagihan-mobile {
    margin-bottom: 12px;
  }

  .ringkasan-tagihan-mobile span,
  .ringkasan-tagihan-mobile strong,
  .ringkasan-tagihan-mobile small {
    display: block;
  }

  .ringkasan-tagihan-mobile span,
  .ringkasan-tagihan-mobile small {
    color: var(--tinta-2);
    font-size: 0.75rem;
  }

  .ringkasan-tagihan-mobile strong {
    margin-block: 3px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.75rem;
  }

  .petunjuk-geser {
    margin: 12px 0 4px;
  }

  .kartu-geser {
    position: relative;
    overflow: hidden;
    background: var(--hijau);
    border-radius: 8px;
  }

  .aksi-geser {
    position: absolute;
    inset: 0 0 0 auto;
    width: 104px;
    display: grid;
    place-items: center;
  }

  .aksi-geser a {
    color: var(--permukaan);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .isi-kartu-geser {
    min-height: 108px;
    padding: 14px;
    position: relative;
    z-index: 1;
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: 8px;
    transition: translate 160ms ease;
  }

  .isi-kartu-geser.digeser {
    translate: -104px 0;
  }

  .isi-kartu-geser > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .isi-kartu-geser b,
  .isi-kartu-geser small {
    display: block;
  }

  .isi-kartu-geser b {
    margin: 8px 0 4px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.125rem;
  }

  .isi-kartu-geser small {
    color: var(--tinta-2);
    font-size: 0.6875rem;
  }

  .grid-aksi-cepat,
  .grid-laporan,
  .grid-dashboard-dua {
    grid-template-columns: 1fr;
  }

  .legenda-komposisi {
    padding: 12px 0 0;
    grid-template-columns: 1fr;
  }

  .grid-aksi-cepat .kartu {
    min-height: 74px;
  }

  .daftar-menu-lainnya,
  .daftar-laporan-mobile {
    overflow: hidden;
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: 8px;
  }

  .daftar-menu-lainnya a,
  .daftar-menu-lainnya button,
  .daftar-laporan-mobile a,
  .mode-akuntan-terkunci {
    min-height: 58px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--tinta);
    border-top: 1px solid var(--garis);
  }

  .daftar-menu-lainnya a:first-child,
  .daftar-laporan-mobile a:first-child {
    border-top: 0;
  }

  .daftar-menu-lainnya button {
    width: 100%;
    background: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left;
    cursor: pointer;
  }

  .daftar-menu-lainnya strong,
  .daftar-menu-lainnya span,
  .daftar-laporan-mobile strong,
  .daftar-laporan-mobile small,
  .mode-akuntan-terkunci strong,
  .mode-akuntan-terkunci small {
    display: block;
  }

  .daftar-menu-lainnya span,
  .daftar-laporan-mobile small,
  .mode-akuntan-terkunci small {
    margin-top: 2px;
    color: var(--tinta-3);
    font-size: 0.75rem;
  }

  .pusat-laporan-mobile > section {
    margin-bottom: 18px;
  }

  .pusat-laporan-mobile h2 {
    margin: 0 0 7px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mode-akuntan-terkunci {
    margin-top: 8px;
    color: var(--tinta-3);
    background: var(--kertas);
    border: 1px solid var(--garis);
    border-radius: 8px;
  }

  .laporan-mobile > header {
    margin-bottom: 14px;
    padding: 16px;
    color: var(--permukaan);
    background: var(--hijau);
    border-radius: 8px;
  }

  .laporan-mobile > header span,
  .laporan-mobile > header strong {
    display: block;
  }

  .laporan-mobile > header span {
    font-size: 0.75rem;
  }

  .laporan-mobile > header strong {
    margin-block: 5px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.75rem;
  }

  .laporan-mobile > header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .baris-laporan-mobile {
    overflow: hidden;
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: 8px;
  }

  .baris-laporan-mobile > div {
    min-height: 50px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--garis);
    font-size: 0.8125rem;
  }

  .baris-laporan-mobile > div:first-child {
    border-top: 0;
  }

  .baris-laporan-mobile strong {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 500;
    text-align: right;
  }

  .baris-laporan-mobile .tipe-total {
    font-weight: 600;
    border-top: 2px solid var(--tinta);
  }

  .pesan-mode-mobile {
    min-height: calc(100dvh - 152px);
    padding: 36px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .pesan-mode-mobile h1 {
    max-width: 310px;
    font-size: 1.125rem;
  }

  .pesan-mode-mobile p {
    max-width: 320px;
    color: var(--tinta-2);
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .ikon-kunci {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--tinta-2);
    background: var(--permukaan);
    border: 1px solid var(--garis);
    border-radius: 50%;
  }
}
/* P2 · Pajak final dan meteran omzet */
.halaman-pajak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: stretch;
}

.isi-pajak {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kartu-pajak {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(19, 23, 26, 0.06);
}

.peringatan-pajak {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 14px 16px;
  color: #8a6410;
  background: var(--pasir-muda);
  border: 1px solid #edd9a2;
  border-radius: 8px;
}

.peringatan-pajak svg {
  flex: none;
  margin-top: 1px;
}

.peringatan-pajak p {
  margin: 0;
  color: var(--tinta);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
}

.peringatan-pajak strong {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
}

.meteran-pajak {
  padding: 12px 18px 10px;
}

.kepala-bagian-pajak {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
}

.kepala-bagian-pajak h2,
.ringkasan-pajak h2,
.meteran-pajak-mobile > h2,
.kalender-pajak h2 {
  margin: 0;
  color: var(--tinta-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kepala-bagian-pajak > span {
  color: var(--tinta-3);
  font-size: 11.5px;
}

.meteran-pajak figure {
  position: relative;
  margin: 4px 0 0;
  padding-top: 32px;
}

.penunjuk-meter-pajak {
  position: absolute;
  z-index: 3;
  top: 0;
  left: clamp(48px, var(--posisi-meter), calc(100% - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.penunjuk-meter-pajak span {
  padding: 2px 9px;
  color: #fff;
  background: var(--tinta);
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}

.penunjuk-meter-pajak i {
  width: 0;
  height: 0;
  border-top: 5px solid var(--tinta);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.batang-meter-pajak {
  position: relative;
  display: flex;
  height: 48px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--garis-tebal);
  border-radius: 4px;
}

.zona-meter-pajak {
  flex: none;
}

.zona-meter-pajak--bebas {
  width: var(--zona-bebas);
  background: var(--hijau-muda);
}

.zona-meter-pajak--kena {
  width: var(--zona-kena);
  box-sizing: border-box;
  background: #fff repeating-linear-gradient(to right, #efeee9 0 1px, transparent 1px 28px);
  border-right: 1px solid var(--garis-tebal);
  border-left: 1px solid var(--garis-tebal);
}

.zona-meter-pajak--lebih {
  width: var(--zona-lebih);
  background: var(--bata-muda);
}

.isi-meter-pajak {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: var(--posisi-meter);
  background: var(--hijau);
}

.pemisah-bebas-pajak {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--posisi-bebas);
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.garis-penunjuk-pajak {
  position: absolute;
  z-index: 2;
  top: 32px;
  bottom: 17px;
  left: var(--posisi-meter);
  width: 4px;
  margin-left: -2px;
  background: var(--tinta);
  border-radius: 2px;
}

.angka-meter-pajak {
  position: relative;
  height: 20px;
  margin-top: 6px;
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 16px;
}

.angka-meter-pajak > span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.angka-meter-pajak > span:first-child {
  left: 0;
}

.angka-meter-pajak--bebas {
  left: var(--posisi-bebas);
  transform: translateX(-50%);
}

.angka-meter-pajak--batas {
  left: var(--posisi-batas);
  transform: translateX(-50%);
}

.legenda-meter-pajak {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 8px;
}

.legenda-meter-pajak > span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  white-space: nowrap;
}

.legenda-meter-pajak i {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 3px;
}

.legenda-meter-pajak strong {
  color: var(--tinta);
  font-family: "Public Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

.legenda-meter-pajak .legenda-bebas {
  background: var(--hijau-muda);
  border: 1px solid #c9dcd2;
}

.legenda-meter-pajak .legenda-kena {
  background: #fff repeating-linear-gradient(to right, var(--garis) 0 1px, transparent 1px 4px);
  border: 1px solid var(--garis-tebal);
}

.legenda-meter-pajak .legenda-lebih {
  background: var(--bata-muda);
  border: 1px solid #efc9c2;
}

.legenda-meter-pajak > span:first-child strong {
  color: var(--hijau);
}

.legenda-meter-pajak > span:last-child strong {
  color: var(--bata);
}

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

.ringkasan-pajak article {
  min-width: 0;
  padding: 13px 16px;
}

.ringkasan-pajak article > strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--tinta);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ringkasan-pajak article > p {
  min-height: 36px;
  margin: 0;
  color: var(--tinta-2);
  font-size: 12.5px;
  line-height: 18px;
}

.ringkasan-pajak article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--garis);
}

.ringkasan-pajak article > div span {
  padding: 2px 9px;
  color: #8a6410;
  background: var(--pasir-muda);
  border: 1px solid #edd9a2;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.ringkasan-pajak article > div b {
  color: var(--tinta-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
}

.riwayat-pajak {
  min-height: 0;
  padding: 13px 18px;
}

.riwayat-pajak .kepala-bagian-pajak {
  padding-bottom: 10px;
}

.riwayat-pajak table {
  width: 100%;
  border-collapse: collapse;
  color: var(--tinta);
  font-size: 13px;
}

.riwayat-pajak th,
.riwayat-pajak td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--garis);
  text-align: right;
  white-space: nowrap;
}

.riwayat-pajak th:first-child,
.riwayat-pajak td:first-child,
.riwayat-pajak th:last-child,
.riwayat-pajak td:last-child {
  text-align: left;
}

.riwayat-pajak thead th {
  color: var(--tinta-2);
  border-top: 1px solid var(--garis-tebal);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.riwayat-pajak tbody th {
  font-weight: 600;
}

.riwayat-pajak tbody td,
.riwayat-pajak tfoot td {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.riwayat-pajak tfoot th,
.riwayat-pajak tfoot td {
  padding-top: 8px;
  border-top: 2px solid var(--garis-tebal);
  border-bottom: 0;
  font-weight: 600;
}

.status-setoran-pajak {
  display: inline-flex;
  padding: 2px 9px;
  color: #8a6410;
  background: var(--pasir-muda);
  border: 1px solid #edd9a2;
  border-radius: 999px;
  font-family: "Public Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.status-setoran-pajak.sudah {
  color: var(--tinta-2);
  background: #efeee9;
  border-color: var(--garis);
}

.kalender-pajak {
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.kalender-pajak header > p {
  margin: 6px 0 0;
  padding-bottom: 12px;
  color: var(--tinta-3);
  border-bottom: 1px solid var(--garis);
  font-size: 11.5px;
  line-height: 16px;
}

.kalender-pajak article {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--garis);
}

.kalender-pajak time,
.kalender-pajak-mobile time {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 46px;
  padding: 5px 0;
  color: #8a6410;
  background: var(--pasir-muda);
  border: 1px solid #edd9a2;
  border-radius: 6px;
  text-transform: uppercase;
}

.kalender-pajak time.tanggal-spt {
  color: var(--hijau);
  background: var(--hijau-muda);
  border-color: #c9dcd2;
}

.kalender-pajak time strong,
.kalender-pajak-mobile time strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
  line-height: 20px;
}

.kalender-pajak time span,
.kalender-pajak-mobile time span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 13px;
}

.kalender-pajak article div,
.kalender-pajak-mobile div {
  min-width: 0;
}

.kalender-pajak h3,
.kalender-pajak-mobile h2 {
  margin: 1px 0 3px;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 19px;
}

.kalender-pajak article p,
.kalender-pajak-mobile p {
  margin: 0;
  color: var(--tinta-2);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 17px;
}

.kalender-pajak .catatan-kalender-pajak {
  margin: auto 0 0;
  padding-top: 14px;
  color: var(--tinta-2);
  border-top: 1px solid var(--garis);
  font-family: "Public Sans", sans-serif;
  font-size: 12.5px;
  line-height: 18px;
  text-wrap: pretty;
}

.pajak-mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.peringatan-pajak--mobile {
  gap: 10px;
  padding: 12px 13px;
}

.peringatan-pajak--mobile p {
  font-size: 13px;
  line-height: 19px;
}

.meteran-pajak-mobile {
  padding: 16px;
}

.meteran-pajak-mobile > h2 {
  margin-bottom: 14px;
  font-size: 11px;
  line-height: 14px;
}

.badan-meter-pajak-mobile {
  display: flex;
  gap: 14px;
  height: 320px;
}

.batang-meter-pajak-mobile {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 48px;
  height: 320px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--garis-tebal);
  border-radius: 4px;
}

.zona-meter-mobile {
  flex: none;
}

.zona-meter-mobile--lebih {
  height: var(--zona-lebih);
  background: var(--bata-muda);
}

.zona-meter-mobile--kena {
  height: var(--zona-kena);
  box-sizing: border-box;
  background: #fff repeating-linear-gradient(to bottom, #efeee9 0 1px, transparent 1px 26px);
  border-top: 1px solid var(--garis-tebal);
  border-bottom: 1px solid var(--garis-tebal);
}

.zona-meter-mobile--bebas {
  height: var(--zona-bebas);
  background: var(--hijau-muda);
}

.isi-meter-mobile {
  position: absolute;
  inset: auto 0 0;
  height: var(--posisi-meter);
  background: var(--hijau);
}

.garis-meter-mobile {
  position: absolute;
  right: 0;
  bottom: var(--posisi-meter);
  left: 0;
  height: 4px;
  margin-bottom: -2px;
  background: var(--tinta);
}

.keterangan-meter-pajak-mobile {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 320px;
}

.keterangan-meter-pajak-mobile > div {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.keterangan-meter-pajak-mobile strong {
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
}

.keterangan-meter-pajak-mobile span {
  color: var(--tinta-3);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}

.keterangan-meter--batas {
  top: 0;
}

.keterangan-meter--batas strong {
  color: var(--bata);
}

.keterangan-meter--kena {
  top: 52px;
}

.keterangan-meter--bebas {
  bottom: 0;
}

.keterangan-meter--bebas strong,
.penunjuk-meter-mobile span {
  color: var(--hijau);
}

.keterangan-meter-pajak-mobile .penunjuk-meter-mobile {
  bottom: var(--posisi-meter);
  gap: 2px;
  margin-bottom: -16px;
}

.keterangan-meter-pajak-mobile .penunjuk-meter-mobile strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  line-height: 20px;
}

.keterangan-meter-pajak-mobile .penunjuk-meter-mobile span {
  font-size: 12px;
  font-weight: 600;
}

.angka-pajak-mobile {
  margin: 14px 0 0;
}

.angka-pajak-mobile > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--garis);
}

.angka-pajak-mobile > div:first-child {
  border-color: var(--garis-tebal);
}

.angka-pajak-mobile dt {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.angka-pajak-mobile dd {
  overflow: hidden;
  margin: 0;
  color: var(--tinta);
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kalender-pajak-mobile {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 8px;
}

.kalender-pajak-mobile time {
  width: 42px;
  padding: 4px 0;
}

.kalender-pajak-mobile time strong {
  font-size: 16px;
  line-height: 19px;
}

.kalender-pajak-mobile time span {
  font-size: 10px;
  line-height: 12px;
}

.kalender-pajak-mobile h2 {
  font-size: 14px;
}

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

  .kalender-pajak {
    min-height: 240px;
  }
}

body.dokumen-cetak {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  color: var(--tinta);
  background: var(--kertas);
}

.dokumen-cetak main {
  max-width: 210mm;
  margin-inline: auto;
}

.aksi-cetak {
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

[x-cloak] {
  display: none !important;
}

.bungkus-notifikasi {
  position: relative;
  display: inline-flex;
}

.badge-notifikasi.kosong,
.notifikasi-mobile span.kosong {
  display: none;
}

.panel-notifikasi {
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(19, 23, 26, 0.16);
}

.bungkus-notifikasi .panel-notifikasi {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
}

.kepala-notifikasi {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--garis);
}

.kepala-notifikasi h2 {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.333;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kepala-notifikasi button {
  padding: 0;
  color: var(--hijau);
  background: transparent;
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.isi-notifikasi {
  display: flex;
  flex-direction: column;
}

.isi-notifikasi .keadaan-kosong {
  margin: 0;
  padding: 22px 14px;
  color: var(--tinta-3);
  font-size: 0.8125rem;
  text-align: center;
}

.butir-notifikasi {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-bottom: 1px solid var(--garis);
  border-left: 3px solid var(--pasir);
}

.butir-notifikasi:last-child {
  border-bottom: 0;
}

.butir-notifikasi--mendesak {
  border-left-color: var(--bata);
}

.butir-notifikasi > a {
  flex: 1;
  padding: 12px 4px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}

.butir-notifikasi > a:hover {
  background: var(--kertas);
}

.butir-notifikasi strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.286;
}

.butir-notifikasi span {
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.385;
}

.butir-notifikasi form {
  padding: 10px 10px 0 0;
}

.butir-notifikasi form button {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-3);
  background: transparent;
  border: 1px solid var(--garis);
  border-radius: 999px;
  cursor: pointer;
}

.butir-notifikasi form button:hover {
  color: var(--hijau);
  border-color: var(--hijau);
}

.butir-notifikasi.sudah-dibaca {
  border-left-color: var(--garis);
}

.butir-notifikasi.sudah-dibaca strong {
  font-weight: 500;
}

.butir-notifikasi.sudah-dibaca strong,
.butir-notifikasi.sudah-dibaca span {
  color: var(--tinta-3);
}

.lembar-notifikasi {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(19, 23, 26, 0.35);
}

.lembar-notifikasi .panel-notifikasi {
  width: 100%;
  max-height: 76vh;
  border: 0;
  border-radius: 14px 14px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

@page {
  size: A4;
  margin: 16mm;
}

@media print {
  html,
  body,
  body.dokumen-cetak {
    min-height: auto;
    margin: 0;
    padding: 0;
    color: #13171a;
    background: #fff;
  }

  body {
    print-color-adjust: exact;
  }

  .halaman-desktop .sidebar-desktop,
  .halaman-desktop .bilah-atas-desktop,
  .halaman-desktop .kepala-halaman,
  .halaman-desktop .pindah-versi,
  .aksi-cetak {
    display: none !important;
  }

  .halaman-desktop .kerangka-desktop,
  .halaman-desktop .utama-desktop,
  .halaman-desktop .konten-desktop,
  .halaman-desktop .halaman-laporan {
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
    background: #fff;
  }

  .kertas-laporan {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .kertas-laporan > .kop-laporan {
    margin-bottom: 10mm;
    padding-bottom: 4mm;
  }

  .tabel-laporan {
    width: 100%;
    min-width: 0;
  }

  .tabel-laporan thead {
    display: table-header-group;
  }

  .tabel-laporan tr,
  .catatan-kaki-laporan {
    break-inside: avoid;
  }
}