.dhx_button {
  text-transform: capitalize !important;
}

/* Left-align labels in forms with labelPosition: "left" */
.dhx_form-group--inline .dhx_label {
  text-align: left !important;
  justify-content: flex-start !important;
}

.dhx_combobox--label-inline .dhx_combobox__label {
  text-align: left !important;
  justify-content: flex-start !important;
}

/*====================== menuConfig.php ======================*/

/* Options form body: vertical gap between rows (Save/Cancel live in fOptionsActions, split layout). */
.form-menuConfig {
  gap: 7px;
  height: fit-content !important;
}

/* lOptions cell: fill the 60% column and host re-entity-details-split (scroll + pinned actions). */
.menuConfig-options-shell.dhx_layout-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.menuConfig-options-shell > .dhx_layout-cell-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.menuConfig-options-shell > .dhx_layout-cell-content > .re-entity-details-split.dhx_layout {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
/* ===========================================================*/


/*========= toolbar.php editProfile() & userMnt.php addEditUser() =========*/
/* editProfile: first columns row — stretch so avatar + personal fieldsets share height */
.profile-edit-form .re-profile-stretch-cols {
  align-items: stretch !important;
}
.profile-edit-form .re-profile-stretch-cols > .dhx_layout-cell {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
/* Fieldsets fill the row so Avatar and Personal info columns share the same height */
.profile-edit-form .re-profile-stretch-cols .dhx_form-fieldset {
  flex: 1 1 auto !important;
  min-height: 0;
  height: 100% !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.profile-edit-form .re-profile-stretch-cols .dhx_form-fieldset > .dhx_layout-rows {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Avatar column: center the photo when the sibling column is taller */
.profile-edit-form .re-profile-stretch-cols > .dhx_layout-cell:first-child .dhx_form-fieldset .dhx_layout-rows {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-edit-form .dhx_form-fieldset {
  height: auto;
}
.user-addEdit-form .dhx_form-fieldset {
  height: 100%;
}
.profile-edit-form .dhx_form-group[aria-label="Employee photo"],
.user-addEdit-form .dhx_form-group[aria-label="Employee photo"] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile-edit-form .dhx_avatar.dhx_avatar-size--medium,
.user-addEdit-form .dhx_avatar.dhx_avatar-size--medium {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 50%;
}
.profile-edit-form .dhx_avatar.dhx_avatar-size--medium img,
.user-addEdit-form .dhx_avatar.dhx_avatar-size--medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-edit-form .dhx_avatar__cover,
.user-addEdit-form .dhx_avatar__cover {
  border-radius: 50%;
}
.profile-edit-form .dhx_avatar__image,
.user-addEdit-form .dhx_avatar__image {
  background-color: transparent !important;
}
.profile-edit-form .dhx_avatar,
.user-addEdit-form .dhx_avatar {
  border: none;
}
.profile-edit-form .dhx_avatar__cover-remove,
.user-addEdit-form .dhx_avatar__cover-remove {
  top: 10px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Portal profile: avatar is display-only (initials, no upload/remove) */
.profile-edit-form.re-portal-profile .dhx_avatar {
  pointer-events: none !important;
  cursor: default !important;
}
.profile-edit-form.re-portal-profile .dhx_avatar.re-avatar-initials-host {
  border: none;
  background: transparent;
}
.profile-edit-form.re-portal-profile .dhx_avatar__cover-remove,
.profile-edit-form.re-portal-profile .dhx_avatar input[type="file"] {
  display: none !important;
}

/* Profile popup: initials placeholder when no avatar file is stored (portal entities) */
.profile-edit-form .dhx_avatar.re-avatar-initials-host .dhx_avatar__cover-remove {
  display: none;
}
.profile-edit-form .re-avatar-initials--profile {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--re-primary);
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1;
}

.profile-edit-form .re-profile-stretch-cols .dhx_layout-cell-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  width: 100%;
}
.user-addEdit-form .dhx_layout-cell-content {
  display: flex;
  justify-content: center;
}
.profile-edit-form .dhx_layout-cell .dhx_layout-columns {
  gap: 10px;
}
.profile-edit-form .dhx_button--view_flat[data-dhx-id="changePW"],
.user-addEdit-form .dhx_button--view_flat[data-dhx-id="changePW"] {
  background-color: transparent !important;
  color: var(--re-primary) !important;
  box-shadow: inset 0 0 0 1px var(--re-primary) !important;
}
.profile-edit-form .dhx_form-fieldset,
.user-addEdit-form .dhx_form-fieldset {
  border-radius: 8px !important;
}

/* Profile / user app-window: width only (scroll + height handled in popupWindow.css) */
.app-window .profile-edit-form,
.app-window .user-addEdit-form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* ========================================================================*/

.dhx_button--view_link[data-dhx-id="cancel"],
.dhx_button--view_flat:is([data-dhx-id="send"], [data-dhx-id="save"]){
  text-transform: none;
}

.dhx_button--view_flat:is([data-dhx-id="send"], [data-dhx-id="save"]):not(:disabled):not(.dhx_button--disabled) {
  background-color: var(--re-primary) !important;
  color: var(--re-primary-on) !important;
}

.dhx_button--view_flat:is([data-dhx-id="send"], [data-dhx-id="save"]):hover:not(:disabled):not(.dhx_button--disabled) {
  background-color: var(--re-primary-hover) !important;
}

.dhx_button--view_flat:is([data-dhx-id="send"], [data-dhx-id="save"]):disabled,
.dhx_button--view_flat:is([data-dhx-id="send"], [data-dhx-id="save"]).dhx_button--disabled {
  background-color: var(--re-border-strong) !important;
  color: var(--re-ink-faint) !important;
  opacity: 0.6 !important;
}


.dhx_button--view_link[data-dhx-id="cancel"]:hover {
  background-color: var(--re-primary-softer) !important;
}

.dhx_button--view_link[data-dhx-id="cancel"]:disabled {
  box-shadow: inset 0 0 0 1px var(--re-border-strong) !important;
  color: var(--re-ink-faint) !important;
  opacity: 0.6 !important;
}

.dhx_layout-cell .dhx_layout-columns--end {
  gap: 15px;
}

.dhx_label:after { /* asterisk after required labels */
  color: var(--re-primary) !important;
}

/* ---------- Form fields (shared DHTMLX form surfaces) ------------------- */
.dhx_form,
.dhx_form-group,
.dhx_layout-cell {
  background: var(--re-surface) !important;
}

.dhx_label,
.dhx_form-group__label {
  color: var(--re-ink-muted) !important;
  font-weight: 500 !important;
}

.dhx_label--required::after,
.dhx_form-group__label--required::after {
  color: var(--re-primary) !important;
}

/* Inline ghost-text suggestions (js/inline-suggestions.js) */
.re-inline-suggest-host .dhx_input__container {
  position: relative;
}

.re-inline-suggest-ghost {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  box-sizing: border-box;
}

.re-inline-suggest-ghost--visible {
  visibility: visible;
}

.re-inline-suggest-typed {
  color: transparent;
}

.re-inline-suggest-suffix {
  color: var(--re-ink-muted);
  opacity: 0.42;
}

.re-inline-suggest-input--active.dhx_input,
.re-inline-suggest-input--active.dhx_textarea {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.re-inline-suggest-host .dhx_input__container:has(.re-inline-suggest-input--active) {
  background: var(--re-input);
  border-radius: 8px;
}

.re-inline-suggest-host .dhx_input__container:has(.re-inline-suggest-input--active:focus-within) {
  background: var(--re-input-focus);
}

/* Street dropdown list (js/inline-suggestions.js) */
.re-inline-suggest-dropdown-host {
  position: relative;
}

.re-inline-suggest-dropdown {
  position: absolute;
  z-index: 120;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  background: var(--re-surface, #fff);
  border: 1px solid var(--re-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.re-inline-suggest-dropdown__item {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--re-ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.re-inline-suggest-dropdown__item:hover,
.re-inline-suggest-dropdown__item--active {
  background: var(--re-primary-soft, rgba(59, 130, 246, 0.12));
  color: var(--re-ink);
}

.dhx_input,
.dhx_textarea,
.dhx_combobox__input,
.dhx_select {
  background: var(--re-input) !important;
  border: 1px solid var(--re-border) !important;
  border-radius: 8px !important;
  color: var(--re-ink) !important;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.dhx_input:hover,
.dhx_textarea:hover,
.dhx_combobox__input:hover {
  border-color: var(--re-border-strong) !important;
}

.dhx_input:focus,
.dhx_textarea:focus,
.dhx_combobox__input:focus,
.dhx_input--focus,
.dhx_combobox--focus .dhx_combobox__input {
  background: var(--re-input-focus) !important;
  border-color: var(--re-primary) !important;
  box-shadow: 0 0 0 3px var(--re-primary-softer) !important;
  outline: none !important;
}

.dhx_form-fieldset {
  border: 1px solid var(--re-border) !important;
  border-radius: 10px !important;
  background: var(--re-surface) !important;
}

.dhx_form-fieldset__label {
  color: var(--re-ink) !important;
  font-weight: 600 !important;
}

.dhx_form-group--fieldset,
.dhx_form-fieldset {
  position: relative !important;
  overflow: visible !important;
  padding: 50px 16px 16px !important;
}

.dhx_form-group--fieldset > .dhx_form-group__label,
.dhx_form-fieldset > .dhx_form-fieldset__label,
.dhx_form-group--fieldset > legend,
.dhx_form-fieldset > legend {
  position: absolute !important;
  top: 10px !important;
  left: 14px !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  color: var(--re-ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

/* ====================== Documents vault ====================== */
.dhx_window .dhx_window-footer .dhx_toolbar .dhx_navbar {
  gap: 10px;
}

.dhx_window-footer .dhx_toolbar-button:is([data-dhx-id="delete"], [data-dhx-id="propWinDecline"]),
.dhx_button--view_flat[data-dhx-id="delete"]:not(:disabled):not(.dhx_button--disabled) {
  background-color: rgb(255, 0, 51);
  color: white;
}

.dhx_window-footer .dhx_toolbar-button[data-dhx-id="propWinAccept"] {
  background-color: rgb(84, 219, 50);
  color: rgb(255, 255, 255);
}

.dhx_layout-cell[data-cell-id="upVault"] {
  padding: 0px 28px 28px 28px !important;
}

.dhx_layout-cell[data-cell-id="upForm"] .dhx_label  {
  margin-bottom: 12px !important;
}
.dhx_layout-cell[data-cell-id="upVault"] .dhx_layout {
  border-radius: 8px !important;
}

/* Property document upload/edit: gap between Issue/Expiry without breaking right-edge alignment. */
.re-asset-doc-upload-form.dhx_form {
  --re-property-label-col: 120px;
}

.re-asset-doc-upload-form.dhx_form .dhx_layout-cell.dhx_layout-columns {
  gap: 12px;
  width: 100% !important;
  max-width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.re-asset-doc-upload-form.dhx_form .dhx_layout-cell.dhx_layout-columns > .dhx_layout-cell {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
  max-width: none;
  box-sizing: border-box;
}
/* ============================================================== */

/* ================== Property management forms ================== */
/* Scope to .dhx_form only — tabbar also has re-property-form and must not style Save/Cancel. */
.re-property-form.dhx_form {
  /* Left-label fields (Owner, Code, …) share one label column width. */
  --re-property-label-col: 140px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.re-property-form.dhx_form .dhx_layout-rows,
.re-property-form.dhx_form .dhx_layout-cell,
.re-property-form.dhx_form .dhx_form-fieldset,
.re-property-form.dhx_form .dhx_form-group,
.re-property-form.dhx_form .dhx_form-group--cols {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.re-property-form.dhx_form .dhx_form-group--cols {
  width: 100% !important;
}

/* DHTMLX default item width is 200px — stretch to the row; honor explicit % widths (e.g. 32%). */
.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns .dhx_form-group,
.re-property-form.dhx_form .dhx_form-group[style*="width: 200px"] {
  width: 100% !important;
}

.re-property-form.dhx_form .dhx_form-group--inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
}

/* Top labels: full column width (override labelWidth); wrap only when text overflows. */
.re-property-form.dhx_form .dhx_form-group:not(.dhx_form-group--inline) .dhx_label {
  width: auto !important;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.25;
}

/* Left labels: fixed column so inputs and comboboxes start on the same edge. */
.re-property-form.dhx_form .dhx_form-group--inline > .dhx_label {
  flex: 0 0 var(--re-property-label-col) !important;
  width: var(--re-property-label-col) !important;
  max-width: var(--re-property-label-col);
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.re-property-form.dhx_form .dhx_form-group--inline .dhx_input__wrapper {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

/* Combobox is attached to the layout cell (not .dhx_form-group) — mirror left-label input layout. */
.re-property-form.dhx_form .dhx_layout-rows > .dhx_layout-cell:not(.dhx_layout-columns) > .dhx_combobox.dhx_combobox--label-inline {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

.re-property-form.dhx_form .dhx_combobox--label-inline > .dhx_combobox__label {
  flex: 0 0 var(--re-property-label-col) !important;
  width: var(--re-property-label-col) !important;
  max-width: var(--re-property-label-col);
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.re-property-form.dhx_form .dhx_combobox--label-inline .dhx_combobox-input-box {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Top-label combobox in column rows — full width like inputs. */
.re-property-form.dhx_form .dhx_layout-cell > .dhx_combobox:not(.dhx_combobox--label-inline) {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.re-property-form.dhx_form .dhx_combobox-input-box {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.re-property-form.dhx_form .dhx_input,
.re-property-form.dhx_form .dhx_textarea,
.re-property-form.dhx_form .dhx_combobox,
.re-property-form.dhx_form .dhx_combobox__wrapper,
.re-property-form.dhx_form .dhx_combobox__input,
.re-property-form.dhx_form .dhx_select,
.re-property-form.dhx_form .dhx_datepicker-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns {
  gap: 12px;
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}

/* Multi-column rows: all columns may shrink (flex-basis from DHTMLX width % when set). */
.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns > *,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns > * {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* Multi-column + top labels: inputs align; spare space stays above the label, not between label and input. */
.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns {
  align-items: stretch;
}

.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns > .dhx_layout-cell,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns > .dhx_layout-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
}

.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns > .dhx_layout-cell .dhx_form-group:not(.dhx_form-group--inline),
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns > .dhx_layout-cell .dhx_form-group:not(.dhx_form-group--inline) {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 100% !important;
}

.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_label,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_label {
  flex: 0 0 auto;
  margin-bottom: 4px !important;
}

.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_input__wrapper,
.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_combobox,
.re-property-form.dhx_form .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_datepicker,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_input__wrapper,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_combobox,
.dhx_popup:is(
  [aria-label="New proposal"],
  [aria-label="Proposal"],
  [aria-label="Upload document"],
  [aria-label="Edit proposal"],
  [aria-label="Edit document"]) .dhx_layout-cell.dhx_layout-columns .dhx_form-group:not(.dhx_form-group--inline) .dhx_datepicker {
  flex: 0 0 auto;
}

.re-entity-details-split .re-entity-actions-form .dhx_button--view_flat[data-dhx-id="save"] {
  margin-left: -6px;
}
/* =============================================================== */

/* ---------- Entity Details tab: scroll body + pinned Save/Cancel ---------- */
/* DHTMLX layout cells use overflow:hidden, which breaks position:sticky on in-form rows;
   entity *Mnt pages use a split layout: scroll the field form, keep a separate actions form fixed. */
.re-entity-tabbar.dhx_tabbar .dhx_layout-cell--content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.re-entity-details-split.dhx_layout {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  width: 100%;
}

.re-entity-details-split > .dhx_layout-rows {
  min-height: 0;
  flex: 1 1 auto;
}

.re-entity-details-split .re-entity-details-scroll.dhx_layout-cell {
  min-height: 0;
  display: flex;
  align-items: center;
}

.re-entity-details-split .re-entity-details-scroll > .dhx_layout-cell-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.re-entity-details-split .re-entity-details-scroll > .dhx_layout-cell-content > * {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.re-entity-details-split .re-entity-details-actions-host > .dhx_layout-cell-content {
  flex-shrink: 0;
}

.re-entity-details-split .re-entity-details-actions-host {
  border-top: 1px solid var(--re-border);
  background: var(--re-surface);
  min-height: 50px;
  box-shadow: 0 -5px 16px rgba(15, 23, 42, 0.05);
}

.re-entity-actions-form {
  display: flex;
  justify-content: center;
  padding-right: 16px !important;
}