/* Touch screens (phones and tablets). Loaded last so it wins over the page stylesheets. Uses the tokens in app.css.
   - Fields are 16px: iOS Safari zooms the whole page when a field smaller than 16px gets focus.
   - Anything you tap is at least 40px tall. Where a bigger box would push the layout around
     (breadcrumbs, checkboxes in table cells), padding plus a matching negative margin keeps the layout the same.
   any-pointer: coarse also covers an iPad with a trackpad or keyboard attached. */

.check-hit { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; }

@media (any-pointer: coarse) {
  /* ---------- Fields ---------- */
  input[type=text], input[type=number], input[type=date], input[type=search], input:not([type]), select, textarea,
  .sheet .input-cell input, .sheet .input-cell select, .sheet.compact .input-cell input,
  .amt-edit input, .cr-notes, .ci-gl-table .ci-donor input, .cf-roll-in input { font-size: 16px; }
  .sheet .input-cell input, .sheet .input-cell select, .sheet .ci-fund-line select,
  .amt-edit input, .ci-gl-table .ci-donor input, .cf-roll-in input { height: 40px; }
  /* iOS draws an empty date field shorter than the others and centers its text */
  input[type=date] { min-height: 40px; line-height: 38px; text-align: left; }
  input[type=date]::-webkit-date-and-time-value { text-align: left; }

  /* ---------- Buttons and text links ---------- */
  .btn, .cf-open-btn, .ci-add-line { min-height: 40px; }
  .link-btn { display: inline-flex; align-items: center; min-height: 40px; }
  .cf-chip, .cr-tab, .levels a { min-height: 40px; }
  .icon-btn, .pencil-btn, .ci-split-line .icon-btn { width: 40px; height: 40px; }
  .amt-edit .pencil-btn { margin: -7px -8px -7px 0; }
  .ci-links .row { min-height: 44px; }

  /* ---------- Header, breadcrumbs, footer: bigger targets, same layout ---------- */
  .brand { min-height: 44px; }
  .crumbs { margin-top: -9px; margin-bottom: -9px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-links a, .footer-links .link-btn { display: inline-flex; align-items: center; min-height: 40px; }

  /* ---------- A checkbox alone in a table cell: its label is a 44px target ---------- */
  .check-hit { min-width: 44px; min-height: 44px; margin: -13px; }
  .rec-table .check-hit { margin-right: -12px; }
}

/* Tablets (journal entry grid as a table): with More columns on, the grid is too tight for a 16px class name
   like "Building Fund". Trim Description and Name a little and keep the class field wide enough. */
@media (any-pointer: coarse) and (min-width: 901px) {
  .je-table .class-select { min-width: 150px; }
  .je-table.show-more .c-amt { width: 120px; }
  .je-table.show-more .c-desc { width: 140px; }
  .je-table.show-more .c-name { width: 110px; }
  /* Entries with a vendor: the Name column needs room for a real vendor name at 16px. */
  .je-table.show-name .c-amt { width: 120px; }
  .je-table.show-name .c-name { width: 184px; }
  .je-table.show-name.show-more .c-desc { width: 110px; }
  .je-table.show-name .c-acct { min-width: 190px; }
}