/* CSS khusus aplikasi LAYANAN. Hanya memakai token var(--mh-*). */

.app-halaman {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mh-bg-subtle);
}

.app-utama {
  flex: 1;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: var(--mh-space-8) var(--mh-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-6);
}

.app-identitas {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mh-space-2);
}

.app-identitas__logo {
  height: 64px;
  width: auto;
}

.app-identitas__nama {
  margin: 0;
  font-size: var(--mh-font-size-2xl);
}

.app-identitas .mh-overline {
  margin: 0;
}

.app-kartu__judul {
  font-size: var(--mh-font-size-2xl);
}

.app-kartu .mh-alert {
  margin-bottom: var(--mh-space-4);
}

.app-tombol-google {
  gap: var(--mh-space-3);
}

.app-tombol-google img {
  width: 20px;
  height: 20px;
}

.app-bantuan {
  margin: var(--mh-space-5) 0 0;
}

.app-footer {
  padding: var(--mh-space-3) var(--mh-space-4);
  border-top: var(--mh-border-width) solid var(--mh-border);
  text-align: center;
}

.app-footer p {
  /* p design system dibatasi 68ch dan rata kiri: lepas agar benar-benar di tengah */
  margin: 0 auto;
  max-width: none;
}

.app-identitas__nama {
  font-family: var(--mh-font-family-heading);
  font-weight: var(--mh-font-weight-bold);
  color: var(--mh-heading);
  line-height: var(--mh-font-line-height-snug);
}

.app-daftar-nama {
  margin: var(--mh-space-3) 0;
  padding-left: var(--mh-space-5);
}

/* Tombol tema di pojok kanan atas halaman masuk/error */
.app-tema-pojok {
  position: absolute;
  top: var(--mh-space-3);
  right: var(--mh-space-3);
}

/* Navbar dashboard */
.app-nav {
  gap: var(--mh-space-3);
  justify-content: space-between;
}

.app-nav__merek {
  gap: var(--mh-space-3);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.app-nav__teks {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--mh-font-line-height-snug);
}

.app-nav__app {
  font-family: var(--mh-font-family-heading);
  font-weight: var(--mh-font-weight-bold);
  color: var(--mh-heading);
}

.app-nav__satker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav__aksi {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  flex: none;
}

.app-nav__aksi form {
  margin: 0;
}

.app-nav .mh-avatar {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
}

.app-nav__keluar-ikon {
  display: none;
}

@media (max-width: 479px) {
  .app-nav__satker,
  .app-nav__keluar-teks {
    display: none;
  }

  .app-nav__keluar {
    padding: 0;
    width: var(--mh-control-height);
  }

  .app-nav__keluar-ikon {
    display: block;
  }
}

.app-dashboard {
  flex: 1;
  padding-block: var(--mh-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-4);
}

/* Kartu sambutan ringkas dan tabel perkara berjalan */
.app-sambutan .app-kartu__judul {
  font-size: var(--mh-font-size-xl);
}

.app-sambutan .app-daftar-nama {
  margin-block: var(--mh-space-2);
}

.app-perkara__cari {
  max-width: 24rem;
  margin-bottom: var(--mh-space-3);
}

.app-perkara__status {
  min-height: 1.5em;
  margin-block: 0 var(--mh-space-2);
}

.app-perkara .mh-table td,
.app-perkara .mh-table th {
  vertical-align: top;
}

.app-perkara .mh-table td:nth-child(2) {
  white-space: nowrap;
}

.app-perkara__kosong {
  text-align: center;
  color: var(--mh-text-muted);
}

.app-perkara__kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-space-3);
  margin-top: var(--mh-space-4);
}

.app-perkara__kaki p,
.app-perkara__kaki nav {
  margin: 0;
}

.app-perkara .mh-pagination {
  flex-wrap: wrap;
}

.app-perkara .mh-pagination a[aria-disabled="true"] {
  color: var(--mh-text-subtle);
  pointer-events: none;
}

.app-perkara .mh-pagination .app-perkara__elipsis {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  color: var(--mh-text-subtle);
}

/* Halaman saksi */
.app-remah {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
  font-size: var(--mh-font-size-sm);
  color: var(--mh-text-muted);
}

.app-perkara-info {
  margin-block: var(--mh-space-2);
  overflow-wrap: anywhere;
}

.app-saksi__aksi,
.app-aksi-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-2);
}

.app-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mh-space-4);
}

/* Pengelompok isian yang dinonaktifkan sebelum foto KTP; tidak ikut tata letak. */
.app-isian {
  display: contents;
}

.app-form .mh-error-text,
.app-form .mh-help {
  margin: 0;
}

.app-form [data-ocr-banner] ul {
  margin: var(--mh-space-2) 0 0;
  padding-left: var(--mh-space-5);
}

@media (min-width: 640px) {
  .app-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-form__lebar {
    grid-column: 1 / -1;
  }
}

/* Indikator baca KTP */
.app-ocr-status {
  display: flex;
  align-items: center;
  gap: var(--mh-space-2);
  margin: 0;
}

.app-spinner {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--mh-border-color);
  border-top-color: var(--mh-primary);
  border-radius: 50%;
  animation: app-putar 0.8s linear infinite;
}

.app-spinner[hidden] {
  display: none;
}

@keyframes app-putar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-spinner {
    animation: none;
  }
}

/* Unggah foto: kamera / berkas */
.app-foto__aksi {
  display: flex;
  flex-direction: column;
  gap: var(--mh-space-2);
}

.app-foto__tombol {
  position: relative;
  cursor: pointer;
  justify-content: center;
}

.app-foto__tombol:focus-within {
  box-shadow: var(--mh-focus-ring);
}

.app-foto [hidden] {
  display: none;
}

.app-foto__pratinjau,
.app-foto__sekarang {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mh-space-2);
  margin: 0;
}

.app-foto__pratinjau img,
.app-foto__sekarang img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: var(--mh-border-width) solid var(--mh-border-color);
  border-radius: var(--mh-control-radius);
}

.app-foto__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-space-2);
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .app-foto__aksi {
    flex-direction: row;
  }
}

/* Overlay layar penuh saat membaca KTP */
.app-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--mh-z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mh-space-4);
  background: color-mix(in srgb, var(--mh-bg) 80%, transparent);
}

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

.app-overlay:focus {
  outline: none;
}

.app-overlay__isi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-space-3);
  text-align: center;
  max-width: 22rem;
}

.app-overlay__isi p {
  margin: 0;
}

.app-overlay__judul {
  font-family: var(--mh-font-family-heading);
  font-weight: var(--mh-font-weight-bold);
  font-size: var(--mh-font-size-lg);
  color: var(--mh-heading);
}

.app-spinner--besar {
  width: 3rem;
  height: 3rem;
  border-width: 5px;
}

.app-kunci-scroll {
  overflow: hidden;
}