/* Main Content Styles */
.main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.welcome-section {
    text-align: center;
    max-width: 480px;
}

/* Компенсація для sidebar */
body.with-sidebar .welcome-section {
    transform: translateX(-25px); /* ✅ Зсув вліво на половину sidebar */
}

.app-icon {
    font-size: 48px;
    margin-bottom: 24px;
}

.welcome-section h1 {
    font-size: 48px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

/* Приветствие пользователя - меньше и светлее */
.welcome-section h1:nth-of-type(2) {
    font-size: 24px;
    font-weight: 400;
    color: #6b6b6b;
    margin-top: 16px;
}

.subtitle {
    font-size: 16px;
    color: #6b6b6b;
    margin-bottom: 32px;
    line-height: 1.4;
}

.scan-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #2d2d2d;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
}

.scan-button:hover {
    background-color: #404040;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scan-button:active {
    transform: translateY(0);
}

.scan-icon {
    font-size: 16px;
}

/* ==============================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (ФИНАЛ)
   ============================================== */
@media (max-width: 768px) {

    /* 1. Контейнер контента */
    .main-content {
        padding: 180px 16px 100px 16px;
        align-items: center;
        flex-direction: column;
        width: 100%;
        overflow-x: hidden;
    }

    /* 2. Логотип "З любов'ю" - СТРОГО ВЛЕВО */
    .ua-logo {
        position: absolute;
        top: 25px !important;           /* ✅ Подняли вверх (было 80px). Теперь напротив буквы D */
        left: 16px !important;          /* ✅ Отступ слева (не впритык, аккуратно) */
        right: auto;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* Прижимаем контент влево */
        gap: 6px;

        margin: 0;
        width: auto;
    }

    .ua-text {
        font-size: 13px;
        white-space: nowrap;
        text-align: left;
    }

    /* 3. Убираем сдвиги */
    body.with-sidebar .welcome-section {
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* 4. Заголовки */
    .welcome-section h1 {
        font-size: 32px;
        line-height: 1.2;
        word-wrap: break-word;
    }

    .welcome-section h1:nth-of-type(2) {
        font-size: 18px;
        margin-top: 10px;
    }

    /* 5. ПОЛЕ ВВОДА - ВОЗВРАЩАЕМ КАК БЫЛО */
    .manual-input form {
        display: flex;
        flex-direction: column; /* Оставляем в столбик, чтобы влезло */
        align-items: center;    /* ✅ Центрируем само поле и кнопку */
        gap: 10px;
        width: 100%;
    }

    #barcodeInput {
        /* ✅ Убрал width: 100% */
        width: 250px !important; /* Фиксированный размер как на компе */
        max-width: 90%;          /* На всякий случай, если экран очень маленький */
        box-sizing: border-box;
    }

    .manual-input button {
        /* ✅ Убрал width: 100% */
        width: auto !important;  /* Кнопка по размеру текста */
        min-width: 120px;        /* Минимальный размер, чтобы красиво было */
        margin-left: 0 !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   💙💛 З ЛЮБОВ'Ю З УКРАЇНИ - БЛОК ЛОГОТИПА
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ua-logo {
    position: absolute;              /* 📌 Позиция фиксирована на странице */
    top: 80px;                       /* 📏 Отступ сверху (чем больше, тем ниже) */
    left: 100px;                      /* 📏 Отступ слева (чем больше, тем правее) */
    display: flex;                   /* 🔄 Элементы в ряд */
    align-items: center;             /* ⬆️⬇️ Выравнивание по центру по вертикали */
    gap: 3px;                       /* 🔢 РАССТОЯНИЕ между сердечком и текстом (больше = дальше) */
    transform: rotate(0deg);        /* 🔄 ПОВОРОТ (отрицательное = влево, положительное = вправо) */
    z-index: 10;                     /* 📚 Поверх других элементов */
}

.ua-logo img {
    width: 50px;                     /* 📐 РАЗМЕР СЕРДЕЧКА по горизонтали */
    height: 50px;                    /* 📐 РАЗМЕР СЕРДЕЧКА по вертикали */
    object-fit: contain;             /* 🖼️ Сохранить пропорции картинки */
}

.ua-text {
    font-size: 16px;                 /* 🔤 РАЗМЕР ТЕКСТА "З любов'ю з України" */
    font-weight: 500;                /* 💪 Жирность текста (обычная) */
    color: #1a1a1a;                  /* 🎨 Цвет текста (почти чёрный) */
}

/* 📱 Responsive для мобилок */
@media (max-width: 768px) {
    .ua-logo {
        top: 60px;                   /* 📏 На телефоне - чуть выше */
        left: 60px;                  /* 📏 На телефоне - чуть левее */
    }

    .ua-logo img {
        width: 30px;                 /* 📐 На телефоне - меньше сердечко */
        height: 30px;
    }

    .ua-text {
        font-size: 14px;             /* 🔤 На телефоне - меньше текст */
    }
}

/* 🍎 ЯБЛОЧКО */
.app-icon {
    font-size: 48px;
    margin-bottom: 24px;
    display: inline-block;
}

/* --- Всплывающее уведомление об ошибке (Backend) --- */
.floating-error-banner {
    position: fixed;
    top: -100px; /* Спрятано сверху */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;

    /* Красный стиль (как в контактах) */
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;

    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    min-width: 300px;

    /* Плавная анимация */
    opacity: 0;
    transition: top 0.4s ease-out, opacity 0.4s ease-out;
}

/* Класс для показа */
.floating-error-banner.show {
    top: 30px; /* Выезжает вниз */
    opacity: 1;
}