/*
 * ua_ui.css — СПІЛЬНА адаптація desk-інтерфейсу ERPNext під телефон.
 * Діє на всіх сайтах, де встановлено додаток ua_ui.
 * Особисті правки конкретного клієнта — у його `/files/ua-custom.css`
 * (підвантажується ПІСЛЯ цього файлу, тож перебиває його без !important-війн).
 */

/* ─────────────────────────────────────────────────────────────────────────
   Попап-прев'ю документа (link preview)

   Frappe малює його bootstrap-попувером із розрахунком left/top від елемента,
   під який навели. На телефоні «наведення» = тап, і попап шириною ~330px
   з'їжджає за лівий край екрана: половина картки та назви товару обрізана.
   Фікс: на вузьких екранах це не «попап біля елемента», а картка ПО ЦЕНТРУ.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .link-preview-popover.popover {
    /* !important — bootstrap пише position/top/left інлайном */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(92vw, 420px) !important;
    max-width: min(92vw, 420px) !important;
    max-height: 76vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* вище за форму й таб-бар, але нижче за модалки frappe (1055+) */
    z-index: 1050 !important;
    border-radius: 14px;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.45);
  }

  /* Хвостик попувера вказував би «в нікуди» — картка більше не біля елемента */
  .link-preview-popover.popover > .arrow {
    display: none !important;
  }

  .link-preview-popover .popover-content {
    padding: 16px 18px !important;
  }

  /* 330px від frappe плюс поля не влазять у 92vw на малих екранах */
  .link-preview-popover .popover-content .popover-body .preview-table {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .link-preview-popover .preview-name,
  .link-preview-popover .preview-title {
    text-align: center;
    overflow-wrap: anywhere;
  }

  /* Підкладка: попап перекриває форму, і без затемнення незрозуміло,
     що екран «зайнятий». Клас вішає ua_ui.js лише на тач-пристроях. */
  body.ua-preview-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1049;
    animation: ua-fade-in 0.15s ease-out;
  }
}

@keyframes ua-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}