/* Shared interaction and portrait-mobile layer, loaded last. */
.ui-menu>summary:after,.ui-select-button:after{content:none!important;display:none!important}
.ui-select-button{justify-content:flex-start}
html,body{max-width:100%;overflow-x:hidden}
img,svg,canvas{max-width:100%}
.page-head>*,.section-head>*,.customer-detail-head,.panel{min-width:0;max-width:100%}
.period-picker{min-width:0;max-width:100%}
.period-controls,.period-controls select{min-width:0;max-width:100%}
@media(max-width:900px){
  .shell,main{min-width:0;max-width:100%}
  .page-head>.period-picker{display:grid!important;width:100%!important;min-width:0!important;max-width:100%!important;inline-size:100%!important;max-inline-size:100%!important;align-self:stretch}
  .period-controls{width:100%;grid-template-columns:44px minmax(0,1fr) 44px}
  .period-controls select{box-sizing:border-box;width:100%!important;min-width:0!important;max-width:100%!important;margin:0}
}
@media(max-width:760px){
  header{height:58px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
  .menu-toggle{margin:0 10px 0 0}
  .shell{min-height:calc(100svh - 58px)}
  #nav{top:58px;bottom:auto;width:min(290px,88vw);height:calc(100vh - 58px);height:calc(100dvh - 58px);min-height:0;max-height:calc(100dvh - 58px);padding:16px 12px calc(20px + env(safe-area-inset-bottom));overflow-y:auto}
  main{min-width:0;padding:16px 14px 28px}
  .page-head,.section-head{align-items:stretch;flex-direction:column;gap:12px}
  .page-head h1{font-size:23px;line-height:1.2}
  .page-head>form,.page-head>.button,.page-head>details{align-self:stretch}
  .page-head>form button,.page-head>.button,.page-head>details>summary{width:100%;justify-content:center}
  .period-picker{display:grid;width:100%;min-width:0;align-items:stretch}
  .customer-detail-head .page-head{width:100%}
  .cards{grid-template-columns:1fr;gap:12px}.cards article,.panel{padding:15px;border-radius:10px}
  .grid,.form-grid,.filters,.adapter-fields{grid-template-columns:minmax(0,1fr)}
  .span-2,.adapter-fields .span-2,.adapter-fields>label:only-of-type,.adapter-fields>.field-note{grid-column:1}
  input,select,textarea,.ui-select-button{font-size:16px;min-height:44px}
  button,.button{min-height:44px}
  .form-buttons{align-items:stretch;flex-wrap:wrap}.form-buttons button,.form-buttons .button{flex:1 1 140px;text-align:center}
  .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:680px}
  .table-wrap td,.table-wrap th{padding:11px 9px}
  .truncate{max-width:220px}
  .log-tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.log-tabs a{white-space:nowrap}
  .source-menu-popover,.ui-menu-popover{max-width:calc(100vw - 24px)}
  .source-actions{grid-template-columns:repeat(2,minmax(95px,1fr))}
  .destination-actions,.user-row-actions{min-width:0;max-width:100%;flex-wrap:wrap}
  .section-head .destination-actions{display:flex;width:100%;gap:8px}.section-head .destination-actions form,.section-head .destination-actions .button{flex:1 1 150px}.section-head .destination-actions button{width:100%}
  .billing-kpis strong,.service-panel strong,.page-head h1,.page-head p{overflow-wrap:anywhere}
  .additional-services,.additional-form{max-width:100%}.compact-add>form{width:min(240px,calc(100vw - 42px))}
  .permission-matrix{overflow:visible}.permission-row{grid-template-columns:1fr;gap:9px}.permission-row label{min-height:36px;justify-content:flex-start}.permission-row label span{display:inline;margin-left:8px}
  .resource-charts{grid-template-columns:1fr}.donut{width:148px;height:148px}
  .toast-region{bottom:calc(14px + env(safe-area-inset-bottom));width:calc(100% - 24px)}
  .toast{width:100%;text-align:center}
  .account-menu-popover{position:fixed;top:54px;right:12px;width:min(260px,calc(100vw - 24px))}
}
@media(max-width:480px){
  .brand{font-size:20px}.menu-toggle{margin-left:0}.account-avatar{width:34px;height:34px}
  .auth-main{display:flex;min-height:100svh;align-items:center;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))}
  .login-card{width:100%;padding:22px 18px;border-radius:12px;margin:auto}
  .login-card h1{font-size:25px;line-height:1.2}.login-card .logo{width:42px;height:42px}
  .login-card label{margin-bottom:12px}.login-card .hint{overflow-wrap:anywhere}
  .panel.narrow{max-width:none}
  .health>div{align-items:flex-start;gap:12px;flex-direction:column}
}