/* Siam2Dev-UML v2.0.9.20 | Non-destructive viewport and theme stability layer */
:root{--s2d-safe-gap:10px}
html,body,.app{min-width:0;max-width:100%;overflow-x:hidden}
.layout,.layout>.panel,.layout>.work,.left-tab-pane{min-width:0;max-width:100%;box-sizing:border-box}
/* Project Explorer: nested details and flex items must be allowed to shrink. */
.panel.left,.panel.left *{box-sizing:border-box}
.panel.left{overflow-x:hidden!important}
.panel.left :is(.left-tab-pane,.project-explorer,.project-tree,.project-phase){min-width:0!important;max-width:100%!important}
.panel.left .project-explorer{width:auto!important;margin-left:8px!important;margin-right:8px!important;padding:9px!important;overflow-x:hidden!important}
.panel.left .project-tree{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px}
.panel.left .project-phase{width:100%!important;overflow:hidden!important;padding:4px!important}
.panel.left .project-phase>summary{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.panel.left .project-tree-item{display:flex!important;align-items:center;gap:6px;width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;padding:8px 6px!important}
.panel.left .project-tree-item>i{flex:0 0 auto}
.panel.left .project-tree-item>span{display:block!important;flex:1 1 0%!important;width:0!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;overflow-wrap:normal!important}
.panel.left :is(.project-explorer header,.project-explorer .project-name){min-width:0;max-width:100%;overflow-wrap:anywhere}
.panel.left #projectSearch{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
/* Prevent dialogs, drop-downs and contextual toolbars from expanding the viewport. */
.top,.top-row,.top-row .row-inner,.top-group{min-width:0;max-width:100%;box-sizing:border-box}
.top-row :is(input,select){min-width:0;max-width:100%}
:where(.menu-entries,.edge-floating,.editor-context,.sheet-menu){max-width:min(560px,calc(100vw - 24px));box-sizing:border-box}
.edge-floating{flex-wrap:wrap;row-gap:6px;max-height:min(55dvh,320px);overflow-y:auto}
dialog{box-sizing:border-box;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overscroll-behavior:contain}
dialog:modal{overflow-y:auto}
/* Preserve meaningful text and controls under light and dark appearance modes. */
html[data-ui-theme] .project-tree-item.active{color:var(--ui-text-strong)!important;border:1px solid var(--ui-border-strong)!important}
html[data-ui-theme] :is(.project-phase,.project-explorer,.inspector-section) :is(button,summary):focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(.practice-section,.anal-kpis article,.teach-result){color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(.practice-section,.anal-kpis article,.teach-result) :is(h1,h2,h3,h4,p,span,strong,small,label){color:var(--ui-text-strong)!important}
html[data-ui-theme] :is(.practice-dialog,#analyticsDialog,#teacherDialog) :is(button,input,select):focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px}
/* Keep the bottom diagram tabs usable without stretching the app. */
.bottom,.sheets-bar,.sheets-strip{min-width:0;max-width:100%}
.sheets-strip{overflow-x:auto;scrollbar-width:thin}
.sheet-tab{max-width:220px;min-width:0}
.sheet-tab .sheet-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Inspector remains scrollable within its designated column. */
.panel.right{min-width:0;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain}
.panel.right :is(input,select,textarea){box-sizing:border-box;max-width:100%;min-width:0}
@media(max-width:1024px){.panel.left .project-explorer{margin-inline:5px!important;padding:7px!important}.top-row .row-inner{gap:6px}}
@media(max-width:760px){.top-row{width:100%;overflow:visible}.panel.left{max-width:min(300px,84vw)}.panel.right{max-width:min(370px,90vw)}.edge-floating{max-width:calc(100vw - 20px)!important}}
@media(max-width:420px){.panel.left .project-tree-item{font-size:11px!important}.sheet-tab{max-width:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}