/* FILE: views/css/additionalproductinfo.css */
.additional-product-info {
    margin: 1px 0;
    padding: 1px;
    border: 1px solid #ffffff00;
    background: #ffffff00;
    border-radius: 5px;
    display: flex; /* Використовуємо Flexbox */
    flex-direction: row; /* Горизонтальне розташування за замовчуванням (ПК) */
    flex-wrap: wrap; /* Перенос елементів, якщо не вміщаються */
    gap: 5px; /* Відстань між елементами */
}

.additional-product-info-item {
    margin: 1px 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 0 0 auto; /* Елементи не розтягуються, зберігають свій розмір */
}

.api-label {
    font-weight: 600;
    margin-right: 5px;
}

.api-label i {
    margin-right: 4px;
}

.api-value {
    cursor: pointer;
    padding: 2px 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

/* Стилі для дати додавання */
.api-date-add {
    background-color: #ffffff00; /* Світло-зелений фон */
    color: #006600; /* Темно-зелений текст */
    border: 1px solid #b3ffb3; /* Зелена рамка */
    font-size: 9px;
    cursor: auto;
}

/* Стилі для дати оновлення */
.api-date-upd {
    background-color: #ffffff00; /* Світло-помаранчевий фон */
    color: #e65c00; /* Помаранчевий текст */
    border: 1px solid #ffcc99; /* Помаранчева рамка */
    font-size: 9px;
    cursor: auto;
}

/* Стилі для назви постачальника */
.api-supplier-name {
    background-color: #ffffff00; /* Світло-синій фон */
    color: #003366; /* Темно-синій текст */
    border: 1px solid #99ccff; /* Синя рамка */
    font-size: 9px;
    cursor: auto;
}

/* Стилі для кількості */
.api-quantity {
    background-color: #f3e6ff; /* Світло-фіолетовий фон */
    color: #660066; /* Темно-фіолетовий текст */
    border: 1px solid #cc99ff; /* Фіолетова рамка */
    cursor: auto;
}

.api-clipboard:hover {
    background-color: #e0e0e0;
}

.api-clipboard.api-date-add:hover {
    background-color: #ccffcc; /* Світліший зелений при наведенні */
}

.api-clipboard.api-date-upd:hover {
    background-color: #ffe6cc; /* Світліший помаранчевий при наведенні */
}

.api-clipboard.api-supplier-name:hover {
    background-color: #cce6ff; /* Світліший синій при наведенні */
}

.api-clipboard.api-quantity:hover {
    background-color: #e6ccff; /* Світліший фіолетовий при наведенні */
}

.api-clipboard:after {
    content: '\f0c5';
    font-family: 'FontAwesome';
    font-size: 12px;
    margin-left: 5px;
    opacity: 0.5;
}

.api-clipboard:hover:after {
    opacity: 1;
}

.api-copy-notification {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    animation: fadeIn 0.3s ease;
}

.api-fade-out {
    animation: fadeOut 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection__rendered {
    display: flex;
    align-items: center;
    padding: 5px;
}

.select2-container .select2-selection__rendered i {
    margin-right: 8px;
    font-size: 16px;
}

.select2-results__option {
    display: flex;
    align-items: center;
    padding: 5px;
}

.select2-results__option i {
    margin-right: 8px;
    font-size: 16px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f0f0f0;
}

/* Медіазапит для мобільних пристроїв (ширина до 768px) */
/*@media (max-width: 768px) {*/
/*    .additional-product-info {*/
/*        flex-direction: column; /* Вертикальне розташування на мобільних */
/*    }*/
/*}*/