/* Mobile ergonomics for the live Jak Sanggar application. */
:root { --jak-viewport-height: 100dvh; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: max(16px, env(safe-area-inset-top)); }
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
.jak-mobile-portal > * { min-width: 0; }
@media (max-width: 1279px) {
  .jak-mobile-portal { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .jak-mobile-portal #media > div:first-child { flex-wrap: wrap; }
  .jak-mobile-portal #media > div:last-child { height: auto; min-height: 44px; flex-wrap: wrap; padding-block: 4px; }
}
.jak-install-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: calc(var(--jak-viewport-height) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto;
  padding: 24px;
  border: 1px solid #d6e4da;
  border-radius: 18px;
  background: #fff;
  color: #26384b;
  box-shadow: 0 18px 60px #031a3f30;
  overflow-y: auto;
  overscroll-behavior: contain;
  font: 16px/1.6 system-ui, sans-serif;
}
.jak-install-dialog::backdrop { background: #031a3f99; }
.jak-install-dialog h2 { margin: 12px 0; padding-right: 30px; color: #031a3f; font: 700 24px/1.3 Georgia, serif; }
.jak-install-dialog p { margin: 12px 0; }
.jak-install-dialog ol { margin: 16px 0; padding-left: 24px; list-style: decimal; }
.jak-install-dialog li { padding-left: 4px; margin: 12px 0; }
.jak-install-close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 8px; color: #26384b; background: #f6faf7; font-size: 24px; }
.jak-install-action { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; padding: 10px 16px; border-radius: 10px; background: #005a2b; color: #fff; font-weight: 650; cursor: pointer; }
.jak-install-dialog details { margin-top: 20px; border-top: 1px solid #d6e4da; padding-top: 12px; }
.jak-install-dialog summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: #005a2b; }
.jak-install-dialog details a { display: inline-flex; align-items: center; min-height: 44px; color: #005a2b; text-decoration: underline; }
.jak-install-dialog :is(button,a,summary):focus-visible { outline: 3px solid #b18936; outline-offset: 3px; }
html:has(.jak-install-dialog[open]) { overflow: hidden; }
.jak-offline-notice {
  position: fixed; z-index: 70; bottom: calc(12px + env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  max-width: 440px; margin: 0 auto; padding: 12px 16px;
  border: 1px solid #dcc285; border-radius: 12px; background: #fff7df; color: #5b410d;
  box-shadow: 0 4px 18px #031a3f15; font: 14px/1.5 system-ui, sans-serif; pointer-events: none;
}
.jak-offline-notice[hidden] { display: none; }
body:has(.dashboard-bottom-nav) .jak-offline-notice { bottom: calc(82px + env(safe-area-inset-bottom)); }
@media (max-width: 767px), (pointer: coarse) {
  :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),textarea,select,[role='combobox']) {
    font-size: max(16px, 1rem) !important;
  }
  :is(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),select,[role='combobox']) { min-height: 44px; }
  textarea { scroll-margin-block: 24px; }
  input { scroll-margin-block: 24px; }
  button:not([role='checkbox']):not([role='radio']):not([role='switch']), input[type='submit'], input[type='button'] { min-height: 44px; }
  button[aria-label]:not([role='checkbox']):not([role='radio']):not([role='switch']) { min-width: 44px; }
  #masuk a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  #masuk button[aria-label*='kata sandi'] { right: 0; }
  #masuk input[autocomplete='current-password'] { padding-right: 48px; }
  .leaflet-container input { max-width: 100%; }
  [role='dialog']:not(.jak-install-dialog) {
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(var(--jak-viewport-height) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  [data-testid='android-help-modal'],[data-testid='ios-help-modal'] { overflow-y: auto; }
  .dashboard-header { top: env(safe-area-inset-top); }
  .dashboard-header-actions>:is(a,button),.dashboard-header-actions>div>button { min-height: 44px; min-width: 44px; }
  .dashboard-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .dashboard-bottom-nav :is(a,button) > span:last-child { max-width:100%; padding-inline:3px; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; text-align:center; }
  .dashboard-bottom-nav :is(a,button) { min-height:80px; }
  .dashboard-main { padding-bottom:calc(96px + env(safe-area-inset-bottom)); min-width:0; max-width:100%; overflow-x:hidden; }
  .dashboard-main [role='tablist'] { max-width:100%; height:auto; min-height:44px; flex-wrap:wrap; justify-content:flex-start; row-gap:4px; }
  .dashboard-main [role='tab'] { white-space:normal; }
  .dashboard-main .flex:has(> input[type='date'],> input[type='month']) { max-width:100%; min-width:0; flex-wrap:wrap; }
  .dashboard-main .flex:has(> input[type='date'],> input[type='month']) > div { min-width:0; flex:1 1 140px; }
  .dashboard-main :is(input[type='date'],input[type='month']) { max-width:100%; min-width:0; }
  .dashboard-drawer { max-height: var(--jak-viewport-height); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .dashboard-profile-menu { top: calc(72px + env(safe-area-inset-top)); }
  .jak-sync-status { right: max(12px, env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .register-choice header + div { grid-template-columns: minmax(0, 1fr); }
  .jak-install-dialog { padding: 20px; }
  .dashboard-header-inner { padding-inline:8px; gap:4px; flex-wrap:wrap; }
  .dashboard-header-actions { max-width:100%; min-width:0; flex-wrap:wrap; gap:2px; }
}
@media (prefers-reduced-motion: reduce) {
  html, .jak-modern main { scroll-behavior: auto !important; }
  .jak-install-dialog { animation: none; }
}
@media print { .jak-install-dialog,.jak-offline-notice { display: none !important; } }
.jak-push-control{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;min-height:44px;max-width:calc(100vw - 24px);padding:8px 14px;border:1px solid #005a2b;border-radius:24px;background:#fff;color:#005a2b;font-size:14px;font-weight:700;box-shadow:0 3px 14px #031a3f22}
.jak-push-control[hidden]{display:none}
.jak-push-control.jak-push-inline{position:static;display:inline-flex;align-items:center;margin:12px 16px 0;max-width:calc(100% - 32px);box-shadow:none}
.jak-push-control.jak-push-inline[hidden]{display:none}
body:has(.dashboard-bottom-nav)>.jak-push-control{bottom:calc(82px + env(safe-area-inset-bottom))}
.jak-push-actions{display:flex;gap:8px;flex-wrap:wrap}
.jak-push-actions>button{min-height:44px;padding:8px 12px;border:1px solid #005a2b;border-radius:8px}
.jak-push-actions>button[hidden]{display:none}
.jak-push-dialog [role=status]{font-size:14px;min-height:2.5em;color:#26384b}
@media print{.jak-push-control{display:none!important}}