/* Phase 375 : Web / mobile responsive. No alteration to API or server-side data. */
:root{--ui-space:clamp(8px,1.2vw,18px);--ui-radius:12px}
html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;min-width:0;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%;font-family:inherit}
input,select,textarea{min-width:0}
button,a,summary{touch-action:manipulation}
:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #e8a62b!important;outline-offset:2px}
:where(.card,.workcontent,.phase192-content,.phase192-shell,.workspace,.row,.grid){min-width:0}
:where(table){max-width:100%}
:where(.table-wrap,.table-responsive,.table-scroll,.overflow-x-auto){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
:where(dialog,[role=dialog]){max-width:min(96vw,780px);max-height:90dvh;overflow-y:auto}
/* desktop and tablet: preserve a single horizontal Client menu */
body.client-connected #app .phase192-shell{display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;gap:clamp(6px,1vw,12px)!important;margin:0!important}
body.client-connected #app .phase192-content{width:100%!important;max-width:100%!important;min-width:0!important}
body.client-connected #client-menu-163{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;position:static!important;top:auto!important;min-height:0!important;height:auto!important;align-items:stretch!important;justify-content:flex-start!important;width:100%!important;max-width:100%!important;gap:5px!important;margin:0!important;padding:8px!important;border-radius:11px!important}
body.client-connected #client-menu-163 button{width:auto!important;flex:0 1 auto!important;min-height:40px!important;height:auto!important;font-size:clamp(11px,.82vw,13px)!important;line-height:1.3!important;padding:9px 10px!important;text-align:center!important;white-space:normal!important}
body.client-connected #client-dashboard-163{width:100%!important;max-width:100%!important;min-width:0!important}
body.client-connected #client-dashboard-163 .client-dash-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
/* admin: sidebar plus a flexible content column, without nested page width overflow */
body.admin261-layout #main-content #app:not(.hidden)>.workspace{display:grid!important;grid-template-columns:minmax(190px,240px) minmax(0,1fr)!important;grid-template-areas:'menu contenu'!important;gap:12px!important;width:100%!important;max-width:100%!important}
body.admin261-layout #main-content #app .workspace>#nav{grid-area:menu!important;min-width:0!important;width:100%!important}
body.admin261-layout #main-content #app .workspace>.workcontent{grid-area:contenu!important;min-width:0!important;max-width:100%!important;width:100%!important}
body.admin261-layout #main-content #pane{min-width:0!important;max-width:100%!important}
/* do not force cards into fixed pixel widths */
:where(.phase208-overview,.phase208-actions){min-width:0;max-width:100%}
@media(max-width:1050px){body.client-connected #client-dashboard-163 .client-dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:850px){
 body.admin261-layout #main-content #app:not(.hidden)>.workspace{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:'menu' 'contenu'!important}
 body.admin261-layout #main-content #app .workspace>#nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 body.admin261-layout #main-content #app .workspace>#nav #dj-quickfind{grid-column:1/-1!important}
 body.client-connected #client-menu-163 button{flex:1 1 calc(25% - 5px)!important}
}
@media(max-width:600px){
 body.client-connected #client-menu-163{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;padding:6px!important}
 body.client-connected #client-menu-163 button{width:100%!important;min-height:44px!important;font-size:11px!important;padding:8px 5px!important}
 body.client-connected #client-dashboard-163 .client-dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
 body.admin261-layout #main-content #app .workspace>#nav{grid-template-columns:minmax(0,1fr)!important}
 body.admin261-layout #main-content #app .workspace>#nav #dj-quickfind{grid-column:1!important}
 main,#main-content{max-width:100%!important;min-width:0!important;padding-left:8px!important;padding-right:8px!important}
 .phase208-overview,.phase208-actions{grid-template-columns:minmax(0,1fr)!important}
 :where(.card,.panel){min-width:0!important}
 input,select,textarea{font-size:16px!important}
}
@media(max-width:370px){body.client-connected #client-dashboard-163 .client-dash-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}