/**
 * SEEPOS — halaman otentikasi (login & lupa password)
 * ==================================================================
 * Satu stylesheet untuk lima layar: login, dan empat langkah pemulihan
 * password. Menggantikan login_new.css sepenuhnya.
 *
 * Kelima layar itu berdiri sendiri (punya <html> sendiri, tidak lewat
 * userHome.php), jadi token --sh-* dipancarkan di _auth_head.php.
 *
 * Kait JS yang WAJIB tetap ada — dipakai login.js dan pinlogin:
 *   .container (ditambahi kelas .active), .div_1 (area PIN),
 *   .div_2 (area username+password), #loginpin, #login_pin,
 *   #active_login_button_hidden, #login_button_type, .submit_login,
 *   .btn_login_pin_type[data-id], .active_login_btn, .btn_pin_trigger,
 *   .set_data, .set_credentials
 * Nama-nama itu dipertahankan di markup; yang berubah hanya gayanya.
 *
 * Peta isi:
 *   1 Token & dasar        5 Tombol
 *   2 Kerangka split       6 Pesan & galat
 *   3 Kartu & judul        7 Langkah, PIN, demo
 *   4 Ruas isian           8 Responsif, fokus, motion
 */

/* ==================================================================
   1. TOKEN & DASAR
   ================================================================== */
:root {
  --au-canvas: var(--sh-canvas, #eef1f5);
  --au-surface: var(--sh-card, #ffffff);
  --au-sunken: var(--sh-sunken, #f5f7fa);
  --au-line: var(--sh-line, #e2e6ee);

  --au-fg: var(--sh-fg, #14181f);
  --au-fg-body: var(--sh-fg-body, #454b57);
  --au-fg-muted: #6a7180; /* 4.9:1 di atas putih */
  --au-icon: var(--sh-icon, #878e9c);

  --au-accent: var(--sh-accent-ink, #6d3fe0);
  --au-accent-hi: var(--sh-accent-hi, #5c33c4);
  --au-on-accent: var(--sh-on-accent, #ffffff);
  --au-accent-soft: var(--sh-accent-soft, rgba(109, 63, 224, 0.09));

  --au-ok: #15803d;
  --au-ok-soft: #f0fdf4;
  --au-danger: #b42318;
  --au-danger-soft: #fef2f2;

  --au-r: 14px;
  --au-r-sm: 10px;
  --au-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--au-canvas);
  color: var(--au-fg-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==================================================================
   2. KERANGKA SPLIT
   ------------------------------------------------------------------
   Dua kolom di layar lebar: panel merek di kiri, formulir di kanan.
   Di layar sempit panel merek dilipat jadi kepala ringkas — logonya
   tetap terlihat, tapi tidak memakan tinggi yang dibutuhkan papan
   ketik di ponsel.
   ================================================================== */
.auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
}

.auth-brand {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 40px;
  background: linear-gradient(150deg, var(--au-accent), var(--au-accent-hi));
  color: var(--au-on-accent);
  position: relative;
  overflow: hidden;
}

/* Kilau lembut, murni dekoratif */
.auth-brand::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

.auth-brand-logo {
  position: relative;
}

.auth-brand-logo img {
  max-width: 190px;
  max-height: 62px;
  object-fit: contain;
}

/* Cadangan saat White Label belum punya logo: nama situs sebagai
   wordmark, supaya sudut itu tidak kosong melompong */
.auth-brand-wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth-brand-copy {
  position: relative;
  max-width: 42ch;
}

.auth-brand-copy h2 {
  margin: 0 0 8px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* Tidak memakai opacity di mana pun pada panel ini: di atas gradien,
   teks yang diredupkan jatuh di bawah 4.5:1. Hierarki dibuat lewat
   ukuran dan tebal huruf saja. */
.auth-brand-tagline {
  margin: 0 0 26px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- Tiga detail produk --- */
.auth-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  list-style: none;
}

.auth-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.auth-point-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  /* Kotak ikon dibuat dari lapisan putih tipis, bukan warna tetap,
     supaya ikut menyesuaikan berapa pun aksen White Label-nya */
  background: rgba(255, 255, 255, 0.16);
}

.auth-point-mark svg {
  width: 17px;
  height: 17px;
}

.auth-point-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.auth-point-body b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.auth-point-body span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.auth-brand-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 500;
}

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

/* ==================================================================
   3. KARTU & JUDUL
   ================================================================== */
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 30px 30px 26px;
  border: 1px solid var(--au-line);
  border-radius: var(--au-r);
  background: var(--au-surface);
  box-shadow: 0 1px 2px rgba(16, 20, 30, 0.04),
    0 12px 32px -14px rgba(16, 20, 30, 0.14);
}

/* Logo di dalam kartu hanya muncul saat panel merek tersembunyi */
.auth-card-logo {
  display: block;
  margin: 0 auto 20px;
  max-width: 168px;
  max-height: 52px;
  object-fit: contain;
}

.auth-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--au-fg);
}

.auth-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--au-fg-muted);
}

/* ==================================================================
   4. RUAS ISIAN
   ------------------------------------------------------------------
   Label ditulis di atas ruas, bukan mengambang di dalamnya. Label
   mengambang hilang begitu ruas terisi, sehingga saat memeriksa
   ulang isian pengguna tidak lagi tahu ruas mana yang mana.
   ================================================================== */
.auth-field {
  margin-bottom: 15px;
}

.auth-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--au-fg);
}

.auth-input,
.auth-field select {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--au-line);
  border-radius: var(--au-r-sm);
  background: var(--au-surface);
  color: var(--au-fg);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 130ms var(--au-ease), box-shadow 130ms var(--au-ease);
}

.auth-input::placeholder {
  color: var(--au-icon);
}

.auth-input:focus,
.auth-field select:focus {
  outline: none;
  border-color: var(--au-accent);
  box-shadow: 0 0 0 3px var(--au-accent-soft);
}

/* Ruas kata sandi menyediakan ruang untuk tombol perlihatkan */
.auth-input-wrap {
  position: relative;
}

.auth-input-wrap .auth-input {
  padding-right: 46px;
}

.auth-reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--au-r-sm);
  background: transparent;
  color: var(--au-fg-muted);
  cursor: pointer;
}

.auth-reveal:hover {
  background: var(--au-sunken);
  color: var(--au-fg);
}

.auth-reveal svg {
  width: 18px;
  height: 18px;
}

/* ==================================================================
   5. TOMBOL
   ================================================================== */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 16px;
  border: 1px solid var(--au-accent);
  border-radius: var(--au-r-sm);
  background: var(--au-accent);
  color: var(--au-on-accent);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 130ms var(--au-ease);
}

.auth-btn:hover {
  background: var(--au-accent-hi);
  border-color: var(--au-accent-hi);
}

.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--au-line);
}

.auth-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--au-accent);
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-version {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--au-fg-muted);
  text-align: center;
}

/* ==================================================================
   6. PESAN & GALAT
   ------------------------------------------------------------------
   Status tidak pernah hanya diwakili warna: tiap pesan membawa ikon
   dan teksnya sendiri.
   ================================================================== */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: var(--au-r-sm);
  font-size: 13.5px;
  line-height: 1.45;
}

.auth-alert svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.auth-alert.is-ok {
  border-color: #bbf7d0;
  background: var(--au-ok-soft);
  color: var(--au-ok);
}

.auth-alert.is-error {
  border-color: #fecaca;
  background: var(--au-danger-soft);
  color: var(--au-danger);
}

/* Galat per ruas diletakkan tepat di bawah ruasnya, bukan menumpuk
   di atas formulir */
.auth-error {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--au-danger);
}

.auth-field.has-error .auth-input {
  border-color: var(--au-danger);
}

/* ==================================================================
   7. LANGKAH, PIN, DEMO
   ================================================================== */

/* --- Penanda langkah pemulihan password --- */
.auth-steps {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
}

.auth-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--au-fg-muted);
}

.auth-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--au-line);
  border-radius: 50%;
  background: var(--au-surface);
  font-size: 11.5px;
}

.auth-step.is-done .auth-step-dot {
  border-color: var(--au-ok);
  background: var(--au-ok);
  color: #fff;
}

.auth-step.is-now .auth-step-dot {
  border-color: var(--au-accent);
  background: var(--au-accent);
  color: var(--au-on-accent);
}

.auth-step.is-now {
  color: var(--au-fg);
}

.auth-step-bar {
  flex: 1 1 auto;
  height: 1px;
  background: var(--au-line);
}

/* --- Pemilih metode login (username / PIN) ---
   .btn_login_pin_type dan .active_login_btn dipakai login.js */
.btn_login_pin_table {
  width: 100%;
  margin-bottom: 18px;
  border-collapse: collapse;
}

.btn_login_pin_table td {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: var(--au-r-sm);
  background: var(--au-sunken);
}

.btn_login_pin_type {
  flex: 1 1 0;
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--au-fg-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 130ms var(--au-ease);
}

.btn_login_pin_type:hover {
  color: var(--au-fg);
  text-decoration: none;
}

.btn_login_pin_type.active_login_btn {
  background: var(--au-surface);
  color: var(--au-fg);
  box-shadow: 0 1px 2px rgba(16, 20, 30, 0.08);
}

/* --- Area PIN (.div_1) --- */
.div_1 {
  margin-bottom: 6px;
}

/* WADAHNYA DUA LAPIS, dan itu yang dulu memecah barisnya.
   Plugin pinlogin tidak menaruh ruasnya langsung di #loginpin: ia
   menyisipkan <div class="pinlogin"> di antaranya. Jadi `display:flex`
   pada #loginpin hanya menata SATU anak -- div itu -- sementara ruas di
   dalamnya tetap inline-block biasa dan membungkus seperti teks.

   Dengan enam ruas hitungannya tidak lagi muat: 52px + margin 10px di
   kiri-kanan = 72px per ruas, dan hanya empat yang muat pada kartu selebar
   338px. Dua sisanya turun ke baris kedua. Pada empat ruas hitungan yang
   sama kebetulan pas, jadi cacat ini baru terlihat setelah PIN dijadikan
   enam angka -- bukan dibuat olehnya.

   Sekarang KEDUA lapis menjadi flex, dan ruasnya MELAR mengikuti lebar
   yang ada alih-alih dipatok. Satu baris bertahan di lebar berapa pun;
   max-width menjaga supaya di kartu lebar kotaknya tidak jadi raksasa. */
#loginpin,
#loginpin .pinlogin {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* Plugin pinlogin merender <input> polos; ini menyeragamkannya
   dengan ruas isian lain di halaman */
#loginpin input {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  /* Batas atas, bukan ukuran: enam kotak 56px + lima celah 8px = 376px,
     lebih lebar daripada kartunya, jadi yang berlaku sehari-hari adalah
     pembagian rata di atas. */
  max-width: 56px !important;
  /* TINGGINYA MENGIKUTI LEBARNYA, tidak dipatok. Ruasnya melar, jadi di
     kartu sempit tinggi tetap 58px menghasilkan kotak 30x58 -- terbaca
     sebagai ruas isian yang salah ukuran, bukan sebagai kotak PIN.
     Batas bawah 44px menjaga sasaran sentuhnya. */
  height: auto !important;
  aspect-ratio: 9 / 11;
  min-height: 44px !important;
  max-height: 58px !important;
  /* margin: 0 10px milik plugin DIBUANG -- 120px margin yang tidak
     terlihat itulah yang membuat baris keenam tidak muat. Jarak antar
     kotak sekarang urusan gap. */
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--au-line) !important;
  border-radius: var(--au-r-sm) !important;
  background: var(--au-surface) !important;
  color: var(--au-fg) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* Layar sempit: kotaknya ikut mengecil supaya tetap satu baris, dan
   tingginya turun bersamanya -- kotak 36x58 terlihat seperti ruas yang
   salah ukuran, bukan seperti kotak PIN. */
@media (max-width: 400px) {
  #loginpin,
  #loginpin .pinlogin {
    gap: 6px;
  }

  #loginpin input {
    font-size: 19px !important;
  }
}

#loginpin input:focus {
  outline: none !important;
  border-color: var(--au-accent) !important;
  box-shadow: 0 0 0 3px var(--au-accent-soft) !important;
}

.pin-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--au-fg-muted);
  text-align: center;
}

/* --- Numpad layar ------------------------------------------------
   Terminal POS sering tanpa papan ketik fisik. Tombol dibuat 56px:
   di atas ambang 44px, karena kasir menekannya sambil berdiri dan
   sering terburu-buru. Grid 3 kolom mengikuti tata letak papan tombol
   telepon (1-2-3 di baris atas), bukan kalkulator — itu susunan yang
   dikenali orang untuk memasukkan PIN. */
.pin-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.pin-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--au-line);
  border-radius: var(--au-r-sm);
  background: var(--au-surface);
  color: var(--au-fg);
  font-family: inherit;
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* Angka tidak perlu bisa diseleksi; sorotan biru saat ditekan
     cepat hanya membuat tampilannya berkedip */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Wajib di layar sentuh. Tanpa ini peramban menunggu ~300ms untuk
     memastikan ketukan bukan awal dari dobel-ketuk zoom — memasukkan
     PIN cepat jadi terasa macet, dan ketukan beruntun malah
     memicu zoom. Zoom cubit tetap berfungsi; yang dimatikan hanya
     dobel-ketuk di atas tombol. */
  touch-action: manipulation;
  transition: background-color 90ms var(--au-ease), transform 90ms var(--au-ease);
}

.pin-key:hover {
  background: var(--au-sunken);
}

/* Umpan balik tekan harus terasa langsung: di layar sentuh tidak ada
   keadaan hover, jadi :active satu-satunya tanda tombol benar kena */
.pin-key:active {
  background: var(--au-accent-soft);
  border-color: var(--au-accent);
  transform: scale(0.97);
}

.pin-key-action {
  color: var(--au-fg-muted);
}

.pin-key-action:hover {
  color: var(--au-fg);
}

.pin-key-action[data-key="clear"]:active {
  background: var(--au-danger-soft);
  border-color: #fecaca;
  color: var(--au-danger);
}

.pin-key svg {
  width: 20px;
  height: 20px;
}

/* --- Tombol akun demo --- */
.auth-demo {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--au-line);
}

.auth-demo-title {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--au-fg-muted);
  text-align: center;
}

.auth-demo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.auth-demo-grid .set_data {
  padding: 7px 12px;
  border: 1px solid var(--au-line);
  border-radius: 999px;
  background: var(--au-surface);
  color: var(--au-fg-body);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.auth-demo-grid .set_data:hover {
  border-color: var(--au-accent);
  color: var(--au-accent);
  text-decoration: none;
}

.auth-cta {
  margin-top: 12px;
  text-align: center;
}

.auth-cta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--au-r-sm);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* ==================================================================
   8. RESPONSIF, FOKUS, MOTION
   ================================================================== */
@media (min-width: 900px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .auth-brand {
    display: flex;
  }

  /* Logo sudah tampil di panel merek */
  .auth-card-logo {
    display: none;
  }

  .auth-main {
    padding: 40px;
  }
}

@media (min-width: 1280px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

/* Layar pendek (ponsel mendatar, papan ketik terbuka): rapatkan */
@media (max-height: 640px) {
  .auth-card {
    padding: 22px 22px 20px;
  }

  .auth-sub {
    margin-bottom: 16px;
  }

  /* Ketiga detail produk adalah yang pertama dilepas saat tinggi
     layar mepet — formulirnya yang harus tetap muat, bukan promosinya */
  .auth-points {
    display: none;
  }

  .auth-brand-tagline {
    margin-bottom: 0;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .auth-input,
  .auth-btn,
  .btn_login_pin_type,
  .auth-reveal {
    transition-duration: 1ms !important;
  }
}