/* Tech Guru client area: layout fixes found by the overlap audit of 19 October 2026 (docs/qa/2026-10-19-client-area-overlap-audit.md).
   Loaded on every client area page by includes/hooks/tg_pi_docs.php and by viewinvoice.tpl. Only layout, no colours. */

/* wide WHMCS tables scroll inside their own box instead of making the whole page scroll sideways */
.table-container,.dataTables_wrapper{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* the light and dark switch is fixed at the right edge: keep the email banner text clear of it */
.verification-banner .container{padding-right:52px}

/* page header: the breadcrumb sits under the title instead of over it when the title wraps */
@media (max-width:991.98px){
  .tt-page-header-info .tt-breadcrumb{position:static!important;margin-top:10px}
}

/* invoice page: the paper never wider than the screen */
@media (max-width:880px){
  .invoice-container{margin-left:0!important;margin-right:0!important;max-width:100%}
}

/* room at the end of every page, so the floating WhatsApp button never covers the last line */
#main-body,.main-body{padding-bottom:72px}

/* long company names, emails, domains and amounts wrap instead of pushing the layout */
.primary-content,.tt-page-header-info h1,.verification-banner .text,.table-list td,.posted-by{overflow-wrap:anywhere;min-width:0}

/* the floating WhatsApp button sits at the bottom right: the footer's last row (copyright, language) ends above it */
.tt-footer-bottom{padding-bottom:80px!important}

/* invoice page: long names, emails and amounts wrap inside the address blocks; the Apply Credit box fits a phone */
.invoice-container address,.invoice-container form{overflow-wrap:anywhere;min-width:0}
.invoice-container .input-group .form-control{min-width:0}
@media (max-width:575.98px){
  .invoice-container form .col-8.offset-2{flex:0 0 100%;max-width:100%;margin-left:0}
}

/* touch screens only: shared header, breadcrumb, footer and banner controls are at least 44 px tap targets
   (dashboard audit, 19 October 2026); the desktop look (mouse) does not change */
@media (pointer:coarse){
  .tt-footer-menu a,.tt-breadcrumb .breadcrumb a,.breadcrumb .breadcrumb-item a{display:inline-flex;align-items:center;min-height:44px}
  .breadcrumb .breadcrumb-item{display:inline-flex;align-items:center}
  a.btn.btn-icon,a.btn.nav-link.cart-btn,button.btn.nav-link,#accountNotifications,button.tgb-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  #Secondary_Navbar-Account>a.dropdown-toggle{display:inline-flex;align-items:center;min-height:44px}
  .tt-footer-bottom .btn[data-target="#modalChooseLanguage"],.tt-footer-bottom .btn[data-bs-target="#modalChooseLanguage"]{min-height:44px}
  #btnResendVerificationEmail{min-height:44px}
  #btnEmailVerificationClose{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}

/* narrow phones: the account greeting ("Hello, name!") is cut with an ellipsis, so the header row with its 44 px buttons fits */
@media (max-width:575.98px){
  #Secondary_Navbar-Account>a.dropdown-toggle{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
}
@media (max-width:374.98px){
  #Secondary_Navbar-Account>a.dropdown-toggle{max-width:96px}
}
@media (max-width:575.98px) and (pointer:coarse){
  #Secondary_Navbar-Account>a.dropdown-toggle{line-height:44px;min-height:44px}
}