/* ========================
   УПРАВЛЕНИЕ ТОВАРАМИ
   ======================== */

.mb-10 {
    margin-bottom: 10px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.text-left {
    text-align: left;
}

/* Легенда под заголовком */
.goods-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #E5E7EB;
    margin-bottom: 25px;
}

.gl-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gl-divider {
    color: #FFFFFF;
}

/* Верхняя панель (Кнопка и Поиск) */
.goods-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.btn-add-product {
    background: transparent;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-add-product:hover {
    background: rgba(255, 255, 255, 0.1);
}

.goods-search {
    display: flex;
    align-items: center;
    background: #3B3B46;
    border-radius: 40px;
    padding: 10px 20px;
    width: 260px;
}

.goods-search input {
    background: transparent;
    border: none;
    color: #FFFFFF;
    outline: none;
    margin-left: 10px;
    width: 100%;
    font-size: 14px;
}

.goods-search input::placeholder {
    color: #A0AAB5;
}

/* Кнопка Поиск по дате */
.btn-dark-grey {
    background: #3B3B46;
    border: none;
    color: #A0AAB5;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-dark-grey:hover {
    color: #FFFFFF;
}

/* Таблицы товаров */
.goods-table-wrapper {
    background: #3B3B46;
    border-radius: 8px;
    width: 100%;
    overflow: hidden;
}

.gt-row {
    display: grid;
    grid-template-columns: 1.5fr 70px 1fr 1.5fr 1fr 120px;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    font-size: 14px;
    gap: 10px;
}

.gt-row:last-child {
    border-bottom: none;
}

.gt-head {
    background: #181820;
    font-weight: 700;
    border-bottom: none;
}

.gt-center {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    align-items: center;
}

.action-icon {
    background: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    padding: 0;
}

.action-icon:hover {
    color: #FF0069;
}

.btn-restore {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 0;
    transition: 0.2s;
}

.btn-restore:hover {
    color: #FF0069;
}

/* Таблица удаленных товаров (без шапки) */
.gt-deleted-row {
    background: #3B3B46;
}

.am-task-actions button {
    background: none;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Inter;
    font-weight: 700;
    font-style: Bold;
    font-size: 15px;
}

/* Список последних действий */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item {
    display: flex;
    align-items: center;
    background: #3B3B46;
    border-radius: 8px;
    padding: 15px 25px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

.hi-date {
    width: 80px;
    flex-shrink: 0;
    color: #A0AAB5;
    line-height: 1.4;
    font-weight: 400;
}

.hi-date strong {
    color: #FFFFFF;
    font-weight: 700;
}

.hi-mobile-content {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
}

.hi-name {
    width: 120px;
}

.hi-email {
    text-align: center;
    flex-grow: 1;
}

.hi-arrow {
    width: 40px;
    text-align: center;
}

.hi-product {
    width: 120px;
    text-align: center;
}

.hi-price {
    width: 60px;
    text-align: right;
}

/* ========================
   АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
   ======================== */
@media (max-width: 900px) {

    /* Верхние панели на мобильных */
    .goods-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .goods-search,
    .btn-add-product,
    .btn-dark-grey {
        width: 100%;
        justify-content: center;
    }

    .btn-dark-grey {
        justify-content: flex-start;
    }

    /* Сжимаем таблицу товаров (как на 3-м скриншоте) */
    .gt-row {
        grid-template-columns: 60px 40px 40px 0.6fr 1fr 0.1fr;
        padding: 15px 10px;
        font-size: 10px;
        gap: 5px;
    }

    .gt-head .gt-col {
        line-height: 1.2;
    }

    /* Прячем текст "Вернуть" у удаленных товаров, оставляем только иконку */
    .restore-text {
        display: none;
    }

    .gt-actions {
        gap: 10px;
    }

    /* Перестраиваем историю действий */
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 20px;
        gap: 12px;
    }

    .hi-mobile-content {
        width: 100%;
        font-size: 11px;
    }

    .hi-name {
        width: auto;
    }

    .hi-email {
        flex-grow: 0;
        margin: 0 10px;
    }

    .hi-product {
        width: auto;
    }
}

@media (max-width: 400px) {
    .gt-row {
        font-size: 9px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }

    .gt-actions img {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 600px) {
    .hi-email {
        display: inline-block;

        /* Ширина в символах. 8ch значит, что влезет примерно 8 букв, остальное скроется за ... */
        max-width: 8ch;

        /* Запрещаем тексту переноситься на новую строку */
        white-space: nowrap;

        /* Обрезаем всё, что не влезло */
        overflow: hidden;

        /* Добавляем троеточие в конце */
        text-overflow: ellipsis;

        /* Выравниваем, чтобы не прыгало относительно других элементов */
        vertical-align: middle;
    }

    .history-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
        gap: 12px;
    }

    .am-task-actions button {
        font-size: 10px !important;
    }
}

/* ========================
   КАРТИНКА ЗАГРУЗКИ В ПОПАПЕ ТОВАРА
   ======================== */
.upload-image-wrapper {
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.upload-image-placeholder {
    width: 100%;
    /* Картинка займет 100% ширины контейнера */
    max-width: 100%;
    display: block;
    border-radius: 8px;
    /* Небольшое скругление углов картинки, если нужно */
    object-fit: contain;
}

.am-task-actions button:hover {
    color: #FF0069;
}




/* ========================
   ЗОНА ЗАГРУЗКИ ФАЙЛОВ (МОДАЛКА)
   ======================== */
.upload-image-wrapper {
    width: 100%;
    max-width: 475px;
    margin: 0 auto;
    background: #23232D;
    border: 1px solid #30363D;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}

/* Скрываем стандартный страшный input */
.hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Зона, куда перетаскивать */
.upload-drop-zone {
    padding: 16px 40px;
    text-align: center;
    transition: background 0.3s;
}

/* Эффект при наведении/перетаскивании файла */
.upload-image-wrapper:hover .upload-drop-zone,
.upload-drop-zone.dragover {
    background: #2D333B;
}

.upload-text {
    font-size: 13px;
    color: #E5E7EB;
    line-height: 1.4;
    margin-bottom: 8px;
}

.upload-subtext {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}

/* Список прикрепленных файлов */
.upload-files-list {
    background: #1C1E26;
    /* Чуть темнее фон для файла, как на макете */
    border-top: 1px solid #30363D;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
    /* Чтобы кнопки удаления нажимались поверх инпута */
}

.file-attached-item {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #30363D;
}

.file-attached-item:last-child {
    border-bottom: none;
}

.file-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0098FF;
    /* Синий цвет текста файла */
    font-size: 13px;
}

/* Иконка скрепки */
.file-name svg {
    width: 14px;
    height: 14px;
    fill: #6B7280;
}

.file-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    transition: color 0.2s;
}

.file-delete-btn:hover {
    color: #EF4444;
    /* Красный при наведении */
}

.file-delete-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.hi-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}


/* ========================
   ПОЛЕ ПОИСКА ПО ДАТЕ
   ======================== */

/* Делаем label похожим на кнопку (если в .btn-dark-grey не хватает этих свойств) */
.custom-date-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Расстояние между иконкой и текстом */
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Сам прозрачный инпут */
.custom-date-input {
    background: transparent;
    border: none;
    color: #FFFFFF;
    /* Цвет текста (даты) */
    font-family: inherit;
    font-size: 14px;
    /* Подгоните под размер текста в вашей кнопке */
    font-weight: 500;
    outline: none;
    width: 120px;
    /* Ширина под текст и дату */
    cursor: pointer;
    padding: 0;
}

/* Цвет плейсхолдера ("Поиск по дате") */
.custom-date-input::placeholder {
    color: #FFFFFF;
    opacity: 1;
}

/* Растягиваем скрытый триггер календаря на всю кнопку (для Chrome/Safari) */
.custom-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Делаем невидимым */
    cursor: pointer;
}