/* ITDA mobile icon visibility v1.0.0
   Mobile-only visibility/touch-size layer for icon controls across all pages. */
@media (max-width:760px){
  :root{
    --itda-mobile-icon-control:44px;
    --itda-mobile-icon-size:22px;
    --itda-mobile-embedded-icon-control:34px;
    --itda-mobile-embedded-icon-size:18px;
  }

  /* JS marks icon-only controls, including dynamically inserted/AJAX content. */
  .itda-mobile-icon-control{
    box-sizing:border-box!important;
    min-width:var(--itda-mobile-icon-control)!important;
    width:var(--itda-mobile-icon-control)!important;
    max-width:var(--itda-mobile-icon-control)!important;
    min-height:var(--itda-mobile-icon-control)!important;
    height:var(--itda-mobile-icon-control)!important;
    max-height:var(--itda-mobile-icon-control)!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 var(--itda-mobile-icon-control)!important;
    line-height:1!important;
    touch-action:manipulation;
  }
  .itda-mobile-icon-control svg,
  .itda-mobile-icon-control .icon,
  .itda-mobile-icon-control [class*="-icon"] svg{
    width:var(--itda-mobile-icon-size)!important;
    height:var(--itda-mobile-icon-size)!important;
    min-width:var(--itda-mobile-icon-size)!important;
    min-height:var(--itda-mobile-icon-size)!important;
    max-width:var(--itda-mobile-icon-size)!important;
    max-height:var(--itda-mobile-icon-size)!important;
  }
  .itda-mobile-symbol-control{
    font-size:23px!important;
    font-weight:750!important;
  }

  /* Common close/overflow/navigation icon buttons used throughout ITDA. */
  .icon-btn,
  .workspace-modal-close,
  .mobile-card-more,
  .login-close-btn,
  .verse-memory-close,
  .inline-icon-toolbar button,
  .approval-order-actions button,
  .slack-template-actions .icon-btn{
    min-width:44px!important;
    width:44px!important;
    min-height:44px!important;
    height:44px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    font-size:21px!important;
  }
  .mobile-card-more{font-size:24px!important}
  .workspace-modal-close,.login-close-btn,.verse-memory-close{font-size:22px!important}

  /* Attachment/comment delete controls need a visible glyph without making rows bulky. */
  .file-remove,
  .selected-person-remove,
  .message-recipient-selected button,
  .message-file-chip button,
  .chosen-chip button{
    min-width:var(--itda-mobile-embedded-icon-control)!important;
    width:var(--itda-mobile-embedded-icon-control)!important;
    min-height:var(--itda-mobile-embedded-icon-control)!important;
    height:var(--itda-mobile-embedded-icon-control)!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    font-size:var(--itda-mobile-embedded-icon-size)!important;
  }

  /* Rich editor controls were visually too small on phones. */
  .rich-toolbar button,
  .editor-toolbar button{
    min-width:40px!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 8px!important;
    font-size:16px!important;
    line-height:1!important;
  }

  /* Tiny inline edit/delete actions: preserve text, increase readability/touch height. */
  .mini-edit-btn,
  .mini-delete-btn,
  .resubmit-mini-actions .btn{
    min-height:40px!important;
    height:40px!important;
    padding:0 10px!important;
    font-size:12px!important;
    line-height:1.2!important;
  }

  /* Global action button glyphs (pseudo icons) should remain legible. */
  .itda-action-button::before{
    font-size:17px!important;
    line-height:1!important;
    min-width:17px;
  }
  .itda-action-button.btn-sm::before{font-size:16px!important}

  /* Buttons that already contain an SVG icon + text. */
  .btn svg,
  button.btn svg,
  a.btn svg{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
  }

  /* Header / mobile navigation icon visibility. */
  .workspace-quick-btn,
  .attention-bell{
    min-width:44px!important;
    width:44px!important;
    min-height:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
  .workspace-quick-btn svg,
  .workspace-search-icon,
  .workspace-favorite-icon,
  .workspace-search-icon svg,
  .workspace-favorite-icon svg,
  .attention-bell-icon,
  .attention-bell-icon svg{
    width:23px!important;
    height:23px!important;
  }
  .mobile-bottom-nav .mobile-bottom-icon,
  .mobile-bottom-nav .mobile-bottom-icon svg{
    width:22px!important;
    height:22px!important;
    font-size:22px!important;
  }
  .mobile-nav-main-icon svg{width:20px!important;height:20px!important}

  /* Home quick cards and compact feature icons. */
  .quick-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    font-size:20px!important;
  }
  .quick-icon svg{width:21px!important;height:21px!important}

  /* FullCalendar and simple previous/next controls. */
  .fc .fc-prev-button,
  .fc .fc-next-button{
    min-width:44px!important;
    width:44px!important;
    min-height:44px!important;
    height:44px!important;
  }
  .fc .fc-prev-button .fc-icon,
  .fc .fc-next-button .fc-icon{font-size:22px!important}

  /* Pager controls should never fall below a usable icon size. */
  .selector-page-btn,
  .bible-notes-pagination .page-btn,
  .sharing-pagination .page-btn,
  .lifeline-pagination .page-btn,
  .itda-page-numbers a,
  .itda-page-numbers button{
    min-width:40px!important;
    min-height:40px!important;
    font-size:15px!important;
  }
}

@media (max-width:390px){
  /* Keep the icon readable even on narrow devices; only embedded controls shrink slightly. */
  .file-remove,
  .selected-person-remove,
  .message-recipient-selected button,
  .message-file-chip button,
  .chosen-chip button{
    min-width:32px!important;
    width:32px!important;
    min-height:32px!important;
    height:32px!important;
    font-size:17px!important;
  }
}