/*
 * Tablet Friendly 1.0.1
 * Sizing and touch behavior only: no colors, fonts or brand styles, so the portal theme modules keep their look.
 * Every rule is scoped to html.t31tab (added by the module's head script), so turning the module off removes it all.
 * html.t31tab-on   = tablet mode (touch screens 744 to 1400 px wide, or any window 744 to 1024 px wide)
 * html.t31tab-portrait / -landscape, html.t31tab-big (extra-large pages), html.t31tab-standalone (home-screen app)
 * html.t31tab-hasbar = a fixed Save bar is on the page, html.t31tab-hastab = a phone-style tab bar is fixed at the bottom too.
 * The script sets --t31tab-top / --t31tab-bot (fixed bars at the top and bottom of the screen), --t31tab-bar (Save bar height)
 * and --t31tab-tabbar (tab bar height) on html.
 * :not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) is expanded at build time to skip areas owned by other modules (their app shells and [data-t31tab-skip]).
 */

@media screen {

  /* ---------------------------------------------------------------- 0. sidebar folded before first paint */
  html.t31tab-presb:not(.t31-console-on) body:not(.show-sidebar):not(.page-small):not(.t31-console-on) #menu { margin-left: -230px; }
  html.t31tab-presb:not(.t31-console-on) body:not(.page-small):not(.t31-console-on) #wrapper,
  html.t31tab-presb:not(.t31-console-on) body:not(.page-small):not(.t31-console-on) #header { margin-left: 0; }
  html.t31tab-presb:not(.t31-console-on) body:not(.page-small):not(.t31-console-on) .btn-bottom-toolbar { margin-left: 0; width: 100%; }

  /* ---------------------------------------------------------------- 1. tap targets (44 x 44 minimum) */
  html.t31tab-on { --t31tab-tap: 44px; -webkit-tap-highlight-color: rgba(0, 0, 0, .08); }
  html.t31tab-on.t31tab-big { --t31tab-tap: 52px; }

  /* Row actions under the first cell: always visible, each one finger-sized. */
  html.t31tab-on table .row-options:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { position: static; left: auto; right: auto; padding-top: 0; white-space: nowrap; }
  html.t31tab-on table .row-options a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--t31tab-tap); min-width: var(--t31tab-tap); padding: 0 8px; vertical-align: middle;
    touch-action: manipulation;
  }
  html.t31tab-on table .row-options a:first-child:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { margin-left: -8px; }

  /* Buttons: same look, taller hit area. Line height plus padding keeps text centered without changing display. */
  html.t31tab-on .btn:not(.btn-block):not(.btn-link):not(.btn-lg):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .btn.btn-block:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    min-height: var(--t31tab-tap); min-width: var(--t31tab-tap); line-height: 24px; padding-top: 9px; padding-bottom: 9px; touch-action: manipulation;
  }
  html.t31tab-on.t31tab-big .btn:not(.btn-link):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { line-height: 32px; padding-top: 9px; padding-bottom: 9px; }
  html.t31tab-on .btn-icon:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .btn.btn-xs:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .btn.btn-sm:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .input-group-btn > .btn:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .input-group-addon:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: var(--t31tab-tap); }
  html.t31tab-on .btn-icon:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); align-items: center; }
  html.t31tab-on table .btn-icon:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { margin-top: 2px; margin-bottom: 2px; }
  html.t31tab-on .close:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on button.close:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); display: inline-flex; align-items: center; justify-content: center; opacity: .6;
  }
  html.t31tab-on .modal-header .close:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { margin: -12px -12px -12px 0; }

  /* Dropdown toggles and menus (Bootstrap and bootstrap-select). */
  html.t31tab-on .dropdown-toggle:not(.btn):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { display: inline-flex; align-items: center; min-height: var(--t31tab-tap); min-width: var(--t31tab-tap); }
  html.t31tab-on .dropdown-menu > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .bootstrap-select .dropdown-menu li a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    padding-top: 10px; padding-bottom: 10px; line-height: 24px; min-height: var(--t31tab-tap);
  }
  html.t31tab-on .bootstrap-select .bs-actionsbox .btn:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); }

  /* Pagination and table controls. */
  html.t31tab-on .pagination > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .pagination > li > span:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
  }
  html.t31tab-on .dataTables_length select:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .dataTables_filter input:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .dt-page-jump select:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); }
  html.t31tab-on .dataTables_wrapper .dt-buttons .btn:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: var(--t31tab-tap); }
  html.t31tab-on table.dataTable thead th:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { padding-top: 12px; padding-bottom: 12px; }

  /* Checkboxes and radios (Perfex awesome-bootstrap style): bigger box, 44 x 44 invisible hit area centered on it. */
  html.t31tab-on .checkbox label:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *))::before { width: 20px; height: 20px; }
  html.t31tab-on .checkbox label:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *))::after { font-size: 13px; width: 20px; height: 20px; padding-left: 3px; padding-top: 2px; }
  html.t31tab-on .checkbox label:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .radio label:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 24px; padding-left: 8px; line-height: 22px; }
  html.t31tab-on .checkbox input[type="checkbox"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .checkbox input[type="radio"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .radio input[type="radio"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    width: var(--t31tab-tap); height: var(--t31tab-tap); margin-left: -32px; margin-top: -10px; cursor: pointer;
  }
  html.t31tab-on table .checkbox:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 24px; margin-top: 0; margin-bottom: 0; }
  html.t31tab-on table.dataTable .onoffswitch:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { transform: scale(1.25); transform-origin: left center; margin-top: 6px; margin-bottom: 6px; }

  /* Tabs and pills. */
  html.t31tab-on .nav-tabs > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .nav-pills > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); min-width: var(--t31tab-tap); text-align: center; padding-top: 12px; padding-bottom: 12px; touch-action: manipulation; }
  html.t31tab-on .horizontal-scrollable-tabs .scroller:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); display: flex; align-items: center; justify-content: center; }

  /* Sidebar, setup menu and header. */
  html.t31tab-on #menu ul.nav > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on #setup-menu ul.nav > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); padding-top: 10px; padding-bottom: 10px; }
  html.t31tab-on #menu ul.nav li .nav-second-level li a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on #setup-menu ul.nav li .nav-second-level li a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); padding-top: 11px; padding-bottom: 11px; }
  html.t31tab-on #header .hide-menu:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  html.t31tab-on #header .navbar-nav > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); display: flex; align-items: center; justify-content: center; }

  /* Top bar must fit on one line from 744 to 1024 wide: the search box gives up width first, the icons keep 44 px,
     side spacing is tighter and nothing wraps (a wrapped icon would be hidden under the page). */
  html.t31tab-on #header .hide-menu:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { margin-left: 6px; margin-right: 6px; margin-top: 7px; }
  html.t31tab-on #header nav > .tw-flex:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { flex-wrap: nowrap; min-width: 0; }
  html.t31tab-on #header nav > .tw-flex > .tw-flex-1:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { flex: 1 1 auto; min-width: 120px; }
  html.t31tab-on #header #top_search:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 0; margin-right: 6px; }
  html.t31tab-on #header #search_input:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { width: 100%; min-width: 0; }
  html.t31tab-on #header .navbar-nav.navbar-right:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { display: flex; flex-wrap: nowrap; flex-shrink: 0; margin-right: 8px; }
  html.t31tab-on #header .navbar-nav.navbar-right > li:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { float: none; flex: 0 0 auto; }

  /* Customer area navigation. */
  html.t31tab-side-clients.t31tab-on .navbar-nav > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); display: flex; align-items: center; }

  /* ---------------------------------------------------------------- 2. tables */
  html.t31tab-on .dataTables_wrapper .table-responsive:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .table-responsive:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* Wide tables (wider than their box, marked by the script): header and first column stay in view. */
  html.t31tab-on .table-responsive.t31tab-wide:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    max-height: calc(100vh - 140px);
    max-height: max(300px, calc(100dvh - var(--t31tab-top, 0px) - var(--t31tab-bot, 0px) - 24px));
    overflow: auto; position: relative;
  }
  /* Some page shells set overflow: visible !important on .table-responsive (Twelve31 console sales pages), which made the
     whole page scroll sideways. A wide table must scroll inside its own box. */
  html.t31tab-on #wrapper .table-responsive.t31tab-wide:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { overflow: auto !important; max-width: 100%; }
  html.t31tab-on .table-responsive.t31tab-wide > table > thead > tr > th:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    position: sticky; top: 0; z-index: 3; background-color: var(--t31tab-bg, #fff);
    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .12);
  }
  html.t31tab-on .table-responsive.t31tab-wide > table > thead > tr > th.t31tab-cb:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .table-responsive.t31tab-wide > table > tbody > tr > td.t31tab-cb:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    position: sticky; left: 0; z-index: 2; background-color: var(--t31tab-bg, #fff);
  }
  html.t31tab-on .table-responsive.t31tab-wide > table > thead > tr > th.t31tab-key:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .table-responsive.t31tab-wide > table > tbody > tr > td.t31tab-key:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    position: sticky; left: var(--t31tab-keyleft, 0px); z-index: 2; background-color: var(--t31tab-bg, #fff);
    white-space: normal; min-width: 180px; max-width: 40vw;
  }
  html.t31tab-on .table-responsive.t31tab-wide > table > thead > tr > th.t31tab-key:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .table-responsive.t31tab-wide > table > thead > tr > th.t31tab-cb:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { z-index: 4; }
  html.t31tab-on .table-responsive.t31tab-wide.t31tab-more-l > table > tbody > tr > td.t31tab-key:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .table-responsive.t31tab-wide.t31tab-more-l > table > thead > tr > th.t31tab-key:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .28);
  }
  html.t31tab-on .table-responsive.t31tab-wide.t31tab-more-r:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    box-shadow: inset -10px 0 10px -10px rgba(15, 23, 42, .30);
  }
  /* Wide tables scroll sideways instead of squeezing every cell onto several lines. */
  html.t31tab-on .table-responsive.t31tab-wide > table > tbody > tr > td:not(.t31tab-key):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { white-space: nowrap; }
  /* A dropdown is open inside the table: let it out of the scroll box until it closes. */
  html.t31tab-on .table-responsive.t31tab-wide.t31tab-dd:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { overflow: visible; max-height: none; }
  html.t31tab-on #wrapper .table-responsive.t31tab-wide.t31tab-dd:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { overflow: visible !important; }

  /* Totals row on list pages (Paid / Past Due / Outstanding): wraps onto a second line instead of running off the page. */
  html.t31tab-on #wrapper :is(#invoices_total, #estimates_total):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 0; max-width: 100%; }
  html.t31tab-on #wrapper :is(#invoices_total, #estimates_total) .tw-relative > div:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

  /* Portrait: hide low-value columns on common lists (marked by the script from the header text). */
  html.t31tab-on.t31tab-portrait table .t31tab-lv:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { display: none; }

  /* ---------------------------------------------------------------- 3. forms */
  /* 16px text in fields stops Safari zooming in when a field is tapped. */
  html.t31tab-on input.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on select.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on textarea.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .dataTables_filter input:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .bootstrap-select .bs-searchbox input:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on .tagit input:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on input[type="text"]:not([class]):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on input[type="search"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { font-size: 16px; }
  html.t31tab-on input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on select.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: var(--t31tab-tap); }
  html.t31tab-on .input-group-addon:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { font-size: 15px; }

  /* Save bars: stay visible above the on-screen keyboard and clear of the home indicator. */
  html.t31tab-on .btn-bottom-toolbar:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    transform: translateY(calc(-1 * var(--t31tab-kb, 0px)));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transition: transform .15s ease-out;
  }
  html.t31tab-on .btn-bottom-toolbar .btn:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 96px; }
  /* The fixed Save bar never covers the last fields: the page gets bottom room equal to the bar height. */
  /* (On the page content, not the body: Perfex gives the body a fixed height, so body padding would not add scroll room.
     !important because some page shells set this padding with !important.) */
  html.t31tab-on.t31tab-hasbar #wrapper > .content { padding-bottom: calc(var(--t31tab-bar, 72px) + var(--t31tab-tabbar, 0px) + 16px) !important; }
  /* A phone-style tab bar is also fixed at the bottom (Frisco below 769 px, Twelve31 console): the Save bar sits on top of it. */
  html.t31tab-on.t31tab-hastab .btn-bottom-toolbar:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { bottom: var(--t31tab-tabbar, 0px); }
  /* Perfex's phone layout (below 769 px) moves the Save bar to the left edge but keeps it 230 px short: use the full width. */
  html.t31tab-on body.page-small .btn-bottom-toolbar:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { width: 100%; margin-left: 0; }
  /* Split Save button: the menu half keeps a finger-sized width and its arrow is always visible.
     (Some themes paint this half white while the arrow stays white, which left a blank button.) */
  html.t31tab-on .btn-bottom-toolbar .btn-group > .dropdown-toggle:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: var(--t31tab-tap); padding-left: 14px; padding-right: 14px; }
  html.t31tab-on .btn-bottom-toolbar .dropdown-toggle .caret:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    border-right-color: currentColor; border-bottom-color: currentColor; border-width: 0 2px 2px 0 !important; width: 8px; height: 8px;
  }
  html.t31tab-on .modal.in .modal-footer:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
    position: sticky; bottom: var(--t31tab-kb, 0px); z-index: 5; background-color: inherit;
    border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
  }
  html.t31tab-on .modal .modal-content:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { background-clip: border-box; }

  /* ---------------------------------------------------------------- 4. extra-large pages (order entry, items, counts, recipes) */
  html.t31tab-on.t31tab-big .btn:not(.btn-link):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { font-size: 16px; padding-left: 18px; padding-right: 18px; }
  html.t31tab-on.t31tab-big .btn-icon:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 52px; min-height: 52px; font-size: 17px; }
  html.t31tab-on.t31tab-big .btn-bottom-toolbar .btn:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 56px; min-width: 128px; font-size: 17px; }
  html.t31tab-on.t31tab-big .btn-bottom-toolbar .btn-group > .dropdown-toggle:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 56px; }
  html.t31tab-on.t31tab-big input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on.t31tab-big select.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 52px; font-size: 17px; }
  html.t31tab-on.t31tab-big table.items input.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 52px; font-size: 17px; }
  html.t31tab-on.t31tab-big table.items textarea.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 52px; font-size: 16px; }
  html.t31tab-on.t31tab-big table.items input[type="number"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 80px; }
  html.t31tab-on.t31tab-big table.items .btn:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 52px; min-height: 52px; }
  html.t31tab-on.t31tab-big .dropdown-menu > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on.t31tab-big .bootstrap-select .dropdown-menu li a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { padding-top: 14px; padding-bottom: 14px; font-size: 16px; }
  html.t31tab-on.t31tab-big .pagination > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab-on.t31tab-big .pagination > li > span:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-width: 52px; min-height: 52px; font-size: 16px; }
  html.t31tab-on.t31tab-big .nav-tabs > li > a:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { min-height: 52px; font-size: 16px; }

  /* ---------------------------------------------------------------- 4b. narrow top bar (1024 wide or less) */
  @media (max-width: 1024px) {
    /* A text link in the top bar (the Settings link some themes add) becomes a 44 px gear icon. The text stays for screen readers. */
    html.t31tab-on #header .navbar-nav.navbar-right > li:not(.icon) > a[href$="/settings"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) {
      font-size: 0; width: var(--t31tab-tap); padding-left: 0; padding-right: 0;
    }
    html.t31tab-on #header .navbar-nav.navbar-right > li:not(.icon) > a[href$="/settings"]:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *))::before {
      content: ""; display: block; width: 20px; height: 20px; background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.33 4.32c.43-1.76 2.92-1.76 3.35 0a1.72 1.72 0 0 0 2.57 1.07c1.54-.94 3.31.83 2.37 2.37a1.72 1.72 0 0 0 1.06 2.57c1.76.43 1.76 2.92 0 3.35a1.72 1.72 0 0 0-1.07 2.57c.94 1.54-.83 3.31-2.37 2.37a1.72 1.72 0 0 0-2.57 1.06c-.43 1.76-2.92 1.76-3.35 0a1.72 1.72 0 0 0-2.57-1.07c-1.54.94-3.31-.83-2.37-2.37a1.72 1.72 0 0 0-1.06-2.57c-1.76-.43-1.76-2.92 0-3.35a1.72 1.72 0 0 0 1.07-2.57c-.94-1.54.83-3.31 2.37-2.37 1 .61 2.3.07 2.57-1.06z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.33 4.32c.43-1.76 2.92-1.76 3.35 0a1.72 1.72 0 0 0 2.57 1.07c1.54-.94 3.31.83 2.37 2.37a1.72 1.72 0 0 0 1.06 2.57c1.76.43 1.76 2.92 0 3.35a1.72 1.72 0 0 0-1.07 2.57c.94 1.54-.83 3.31-2.37 2.37a1.72 1.72 0 0 0-2.57 1.06c-.43 1.76-2.92 1.76-3.35 0a1.72 1.72 0 0 0-2.57-1.07c-1.54.94-3.31-.83-2.37-2.37a1.72 1.72 0 0 0-1.06-2.57c-1.76-.43-1.76-2.92 0-3.35a1.72 1.72 0 0 0 1.07-2.57c-.94-1.54.83-3.31 2.37-2.37 1 .61 2.3.07 2.57-1.06z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    }
  }

  /* ---------------------------------------------------------------- 4c. Twelve31 console shell (t31-console-on) */
  /* Sizes only, so the console keeps its look: top bar icons, the menu button, menu rows and the Today filter tabs get 44 px. */
  /* The console sizes its top bar icons with an id and !important, so these need the same weight. */
  html.t31tab-on.t31-console-on :is(.t31a-tools, .t31-console-tools) :is(#top-timers, a.open_newsfeed, .notifications-icon, .t31a-tool > a, .t31-console-tool > a, .t31a-tool > li > a, .t31-console-tool > li > a) {
    width: var(--t31tab-tap) !important; height: var(--t31tab-tap) !important; max-width: none !important; max-height: none !important;
  }
  html.t31tab-on.t31-console-on :is(.t31a-tool, .t31-console-tool) { min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); }
  html.t31tab-on.t31-console-on :is(.t31a-tools, .t31-console-tools) { gap: 0; }
  html.t31tab-on.t31-console-on :is(.t31a-burger, .t31-console-burger) { min-width: var(--t31tab-tap); min-height: var(--t31tab-tap); }
  html.t31tab-on.t31-console-on :is(.t31a-nav-link, .t31-console-nav-link) { height: auto; min-height: var(--t31tab-tap); }
  html.t31tab-on.t31-console-on .t31x-pins a { min-height: 40px; }
  html.t31tab-on.t31-console-on #t31-app .t31a-ck-row { min-height: var(--t31tab-tap); }
  html.t31tab-on.t31-console-on .t31a-ck-seg { min-height: 40px; padding-left: 14px; padding-right: 14px; touch-action: manipulation; }
  /* The key numbers strip turns into a swipe row below 901 px, which cut the second card in half on an iPad in portrait.
     Tablets have room for the 2 x 2 strip that T31 Look itself shows from 901 to 1180 px (same values as T31 Look). */
  @media (max-width: 900px) {
    html.t31tab-on.t31x .t31x-kpis {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; overflow: hidden; scroll-snap-type: none;
      margin: 0 0 26px; padding: 6px; border-radius: 20px;
      background: radial-gradient(600px 220px at 85% -40%, rgba(111, 143, 240, .28), transparent 60%), radial-gradient(500px 200px at 0% 120%, rgba(211, 178, 112, .14), transparent 60%), linear-gradient(180deg, #13223D, #0A1426);
      box-shadow: var(--x-sh-3);
    }
    html.t31tab-on.t31x .t31x-kpi { flex: none; background: none; box-shadow: none; }
    html.t31tab-on.t31x .t31x-kpi:hover { background: rgba(255, 255, 255, .035); }
    html.t31tab-on.t31x .t31x-kpi + .t31x-kpi::before { display: block; }
    html.t31tab-on.t31x .t31x-kpi:nth-child(3)::before { display: none; }
  }

  /* ---------------------------------------------------------------- 5. home-screen app */
  html.t31tab-standalone body { padding-top: calc(0px + env(safe-area-inset-top, 0px)); }
  html.t31tab .t31tab-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 44px; min-height: 44px; padding: 0 10px; color: inherit; text-decoration: none;
    font-size: 15px; font-weight: 600; touch-action: manipulation;
  }
  html.t31tab .t31tab-back > span:first-child { font-size: 26px; line-height: 1; margin-top: -3px; }
  html.t31tab .t31tab-back.t31tab-back-in { float: left; height: 100%; }
  html.t31tab .t31tab-back.t31tab-back-float {
    position: fixed; z-index: 1035; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(8px + env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, .94); border-radius: 22px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); color: #111827;
  }
}

/* ---------------------------------------------------------------- 6. any touch screen, any width */
@media screen and (pointer: coarse) {
  html.t31tab table .row-options:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { position: static; left: auto; right: auto; }
  html.t31tab input.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab select.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab textarea.form-control:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)),
  html.t31tab .dataTables_filter input:not(:where(#t31-app *, .t31a-nav *, .t31a-tools *, [data-t31tab-skip] *)) { font-size: 16px; }
}

@media print {
  html.t31tab .t31tab-back { display: none !important; }
}