/*
 * 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; }
}

/* Лого UA Pro: темний щит на світлій темі, світлий - на темній (будь-який src у Navbar Settings) */
[data-theme="dark"] .navbar-brand img,
[data-theme="dark"] .app-logo,
[data-theme="dark"] .splash img { content: url("/assets/ua_ui/img/ua-logo-dark.png"); }
/* v16: шапка робочого столу - .navbar-home img; лише наше лого (у клієнта зі своїм лого, як ЛіО, не підміняємо) */
[data-theme="dark"] .navbar-home img[src*="ua-logo"] { content: url("/assets/ua_ui/img/ua-logo-dark.png"); }

/* v16 на телефоні: плитки робочого столу не перетягуються (інакше Safari не прокручує стіл),
   а висота області прокрутки = видима частина екрана (100vh у Safari ховає нижній ряд під панеллю браузера) */
body[data-ua-v16][data-ua-touch] .desktop-icon,
body[data-ua-v16][data-ua-touch] .desktop-icon img { -webkit-user-drag: none; }
@supports (height: 100dvh) {
  body[data-ua-v16][data-ua-touch] .main-section { height: 100dvh; }
}
/* v16: довгі підписи плиток («Оренда і повернення тари») - 2 рядки по центру замість «Оренда і п…» */
/* підпис займає й бокові відступи плитки (16 px), інакше «Бухгалтерський» не влазить навіть одним словом */
body[data-ua-v16] .desktop-icon .icon-caption { width: calc(100% + 24px); margin-inline: -12px; }
body[data-ua-v16] .desktop-icon .icon-title {
  white-space: normal; text-align: center; line-height: 1.25; overflow: hidden; text-overflow: clip;
  font-size: 13px; letter-spacing: 0; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* плитка без SVG: кирилична літера текстом (ua_ui.js setup_desktop_letter_icons) */
body[data-ua-v16] .desktop-icon .ua-desktop-letter { font-size: 22px; font-weight: 600; line-height: 1; }
body[data-ua-v16] .desktop-icon svg.ua-desktop-glyph { width: 30px; height: 30px; stroke-width: 1.75; --icon-stroke: currentColor; stroke: currentColor; }

/* ═════════════════════════════════════════════════════════════════════════
   UA ERP DS v1 - спільні компоненти модулів ua_* (правила: скилл ua-pro-erp-design).
   Лише змінні Frappe, наявні у v15 і v16; темна тема - через [data-theme="dark"].
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --ua-erp-accent: #2e4fe6;
  --ua-erp-accent-soft: rgba(46, 79, 230, .09);
  --ua-erp-light: rgba(46, 79, 230, .085);          /* джерело світла панелі */
  --ua-erp-light-warm: rgba(255, 176, 92, .07);
  --ua-erp-rim: inset 0 1px 0 rgba(255, 255, 255, .75);
  --ua-erp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 10px 28px -14px rgba(17, 24, 39, .16);
  --ua-erp-shadow-lift: 0 2px 4px rgba(17, 24, 39, .05), 0 16px 36px -16px rgba(17, 24, 39, .24);
  --ua-erp-ok: #15803d;   --ua-erp-ok-bg: rgba(22, 163, 74, .10);
  --ua-erp-warn: #b45309; --ua-erp-warn-bg: rgba(245, 158, 11, .13);
  --ua-erp-bad: #b91c1c;  --ua-erp-bad-bg: rgba(220, 38, 38, .10);
  --ua-erp-info: #2e4fe6; --ua-erp-info-bg: rgba(46, 79, 230, .09);
  --ua-erp-ease: cubic-bezier(.16, 1, .3, 1);
}
[data-theme="dark"] {
  --ua-erp-accent: #8ea3ff;
  --ua-erp-accent-soft: rgba(142, 163, 255, .14);
  --ua-erp-light: rgba(124, 149, 255, .16);
  --ua-erp-light-warm: rgba(255, 176, 92, .05);
  --ua-erp-rim: inset 0 1px 0 rgba(255, 255, 255, .06);
  --ua-erp-shadow: 0 0 0 1px rgba(255, 255, 255, .02);
  --ua-erp-shadow-lift: 0 0 0 1px rgba(255, 255, 255, .08);
  --ua-erp-ok: #4ade80;   --ua-erp-ok-bg: rgba(74, 222, 128, .12);
  --ua-erp-warn: #fbbf24; --ua-erp-warn-bg: rgba(251, 191, 36, .13);
  --ua-erp-bad: #f87171;  --ua-erp-bad-bg: rgba(248, 113, 113, .13);
  --ua-erp-info: #8ea3ff; --ua-erp-info-bg: rgba(142, 163, 255, .14);
}

/* панель з освітленням: світло з лівого верхнього кута + теплий відблиск праворуч + блік верхньої грані */
.ua-hero {
  position: relative; overflow: hidden; border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 24px;
  background:
    radial-gradient(120% 150% at 0% 0%, var(--ua-erp-light) 0%, transparent 58%),
    radial-gradient(80% 120% at 100% 0%, var(--ua-erp-light-warm) 0%, transparent 60%),
    var(--card-bg);
  box-shadow: var(--ua-erp-rim), var(--ua-erp-shadow);
}
.ua-hero__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ua-hero__icon {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--ua-erp-accent); background: var(--card-bg); border: 1px solid var(--border-color);
  box-shadow: var(--ua-erp-rim), 0 6px 18px -6px color-mix(in srgb, var(--ua-erp-accent) 45%, transparent);
}
.ua-hero__icon .icon, .ua-hero__icon svg { width: 20px; height: 20px; stroke: currentColor; }
.ua-hero__title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text-color); margin: 0; }
.ua-hero__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ua-hero__head > div:not(.ua-hero__icon) { min-width: 0; flex: 1; }
/* у Frappe .icon має margin: 0 auto - у наших компонентах іконка стоїть на лівій лінії */
.ua-hero .icon, .ua-kpi .icon, .ua-step .icon, .ua-chip .icon { margin: 0; }
.ua-hero__text { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin: 14px 0 0; max-width: 820px; }
.ua-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ua-hero > .ua-kpis, .ua-hero > .ua-steps { margin-top: 16px; }

.ua-panel { border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-bg); padding: 16px 20px; box-shadow: var(--ua-erp-shadow); }

/* статус-пігулка */
.ua-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  white-space: nowrap; background: var(--subtle-fg); color: var(--text-color); }
.ua-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.ua-chip.is-ok { background: var(--ua-erp-ok-bg); color: var(--ua-erp-ok); }
.ua-chip.is-warn { background: var(--ua-erp-warn-bg); color: var(--ua-erp-warn); }
.ua-chip.is-bad { background: var(--ua-erp-bad-bg); color: var(--ua-erp-bad); }
.ua-chip.is-info { background: var(--ua-erp-info-bg); color: var(--ua-erp-info); }

/* показники: однакова висота, цифра по одній лінії */
/* 3 / 4 / 6 в ряду за кількістю плиток (симетрія без «сиріт»): .ua-kpis--4, .ua-kpis--6, за замовчуванням 3 */
.ua-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ua-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ширину рахуємо від самої панелі (container query), а не від вікна: у формі з бічною панеллю 6 плиток не влазять */
.ua-hero, .ua-panel { container-type: inline-size; }
.ua-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 1040px) { .ua-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .ua-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ua-kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 76px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border-color); background: color-mix(in srgb, var(--card-bg) 82%, transparent); color: var(--text-color);
  text-decoration: none !important; transition: transform .2s var(--ua-erp-ease), box-shadow .2s var(--ua-erp-ease), border-color .2s; }
.ua-kpi__label { font-size: 12px; color: var(--text-muted); line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.ua-kpi__label .icon, .ua-kpi__label svg { width: 14px; height: 14px; stroke: currentColor; flex: none; }
.ua-kpi__value { font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ua-kpi__hint { font-size: 11.5px; color: var(--text-muted); }
a.ua-kpi:hover { transform: translateY(-1px); box-shadow: var(--ua-erp-shadow-lift); border-color: color-mix(in srgb, var(--ua-erp-accent) 35%, var(--border-color)); }
a.ua-kpi:active { transform: translateY(0); transition-duration: .12s; }
.ua-kpi.is-ok .ua-kpi__value { color: var(--ua-erp-ok); }
.ua-kpi.is-warn { background: var(--ua-erp-warn-bg); border-color: transparent; } .ua-kpi.is-warn .ua-kpi__value { color: var(--ua-erp-warn); }
.ua-kpi.is-bad { background: var(--ua-erp-bad-bg); border-color: transparent; } .ua-kpi.is-bad .ua-kpi__value { color: var(--ua-erp-bad); }
.ua-kpi.is-info .ua-kpi__value { color: var(--ua-erp-info); }
.ua-kpi.is-muted .ua-kpi__value { color: var(--text-muted); }

/* онбординг 1-2-3 */
.ua-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: ua-step; }
.ua-step { position: relative; padding: 12px 14px 12px 48px; border-radius: 10px; border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent); min-height: 64px; }
.ua-step__n { position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ua-erp-accent); background: var(--ua-erp-accent-soft); }
.ua-step.is-done .ua-step__n { color: var(--ua-erp-ok); background: var(--ua-erp-ok-bg); }
.ua-step__t { font-size: 13px; font-weight: 600; color: var(--text-color); line-height: 1.35; }
.ua-step__d { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }

/* таблиця зі sticky-шапкою */
.ua-scroll { overflow: auto; max-height: 480px; border: 1px solid var(--border-color); border-radius: 10px; -webkit-overflow-scrolling: touch; }
.ua-scroll table { margin: 0; font-size: 12.5px; }
.ua-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--card-bg); box-shadow: inset 0 -1px 0 var(--border-color); }

.ua-empty { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 13px; }
.ua-empty .icon, .ua-empty svg { width: 24px; height: 24px; stroke: currentColor; margin-bottom: 8px; }

@keyframes ua-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ua-rise { animation: ua-rise .56s var(--ua-erp-ease) both; }
@media (prefers-reduced-motion: reduce) { .ua-rise { animation: none; } .ua-kpi { transition: none; } }

@media (max-width: 767.98px) {
  .ua-hero { padding: 16px; border-radius: 12px; }
  .ua-hero__head { align-items: flex-start; flex-wrap: wrap; }
  .ua-hero__head > div:not(.ua-hero__icon) { flex: 1 1 calc(100% - 52px); }
  .ua-hero__head .ua-chip { margin-left: 52px; }
  .ua-hero__text { margin-top: 12px; }
  .ua-kpis, .ua-kpis--4, .ua-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-kpi { min-height: 72px; }
  .ua-steps { grid-template-columns: 1fr; }
  .ua-hero__actions .btn { min-height: 44px; }
}