/**
 * Products CSS - Arquivo unificado
 * Combina estilos de validação e layout de produtos
 * Movido de public/app-assets/css/ para public/assets/css/
 */

/* ===== VALIDAÇÃO E ESTADOS DE FORMULÁRIO ===== */
.form-control.is-invalid,
.select2-container .select2-selection.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
    background-color: #fff5f5;
}

.select2-container--default .select2-selection--single.is-invalid,
.select2-container--default .select2-selection--multiple.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

.form-group.has-error {
    margin-bottom: 1rem;
}

.form-group.has-error .form-control,
.form-group.has-error .select2-selection {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.card.has-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}

.card.has-error .card-header {
    background-color: #f8d7da !important;
    border-bottom-color: #dc3545 !important;
}

.form-control.is-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    background-color: #f8fff9;
}

.select2-container--default .select2-selection--single.is-valid,
.select2-container--default .select2-selection--multiple.is-valid {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #28a745;
    font-weight: 500;
}

/* ===== ANIMAÇÕES ===== */
@keyframes shake {

    0%,
    20%,
    40%,
    60%,
    80% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ESTILOS DE PRODUTOS ===== */
.product-page {
    .bg-light {
        background-color: #f8f9fa !important;
    }

    .card .card-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .product-card {
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .card-header:first-child,
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dcdcdc;
        font-weight: 600;
        padding: 1rem 1.25rem !important;
    }

    .product-status-active {
        background-color: #28d094;
        color: white;
    }

    .product-status-inactive {
        background-color: #ff4961;
        color: white;
    }

    .product-status-pending {
        background-color: #ff9149;
        color: white;
    }

    .product-table {
        border: none;
        padding: 1rem;
    }

    .product-table thead th {
        background-color: #f8f9fa;
        color: #2c343b;
        border: none;
        font-weight: 600;
        padding: 1rem;
    }

    .product-table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-top: 1px solid #eee;
    }

    .product-table tbody tr:hover {
        background-color: #f8f9fa;
    }

    .product-section {
        margin-bottom: 2rem;
    }

    .product-section-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dcdcdc;
        padding: 1rem 1.25rem;
        font-weight: 600;
        color: #2c343b;
    }

    /* ===== SUBPRODUTOS ===== */
    .subproduct-card {
        border-left: 4px solid #1e9ff2 !important;
        margin-bottom: 1rem;
    }

    .subproduct-header {
        background-color: #f8f9fa;
        color: #1e9ff2;
        font-weight: 600;
    }

    .subproduct-title {
        color: #1e9ff2;
        font-weight: 600;
        margin-bottom: 0;
    }

    .btn-add-subproduct {
        background-color: #1e9ff2;
        border-color: #1e9ff2;
        color: white;
    }

    .btn-add-subproduct:hover {
        background-color: #0c84d1;
        border-color: #0c84d1;
        color: white;
    }

    .btn-remove-subproduct {
        background-color: #ff4961;
        border-color: #ff4961;
        color: white;
    }

    .btn-remove-subproduct:hover {
        background-color: #ff1635;
        border-color: #ff1635;
        color: white;
    }

    /* ===== CONCORRENTES ===== */
    .competitor-card {
        border-left: 4px solid #ff9149 !important;
        margin-bottom: 1rem;
    }

    .competitor-header {
        background-color: #f8f9fa;
        color: #ff9149;
        font-weight: 600;
    }

    .competitor-title {
        color: #ff9149;
        font-weight: 600;
        margin-bottom: 0;
    }

    .btn-add-competitor {
        background-color: #ff9149;
        border-color: #ff9149;
        color: white;
    }

    .btn-add-competitor:hover {
        background-color: #ff7216;
        border-color: #ff7216;
        color: white;
    }

    .btn-remove-competitor {
        background-color: #ff4961;
        border-color: #ff4961;
        color: white;
    }

    .btn-remove-competitor:hover {
        background-color: #ff1635;
        border-color: #ff1635;
        color: white;
    }

    /* ===== DETALHES DE EMBALAGEM ===== */
    .package-detail-item {
        padding: 1rem;
        border-bottom: 1px solid #dcdcdc;
    }

    .package-detail-item:last-child {
        border-bottom: none;
    }

    .competitor-barcode-item {
        padding: 1rem;
        border-bottom: 1px solid #dcdcdc;
    }

    .competitor-barcode-item:last-child {
        border-bottom: none;
    }

    /* ===== CARDS ANINHADOS ===== */
    .card .card {
        box-shadow: none;
        border: 1px solid #dcdcdc;
    }

    .card.border {
        border-color: #dcdcdc !important;
        overflow: hidden;
    }

    .card .card .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dcdcdc;
        padding: 0.75rem 1rem;
    }

    .card .card .card-body {
        background-color: #f8f9fa;
    }

    .card .card .card-body:empty {
        padding: 1rem;
    }

    .btn-add-package-detail {
        background-color: #28d094;
        border-color: #28d094;
        color: white;
    }

    .btn-add-package-detail:hover {
        background-color: #20a576;
        border-color: #20a576;
        color: white;
    }

    .btn-remove-package-detail {
        background-color: #ff4961;
        border-color: #ff4961;
        color: white;
    }

    .btn-remove-package-detail:hover {
        background-color: #ff1635;
        border-color: #ff1635;
        color: white;
    }

    /* ===== FORMULÁRIOS ===== */
    .product-form .form-control {
        border: 1px solid #dcdcdc;
        border-radius: 0.25rem;
        padding: 0.75rem 1rem;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .product-form .form-control:focus {
        border-color: #1e9ff2;
        box-shadow: 0 0 0 0.2rem rgba(30, 159, 242, 0.25);
    }

    .product-form .form-label {
        font-weight: 600;
        color: #2c343b;
        margin-bottom: 0.5rem;
    }

    .product-form .is-invalid {
        border-color: #ff4961;
    }

    .product-form .is-invalid:focus {
        border-color: #ff4961;
        box-shadow: 0 0 0 0.2rem rgba(255, 73, 97, 0.25);
    }

    .product-form .is-valid {
        border-color: #28d094;
    }

    .product-form .is-valid:focus {
        border-color: #28d094;
        box-shadow: 0 0 0 0.2rem rgba(40, 208, 148, 0.25);
    }

    .product-form .custom-select {
        border: 1px solid #dcdcdc;
        border-radius: 0.25rem;
        padding: 0.75rem 1rem;
    }

    .product-form .custom-select:focus {
        border-color: #1e9ff2;
        box-shadow: 0 0 0 0.2rem rgba(30, 159, 242, 0.25);
    }

    .product-form .custom-file-label {
        border: 1px solid #dcdcdc;
        border-radius: 0.25rem;
        padding: 0.75rem 1rem;
    }

    .product-form .custom-file-input:focus~.custom-file-label {
        border-color: #1e9ff2;
        box-shadow: 0 0 0 0.2rem rgba(30, 159, 242, 0.25);
    }

    /* ===== AÇÕES DE PRODUTO ===== */
    .product-actions {
        padding: 1.5rem 0;
        border-top: 1px solid #dcdcdc;
        margin-top: 2rem;
    }

    .btn-product-save {
        background-color: #28d094;
        border-color: #28d094;
        color: white;
        padding: 0.75rem 2rem;
        font-weight: 600;
    }

    .btn-product-save:hover {
        background-color: #20a576;
        border-color: #20a576;
        color: white;
    }

    .btn-product-cancel {
        background-color: #6b6f82;
        border-color: #6b6f82;
        color: white;
        padding: 0.75rem 2rem;
        font-weight: 600;
    }

    .btn-product-cancel:hover {
        background-color: #545766;
        border-color: #545766;
        color: white;
    }

    /* ===== ESTADOS DE CARREGAMENTO ===== */
    .product-loading {
        opacity: 0.6;
        pointer-events: none;
    }

    .product-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #1e9ff2;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }

    /* ===== CORES UTILITÁRIAS ===== */
    .text-product-primary {
        color: #1e9ff2 !important;
    }

    .text-product-warning {
        color: #ff9149 !important;
    }

    .text-product-success {
        color: #28d094 !important;
    }

    .text-product-danger {
        color: #ff4961 !important;
    }

    .border-product-primary {
        border-color: #1e9ff2 !important;
    }

    .border-product-warning {
        border-color: #ff9149 !important;
    }

    .border-product-success {
        border-color: #28d094 !important;
    }

    .border-product-danger {
        border-color: #ff4961 !important;
    }

    /* ===== ANIMAÇÕES DE CARREGAMENTO ===== */
    .loading-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .skeleton-item {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading-shimmer 1.5s infinite;
        border-radius: 0.5rem;
    }

    .skeleton-header {
        height: 60px;
        margin-bottom: 1rem;
    }

    .skeleton-field {
        height: 40px;
        margin-bottom: 0.75rem;
    }

    .skeleton-field.small {
        width: 60%;
    }

    .skeleton-field.medium {
        width: 80%;
    }

    .skeleton-button {
        height: 35px;
        width: 120px;
        margin-left: auto;
    }

    .skeleton-section {
        border: 1px solid #e0e0e0;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .skeleton-subproduct {
        border-left: 4px solid #1e9ff2;
    }

    .skeleton-competitor {
        border-left: 4px solid #ff9149;
    }

    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-radius: 50%;
        border-top-color: #1e9ff2;
        animation: spin 1s ease-in-out infinite;
        margin-right: 0.5rem;
    }

    .loading-text {
        color: #6c757d;
        font-style: italic;
        text-align: center;
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== ANIMAÇÃO FADE IN ===== */
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }

    /* ===== RESPONSIVIDADE ===== */
    @media (max-width: 768px) {
        .product-card {
            margin-bottom: 1rem;
        }

        .product-table {
            font-size: 0.875rem;
        }

        .product-table thead th,
        .product-table tbody td {
            padding: 0.75rem 0.5rem;
        }

        .product-actions {
            text-align: center;
        }

        .btn-product-save,
        .btn-product-cancel {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .invalid-feedback,
        .valid-feedback {
            font-size: 0.8rem;
        }
    }
}

/* ===== ELEMENTOS DE ERRO GLOBAIS ===== */
.error-badge {
    background-color: #dc3545;
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.error-icon {
    color: #dc3545;
    margin-right: 0.25rem;
}

.error-tooltip {
    position: relative;
}

.error-tooltip::after {
    content: attr(data-error);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc3545;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.error-tooltip:hover::after {
    opacity: 1;
}

.subproduct-item.has-error,
.competitor-item.has-error {
    border-left: 4px solid #dc3545 !important;
}

.subproduct-item.has-error .card-header,
.competitor-item.has-error .card-header {
    background-color: #f8d7da;
    border-bottom: 1px solid #dc3545;
}

.error-counter {
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    margin-left: 0.5rem;
}

.validating {
    opacity: 0.7;
    pointer-events: none;
}

.validating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}