/* Shared fit/touch fixes; existing desktop cards, icons and brand colors remain. */
.page,.wi-card,.card,.form-group,.form-row,.table-wrap{min-width:0}
.language-picker{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:16px 0}
.language-picker label{align-self:center;font-weight:600}
.language-picker select{width:auto;min-width:130px;min-height:44px;padding:8px 12px;border:1px solid var(--border,#444);border-radius:6px;background:var(--surface-2,#333);color:var(--text,#eee);font:inherit}
.language-picker button{width:auto;min-height:44px}
.mobile-scroll-hint{display:none}
header img.brand-logo-inoperation{height:44px;max-height:44px;width:auto;max-width:140px;padding:0;background:transparent;border-radius:0;box-sizing:border-box;object-fit:contain;vertical-align:middle}
/* The header stays visible while scrolling; its menu must stay with it. */
#mobileMenu{position:fixed;max-width:calc(100vw - 24px);max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:900px){
  .page .admin-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .page .admin-nav .admin-nav-item{min-width:0;overflow-wrap:anywhere}
  .page .admin-nav-item svg{flex-shrink:0}
}
@media(max-width:600px){
  html{scroll-padding-top:76px}
  body{min-width:0}
  header{gap:12px;padding-inline:12px}
  header>a{min-width:0;flex-shrink:1}
  header img{max-width:min(140px,38vw);height:auto;max-height:40px;object-fit:contain}
  .header-user{max-width:24vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header .hamb-btn{width:44px;height:44px;padding:12px 8px;flex-shrink:0}
  #mobileMenu a{display:flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
  .page-title{font-size:clamp(1.35rem,7vw,1.8rem);overflow-wrap:anywhere}
  .page-subtitle,.wi-card p,.wi-card h2,.wi-card h3,.wi-card label,.wi-card legend{overflow-wrap:anywhere}
  .wi-card{max-width:100%}
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{min-width:0;max-width:100%;font-size:16px;box-sizing:border-box}
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select{min-height:44px}
  input[type=file]{width:100%;overflow:hidden}
  input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark;min-height:44px;appearance:auto}
  .btn,button:not(.hamb-btn):not(.settings-btn){min-height:44px;white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .form-row>*{min-width:0;max-width:100%}
  .form-row select,.form-row input{width:100%}
  .wi-card-header{flex-wrap:wrap;gap:8px}
  .admin-nav{flex-wrap:wrap}
  .admin-nav .admin-nav-item{min-width:0;padding:12px}
  .admin-nav-item span,.model-card strong{overflow-wrap:anywhere}
  .model-grid{grid-template-columns:minmax(0,1fr)}
  .model-grid .wi-card+.wi-card{margin-top:0}
  .users-table td,.device-table td,.acl-table td{min-width:0;overflow-wrap:anywhere}
  .users-table td>form,.device-table td>form,.acl-table td>strong{min-width:0;max-width:100%}
  .users-table td::before,.device-table td::before,.acl-table td::before{max-width:42%;white-space:normal;overflow-wrap:anywhere}
  .users-table select{max-width:100%}
  .table-wrap{max-width:100%;overscroll-behavior-x:contain}
  .users-table,.device-table,.acl-table{table-layout:fixed}
  .users-table td,.device-table td{gap:8px;text-align:right}
  .users-table td::before,.device-table td::before{text-align:left;margin-right:0}
  .users-table .td-actions,.device-table .td-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .users-table .td-actions::before,.device-table .td-actions::before{grid-column:1 / -1;max-width:100%;text-align:left}
  .users-table .td-actions form,.device-table .td-actions form{display:block;width:100%;margin:0}
  .users-table .td-actions .btn,.device-table .td-actions .btn{width:100%;justify-content:center;height:100%}
  .acl-table td.hide-mobile{display:none}
  .acl-table td:first-child{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 10px;align-items:center}
  .acl-table td:first-child .led{margin-right:0!important}
  .acl-table td:first-child .show-mobile-block{grid-column:2;overflow-wrap:anywhere}
  .acl-table .show-mobile-block br{display:none}
  .acl-table .td-actions{padding:8px 0 16px}
  .acl-table .td-actions form{margin:0;width:100%}
  #cards .head>div{min-width:0}
  #cards .serial,#cards .meta,#cards .state{overflow-wrap:anywhere}
  #cards .led,#cards .settings-btn{flex-shrink:0}
  .notification-option{min-height:44px}
  .flasher-actions{flex-wrap:wrap}
  .flasher-actions button{flex:1 1 180px}
  .page .flash-info-grid{grid-template-columns:minmax(0,1fr)}
  .flash-info-item{min-width:0;overflow-wrap:anywhere}
  #console{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
  .language-picker{align-items:stretch;width:100%}
  .language-picker label{flex-basis:100%}
  .language-picker select{flex:1 1 130px}
  .language-picker button{flex:1 1 160px}
  body:has(#loginForm){padding:20px 16px;min-height:100svh;box-sizing:border-box}
  body:has(#loginForm)>.language-picker{max-width:300px}
  #loginForm,#content{max-width:100%}
  #loginForm input,#loginForm button{max-width:100%;box-sizing:border-box}
  .mobile-scroll-hint{display:block;font-size:.85rem;color:var(--text-muted,#aaa)}
}
@media(max-width:480px){
  .page .admin-nav{grid-template-columns:minmax(0,1fr)}
}