/* ================================================
   DHTMLX Window & Dialog — reusable styling
   Applies to any window tagged with .app-window and
   to built-in alert / confirm popups.
   ================================================ */

   @keyframes appWindowSlideIn {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes appOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Slide-in for alerts/confirms using individual translate/scale properties
     so they don't override DHTMLX's centering transform */
  @keyframes appDialogSlideIn {
    from {
      opacity: 0;
      translate: 0 16px;
      scale: 0.97;
    }
    to {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
  }

  /* ============== Buttons ================== */

  .dhx_popup .dhx_navbar .dhx_toolbar-button:is(
    [aria-label="Cancel"],
    [aria-label="Close"]),
  .dhx_button--view_link[data-dhx-id="cancel"] {
    box-shadow: inset 0 0 0 1px var(--re-border-strong) !important;
    color: var(--re-ink) !important;
    background: transparent !important;
  }

  .dhx_popup .dhx_navbar .dhx_toolbar-button:is(
    [aria-label="Upload"],
    [aria-label="Download"],
    [aria-label="Save"],
    [aria-label="Select"]),
    [aria-label="Withdraw acceptance"],
    [aria-label="Save signed PDF"],
    [data-dhx-id="predialUpload"],
    [data-dhx-id="energyCertUpload"],
    .re-proposal-form .re-proposal-entity-row .dhx_button--view_flat {
    background-color: var(--re-primary) !important;
    color: var(--re-primary-on) !important;
  }

  /* === lobal responsive behavior for all DHTMLX windows: === */
  .dhx_popup--window,
  .dhx_popup--window_modal {
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;
  }
  .dhx_popup--window .dhx_window,
  .dhx_popup--window_modal .dhx_window {
    width: 100% !important;
    height: 100% !important;
  }
  .dhx_popup--window .dhx_window-content,
  .dhx_popup--window_modal .dhx_window-content {
    overflow: auto !important;
  }
  .dhx_popup.app-window .dhx_window-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 2px !important;
  }
  .dhx_popup--window .dhx_form,
  .dhx_popup--window_modal .dhx_form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  @media (max-height: 820px) {
    .dhx_popup--window,
    .dhx_popup--window_modal {
      top: 50% !important;
      translate: 0 -50% !important;
    }
  }
  /* ========================================================= */
  /* Entrance animation + rounded modern shape */
  .app-window {
    animation: appWindowSlideIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.10),
      0 2px 8px  rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    transition: box-shadow 0.3s ease;
  }
  /* app-window: fill popup height from JS; scroll only inside content (password / buttons stay reachable) */
  .dhx_popup.app-window .dhx_window {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  .dhx_popup.app-window .dhx_window-header {
    flex-shrink: 0;
  }
  .app-window .dhx_window-header,
  .dhx_popup .dhx_window-header {
    font-family: 'Inter', 'Poppins', var(--ff-primary);
    font-weight: 600;
    letter-spacing: 0.2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Tab/asset modals only — app-window dialogs (Profile, etc.) use form-level padding */
  .dhx_popup:not(.app-window) .dhx_window-content {
    padding: 0px !important;
  }
  .dhx_popup:not(.app-window) .dhx_form{
    padding: 28px !important;
  }
  .dhx_popup:not(.app-window) .dhx_window-footer,
  .dhx_popup.re-owner-sign-window .dhx_window-footer {
    box-shadow: 0 -4px 4px -1px rgba(0, 0, 0, 0.06) !important;
    padding: 0px !important;
  }
  .dhx_popup:not(.app-window) .dhx_window-footer .dhx_navbar,
  .dhx_popup.re-owner-sign-window .dhx_window-footer .dhx_navbar {
    padding: 20px 20px 20px !important;
  }

  /* Dark-mode shadows and borders */
  body[data-theme="dark"] .app-window {
    box-shadow:
      0 12px 48px rgba(0, 0, 0, 0.50),
      0 4px 16px  rgba(0, 0, 0, 0.30) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  
  body[data-theme="dark"] .app-window .dhx_window-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  /* Modal overlay — blur + soft dim */
  .dhx_popup-backdrop {
    animation: appOverlayFadeIn 0.25s ease-out forwards;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.32) !important;
  }
  
  body[data-theme="dark"] .dhx_popup-backdrop {
    background: rgba(0, 0, 0, 0.55) !important;
  }
  
  /* Alert / confirm dialogs share the same polish */
  .dhx_alert,
  .dhx_popup.dhx_widget {
    animation: appDialogSlideIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.10),
      0 2px 8px  rgba(0, 0, 0, 0.06) !important;
  }
  
  body[data-theme="dark"] .dhx_alert,
  body[data-theme="dark"] .dhx_popup.dhx_widget {
    box-shadow:
      0 12px 48px rgba(0, 0, 0, 0.50),
      0 4px 16px  rgba(0, 0, 0, 0.30) !important;
  }

  .dhx_alert__confirm-reject,
  .dhx_alert__confirm-aply {
    border-radius: 14px !important;
    width: 60px;
    margin: 0 !important;
    text-transform: capitalize
  }

  .dhx_alert__confirm-aply {
    background-color: var(--re-primary) !important;
  }

  .dhx_alert__footer {
    gap: 10px
  }

  .dhx_alert__confirm-reject {
    box-shadow: inset 0 0 0 1px var(--re-primary);
    color: var(--re-primary) !important;
  }

  .dhx_alert-header {
    font-weight: 700 !important;
  }

  .dhx_alert__footer--center {
    justify-content: end;
  }

  .dhx_button--view_link, 
  .dhx_button--view_flat {
    border-radius: 8px;
  }

  .dhx_input,
  .dhx_combobox-input-box {
    border-radius: 8px;
  }

  /* ===== Document popups ===== */
  .dhx_popup:is([aria-label="Delete document"],
  [aria-label="Delete image"],
  [aria-label="Document details"],
  [aria-label="Details"]) .dhx_window-content {
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
  }
  .dhx_popup[aria-label="Delete document"] .dhx_layout-rows .dhx_form {
    height: fit-content !important;
  }

  /* ----- Asset / document preview window (image fills viewport; PDF stays in iframe) ----- */
  .re-asset-preview-window .dhx_window-content {
    padding: 0 !important;
  }

  .re-asset-preview-window .dhx_window-content .scroll-view .dhx_layout-cell-content {
    height: 100% !important;
  }

  .re-asset-preview-window .dhx_window-content .dhx_layout-cell-inner_html {
    display: flex;
  }

  .re-asset-preview-window .re-asset-preview-host {
    flex: 1 1 auto;
    display: flex;
  }

  .re-asset-preview-window .re-asset-preview-img {
    display: block;
    margin: auto;
    max-width: min(100%, calc(100vw - 48px));
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .re-asset-preview-window .re-asset-preview-host--frame {
    align-items: stretch;
  }

  .re-asset-preview-window .re-asset-preview-frame {
    flex: 1 1 auto;
    border: 0;
    background: var(--re-surface);
  }

  /* Owner signature placement modal (PDF + draggable preview). */
  /* Beat .dhx_popup.app-window .dhx_window-content { overflow-y: auto } so pdf-wrap scrolls, not the shell. */
  .dhx_popup.re-owner-sign-window.app-window .dhx_layout-cell.dhx_window-content,
  .dhx_popup.re-owner-sign-window.dhx_popup--window_modal .dhx_layout-cell.dhx_window-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .re-owner-sign-window .dhx_window-content {
    padding: 0 !important;
    overflow: hidden;
  }

  /* DHTMLX attachHTML: outer scroll-view must not scroll; inner pdf-wrap does. */
  .re-owner-sign-window .dhx_window-content .scroll-view-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .re-owner-sign-window .dhx_window-content .scroll-view {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .re-owner-sign-window .scroll-view .dhx_layout-cell-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .re-owner-sign-window .scroll-view .dhx_layout-cell-inner_html {
    display: flex !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* DHTMLX scroll bars must not sit on top of the draggable signature overlay. */
  .re-owner-sign-window .scroll-view-wrapper > .y-scroll,
  .re-owner-sign-window .scroll-view-wrapper > .x-scroll {
    display: none !important;
    pointer-events: none !important;
  }

  .re-owner-sign-window .re-owner-sign-modal-root {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
  }

  .re-owner-sign-window .re-owner-sign-place-panel {
    align-self: flex-start;
    position: sticky;
    top: 0;
    max-height: 100%;
    z-index: 2;
  }

  .re-owner-sign-window .re-owner-sign-pdf-column {
    flex: 1 1 0;
    min-height: 0;
  }

  .re-owner-sign-window .re-owner-sign-pdf-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
  }
  /* ============================ */

  /* Select Buyer modal window */

  .re-proposal-entity-lookup-window:not(.app-window) .dhx_window-content {
    padding: 0 !important;
  }
  .re-proposal-entity-lookup-window .dhx_layout-cell[data-cell-id="lookupToolbarRow"] {
    margin-bottom: 1px !important;
    box-shadow: 0 1px 0 0 var(--re-border);
  }