/* tampilan-umum-26okt — logo brand, menu ☰ HP, rapi HP / tablet / PC.
   Dimuat SETELAH app.css, jadi hanya menimpa yang perlu. */

/* ---------- Logo brand ---------- */
.brand{min-width:0}
.brand-logo{height:34px;width:auto;max-width:140px;object-fit:contain;border-radius:8px;display:block;flex:none}
.brand-nama{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Menu garis tiga (HP) ---------- */
.menu-hp{display:none}
@media (max-width:720px){
  .topbar .inner{flex-wrap:nowrap;height:60px;padding-top:0;padding-bottom:0;gap:12px}
  .brand{font-size:1.02rem}
  .menu-hp{
    display:inline-flex;flex:none;margin-left:auto;width:44px;height:44px;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    border:1px solid var(--line-kuat,rgba(255,255,255,.15));border-radius:11px;
    background:var(--surface-2,rgba(255,255,255,.065));cursor:pointer;padding:0;
  }
  .menu-hp span{display:block;width:20px;height:2px;border-radius:2px;background:var(--gold,#F0BE63);transition:transform .2s,opacity .2s}
  .topbar.buka .menu-hp span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .topbar.buka .menu-hp span:nth-child(2){opacity:0}
  .topbar.buka .menu-hp span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .topbar .nav{
    display:none;position:absolute;top:100%;left:0;right:0;width:auto;margin:0;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;
    padding:10px 16px 16px;background:rgba(8,9,13,.97);
    border-bottom:1px solid var(--line,rgba(255,255,255,.09));
    box-shadow:0 18px 40px -12px rgba(0,0,0,.8);
    max-height:calc(100vh - 60px);overflow-x:hidden;overflow-y:auto;
  }
  .topbar.buka .nav{display:flex}
  .topbar .nav a{padding:13px 14px;font-size:1rem;white-space:normal}
  .topbar .nav form{display:block !important}
  .topbar .nav form .btn,.topbar .nav a.btn{width:100%;justify-content:center;text-align:center;margin-top:6px}
}

/* ---------- Rapi di semua ukuran ---------- */
/* JANGAN gunakan overflow-x:clip atau overflow-x:hidden pada body/html karena mematikan position:sticky di Chrome */
html { overflow-x: hidden; }
body { min-height: 100vh; position: relative; }
.grid > *,.inline > *{min-width:0}
.card,.alert,.tiket{overflow-wrap:break-word}
input,select,textarea{max-width:100%}

/* Tablet */
@media (min-width:721px) and (max-width:1024px){
  .wrap{padding-left:24px;padding-right:24px}
  .topbar .nav a{padding:7px 9px;font-size:.86rem}
}

/* HP */
@media (max-width:720px){
  /* Tabel lebar digulir di dalam kotaknya, bukan mendorong halaman ke samping. */
  main :not(.table-wrap) > table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Huruf 16px mencegah iPhone memperbesar layar saat kolom diketuk. */
  input,select,textarea{font-size:16px}
  .inline{flex-wrap:wrap}
}

/* Sticky sidebar kartu produk (ML, MICO, dll) agar terkunci rapi di bawah header saat discroll */
@media (min-width: 881px) {
  .pm-produk {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    z-index: 10 !important;
  }
}


/* Password with Eye Visibility Toggle */
.pwd-field-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
.pwd-field-wrap input {
  padding-right: 44px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pwd-toggle-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  z-index: 3 !important;
  line-height: 1 !important;
}
.pwd-toggle-btn:hover,
.pwd-toggle-btn:focus {
  color: #f59e0b !important;
  background: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}