/* ======================================================================
   V15 APK READY BASELINE
   Native Android safe area, zero-scroll login, report preview, offline UI
   ====================================================================== */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
html.capacitor-native,html.capacitor-native body{overscroll-behavior:none;background:#eef2f7}
html.capacitor-native body{min-height:100dvh;padding:0}
html.capacitor-native .content{padding-bottom:calc(96px + var(--safe-bottom))}
html.capacitor-native .bottom-nav{padding-bottom:max(8px,var(--safe-bottom));min-height:calc(76px + var(--safe-bottom))}
html.capacitor-native button,html.capacitor-native a,html.capacitor-native input,html.capacitor-native select{touch-action:manipulation}

/* Login harus terlihat utuh saat APK pertama dibuka dan keyboard tertutup. */
html.capacitor-native #loginPage.login-page:not(.hidden){
  inset:0!important;
  width:100%!important;
  height:var(--app-visual-height,100dvh)!important;
  min-height:0!important;
  padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left))!important;
  overflow:hidden!important;
  align-items:center!important;
  justify-content:center!important;
}
html.capacitor-native #loginPage .login-card-v136{
  width:min(100%,980px)!important;
  height:min(720px,calc(var(--app-visual-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 16px))!important;
  max-height:calc(var(--app-visual-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 16px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
html.capacitor-native #loginPage .login-access-panel-v136{overflow:hidden!important}

@media(max-width:900px){
  html.capacitor-native #loginPage .login-card-v136{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    grid-template-columns:1fr!important;
    max-width:520px!important;
    border-radius:24px!important;
  }
  html.capacitor-native #loginPage .login-brand-panel-v136{
    min-height:0!important;
    padding:12px 16px 10px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    column-gap:13px!important;
    align-items:center!important;
    justify-items:start!important;
  }
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container{
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    gap:6px!important;
  }
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container img,
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container img:last-child{
    width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important;transform:none!important;
  }
  html.capacitor-native #loginPage .login-logo-separator{height:38px!important;margin:0 1px!important}
  html.capacitor-native #loginPage .login-brand-group{text-align:left!important;margin:0!important}
  html.capacitor-native #loginPage .login-brand-group .login-kicker{font-size:9.5px!important;letter-spacing:.9px!important}
  html.capacitor-native #loginPage .login-brand-group h1{font-size:clamp(14px,4vw,18px)!important;line-height:1.15!important;margin:2px 0!important;text-align:left!important}
  html.capacitor-native #loginPage .login-brand-group p{font-size:10px!important;line-height:1.2!important;margin:0!important;text-align:left!important}
  html.capacitor-native #loginPage .login-brand-message-v136{display:none!important}
  html.capacitor-native #loginPage .login-access-panel-v136{
    min-height:0!important;
    padding:12px 16px 11px!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  html.capacitor-native #loginPage .login-access-heading-v136{margin:0 0 8px!important}
  html.capacitor-native #loginPage .login-access-heading-v136>span{font-size:9px!important;margin:0 0 1px!important}
  html.capacitor-native #loginPage .login-access-heading-v136 h2{font-size:19px!important;line-height:1.1!important}
  html.capacitor-native #loginPage .login-access-heading-v136 p{font-size:10.5px!important;line-height:1.2!important;margin:3px 0 0!important}
  html.capacitor-native #loginPage .login-fields-v135{gap:3px!important}
  html.capacitor-native #loginPage .login-field-label{font-size:10.5px!important;margin-top:1px!important}
  html.capacitor-native #loginPage .login-input-shell,
  html.capacitor-native #loginPage .login-card-v136 input[type=text],
  html.capacitor-native #loginPage .login-card-v136 input[type=email],
  html.capacitor-native #loginPage .login-card-v136 input[type=password]{min-height:49px!important;height:49px!important;font-size:16px!important}
  html.capacitor-native #loginPage .login-primary-v135{min-height:47px!important;margin-top:7px!important;font-size:15px!important}
  html.capacitor-native #loginPage .login-divider-v135{margin:8px 0 6px!important}
  html.capacitor-native #loginPage .login-secondary-actions-v136{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  html.capacitor-native #loginPage .login-secondary-actions-v136 .login-action-row{grid-column:1/-1!important;gap:6px!important}
  html.capacitor-native #loginPage .login-card-v136 .btn-activation,
  html.capacitor-native #loginPage .login-card-v136 .btn-magic-login,
  html.capacitor-native #loginPage .login-card-v136 .btn-forgot-password{min-height:39px!important;height:39px!important;padding:6px 8px!important;margin:0!important;font-size:11.5px!important}
  html.capacitor-native #loginPage .member-login-help{margin:7px 0 2px!important;padding:6px 8px!important;font-size:9.5px!important;line-height:1.2!important}
  html.capacitor-native #loginPage .login-security-note{font-size:9px!important;margin:0!important}
  html.capacitor-native #loginPage .login-card-copyright{font-size:9px!important;margin-top:5px!important;padding-top:4px!important}
}

@media(max-width:420px) and (max-height:740px){
  html.capacitor-native #loginPage .login-brand-panel-v136{padding:8px 12px 7px!important}
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container img,
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container img:first-child,
  html.capacitor-native #loginPage .login-brand-panel-v136 .login-logo-container img:last-child{width:44px!important;height:44px!important}
  html.capacitor-native #loginPage .login-logo-separator{height:31px!important}
  html.capacitor-native #loginPage .login-access-panel-v136{padding:8px 13px!important}
  html.capacitor-native #loginPage .login-access-heading-v136 p,
  html.capacitor-native #loginPage .member-login-help,
  html.capacitor-native #loginPage .login-security-note{display:none!important}
  html.capacitor-native #loginPage .login-card-copyright{margin-top:3px!important}
  html.capacitor-native #loginPage .login-input-shell,
  html.capacitor-native #loginPage .login-card-v136 input[type=text],
  html.capacitor-native #loginPage .login-card-v136 input[type=email],
  html.capacitor-native #loginPage .login-card-v136 input[type=password]{min-height:46px!important;height:46px!important}
  html.capacitor-native #loginPage .login-primary-v135{min-height:43px!important}
  html.capacitor-native #loginPage .login-card-v136 .btn-activation,
  html.capacitor-native #loginPage .login-card-v136 .btn-magic-login,
  html.capacitor-native #loginPage .login-card-v136 .btn-forgot-password{min-height:36px!important;height:36px!important}
}

/* Saat keyboard terbuka, fokus pada kolom dan izinkan pergeseran kecil agar input tidak tertutup. */
html.capacitor-native.keyboard-open #loginPage.login-page:not(.hidden){align-items:flex-start!important;overflow:auto!important}
html.capacitor-native.keyboard-open #loginPage .login-card-v136{height:auto!important;max-height:none!important;margin:4px auto!important;overflow:visible!important}
html.capacitor-native.keyboard-open #loginPage .login-brand-panel-v136{display:none!important}
html.capacitor-native.keyboard-open #loginPage .login-access-panel-v136{overflow:visible!important}

/* Offline indicator. */
.native-offline-banner{position:fixed;left:50%;top:calc(var(--safe-top) + 10px);transform:translateX(-50%);z-index:1000200;width:min(92vw,520px);display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:13px;background:#7f1d1d;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.25);font-size:12px}
.native-offline-banner strong{white-space:nowrap}.native-offline-banner span{opacity:.9}.native-offline-banner.hidden{display:none!important}
html.is-offline button[type=submit]:not(.offline-allowed){filter:saturate(.55)}

/* Native report preview replacing popup/window.print in APK. */
.native-report-modal{position:fixed;inset:0;z-index:1000300;background:#dfe6ef;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
.native-report-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);background:#fff}
.native-report-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;background:#071a37;color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.22)}
.native-report-toolbar>div:first-child{display:grid;min-width:0}.native-report-toolbar small{font-size:9px;letter-spacing:1px;color:#bfd7f5}.native-report-toolbar strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}.native-report-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.native-report-actions button{min-height:38px;padding:7px 11px;border-radius:9px;font-size:11px}.native-report-frame-wrap{min-height:0;padding:8px;background:#cbd5e1;overflow:hidden}.native-report-frame-wrap iframe{width:100%;height:100%;border:0;background:#fff;border-radius:6px}
body.native-report-open{overflow:hidden!important}
@media(max-width:700px){.native-report-toolbar{align-items:flex-start;flex-direction:column;padding:8px 10px}.native-report-toolbar strong{max-width:90vw}.native-report-actions{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.native-report-actions button{padding:5px 4px;font-size:9.5px;min-height:36px}.native-report-frame-wrap{padding:4px}}

@media print{
  .native-report-toolbar{display:none!important}
  .native-report-modal,.native-report-shell,.native-report-frame-wrap{position:static!important;display:block!important;padding:0!important;background:#fff!important}
  .native-report-frame-wrap iframe{width:100%!important;height:100vh!important}
}