/* =========================================================
   PRODUTOS / MATERIAIS
   Sistema OS
========================================================= */


/* =========================================================
   CONTAINER PRINCIPAL
========================================================= */

.produtos-lista {
    width: 100%;
    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   CABEÇALHO
========================================================= */

.produtos-cabecalho {

    display: grid;

    grid-template-columns:
        2.5fr
        1fr
        1fr
        1.25fr
        1.4fr
        1.7fr
        1fr
        42px;

    gap: 12px;

    align-items: center;

    min-height: 44px;

    padding: 0 14px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

    color: #64748b;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


/* =========================================================
   LINHAS DOS PRODUTOS
========================================================= */

.produto-linha {

    display: grid;

    grid-template-columns:
        2.5fr
        1fr
        1fr
        1.25fr
        1.4fr
        1.7fr
        1fr
        42px;

    gap: 12px;

    align-items: center;

    min-height: 74px;

    padding: 10px 14px;

    background: #ffffff;

    border-bottom: 1px solid #edf1f5;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease;
}


.produto-linha:last-child {
    border-bottom: none;
}


/* =========================================================
   LINHAS ALTERNADAS
========================================================= */

.produto-linha-alt {
    background: #fcfdff;
}


/* =========================================================
   HOVER
========================================================= */

.produto-linha:hover {
    background: #f8fbff;

    box-shadow:
        inset 3px 0 0 #dbeafe;
}


/* =========================================================
   CAMPOS GERAIS
========================================================= */

.produto-input,
.produto-select {

    width: 100%;

    height: 38px;

    padding: 0 10px;

    border: 1px solid transparent;

    border-radius: 8px;

    background: #f8fafc;

    color: #334155;

    font-size: 14px;

    outline: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


/* =========================================================
   HOVER DOS CAMPOS
========================================================= */

.produto-input:hover,
.produto-select:hover {

    background: #f4f7fa;
}


/* =========================================================
   FOCO DOS CAMPOS
========================================================= */

.produto-input:focus,
.produto-select:focus {

    background: #ffffff;

    border-color: #93c5fd;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.08);
}


/* =========================================================
   NOME DO MATERIAL
========================================================= */

.produto-nome {

    font-weight: 600;

    color: #1e293b;
}


/* =========================================================
   CAMPOS NUMÉRICOS
========================================================= */

.produto-numero {

    text-align: center;

    color: #334155;
}


/* =========================================================
   ESTOQUE
========================================================= */

.produto-estoque-area {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    width: 100%;
}


/* =========================================================
   LINHA PRINCIPAL DO ESTOQUE
========================================================= */

.produto-estoque-linha {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    gap: 5px;
}


/* =========================================================
   CAMPO DE ESTOQUE
========================================================= */

.produto-estoque {

    width: 82px;

    height: 36px;

    padding: 0 8px;

    border: 1px solid transparent;

    border-radius: 8px;

    background: #f8fafc;

    color: #334155;

    text-align: center;

    font-size: 14px;

    outline: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.produto-estoque:hover {

    background: #f4f7fa;
}


.produto-estoque:focus {

    background: #ffffff;

    border-color: #93c5fd;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.08);
}


/* =========================================================
   ESTOQUE BAIXO
========================================================= */

.produto-estoque.baixo {

    background: #fff7f7;

    border-color: #fecaca;

    color: #dc2626;

    font-weight: 700;
}


/* =========================================================
   UNIDADE DO ESTOQUE
========================================================= */

.produto-unidade {

    color: #64748b;

    font-size: 12px;

    line-height: 16px;

    white-space: nowrap;
}


/* =========================================================
   ESTOQUE MÍNIMO
========================================================= */

.produto-minimo {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;

    width: 100%;

    margin-top: 1px;
}


/* =========================================================
   TEXTO "MÍN."
========================================================= */

.produto-minimo span {

    color: #94a3b8;

    font-size: 10px;

    line-height: 22px;

    white-space: nowrap;
}


/* =========================================================
   CAMPO DO ESTOQUE MÍNIMO
========================================================= */

.produto-minimo-input {

    width: 58px;

    height: 23px;

    padding: 0 5px;

    border: 1px solid #e2e8f0;

    border-radius: 5px;

    background: #f8fafc;

    color: #64748b;

    font-size: 11px;

    text-align: center;

    outline: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.produto-minimo-input:hover {

    background: #f1f5f9;
}


.produto-minimo-input:focus {

    background: #ffffff;

    border-color: #93c5fd;
}


/* =========================================================
   UNIDADE DO ESTOQUE MÍNIMO
========================================================= */

.produto-minimo-unidade {

    color: #94a3b8;

    font-size: 10px;

    white-space: nowrap;
}


/* =========================================================
   SELECTS
========================================================= */

.produto-select {

    text-align: center;

    cursor: pointer;

    appearance: auto;
}


/* =========================================================
   LUCRO
========================================================= */

.produto-lucro {

    text-align: center;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;
}


.produto-lucro.positivo {

    color: #059669;
}


.produto-lucro.negativo {

    color: #dc2626;
}


/* =========================================================
   BOTÃO EXCLUIR
========================================================= */

.produto-excluir {

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   BOTÃO
========================================================= */

.produto-btn-excluir {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #cbd5e1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


/* =========================================================
   HOVER EXCLUIR
========================================================= */

.produto-btn-excluir:hover {

    background: #fef2f2;

    color: #ef4444;

    transform: scale(1.05);
}


/* =========================================================
   CAMPOS NUMBER
========================================================= */

.produto-estoque::-webkit-inner-spin-button,
.produto-estoque::-webkit-outer-spin-button {

    opacity: 0.45;
}


.produto-minimo-input::-webkit-inner-spin-button,
.produto-minimo-input::-webkit-outer-spin-button {

    opacity: 0.35;
}


/* =========================================================
   SCROLL HORIZONTAL
========================================================= */

@media (max-width: 1150px) {

    .produtos-lista {

        overflow-x: auto;

    }

    .produtos-cabecalho,
    .produto-linha {

        min-width: 1050px;

    }

}


/* =========================================================
   TELAS GRANDES
========================================================= */

@media (min-width: 1600px) {

    .produto-linha {

        min-height: 78px;

        padding-left: 18px;
        padding-right: 18px;

    }

    .produtos-cabecalho {

        padding-left: 18px;
        padding-right: 18px;

    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .produto-linha,
    .produto-input,
    .produto-select,
    .produto-estoque,
    .produto-minimo-input,
    .produto-btn-excluir {

        transition: none;

    }

}