/* v231: iPhone Safari and installed Web App stability. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #eef4f7;
}

body.app-body:not(.login-body-v26):not(.print-mode) {
  min-height: 100vh;
  min-height: 100dvh;
  background: #eef4f7 !important;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: 100%;
  }

  body.app-body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #eef4f7 !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .app-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .app-header-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .container:not(.login-main-v26) {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.app-body.app-body:not(.print-mode) :where(
    input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea
  ) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  body.app-body.app-body:not(.print-mode) :where(input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"]) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: normal !important;
  }

  body.app-body.app-body:not(.print-mode) :where(input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"])::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
  }

  body.app-body.app-body:not(.login-body-v26):not(.print-mode) :where(
    .paper-grid-v70,
    .v155-form-grid,
    .v144-form-grid,
    .line-row-v70,
    .time-picker-grid,
    .picker-inline,
    .filter-grid,
    .reports-v35-search,
    .logs-v96-search-grid
  ) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.app-body.app-body:not(.login-body-v26):not(.print-mode) :where(.sticky-actions-v70, .v155-sticky-actions) {
    bottom: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.app-body.app-body:not(.login-body-v26):not(.print-mode) :where(.table-wrap, .logs-v32-table-wrap) {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .login-wrap,
  .login-body-v26,
  .login-main-v26,
  .kankyo-lightbox-v57__stage,
  .kankyo-lightbox-v58__stage,
  .kankyo-lightbox-v59__stage,
  .kt-photo-viewer-v66 {
    min-height: 100dvh !important;
    height: 100dvh !important;
  }

  .kankyo-lightbox-v60 {
    --photo-bottom: calc(100dvh - 72px);
    --photo-mid-y: 50dvh;
    --photo-height: 50dvh;
    --photo-bar-top: calc(100dvh - 62px);
    --photo-tool-top: calc(100dvh - 42px);
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .main-nav {
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 12px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (display-mode: standalone) {
  body.app-body:not(.login-body-v26):not(.print-mode) .app-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* Keep the brand row stable while only the navigation row scrolls horizontally. */
@media (max-width: 760px) {
  html,
  body.app-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .app-header,
  body.app-body:not(.login-body-v26):not(.print-mode) .app-header-inner,
  body.app-body:not(.login-body-v26):not(.print-mode) .brand-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .app-header {
    overflow: hidden !important;
    isolation: isolate;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .app-header-inner {
    overflow: hidden !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .main-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) :where(.page-head p, .page-head .muted) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* v241: keep report money details aligned on Android and iPhone. */
@media (max-width: 800px) {
  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    table-layout: auto !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table thead {
    display: none !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table tbody {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    border: 1px solid #cfdde7 !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(118px, 38%) minmax(0, 1fr) !important;
    width: 100% !important;
    border: 0 !important;
    border-bottom: 1px solid #cfdde7 !important;
    background: #fff !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table tbody tr:last-child {
    border-bottom: 0 !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    border: 0 !important;
    background: #fff !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table tbody td:first-child {
    border-right: 1px solid #cfdde7 !important;
    background: #eef4f7 !important;
    color: #17314d !important;
    font-weight: 1000 !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-money-table tbody td.money {
    text-align: right !important;
    font-size: 18px !important;
  }
}

/* v253: keep report thumbnails and their white cards on the same mobile box. */
@media (max-width: 800px) {
  body.app-body:not(.login-body-v26):not(.print-mode) .v198-photo-grid {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 2px 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-photo-grid > figure {
    display: flex !important;
    flex: 0 0 108px !important;
    flex-direction: column !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid #d8e4ec !important;
    border-radius: 8px !important;
    background: #fff !important;
    scroll-snap-align: start !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-photo-grid > figure > a {
    display: block !important;
    flex: 0 0 124px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 124px !important;
    overflow: hidden !important;
    background: #eef4f7 !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-photo-grid > figure img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 124px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  body.app-body:not(.login-body-v26):not(.print-mode) .v198-photo-grid > figure > figcaption {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 7px 9px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    color: #50677a !important;
    font-size: 11px !important;
    line-height: 17px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}