/* Shared device compatibility: phones, tablets and desktop browsers. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #c88a20;outline-offset:3px}
.app,.toolbar,.grid,.card,.body,.brand-copy{min-width:0}
.app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.detail-drawer{height:100vh!important;height:100dvh!important;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.drawer-head{flex-shrink:0}
.drawer-body{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.modal{padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));overflow-y:auto}
.modal>.card{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
.toast{max-width:calc(100vw - 32px);bottom:max(20px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
.device-table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(pointer:coarse){
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
 button,.btn,.back,.custom-select-trigger{min-height:44px}
 input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
 .publish-check-control{min-height:44px}
}
@media(max-width:1100px){
 .nav,.top,.card-head{flex-wrap:wrap;gap:12px}
 .nav>*{min-width:0;max-width:100%}
 .top>div,.card-head>div{max-width:100%;flex-wrap:wrap}
 .brand-copy{overflow-wrap:anywhere}
 .card-head form{max-width:100%;flex-wrap:wrap}
 .card-head input,.card-head select{min-width:0!important;max-width:100%;flex:1 1 180px}
 .card-head .btn{flex-shrink:0}
 .drawer-head small{white-space:normal!important;overflow-wrap:anywhere}
 .drawer-head{min-height:76px!important;padding:14px!important}
 .drawer-body input[type=file]{min-width:0}
 .picker-pop,.time-pop{max-width:calc(100vw - 24px);max-height:75vh;max-height:75dvh;overflow-y:auto}
}
@media(max-width:600px){
 .top{padding:14px}
 .top .title{min-width:0;max-width:100%}
 .top .title h1{font-size:19px;overflow-wrap:anywhere}
 .top>div:last-child{flex-wrap:wrap;gap:8px}
 .body{padding:12px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stat{min-width:0;overflow-wrap:anywhere}
 .card-head{padding:12px}
 .card-head form{width:100%;margin-inline-start:0!important}
 .brand-preview{flex-wrap:wrap}
 .brand-preview strong,.employee .meta{overflow-wrap:anywhere}
 .pager{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.detail-drawer,.drawer-backdrop,.toast{transition:none}}