/* VYNNY S1: one bounded workspace scrollport for desktop, web and mobile.
   Scope stays inside the existing shell. Browser zoom and native gestures remain enabled. */
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #appShell.app-shell:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: var(--vynny-mobile-height, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #appShell > #workspace {
  position: relative !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 22px 24px calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  scroll-padding: 16px 0 calc(48px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
/* A wrapping header and open menu may grow, while the workspace can shrink. */
html:root[data-vynny-dark="c8"] body.vynny-top-navigation[data-vynny-ui="r3"] #appShell > .topbar {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace .directory-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-width: 0 !important;
}
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace .directory-toolbar > .directory-search {
  flex: 1 1 18rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace .directory-toolbar > select {
  flex: 1 1 10rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace .directory-search input {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Keep table overflow local, instead of widening the entire application. */
html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace :is(.table-wrap, .table-scroll, .table-container, .directory-table-wrap, .data-table-wrap, .finance-ops-table-wrap, .vynny-mobile-table-m2) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}
@media (max-width: 1100px) {
  html:root[data-vynny-dark="c8"]:where(:not([data-vynny-mobile="m2"])) body[data-vynny-ui="r3"] #workspace :is(.grid.kpis, .grid.three) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #appShell > #workspace {
    padding: 16px max(12px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace :is(.grid.kpis, .grid.two, .grid.three, .form-grid, .finance-ops-grid, .finance-ops-columns, .r4-ui-grid, .r4-ui-section-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root[data-vynny-dark="c8"] body[data-vynny-ui="r3"] #workspace .directory-toolbar > :is(.directory-search, select) {
    flex-basis: 100% !important;
  }
}
@media (max-height: 500px) {
  html:root[data-vynny-dark="c8"] body.vynny-top-navigation[data-vynny-ui="r3"] #appShell > .topbar {
    min-height: 0 !important;
    max-height: 35vh !important;
    max-height: 35dvh !important;
    overflow: auto !important;
  }
  html:root[data-vynny-dark="c8"] body.vynny-top-navigation[data-vynny-ui="r3"] #appShell > #vynnyTopNavigation {
    min-height: 0 !important;
    max-height: 40vh !important;
    max-height: 40dvh !important;
    overflow: auto !important;
  }
}