/* Tablet workspace: presentation only. Keep real table semantics, existing
   actions, column visibility and record forms. Phone and desktop are separate. */
@media screen {
  html.tablet-app-mode body.bb-app-active {
    --tablet-canvas: #f4f6fa;
    --tablet-surface: #fff;
    --tablet-soft: #f8fafc;
    --tablet-border: #dfe5ee;
    --tablet-ink: #203047;
    --tablet-muted: #64748b;
    --tablet-accent: #2563c9;
    color: var(--tablet-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--tablet-canvas);
  }
  html.tablet-app-mode[data-theme="dark"] body.bb-app-active {
    --tablet-canvas: #111820;
    --tablet-surface: #1a232e;
    --tablet-soft: #202c39;
    --tablet-border: #344252;
    --tablet-ink: #edf2f8;
    --tablet-muted: #a8b7c9;
    --tablet-accent: #8abaff;
  }
  html.tablet-app-mode body.bb-app-active #app-shell {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: clip visible !important;
    background: var(--tablet-canvas) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .workspace {
    flex: 1 1 0;
    z-index: auto !important;
    isolation: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: max(16px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)) !important;
    gap: 22px !important;
    overflow: visible !important;
    background: var(--tablet-canvas) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .workspace::before { display: none !important; }
  /* Browser tablets scroll the document. Installed tablets have a locked root
     frame, so the workspace must retain its explicit vertical scroller. */
  html.tablet-app-mode:is(.pwa-mode, .native-app-mode) body.bb-app-active #app-shell {
    overflow: hidden !important;
  }
  html.tablet-app-mode:is(.pwa-mode, .native-app-mode) body.bb-app-active #app-shell .workspace {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section {
    width: 100% !important;
    max-width: 1300px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
  }
  /* A transformed page would anchor fixed editors to the scrolled page instead
     of the viewport and push the close/save controls off the tablet screen. */
  html.tablet-app-mode body.bb-app-active #app-shell .page-section:has(.panel.open[id$="-create-panel"]) { z-index: 1200 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section:has(#bk-add-txn-modal[style*="flex"]) { z-index: 1200 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section:has(.modal-overlay[style*="flex"]:not([hidden])) { z-index: 1200 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section > * { min-width: 0; max-width: 100%; }
  html.tablet-app-mode body.bb-app-active #mobile-bottom-nav { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(130px, 1fr) minmax(180px, 1.2fr) auto !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin-inline: auto !important;
    position: relative !important;
    inset: auto !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    min-height: 72px !important;
    border: 1px solid var(--tablet-border) !important;
    border-radius: 14px !important;
    background: var(--tablet-surface) !important;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar::before { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar h2 { font: 650 20px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; color: var(--tablet-ink) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar .eyebrow { font-size: 10px !important; color: var(--tablet-muted) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar-search { display: flex !important; grid-column: auto !important; grid-row: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar-search input { padding-left: 38px !important; background: var(--tablet-soft) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar-search-shortcut { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar-actions { width: auto !important; gap: 8px !important; flex-wrap: nowrap !important; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.topbar-control-hub, .topbar-user-group) { width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; gap: 6px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.topbar-account-email, .topbar-logout, .topbar-status-group) { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.sidebar-toggle, .topbar-theme-toggle, .topbar-account-btn, .topbar-quick-create) { min-width: 44px !important; min-height: 44px !important; border-radius: 10px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .sidebar-toggle { display: inline-flex !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .sidebar {
    display: flex !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 300px !important;
    height: 100dvh !important;
    max-width: calc(100vw - 56px) !important;
    z-index: 1001 !important;
    transform: translateX(-100%) !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-shadow: none !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .sidebar.open { transform: translateX(0) !important; box-shadow: 16px 0 48px rgb(0 0 0 / 20%) !important; }
  html.tablet-app-mode body.bb-app-active #sidebar-backdrop { display: block !important; z-index: 1000 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .sidebar-close { display: inline-flex !important; min-width: 44px; min-height: 44px; }
  html.tablet-app-mode body.bb-app-active #app-shell .nav-item { min-height: 46px !important; font-size: 14px !important; padding: 10px 12px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .nav-item--gated-hidden { display: none !important; }

  /* Comfortable touch controls without enlarging every label or losing columns. */
  html.tablet-app-mode body.bb-app-active :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-height: 44px !important; min-width: 0; max-width: 100%;
    font-size: 16px !important; line-height: 1.4;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(button, .button, .nav-item) { touch-action: manipulation; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(h1, h2, h3, h4, label, input, select, textarea, button, th, .eyebrow) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section button { min-height: 44px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell form label:not(:has(input[type="checkbox"], input[type="radio"])) {
    font-size: 13px !important; line-height: 1.5 !important; font-weight: 500 !important;
    letter-spacing: 0 !important; text-transform: none !important; color: var(--tablet-muted) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.button, .icon-button, .icon-btn, .inv-list-actions button, .form-actions button) { min-height: 44px !important; }
  html.tablet-app-mode body.bb-app-active :focus-visible { outline: 2px solid var(--tablet-accent); outline-offset: 3px; }
  /* A duplicate formatted value is inserted on number-field blur. On touch,
     that insertion shifts Save between pointer-down and click. The editable
     value and calculated totals remain visible; avoid this redundant hint. */
  html.tablet-app-mode body.bb-app-active .num-hint { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.inv-list-header, .section-header, .module-header, .page-header) { gap: 16px !important; flex-wrap: wrap; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.inv-list-actions, .section-actions, .module-actions, .toolbar, .filter-row) { flex-wrap: wrap; gap: 8px; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table, .table-shell, .data-table-wrap, .report-table-shell, .po-table-shell, .quote-table-shell) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) table {
    display: table !important; width: 100% !important; min-width: 760px !important; border-collapse: collapse !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) :is(th, td) {
    padding: 14px 12px !important; font-size: 14px !important; line-height: 1.4 !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.bb-register-table, .sr-register-table, .items-register-table) th { background: var(--tablet-soft) !important; color: var(--tablet-muted) !important; font-size: 12px !important; font-weight: 650 !important; letter-spacing: .03em !important; }

  /* A bounded editing canvas instead of a stretched phone sheet. */
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"],
  html.tablet-app-mode body.bb-app-active #item-create-modal.item-create-panel.open {
    position: fixed !important; inset: 16px !important;
    width: calc(100% - 32px) !important; max-width: 1040px !important;
    height: calc(100dvh - 32px) !important; max-height: calc(100dvh - 32px) !important; min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 auto !important; padding: 0 !important;
    overflow: auto !important; overscroll-behavior: contain;
    border: 1px solid var(--tablet-border) !important; border-radius: 16px !important;
    background: var(--tablet-surface) !important; color: var(--tablet-ink) !important;
    box-shadow: 0 0 0 100vmax rgb(15 23 42 / 32%), 0 16px 60px rgb(15 23 42 / 20%) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-body, .bill-form-body, .customer-form-body, .vendor-form-body, .exp-form-body, .pmt-form-body, .pmade-form-body, .rb-form-body, .re-form-body, .coa-form-body),
  html.tablet-app-mode body.bb-app-active #item-create-modal .item-modal-body {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    padding: 24px !important; box-sizing: border-box !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-title, .customer-form-title, .vendor-form-title, .bill-form-title-row, .exp-form-title, .coa-form-title, .pmt-form-header, .pmade-form-title, .po-form-title, .rb-form-title, .re-form-title),
  html.tablet-app-mode body.bb-app-active #item-create-modal .item-modal-header {
    position: sticky !important; top: 0 !important; z-index: 8 !important;
    min-height: 68px !important; padding: 16px 24px !important;
    background: var(--tablet-surface) !important; border-bottom: 1px solid var(--tablet-border) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-actions, .bill-form-actions, .exp-form-actions, .customer-form-actions, .vendor-form-actions, .rb-form-actions, .pmt-form-actions, .pmade-form-actions, .coa-form-actions),
  html.tablet-app-mode body.bb-app-active #item-create-modal .item-modal-actions {
    position: sticky !important; inset: auto 0 0 !important; z-index: 9 !important;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 14px 24px !important;
    background: var(--tablet-surface) !important; border-top: 1px solid var(--tablet-border) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-actions, .customer-form-actions, .bill-form-actions, .pmt-form-actions) button { flex: 0 1 auto !important; width: auto !important; min-height: 44px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-band, .quote-details-grid, .po-detail-fields) { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .quote-band { min-height: 0 !important; padding: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .addr-inline-previews:not(:has(.addr-inline-preview-text:not(:empty))) { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.quote-form-row, .customer-form-row, .bill-form-row, .exp-form-row, .pmt-form-row) { min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] :is(.po-table-shell, .quote-table-shell, .bill-table-shell) { touch-action: manipulation !important; overscroll-behavior-y: auto !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .quote-details-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important; padding: 18px !important; border-radius: 12px !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .quote-details-grid > .quote-form-line {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    gap: 8px !important; padding: 0 !important; border: 0 !important; min-width: 0 !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .quote-details-grid .quote-form-line > :is(input, select, div) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .quote-details-grid label { margin: 0 !important; font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; color: var(--tablet-muted) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .addr-inline-row { display: flex !important; flex-direction: row !important; gap: 20px !important; padding: 12px 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open[id$="-create-panel"] .addr-inline-btn { flex: 1; min-height: 44px !important; justify-content: flex-start !important; }

  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dashboard { gap: 20px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-card { border-radius: 14px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard :is(.bb-dash-card-head, .bb-dash-body) { padding: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-cash-layout { grid-template-columns: minmax(0, 1fr) 220px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-heading h2 { font-size: 24px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-link { min-height: 44px; }
  html.tablet-app-mode body.bb-app-active #app-shell .bk-account-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.fa-form-grid, .pr-form-grid, .budget-form-grid, .tr-form-grid, .proj-form-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.fa-form-panel, .pr-form-panel, .budget-form-card, .tr-form-panel, .proj-form-wrap) { padding: 24px !important; border-radius: 14px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .stg-main { min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .stg-nav { flex: 0 1 auto; height: auto; max-width: 100%; align-items: center; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .stg-panel:not(.stg-panel-org-profile) .stg-content-header { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; min-height: 96px !important; padding: 20px !important; text-align: left !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .stg-content-icon { flex-shrink: 0 !important; margin: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .stg-content-header > div:not(.stg-content-icon) { min-width: 0 !important; flex: 1 1 auto !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .stg-content-badge { flex-shrink: 0; align-self: center !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Document metadata needs flexible controls, not desktop-sized label columns. */
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-form-section { padding: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-details-grid .bill-form-line { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; min-width: 0 !important; padding: 0 !important; position: relative; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-details-grid :is(input, select, label) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; flex: initial !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-details-grid .bill-settings-icon { position: absolute; right: 0; top: 0; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-details-grid .bill-due-line { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-due-line > label { grid-row: 1; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .bill-due-line > :is(input, select) { grid-row: 2; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-body { grid-template-columns: minmax(0, 1fr) 240px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-fields { padding: 20px !important; min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-line { grid-template-columns: 140px minmax(0, 1fr) !important; gap: 12px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-line > :is(input, select, textarea, div) { min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-line:has([name="disbursement"]) { grid-template-columns: 1fr !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .customer-main-fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; padding: 20px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .customer-main-fields > .customer-form-line { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .customer-main-fields > .customer-form-line:has(.customer-contact-row, .customer-radio-row, .customer-phone-row) { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .customer-contact-row { display: grid !important; grid-template-columns: 120px repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .customer-phone-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .customer-radio-row label { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; }

  /* Smaller modules use the same editing canvas as the document editors.
     Keep them in flow: no cloned forms, extra overlays or changed tab order. */
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor="sheet"] {
    width: 100% !important; max-width: 1040px !important; min-width: 0 !important;
    margin-inline: auto !important; padding: 0 !important;
    border: 1px solid var(--tablet-border) !important; border-radius: 14px !important;
    background: var(--tablet-surface) !important; color: var(--tablet-ink) !important;
    box-shadow: 0 2px 8px rgb(15 23 42 / 3%) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor-header] {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 16px !important; flex-wrap: wrap !important; min-height: 76px !important;
    padding: 16px 24px !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--tablet-border) !important;
    border-radius: 14px 14px 0 0 !important; background: var(--tablet-surface) !important;
    box-shadow: none !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor-header] :is(h2, h3) {
    margin: 0 !important; font-size: 20px !important; line-height: 1.35 !important;
    font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--tablet-ink) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor="sheet"] > form:not(#recurring-journal-form),
  html.tablet-app-mode body.bb-app-active #app-shell #rj-form-view > div:not(.je-form-topbar) {
    padding: 24px !important; margin: 0 !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(.pr-form-section, .fa-form-section-title) {
    color: var(--tablet-ink) !important; font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    padding-bottom: 10px !important; border-color: var(--tablet-border) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(.pr-form-grid, .fa-form-grid, .tr-form-grid, .proj-form-grid) > * { min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border: 1px solid var(--tablet-border) !important; border-radius: 8px !important;
    background: var(--tablet-surface) !important; color: var(--tablet-ink) !important;
    padding: 10px 12px !important; box-shadow: none !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor="sheet"] :is(input[readonly], input:disabled, select:disabled) { background: var(--tablet-soft) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell [data-mobile-editor-actions] {
    position: sticky !important; bottom: 0 !important; z-index: 8 !important;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: flex-end !important; align-items: center !important; gap: 10px !important;
    padding: 16px 0 max(16px, env(safe-area-inset-bottom)) !important; margin: 24px 0 0 !important;
    width: 100% !important; background: var(--tablet-surface) !important;
    border-top: 1px solid var(--tablet-border) !important; box-shadow: 0 -6px 16px rgb(15 23 42 / 3%) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is([data-mobile-editor-actions], [data-mobile-editor-header], .budget-form-card, .module-header, .section-header, .inv-list-actions) button {
    width: auto !important; flex: 0 1 auto !important; min-height: 44px !important; padding-inline: 16px !important;
    font-size: 14px !important; font-weight: 600 !important; justify-content: center !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.je-del-btn, .po-line-del, .tr-line-remove) { min-width: 44px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #journal .je-form-card {
    margin: 0 !important; border: 0 !important; border-radius: 0 0 14px 14px !important; box-shadow: none !important;
    background: var(--tablet-surface) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell #journal :is(.je-header-grid, .je-notes-row, .je-lines-section) { padding: 24px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #journal .je-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #journal .je-notes-row { max-width: none !important; padding-top: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #journal [data-mobile-editor-actions] { padding-inline: 24px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .ia-editor .ia-form-content { padding: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .ia-editor .ia-fields { grid-template-columns: 160px minmax(0, 1fr) !important; gap: 18px 24px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .budget-form-card { background: var(--tablet-surface) !important; border: 1px solid var(--tablet-border) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .budget-form-title { font-size: 18px !important; font-weight: 600 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .budget-form-row { gap: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #bk-forms-section .split-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #bk-forms-section .panel { padding: 24px !important; border: 1px solid var(--tablet-border) !important; border-radius: 14px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #bk-forms-section .field-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #bk-forms-section form > button { width: fit-content !important; min-width: 160px !important; justify-self: end !important; text-align: center !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form .coa-form-body { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form .coa-field-row { display: flex; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form :is(.coa-field-row-2col, .coa-subaccount-option, .coa-option-row, #coa-type-desc, .coa-field-row:has(textarea)) { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form .coa-field-row-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; padding: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form .coa-field-row > :is(input, select, textarea, div) { width: 100% !important; max-width: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form :is(.coa-field-row-2col, .coa-option-row, .coa-type-desc) { margin-left: 0 !important; padding-left: 0 !important; max-width: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #account-form .coa-field-row-2col > div { grid-column: auto !important; min-width: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #proj-form .je-header-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #proj-form .je-form-card { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #proj-form .proj-section { padding: 20px 0 !important; border: 0 !important; border-bottom: 1px solid var(--tablet-border) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #proj-form .proj-section-title { font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; padding-left: 0 !important; color: var(--tablet-ink) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .budget-form-card label { display: block; margin-bottom: 8px; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--tablet-muted) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #budgets:has(.budget-form-card) .empty-state { display: none !important; }

  html.tablet-app-mode body.bb-app-active .modal-overlay { padding: 24px !important; align-items: center !important; }
  html.tablet-app-mode body.bb-app-active .modal-overlay .modal-card {
    height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 48px) !important;
    border-radius: 14px !important; overflow-y: auto !important;
  }
  html.tablet-app-mode body.bb-app-active :is(#log-time-modal, #edit-time-modal) { z-index: 3000 !important; }
  html.tablet-app-mode body.bb-app-active :is(#log-time-modal, #edit-time-modal) .modal-card { width: min(560px, 100%) !important; max-width: 560px !important; }
  html.tablet-app-mode body.bb-app-active .modal-overlay :is(.modal-header, .modal-footer) { flex-shrink: 0 !important; }
  html.tablet-app-mode body.bb-app-active .modal-overlay .modal-footer { flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 10px !important; }
  html.tablet-app-mode body.bb-app-active .modal-overlay button { min-width: 44px !important; min-height: 44px !important; }
  html.tablet-app-mode body.bb-app-active .modal-overlay .modal-footer button { width: auto !important; flex: 0 1 auto !important; }

  /* Secondary pickers must sit above the document sheet that launched them. */
  html.tablet-app-mode body.bb-app-active :is(.new-customer-modal, .retainer-customer-modal, .quick-vendor-modal, .quick-item-modal, .addr-modal-overlay) {
    z-index: 5000 !important; padding: 24px !important;
  }
  html.tablet-app-mode body.bb-app-active :is(.ncm-card, .qvm-card, .qim-card, .retainer-customer-modal-card) {
    width: min(760px, 100%) !important; max-width: 100% !important;
    max-height: calc(100dvh - 48px) !important; border-radius: 14px !important;
    background: var(--tablet-surface) !important;
  }
  html.tablet-app-mode body.bb-app-active :is(.new-customer-modal, .retainer-customer-modal, .quick-vendor-modal, .quick-item-modal, .addr-modal-overlay, .confirm-overlay) button { min-height: 44px !important; min-width: 44px !important; }
}

/* Line entry is a labelled three-column card on compact tablets. This avoids
   tiny tax/customer selectors without changing any input or calculation. */
@media screen and (max-width: 1099px) {
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-body { grid-template-columns: 1fr !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; border: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-form-line { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 0 !important; border: 0 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open :is(.exp-description-line, .exp-form-divider, .exp-section-divider, .exp-form-line:has([name="disbursement"])) { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .panel.open .exp-receipt-card { margin: 0 20px 20px !important; padding: 20px !important; border: 1px solid var(--tablet-border) !important; border-radius: 12px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) {
    display: block !important; width: 100% !important; min-width: 0 !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) thead {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%);
  }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) tbody { display: block !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) tbody > tr:not([hidden]):not(.is-hidden):not([style*="display: none"]) {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    height: auto !important; min-height: 0 !important; grid-auto-rows: auto !important; align-items: start !important;
    width: 100% !important; gap: 16px !important; padding: 18px !important; margin: 0 0 12px !important;
    background: var(--tablet-surface) !important; border: 1px solid var(--tablet-border) !important; border-radius: 12px !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) td:not([hidden]):not(.is-hidden):not([style*="display: none"]) {
    display: block !important; position: static !important; width: auto !important; min-width: 0 !important;
    height: auto !important; max-height: none !important; align-self: stretch !important;
    padding: 0 !important; border: 0 !important; white-space: normal !important; text-align: left !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) tbody td:first-child { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) td[data-mobile-field-label]::before {
    content: attr(data-mobile-field-label) !important; display: block !important; position: static !important;
    margin-bottom: 8px !important; color: var(--tablet-muted) !important; font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table]:not(.pr-run-table) td :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table] .po-item-cell,
  html.tablet-app-mode body.bb-app-active #app-shell #transfer-lines-body td:has(select) { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table] button { min-width: 44px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active table[data-mobile-entry-table] .po-serial-input { min-height: 76px !important; margin-top: 10px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active .je-lines-table tfoot { display: block !important; padding: 16px !important; background: var(--tablet-soft) !important; border-radius: 10px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active .je-lines-table .je-total-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; height: auto !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active .je-lines-table .je-total-label { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active .je-lines-table .je-total-cell { padding: 10px 0 !important; font-size: 16px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active #je-total-dr::before { content: "Debit: "; color: var(--tablet-muted); font-size: 13px; font-weight: 500; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active #je-total-cr::before { content: "Credit: "; color: var(--tablet-muted); font-size: 13px; font-weight: 500; }
  html.tablet-app-mode body.bb-app-active #app-shell .page-section.active .je-lines-table #je-diff-row { display: block; margin-top: 8px; }
}

@media screen and (min-width: 1100px) {
  html.tablet-app-mode body.bb-app-active #app-shell .sidebar {
    position: sticky !important; top: 0 !important; flex: 0 0 216px !important;
    width: 216px !important; transform: none !important; z-index: 10 !important;
    border-right: 1px solid var(--tablet-border) !important;
  }
  html.tablet-app-mode body.bb-app-active #app-shell :is(.sidebar-close, .sidebar-toggle),
  html.tablet-app-mode body.bb-app-active #sidebar-backdrop { display: none !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar { grid-template-columns: minmax(130px, 1fr) minmax(200px, 1.4fr) auto !important; }
}
@media screen and (max-width: 899px) {
  html.tablet-app-mode body.bb-app-active #app-shell .workspace { padding-inline: 18px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar { grid-template-columns: 44px minmax(0, 1fr) auto !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar-search { grid-column: 1 / -1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell .topbar-actions { grid-column: 3 !important; grid-row: 1 !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-heading { flex-wrap: wrap; gap: 12px !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #dashboard .bb-dash-card-head { gap: 8px !important; flex-wrap: wrap; }
}

@media screen and (max-width: 860px) {
  /* The compact balance rows still have two amount fields: keep their Debit
     and Credit headings visible rather than presenting unlabelled values. */
  html.tablet-app-mode body.bb-app-active #app-shell #settings .ob-head { display: grid !important; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(110px, 150px)) !important; }
  html.tablet-app-mode body.bb-app-active #app-shell #settings .ob-head > span:nth-child(2) { display: none !important; }
}