/* Shared phone and small-tablet safeguards. Loaded last so it can normalize
   older dashboard modules without changing their desktop layouts. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
@media(max-width:850px){
  .app-header{position:relative;gap:14px}
  .app-header nav{display:flex;max-width:100%;padding:2px 0 7px;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .app-header nav::-webkit-scrollbar,.admin-subnav::-webkit-scrollbar{display:none}
  .app-header nav a{flex:0 0 auto;min-height:42px;padding:11px 12px;border-radius:9px;background:#f5f7fb}
  .logout-form{margin-left:auto}
  .admin-subnav{max-width:100%;margin-top:-18px;margin-bottom:26px;padding-bottom:9px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .admin-subnav a{flex:0 0 auto;min-height:40px}
  .admin-heading{margin-bottom:28px}
  .panel-heading{align-items:flex-start;gap:14px;flex-direction:column}
  .table-panel,.customer-directory,.admin-companies{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:680px}
  .subscription-controls{width:100%;align-items:stretch;flex-direction:column}
  .subscription-controls label,.subscription-controls select,.subscription-controls input,.subscription-controls button{width:100%}
  .subscription-row{align-items:stretch}
  .billing-hero,.plans-heading{min-width:0}
  .billing-plan-grid,.billing-bottom-grid,.billing-overview{min-width:0}
  .billing-plan-card,.billing-payment-panel,.billing-invoices{max-width:100%}
  .plan-actions form,.plan-actions button{width:100%}
  .billing-fx-note{align-items:flex-start;overflow-wrap:anywhere}
}
@media(max-width:560px){
  .app-header{padding:12px 12px 8px}
  .app-brand{font-size:16px}.app-brand span{width:31px;height:31px}
  .app-header nav{order:3;flex-basis:100%}
  .link-button{min-height:40px;padding:0 8px}
  .app-shell{padding:32px 0 70px}
  .panel{border-radius:14px}
  .admin-heading h1{font-size:36px;line-height:1.05}
  .admin-heading .primary-button,.admin-heading .secondary-button{width:100%}
  .operations-grid{grid-template-columns:1fr!important}
  .billing-hero{padding:26px 20px}.billing-hero h1{font-size:32px}
  .billing-hero-badge{min-width:0;padding:16px}
  .billing-plan-card{padding:22px 18px}
  .plan-top{align-items:flex-start;flex-direction:column}
  .plan-price{flex-wrap:wrap}.plan-price strong{font-size:33px}
  .payment-summary{align-items:flex-start}
  th,td{padding:13px 16px}
}