/* ZAMVINEX: telefony od 320 px, tablety i komputery; wspólne zasady interfejsu. */
html{min-width:320px;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:20px}
body{min-width:0;line-height:1.45}
img,video,canvas{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}
button,a{overflow-wrap:anywhere}
button:focus-visible,a:focus-visible,summary:focus-visible,.table-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button,input,select,textarea{min-width:0}
input,select,textarea{font-size:16px;max-width:100%;scroll-margin-block:70px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{min-height:46px}
fieldset{min-inline-size:0;max-width:100%}
legend{max-width:100%;overflow-wrap:anywhere}
.layout{grid-template-columns:260px minmax(0,1fr)}
.main{align-self:start;margin:0 auto;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
aside{overflow-y:auto;overscroll-behavior-y:contain;min-width:0;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.nav,.top,.top>div,.card,.form-grid>* ,.grant-head>*,.user-card>*,.access{min-width:0}
.nav a,.nav button{min-height:46px;line-height:1.35}
.top{align-items:flex-start;flex-wrap:wrap}
.top>div:first-child{flex:1 1 240px}
.top .actions{flex:0 1 auto}
h1{font-size:clamp(25px,2.6vw,36px);overflow-wrap:anywhere}
h2,h3,.user-name,.aside-bottom strong,.status,.note,.pill{overflow-wrap:anywhere}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{max-width:100%}
.app-card{min-height:230px}
.app-card a{display:block;min-height:44px}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.check{min-height:48px}
.check input{flex-shrink:0}
.grant-head{flex-wrap:wrap}
.grant-head .check{flex:1 1 190px}
.grant-head select{flex:1 1 150px}
.user-card .pill{white-space:normal}
.actions .btn,.dialog-actions .btn{white-space:normal;line-height:1.35}
.table-wrap{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:620px}
.table-wrap th,.table-wrap td{overflow-wrap:anywhere}
.login-shell{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.login-card{margin-block:auto}
dialog{position:fixed;inset:calc(var(--visible-top,0px) + var(--visible-height,100dvh) * .5) 0 auto;margin:0 auto;transform:translateY(-50%);max-width:calc(100vw - 24px);max-height:calc(var(--visible-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-gutter:stable}
.dialog-head h2{min-width:0;margin:0}
.dialog-head button{flex-shrink:0;min-width:44px;min-height:44px}
.dialog-actions{flex-wrap:wrap;z-index:2;gap:10px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
body:has(dialog[open]){overflow:hidden}
html[data-compact-viewport="true"] .dialog-actions{position:static}
@media(max-width:1279px){
 .layout{grid-template-columns:220px minmax(0,1fr)}
 .main{padding:28px 24px 48px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .user-card{grid-template-columns:minmax(0,1fr);gap:14px}
 .user-card .access,.user-card .actions{grid-column:auto;grid-row:auto}
 .user-card .actions{justify-content:flex-start}
}
@media(max-width:899px){
 .layout{display:block}
 aside{position:relative;height:auto;overflow:visible;padding:18px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));border-right:0;border-bottom:1px solid var(--line);gap:14px}
 .brand{font-size:23px}
 .brand small{display:none}
 .nav{display:flex;flex-wrap:nowrap;gap:6px;max-width:100%;overflow-x:auto;padding:3px 2px 8px;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .nav a,.nav button{flex:0 0 auto;white-space:nowrap;padding:12px 14px}
 .aside-bottom{display:none}
 .main{padding:24px max(20px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
 .top{gap:14px;margin-bottom:22px}
 .top>div:first-child{flex-basis:200px}
 .app-card{min-height:210px}
 .toolbar{flex-wrap:wrap}
 .toolbar input{max-width:none;flex:1 1 260px}
 .toolbar .btn{flex:0 1 auto}
}
@media(max-width:639px){
 .main{padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
 .grid,.form-grid,.permission-grid{grid-template-columns:minmax(0,1fr)}
 .full{grid-column:1/-1}
 .card{padding:18px;border-radius:18px}
 .app-card{min-height:190px}
 .top>div:first-child{flex:1 1 180px}
 .top .actions{gap:6px}
 .toolbar{flex-direction:column;align-items:stretch}
 .toolbar input,.toolbar .btn{flex:none;width:100%}
 .grant-head{flex-direction:column;align-items:stretch}
 .grant-head .check,.grant-head select{flex:none;max-width:none;width:100%}
 fieldset{padding:14px;margin-block:18px}
 .user-card .actions .btn{flex:1 1 110px;min-height:44px}
 dialog{padding:18px;border-radius:20px;width:calc(100vw - 24px)}
 .dialog-head{gap:10px;margin-bottom:18px}
 .dialog-actions{bottom:-18px;margin-top:18px;padding-top:14px}
 .dialog-actions .btn{flex:1 1 140px;min-height:46px}
 .login-card{padding:24px 20px}
 .login-card .brand{margin-bottom:24px}
 .status{padding:12px 14px}
}
@media(max-width:359px){
 .main{padding-inline:12px}
 .top>div:first-child{flex-basis:100%}
 .top .actions{width:100%;justify-content:flex-end}
 .card{padding:15px}
}
@media(pointer:coarse){.btn.small{min-height:44px}.nav a,.nav button{min-height:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}