:root {
  --zy-flow-border: #e7eaf2;
  --zy-flow-muted: #7a8497;
  --zy-flow-text: #273044;
  --zy-flow-accent: #5c63f2;
  --zy-flow-soft: #f7f8fc;
}

/* Global long-content governance. It intentionally avoids navigation, forms and popovers. */
.zy-flow-managed {
  min-width: 0;
}

.zy-flow-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--zy-flow-border);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 5px 18px rgba(35, 43, 76, .045);
  color: var(--zy-flow-text);
  font-family: inherit;
  font-size: 12px;
}

.zy-flow-controls__left,
.zy-flow-controls__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.zy-flow-controls__left {
  flex: 1 1 auto;
}

.zy-flow-controls__right {
  flex: 0 0 auto;
}

.zy-flow-search {
  width: min(260px, 100%);
  height: 30px;
  padding: 0 10px;
  border: 1px solid #dfe3ed;
  border-radius: 8px;
  background: #fff;
  color: #232b3d;
  font: inherit;
  outline: none;
}

.zy-flow-search:focus {
  border-color: #9ca3ff;
  box-shadow: 0 0 0 3px rgba(92, 99, 242, .10);
}

.zy-flow-count {
  white-space: nowrap;
  color: var(--zy-flow-muted);
  font-variant-numeric: tabular-nums;
}

.zy-flow-button,
.zy-flow-size {
  height: 30px;
  border: 1px solid #dfe3ed;
  border-radius: 8px;
  background: #fff;
  color: #4a5366;
  font: inherit;
  font-size: 12px;
}

.zy-flow-button {
  min-width: 34px;
  padding: 0 10px;
  cursor: pointer;
}

.zy-flow-button:hover:not(:disabled) {
  border-color: #b9befd;
  color: var(--zy-flow-accent);
  background: #fafaff;
}

.zy-flow-button:disabled {
  cursor: default;
  opacity: .42;
}

.zy-flow-size {
  padding: 0 6px;
  cursor: pointer;
}

.zy-flow-scroll-region {
  max-height: min(64vh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

aside .zy-flow-scroll-region,
.side .zy-flow-scroll-region,
.sidebar .zy-flow-scroll-region,
.drawer .zy-flow-scroll-region {
  max-height: calc(100vh - 300px);
}

.zy-table-scroll {
  max-width: 100%;
  max-height: min(68vh, 720px);
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border-radius: 10px;
}

.zy-table-scroll table,
table.zy-managed-table {
  min-width: 100%;
}

.zy-table-scroll thead th,
table.zy-managed-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  box-shadow: 0 1px 0 var(--zy-flow-border);
}

.zy-flow-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.zy-flow-clamp.zy-flow-clamp--open {
  display: block;
  overflow: visible;
}

.zy-flow-clamp-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zy-flow-accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

pre.zy-flow-code,
code.zy-flow-code {
  max-height: min(55vh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 760px) {
  .zy-flow-controls {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .zy-flow-controls__left,
  .zy-flow-controls__right {
    width: 100%;
  }
  .zy-flow-controls__right {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .zy-flow-search {
    width: 100%;
  }
  .zy-flow-scroll-region,
  .zy-table-scroll {
    max-height: 62vh;
  }
}

/* R17: keep pagination labels horizontal and wrap controls only as complete units. */
.zy-flow-controls{flex-wrap:wrap!important;row-gap:10px!important}
.zy-flow-controls__left,.zy-flow-controls__right{min-width:0;flex-wrap:wrap!important}
.zy-flow-controls__right{justify-content:flex-end;align-items:center}
.zy-flow-button{box-sizing:border-box;min-width:64px!important;width:auto!important;white-space:nowrap!important;word-break:keep-all!important;line-height:1.15!important;flex:0 0 auto!important;padding-inline:12px!important}
.zy-flow-button[data-zy-expand]{min-width:76px!important}
.zy-flow-size{min-width:92px!important;white-space:nowrap!important;flex:0 0 auto!important}
.zy-flow-count{white-space:nowrap!important;word-break:keep-all!important}
@media(max-width:720px){.zy-flow-controls__right{width:100%;justify-content:flex-start}.zy-flow-button{min-width:60px!important}}