/* Shared responsive containment baseline for Afraz server-rendered pages. */
*, *::before, *::after { box-sizing: border-box; }

html, body, .app-shell, .main, .content { max-inline-size: 100%; }
.main, .content, .panel, .hero, .page-actions, .table-card { min-inline-size: 0; }
.content { inline-size: 100%; }

img, svg, video, canvas { max-inline-size: 100%; }
input, select, textarea, button { max-inline-size: 100%; }
textarea { resize: vertical; }

.actions, .row-actions, .form-actions, .quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

@media (max-width: 64rem) {
  .grid-2, .grid-3, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-actions { align-items: flex-start; }
}

@media (max-width: 48rem) {
  .content { padding-inline: clamp(.75rem, 4vw, 1rem); }
  .grid-2, .grid-3, .stats { grid-template-columns: 1fr; }
  .page-actions, .panel-head, .hero { align-items: stretch; }
  .page-actions > *, .panel-head > *, .hero > * { min-inline-size: 0; }
  .actions, .form-actions, .quick-actions { inline-size: 100%; }
  .actions > *, .form-actions > * { flex: 1 1 10rem; }
}

@media (max-width: 32rem) {
  .actions, .form-actions { display: grid; grid-template-columns: 1fr; }
  .actions > *, .form-actions > * { inline-size: 100%; }
}

/* Unified table contract --------------------------------------------------
   Desktop tables must fit their card without clipping controls or creating
   horizontal scroll just because a cell contains actions. Scrolling is a
   narrow-viewport fallback only. */
.table-card,
.panel.table-card,
.table-scroll,
.table-scroll-wrapper,
.responsive-table,
.pb-table-card {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

.data-table,
.management-table,
.pb-table-card table {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th,
.data-table td,
.management-table th,
.management-table td,
.table-card table th,
.table-card table td,
.table-scroll table th,
.table-scroll table td,
.responsive-table table th,
.responsive-table table td,
.pb-table-card th,
.pb-table-card td {
  min-inline-size: 0 !important;
  max-inline-size: none;
  vertical-align: middle;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.data-table th,
.management-table th,
.table-card table th,
.table-scroll table th,
.pb-table-card th {
  white-space: nowrap;
}

/* Business text receives the elastic part of the row. */
.management-table .table-primary-cell {
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  white-space: normal;
}

.data-table .table-primary-cell strong,
.management-table .table-primary-cell strong,
.data-table .table-subtitle,
.management-table .table-subtitle {
  overflow-wrap: normal;
  word-break: normal;
}

/* Compact values stay readable and never break digit-by-digit. */
.ui-date-value,
.table-nowrap,
.table-date,
.table-version,
.table-number,
.table-status,
.status,
.status-pill,
bdi[dir="ltr"] {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* Email/technical text can wrap when necessary instead of widening the table. */
.table-email,
.data-table bdi[dir="ltr"],
.management-table bdi[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html[dir="rtl"] .ui-date-value,
body.is-rtl .ui-date-value,
html[dir="rtl"] .table-date,
body.is-rtl .table-date {
  direction: rtl;
  unicode-bidi: isolate;
}

html[dir="ltr"] .ui-date-value,
body.is-ltr .ui-date-value,
html[dir="ltr"] .table-date,
body.is-ltr .table-date {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Action controls must stay inside their cell. A two-column control grid is
   predictable in RTL/LTR and avoids buttons overflowing a narrow auto-sized cell. */
.management-table .table-actions-cell,
.data-table .table-actions-cell,
.management-table td.actions,
.data-table td.actions {
  min-inline-size: 0 !important;
  overflow: hidden !important;
}

.management-table .row-actions,
.data-table .row-actions,
.management-table td.actions,
.data-table td.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  align-items: stretch;
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  white-space: normal;
}

.management-table .row-actions > *,
.data-table .row-actions > *,
.management-table td.actions > *,
.data-table td.actions > *,
.management-table .row-actions form,
.data-table .row-actions form {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0 !important;
}

.management-table .table-action,
.data-table .table-action,
.management-table .row-actions > a,
.data-table .row-actions > a,
.management-table .row-actions > button,
.data-table .row-actions > button,
.management-table .row-actions form > button,
.data-table .row-actions form > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-inline-size: 0 !important;
  max-inline-size: 100%;
  min-block-size: 36px;
  padding-inline: .55rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-align: center;
}

/* Definition tables are high-frequency administration grids. Fixed desktop
   column contracts make all six columns use the available card width instead
   of allowing action buttons or emails to push the table off-screen. */
.form-definition-table,
.process-definition-table {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  table-layout: fixed !important;
}

.form-definition-table th:nth-child(1),
.form-definition-table td:nth-child(1) { inline-size: 30%; }
.form-definition-table th:nth-child(2),
.form-definition-table td:nth-child(2) { inline-size: 7%; }
.form-definition-table th:nth-child(3),
.form-definition-table td:nth-child(3) { inline-size: 7%; }
.form-definition-table th:nth-child(4),
.form-definition-table td:nth-child(4) { inline-size: 11%; }
.form-definition-table th:nth-child(5),
.form-definition-table td:nth-child(5) { inline-size: 21%; }
.form-definition-table th:nth-child(6),
.form-definition-table td:nth-child(6) { inline-size: 24%; }

.process-definition-table th:nth-child(1),
.process-definition-table td:nth-child(1) { inline-size: 28%; }
.process-definition-table th:nth-child(2),
.process-definition-table td:nth-child(2) { inline-size: 10%; }
.process-definition-table th:nth-child(3),
.process-definition-table td:nth-child(3) { inline-size: 10%; }
.process-definition-table th:nth-child(4),
.process-definition-table td:nth-child(4) { inline-size: 7%; }
.process-definition-table th:nth-child(5),
.process-definition-table td:nth-child(5) { inline-size: 15%; }
.process-definition-table th:nth-child(6),
.process-definition-table td:nth-child(6) { inline-size: 30%; }

.form-definition-table .table-email {
  font-size: .8rem;
}

/* Process-instance and runtime tables also fit on ordinary desktop widths.
   Their explicit colgroups remain authoritative; only small screens scroll. */
table.process-instance-table,
table.runtime-work-table {
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  table-layout: fixed !important;
}

.process-instance-table-card,
.runtime-table-card,
.form-definition-table-card,
.process-definition-table-card {
  overflow-x: hidden !important;
}

.process-instance-table td.table-reference,
.runtime-work-table .table-reference {
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.process-instance-table .process-instance-started .table-email {
  display: block;
  inline-size: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* A one-action cell uses one column and never reserves a second empty slot. */
.management-table .row-actions.single-action,
.data-table .row-actions.single-action {
  grid-template-columns: minmax(0, 1fr);
}

/* Narrow screens intentionally scroll rather than compressing six-column
   management tables into unreadable fragments. */
@media (max-width: 56rem) {
  .table-card,
  .panel.table-card,
  .table-scroll,
  .table-scroll-wrapper,
  .responsive-table,
  .pb-table-card,
  .process-instance-table-card,
  .runtime-table-card,
  .form-definition-table-card,
  .process-definition-table-card {
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .management-table,
  .form-definition-table,
  .process-definition-table,
  table.process-instance-table,
  table.runtime-work-table {
    min-inline-size: 52rem !important;
    max-inline-size: none !important;
  }
}

@media (max-width: 48rem) {
  .data-table th,
  .data-table td,
  .management-table th,
  .management-table td,
  .table-card table th,
  .table-card table td,
  .table-scroll table th,
  .table-scroll table td {
    padding-inline: 12px;
  }
}

/* Responsive hardening ---------------------------------------------------
   These rules load after feature styles and provide the final containment
   contract for small viewports, long translated text, and browser UI chrome. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.app-shell,
.main,
.content,
.topbar,
.topbar-title,
.topbar-title > div,
.page-actions > *,
.panel-head > *,
.hero > *,
.grid-2 > *,
.grid-3 > *,
.stats > *,
.runtime-row > *,
.builder-top > *,
.field-grid > * {
  min-inline-size: 0;
}

.flash,
.error,
.alert-panel,
.empty-state,
.field-help,
.panel-head h1,
.panel-head h2,
.panel-head h3,
.panel-head p,
.page-actions h1,
.page-actions h2,
.page-actions p,
.hero h1,
.hero h2,
.hero p {
  overflow-wrap: anywhere;
}

pre {
  max-inline-size: 100%;
  overflow-x: auto;
}

iframe,
embed,
object {
  max-inline-size: 100%;
}

.success-meta {
  inline-size: fit-content;
  max-inline-size: 100%;
  flex-wrap: wrap;
}

.workspace-save-dialog footer,
.pb-code-footer,
.settings-dialog-actions,
.profile-crop-dialog__actions {
  flex-wrap: wrap;
}

/* Dynamic viewport units prevent mobile browser chrome from hiding the bottom
   of full-height shells and modal actions. Older browsers keep the vh fallback
   declared by the feature stylesheet. */
@supports (height: 100dvh) {
  .login-page {
    min-height: 100dvh;
  }

  .designer-toolbox,
  .designer-properties,
  .merge-field-reference {
    max-height: calc(100dvh - 2rem);
  }

  .workspace-save-dialog {
    max-height: calc(100dvh - 2rem);
  }

  .pb-code-dialog,
  .pb-image-dialog,
  .form-settings-dialog {
    max-height: calc(100dvh - 2rem);
  }

  .form-settings-dialog {
    overflow: auto;
  }

  @media (min-width: 48.0625rem) {
    .professional-designer-page {
      min-height: calc(100dvh - 84px);
    }

    .designer-workspace {
      height: calc(100dvh - 152px);
    }
  }
}

@media (max-width: 48rem) {
  .topbar-title {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .topbar-actions {
    flex: 0 0 auto;
  }

  .topbar h1 {
    max-inline-size: 100%;
  }

  .form-footer,
  .builder-actions,
  .workspace-save-dialog footer,
  .pb-code-footer,
  .settings-dialog-actions,
  .profile-crop-dialog__actions {
    align-items: stretch;
  }

  .bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem .75rem;
  }

  .bar-row > span {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .bar-row > strong {
    justify-self: end;
  }

  .bar-row > .bar {
    grid-column: 1 / -1;
  }

  @supports (height: 100dvh) {
    .app-shell,
    .sidebar {
      height: 100dvh;
    }

    .main {
      height: calc(100dvh - 16px);
    }

    .pb-code-dialog,
    .pb-image-dialog {
      max-height: calc(100dvh - 16px);
    }
  }
}

@media (max-width: 32rem) {
  .form-footer,
  .builder-actions,
  .workspace-save-dialog footer,
  .pb-code-footer,
  .settings-dialog-actions,
  .profile-crop-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .form-footer > *,
  .builder-actions > *,
  .workspace-save-dialog footer > *,
  .pb-code-footer > *,
  .settings-dialog-actions > *,
  .profile-crop-dialog__actions > * {
    inline-size: 100%;
  }
}

.workspace-save-dialog header > :first-child,
.pb-code-header > :first-child,
.pb-image-header > :first-child,
.profile-crop-dialog__head > :first-child {
  min-inline-size: 0;
}

.workspace-save-dialog header :where(h1, h2, h3, p),
.pb-code-header :where(h1, h2, h3, p),
.pb-image-header :where(h1, h2, h3, p),
.profile-crop-dialog__head :where(h1, h2, h3, p) {
  overflow-wrap: anywhere;
}

.workspace-dialog-close,
.pb-code-close,
.pb-image-close,
.profile-crop-dialog__close {
  flex: 0 0 auto;
}