/* css/v5-utilities.css */

/* ============================================================
   UTILITIES — утилиты
   ============================================================ */

   /* ============================================================
   ICONS — иконки
   Всегда 1:1, растягиваются по высоте родителя
   ============================================================ */

.v5-icon {
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

.v5-icon--32 {
    height: calc(32px * var(--v5-scale));
    width: calc(32px * var(--v5-scale));
}



/* ============================================================
   FLEX-КОНТЕЙНЕРЫ
   ============================================================ */

.v5-flex-row {
    display: flex;
    flex-direction: row;
    gap: var(--v5-gap-normal);
}

.v5-flex-col-rightpanel {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.v5-flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--v5-gap-normal);
}

/* ============================================================
   PUSH RIGHT — прижать элемент к правому краю
   ❗ Исключение из правила #11: margin-left: auto для надёжного
      прижатия (альтернатива flex-fill на соседе).
   ============================================================ */

.v5-push-right {
    margin-left: auto;
}

.v5-opacity-3 { opacity: 0.5; }

.v5-pointer {
    cursor: pointer;
}

.v5-icon--32 {
    height: calc(32px * var(--v5-scale));
    width: calc(32px * var(--v5-scale));
    display: inline-block;
    vertical-align: middle;
}

.v5-icon--24 {
    height: calc(24px * var(--v5-scale));
    width: calc(24px * var(--v5-scale));
    display: inline-block;
    vertical-align: middle;
}

.v5-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;              /* ← добавьте это */
    scrollbar-width: thin;
}

/* ============================================================
   PDF EMBED — встроенный PDF
   ============================================================ */

.v5-pdf-embed {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

/* ============================================================
   ALIGN-ITEMS
   ============================================================ */

.v5-align-start   { align-items: flex-start; }
.v5-align-center  { align-items: center; }
.v5-align-end     { align-items: flex-end; }
.v5-align-stretch { align-items: stretch; }

/* ============================================================
   JUSTIFY-CONTENT
   ============================================================ */

.v5-justify-start   { justify-content: flex-start; }
.v5-justify-center  { justify-content: center; }
.v5-justify-end     { justify-content: flex-end; }
.v5-justify-between { justify-content: space-between; }

/* ============================================================
   FLEX BEHAVIOR
   ============================================================ */

.v5-flex-wrap { flex-wrap: wrap; }
.v5-flex-fill { flex: 1; min-width: 0; min-height: 0; }
.v5-flex-none { flex: 0 0 auto; }

/* ============================================================
   GAP
   ============================================================ */

.v5-gap-min    { gap: var(--v5-gap-min); }
.v5-gap-normal { gap: var(--v5-gap-normal); }

/* ============================================================
   BACKGROUND
   ============================================================ */

.v5-bgheader-primary { background: var(--v5-primary-secondary); }

.v5-light-info    { background: var(--v5-info-light); }
.v5-bg-info-light { background: var(--v5-info-light); }

.v5-bg-primary { background: var(--v5-primary-bg); }
.v5-bg-success { background: var(--v5-success-bg); }
.v5-bg-info    { background: var(--v5-info-bg); }
.v5-bg-error   { background: var(--v5-error-bg); }
.v5-bg-light   { background: var(--v5-primary-light); }

/* ============================================================
   BORDER
   ============================================================ */

.v5-border-primary { border-color: var(--v5-primary-base); }
.v5-border-success { border-color: var(--v5-success-base); }
.v5-border-info    { border-color: var(--v5-info-base); }
.v5-border-error   { border-color: var(--v5-error-base); }

/* ============================================================
   VISIBILITY
   ============================================================ */

.v5-hidden  { display: none !important; }
.v5-visible { display: flex !important; }

/* ============================================================
   EMPTY STATE
   ============================================================ */

.v5-empty {
    text-align: center;
    padding: var(--v5-padding);
    color: var(--v5-primary-hover);
    font-size: var(--v5-font-normal);
}