/* Webapp4 host adapter for the app-local Core UI Kit. */
:root {
  --cui-canvas: var(--th-canvas, var(--th-bg));
  --cui-bg: var(--th-bg);
  --cui-surface: var(--th-surface);
  --cui-surface-2: var(--th-surface-2);
  --cui-panel: var(--th-panel);
  --cui-panel-high: color-mix(in srgb, var(--th-panel) 88%, var(--th-text) 12%);
  --cui-surface-raised: var(--th-surface-raised, var(--th-panel));
  --cui-surface-overlay: var(--th-surface-overlay, var(--cui-panel-high));
  --cui-surface-inset: var(--th-surface-inset, color-mix(in srgb, var(--th-bg) 88%, var(--th-text) 12%));
  --cui-code-surface: var(--th-code-surface, var(--cui-surface-inset));
  --cui-text: var(--th-text);
  --cui-muted: var(--th-muted);
  --cui-dim: var(--th-dim);
  --cui-line: var(--th-line);
  --cui-line-strong: color-mix(in srgb, var(--th-muted) 30%, transparent);
  --cui-hover: var(--th-hover);
  --cui-accent: var(--th-accent);
  --cui-accent-strong: var(--th-accent);
  --cui-accent-soft: var(--th-accent-soft);
  --cui-on-accent: var(--th-on-accent);
  --cui-ok: var(--th-ok);
  --cui-ok-soft: color-mix(in srgb, var(--th-ok) 14%, transparent);
  --cui-warning: var(--th-warn);
  --cui-warning-soft: color-mix(in srgb, var(--th-warn) 14%, transparent);
  --cui-error: var(--th-err);
  --cui-error-soft: color-mix(in srgb, var(--th-err) 14%, transparent);
  --cui-info: var(--th-info, #5ca4ea);
  --cui-info-soft: var(--th-info-soft, color-mix(in srgb, var(--cui-info) 14%, transparent));
  --cui-shadow-sm: var(--th-shadow);
  --cui-shadow: var(--th-shadow);
  --cui-backdrop: color-mix(in srgb, var(--th-canvas) 68%, transparent);
  --cui-font-family: var(--th-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

/* Guard the complete Webapp4 document, including the legacy shell outside
   .cui-app, against caret-browsing markers and text cursors on static UI. */
body,
body * {
  caret-color: transparent;
}

body {
  cursor: default;
}

body :where(textarea, [role="textbox"], [contenteditable]:not([contenteditable="false"])),
body input:not([type]),
body input:is(
  [type="text" i], [type="search" i], [type="email" i], [type="password" i],
  [type="tel" i], [type="url" i], [type="number" i], [type="date" i],
  [type="datetime-local" i], [type="month" i], [type="time" i], [type="week" i]
) {
  cursor: text;
  caret-color: var(--cui-accent, currentColor);
}

body input[type="range" i] {
  cursor: pointer;
  caret-color: transparent;
}

body :where(a[href], button, summary, [role="button"]) {
  cursor: pointer;
}

body [data-cui-static-caret="visible"],
body [data-cui-static-caret="visible"] * {
  caret-color: var(--cui-accent, currentColor);
}

body.theme-light .cui-app,
body.theme-light .cui-picker,
body.theme-light .cui-popover,
body.theme-light .cui-modal,
body.theme-light .cui-drawer,
body.theme-light .cui-toasts { color-scheme: light; }

.w4-cui-page {
  min-width: 0;
  width: 100%;
  color: var(--th-text);
  background: var(--cui-canvas);
  font-family: inherit;
  font-weight: var(--th-fw, 400);
  letter-spacing: var(--th-ls, 0);
}

.w4-cui-entity-page {
  display: flow-root;
  min-height: 100%;
  padding: clamp(8px, 1.3vw, 18px);
  border-radius: 16px;
}

/* Launchpads rely on their Core UI grid gap to separate each section heading
   from the preceding hero or tile group. Restore that layout after the generic
   entity-page host wrapper switches migrated pages to flow-root. */
.w4-cui-page.cui-launchpad {
  display: grid;
}

/* Modern Webapp4 subnavs are full-width navigation bars, not centered cards.
   The element-qualified selector also keeps this shared contract authoritative
   over older page-local width helpers without requiring template-by-template
   overrides. */
nav.w4-cui-subnav.cui-subnav {
  width: 100%;
  max-width: none;
  margin: 0 0 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__primary {
  min-height: 57px;
  gap: 5px;
  padding: 10px clamp(12px, 1.2vw, 18px) 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cui-surface-2) 74%, var(--cui-surface)),
    var(--cui-surface)
  );
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__tab {
  min-height: 47px;
  padding: 9px 14px 12px;
  font-weight: var(--th-fw-strong, 650);
  transition:
    color var(--cui-duration) var(--cui-ease),
    background-color var(--cui-duration) var(--cui-ease),
    box-shadow var(--cui-duration) var(--cui-ease),
    transform var(--cui-duration-fast) var(--cui-ease);
}

/* Optional landing entry: visible in the page subnav, deliberately absent
   from the base-menu projection. It behaves as a hub, not as browser Back. */
nav.w4-cui-subnav.cui-subnav .cui-subnav__tab.cui-subnav__tab--landing {
  inline-size: 46px;
  min-inline-size: 46px;
  justify-content: center;
  gap: 0;
  padding-inline: 10px;
  margin-inline-end: 9px;
  color: var(--cui-text);
  background-color: color-mix(in srgb, var(--cui-surface-2) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--cui-line);
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__tab.cui-subnav__tab--landing::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-end: -7px;
  inline-size: 1px;
  background: var(--cui-line);
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__tab.cui-subnav__tab--landing .cui-icon {
  color: var(--cui-muted);
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__tab.cui-subnav__tab--landing:hover,
nav.w4-cui-subnav.cui-subnav .cui-subnav__tab.cui-subnav__tab--landing[aria-selected="true"],
nav.w4-cui-subnav.cui-subnav .cui-subnav__tab.cui-subnav__tab--landing[aria-current="page"] {
  color: var(--cui-text);
  background-color: color-mix(in srgb, var(--cui-accent-soft) 58%, var(--cui-surface));
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__tab:hover {
  background-color: var(--cui-hover);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cui-accent) 11%, transparent);
  transform: translateY(-1px);
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__tab[aria-selected="true"],
nav.w4-cui-subnav.cui-subnav .cui-subnav__tab[aria-current="page"] {
  background-color: color-mix(in srgb, var(--cui-accent-soft) 82%, var(--cui-surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cui-accent) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--cui-accent) 10%, transparent);
  animation: w4-subnav-active-in var(--cui-duration) var(--cui-ease) both;
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__secondary {
  min-height: 50px;
  gap: 4px;
  padding: 5px clamp(12px, 1.2vw, 18px);
  background: color-mix(in srgb, var(--cui-bg) 30%, var(--cui-surface));
}

.w4-subnav-scroll {
  position: relative;
  min-width: 0;
}

.w4-subnav-scroll > .cui-subnav__primary,
.w4-subnav-scroll > .cui-subnav__secondary {
  width: 100%;
}

.w4-subnav-scroll__button {
  position: absolute;
  z-index: 5;
  inset-block: 0;
  inline-size: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--cui-accent);
  background: color-mix(in srgb, var(--cui-surface) 94%, transparent);
  box-shadow: 0 0 18px 10px color-mix(in srgb, var(--cui-surface) 92%, transparent);
  cursor: pointer;
  transition:
    color var(--cui-duration-fast),
    background-color var(--cui-duration-fast),
    box-shadow var(--cui-duration-fast);
}

.w4-subnav-scroll__button[hidden] {
  display: none;
}

.w4-subnav-scroll__button--previous {
  inset-inline-start: 0;
  border-inline-end: 1px solid color-mix(in srgb, var(--cui-accent) 16%, var(--cui-line));
}

.w4-subnav-scroll__button--next {
  inset-inline-end: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--cui-accent) 16%, var(--cui-line));
}

.w4-subnav-scroll__button:hover,
.w4-subnav-scroll__button:focus-visible {
  color: var(--cui-text);
  background: color-mix(in srgb, var(--cui-accent-soft) 78%, var(--cui-surface));
  box-shadow: 0 0 22px 12px color-mix(in srgb, var(--cui-surface) 96%, transparent);
}

.w4-subnav-scroll__button:focus-visible {
  outline: 2px solid var(--cui-accent);
  outline-offset: -3px;
}

.w4-subnav-scroll__button .cui-icon {
  inline-size: 18px;
  block-size: 18px;
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__filter {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 7px;
  transition:
    color var(--cui-duration) var(--cui-ease),
    background-color var(--cui-duration) var(--cui-ease),
    box-shadow var(--cui-duration) var(--cui-ease),
    transform var(--cui-duration-fast) var(--cui-ease);
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__filter:hover {
  background-color: color-mix(in srgb, var(--cui-accent-soft) 38%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cui-accent) 9%, transparent);
  color: var(--cui-text);
  transform: translateY(-1px);
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__filter[aria-pressed="true"] {
  padding-inline-start: 17px;
  background-color: color-mix(in srgb, var(--cui-accent-soft) 56%, transparent);
  color: var(--cui-text);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cui-accent) 12%, transparent),
    0 0 14px color-mix(in srgb, var(--cui-accent) 8%, transparent);
  animation: w4-subnav-active-in var(--cui-duration) var(--cui-ease) both;
}

nav.w4-cui-subnav.cui-subnav .cui-subnav__filter[aria-pressed="true"]::before {
  inset-inline-start: 8px;
  inset-block: 12px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--cui-accent) 40%, transparent);
}

nav.w4-cui-subnav.cui-subnav :is(.cui-subnav__tab, .cui-subnav__filter):active {
  transform: translateY(0) scale(.985);
}

nav.w4-cui-subnav.cui-subnav :is(.cui-subnav__tab, .cui-subnav__filter):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cui-accent) 62%, transparent);
  outline-offset: -2px;
}

@keyframes w4-subnav-active-in {
  from {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  nav.w4-cui-subnav.cui-subnav {
    border-block: 1px solid CanvasText;
  }
}

.w4-purchase-subnav {
  width: 100%;
}

.w4-purchase-subnav__supplier {
  margin-inline-start: auto;
}

.w4-purchase-subnav__supplier::before {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  inset-block: 10px;
  width: 1px;
  background: var(--cui-line);
}

@media (max-width: 720px) {
  /* The legacy shell keeps desktop 22px gutters. Migrated Core UI pages own
     their inner spacing, so stacking both gutters needlessly crushes every
     responsive component on a phone. */
  .content:has(> .w4-cui-page) {
    padding-inline: 10px;
    padding-block-end: max(12px, env(safe-area-inset-bottom));
  }

  .w4-purchase-subnav__supplier {
    margin-inline-start: 0;
  }

  .w4-purchase-subnav__supplier::before {
    display: none;
  }
}

.w4-cui-page .cui-table-panel {
  width: 100%;
}

/* The legacy host declares an unlayered `a { color: ... }` rule after the
   layered Core UI stylesheet. Core UI popovers also live in the global header
   and body portals outside `.w4-cui-page`, so this semantic guard must be
   component-scoped, never page-wrapper-scoped. */
.cui-button.cui-button--primary {
  color: var(--cui-on-accent);
}

/* Base.html intentionally has broad legacy form/table rules. These scoped
   resets keep the vendored component authoritative without touching old pages. */
.w4-cui-page .cui-data-table {
  border-collapse: separate;
}

.w4-cui-page .cui-data-table th,
.w4-cui-page .cui-data-table td {
  padding: 9px 10px;
  border-block-end: 1px solid var(--cui-line);
}

/* Action columns are controls, not data. Their accessible name remains on the
   header, while the visual column shrinks to the widest real action set. The
   w4 class is also applied centrally to legacy server-rendered tables. */
:is(.cui-data-table__actions-column, .cui-data-table__actions-heading,
    .cui-data-table__actions-cell, .w4-table-action-column) {
  width: 1% !important;
  min-width: 0 !important;
  white-space: nowrap;
}

:is(td.cui-data-table__actions-cell, td.w4-table-action-column) > * {
  inline-size: max-content !important;
  max-inline-size: none;
  margin-inline-start: auto;
}

@media (max-width: 720px) {
  :is(td.cui-data-table__actions-cell, td.w4-table-action-column) {
    width: auto !important;
    white-space: normal;
  }

  :is(td.cui-data-table__actions-cell, td.w4-table-action-column) > * {
    inline-size: auto !important;
    max-inline-size: 100%;
  }
}

.w4-cui-page .cui-table-filter {
  width: 100%;
  min-width: 60px;
  height: 27px;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--cui-text);
  background: transparent;
}

.w4-cui-page .cui-check-input {
  inline-size: 16px;
  block-size: 16px;
  width: 16px;
  padding: 0;
  border: 1px solid var(--cui-line-strong);
  border-radius: 5px;
  background: var(--cui-panel);
}

.w4-cui-page .cui-input,
.w4-cui-page .cui-select,
.w4-cui-page .cui-textarea {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  outline: 0;
  color: var(--cui-text);
  border-color: var(--cui-line);
  background: var(--cui-surface);
}

.w4-cui-page .cui-textarea {
  min-height: 88px;
  resize: vertical;
}

.cui-picker .cui-picker__search input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--cui-text);
  background: transparent;
}

.w4-cui-settings {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-block-end: 12px;
  padding: 11px 13px;
  border: 1px solid var(--th-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--th-panel) 84%, transparent);
}

.w4-cui-settings .cui-field {
  width: min(220px, 100%);
}

.w4-cui-settings--wide .cui-field {
  width: min(360px, 100%);
}

.w4-cui-settings__note {
  min-width: 0;
  flex: 1;
  align-self: center;
  color: var(--th-muted);
  font-size: .72rem;
}

.w4-cui-detail {
  display: grid;
  gap: 12px;
}

.w4-cui-trace {
  overflow: hidden;
  border: 1px solid var(--th-line);
  border-radius: 14px;
  background: var(--cui-surface-raised);
}

.w4-cui-trace__head {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-block-end: 1px solid var(--th-line);
  background: var(--cui-surface-overlay);
}

.w4-cui-trace__head h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: var(--th-text);
  font-size: .82rem;
  font-weight: var(--th-fw-strong, 650);
}

.w4-cui-trace pre {
  max-height: min(52vh, 520px);
  margin: 0;
  overflow: auto;
  padding: 14px;
  color: var(--th-text);
  background: var(--cui-code-surface);
  font: .72rem/1.55 var(--cui-font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.w4-cui-code {
  color: var(--th-text);
  font-family: var(--cui-font-mono);
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.w4-cui-form {
  width: min(1240px, 100%);
  margin-inline: auto;
}

.w4-cui-form > section + section {
  margin-block-start: 14px;
}

.w4-cui-form-section {
  margin-block-start: 14px;
}

.w4-cui-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr);
  gap: 14px;
  align-items: start;
}

.w4-cui-form-stack {
  display: grid;
  gap: 14px;
}

.w4-cui-form-card {
  min-width: 0;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--cui-line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--cui-panel) 88%, var(--cui-bg));
  box-shadow: 0 12px 36px color-mix(in srgb, var(--cui-text) 5%, transparent);
}

.w4-cui-form-card__head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: -15px -15px 15px;
  padding: 13px 15px;
  border-block-end: 1px solid var(--cui-line);
  background: color-mix(in srgb, var(--cui-surface-2) 82%, var(--cui-bg));
}

.w4-cui-form-card__head--compact {
  padding-block: 11px;
}

.w4-cui-form-card__head > div {
  min-width: 0;
}

.w4-cui-form-card__head h2,
.w4-cui-form-card__head p {
  margin: 0;
  overflow-wrap: anywhere;
}

.w4-cui-form-card__head h2 {
  color: var(--cui-text);
  font-size: .88rem;
  font-weight: var(--th-fw-strong, 680);
}

.w4-cui-form-card__head p {
  margin-block-start: 3px;
  color: var(--cui-muted);
  font-size: .7rem;
  line-height: 1.4;
}

.w4-cui-form-card__icon {
  inline-size: 36px;
  block-size: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cui-accent) 24%, var(--cui-line));
  border-radius: 10px;
  color: var(--cui-accent);
  background: var(--cui-accent-soft);
}

.w4-cui-form-grid,
.w4-cui-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.w4-cui-form-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.w4-cui-field-wide {
  grid-column: 1 / -1;
}

.w4-cui-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-block-start: 15px;
  padding-block-start: 13px;
  border-block-start: 1px solid var(--cui-line);
}

.w4-cui-inline-control {
  display: flex;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}

.w4-cui-inline-control .cui-input {
  flex: 1;
}

/* Opt-in control shell for lightweight entity editors. The shell owns the
   border and focus treatment; native inputs keep their established names,
   IDs and browser behaviour. */
.w4-cui-control-shell {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline: 11px;
  border: 1px solid var(--cui-line);
  border-radius: 12px;
  color: var(--cui-text);
  background: color-mix(in srgb, var(--cui-surface) 74%, transparent);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.w4-cui-control-shell:hover {
  border-color: color-mix(in srgb, var(--cui-accent) 22%, var(--cui-line));
  background: var(--cui-surface);
}

.w4-cui-control-shell:focus-within {
  border-color: color-mix(in srgb, var(--cui-accent) 62%, var(--cui-line));
  background: var(--cui-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-accent) 13%, transparent);
}

.w4-cui-control-shell > .cui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--cui-muted);
  transition: color .16s ease;
}

.w4-cui-control-shell:focus-within > .cui-icon {
  color: var(--cui-accent);
}

.w4-cui-control-shell > :is(.cui-input, .cui-select, .cui-textarea),
.w4-cui-control-shell > :not(.cui-icon) {
  min-width: 0;
  flex: 1;
}

.w4-cui-control-shell > :is(.cui-input, .cui-select, .cui-textarea) {
  min-height: 42px;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.w4-cui-switch-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-block-start: 13px;
  color: var(--cui-text);
  font-size: .76rem;
}

.w4-cui-notice {
  margin-block: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cui-line);
  border-radius: 11px;
  color: var(--cui-muted);
  background: var(--cui-surface-inset);
}

.w4-cui-notice[data-tone="warning"] {
  color: var(--cui-warning);
  border-color: color-mix(in srgb, var(--cui-warning) 28%, var(--cui-line));
  background: var(--cui-warning-soft);
}

.w4-cui-add-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  margin-block-end: 12px;
}

.w4-cui-add-row .cui-picker-trigger {
  width: 100%;
}

.w4-cui-format-preview {
  display: block;
  min-height: 60px;
  padding: 17px 13px;
  overflow-wrap: anywhere;
  border: 1px solid var(--cui-line);
  border-radius: 11px;
  color: var(--cui-text);
  background: var(--cui-code-surface);
  font: .86rem/1.45 var(--cui-font-mono);
}

.w4-cui-page [hidden] {
  display: none !important;
}

.w4-cui-picker-grid .cui-picker-trigger,
.w4-cui-picker-block .cui-picker-trigger {
  width: 100%;
}

.w4-cui-picker-block {
  display: block;
}

.w4-cui-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-block-start: 13px;
}

.w4-cui-kpis > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--cui-line);
  border-radius: 10px;
  background: var(--cui-surface);
}

.w4-cui-kpis span,
.w4-cui-kpis strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w4-cui-kpis span {
  color: var(--cui-muted);
  font-size: .66rem;
}

.w4-cui-kpis strong {
  margin-block-start: 3px;
  color: var(--cui-text);
  font-size: .76rem;
}

.w4-cui-statline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 13px;
}

@media (max-width: 620px) {
  .w4-cui-settings {
    align-items: stretch;
    flex-direction: column;
  }

  .w4-cui-settings .cui-field,
  .w4-cui-settings .cui-button {
    width: 100%;
  }

  .w4-cui-form-grid,
  .w4-cui-picker-grid,
  .w4-cui-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .w4-cui-form-grid--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .w4-cui-field-wide {
    grid-column: auto;
  }

  .w4-cui-inline-control,
  .w4-cui-add-row {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
  }

  .w4-cui-inline-control .cui-button,
  .w4-cui-add-row .cui-button {
    width: 100%;
  }
}

@media (max-width: 960px) {
  .w4-cui-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}