/* STEP 26: Mobile/tablet adjustments are centralized here. */

html, body {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body.tablet-app {
  margin: 0;
  padding: 0;
}

body.tablet-app input,
body.tablet-app select,
body.tablet-app textarea,
body.tablet-app button {
  font-size: 18px;
}

body.tablet-app input,
body.tablet-app select,
body.tablet-app textarea {
  min-height: 46px;
  box-sizing: border-box;
}

body.tablet-app button,
body.tablet-app .btn,
body.tablet-app a.btn {
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
}

body.tablet-app .card,
body.tablet-app .panel,
body.tablet-app .box,
body.tablet-app .widget {
  border-radius: 16px;
}

body.tablet-app table td,
body.tablet-app table th {
  padding: 10px 8px;
  vertical-align: middle;
}

body.tablet-app .main,
body.tablet-app .content,
body.tablet-app .page,
body.tablet-app .container,
body.tablet-app .page-shell {
  max-width: 100%;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1366px) {
  body.tablet-app {
    font-size: 19px;
  }

  body.tablet-app h1 { font-size: 30px; }
  body.tablet-app h2 { font-size: 26px; }
  body.tablet-app h3 { font-size: 22px; }

  body.tablet-app .content,
  body.tablet-app .main,
  body.tablet-app .page,
  body.tablet-app .page-shell {
    padding: 14px;
  }
}

@media (orientation: landscape) and (min-width: 1024px) {
  body.tablet-app .content,
  body.tablet-app .main,
  body.tablet-app .page,
  body.tablet-app .page-shell {
    padding-left: 18px;
    padding-right: 18px;
  }
}