/* =====================================================================
   NR Estoque — tema da marca sobre o Bootstrap 5

   O Bootstrap entra como base; este arquivo só reescreve as variáveis
   dele com os valores do manual (nr-tokens.css). Assim usamos os
   componentes prontos — modal, toast, grid, formulários — sem herdar o
   visual padrão de Bootstrap.

   Ordem de carregamento: bootstrap.min.css → nr-tokens.css → nr-tema.css
   ===================================================================== */

:root,
[data-bs-theme="light"] {
    /* --- Cor --- */
    --bs-primary: #1E4FD8;
    --bs-primary-rgb: 30, 79, 216;
    --bs-primary-text-emphasis: #12328C;
    --bs-primary-bg-subtle: #EDF1FE;
    --bs-primary-border-subtle: #D3DEFB;

    --bs-body-bg: #FAFAF8;
    --bs-body-color: #1B1B1D;
    --bs-secondary-color: #6E6E72;
    --bs-tertiary-bg: #F4F4F2;

    --bs-border-color: #ECECE9;
    --bs-border-color-translucent: #ECECE9;

    --bs-link-color: #1E4FD8;
    --bs-link-color-rgb: 30, 79, 216;
    --bs-link-hover-color: #12328C;

    --bs-success: #0F6B4F;
    --bs-success-rgb: 15, 107, 79;
    --bs-warning: #9A6412;
    --bs-warning-rgb: 154, 100, 18;
    --bs-danger: #A83232;
    --bs-danger-rgb: 168, 50, 50;

    /* --- Tipografia --- */
    --bs-font-sans-serif: "Space Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-font-monospace: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.6;

    /* --- Raios (manual: 8 campos/botões, 12 cartões, 16 painéis) --- */
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-pill: 999px;

    /* --- Sombra de overlay do manual --- */
    --bs-box-shadow: 0 6px 16px rgba(27, 27, 29, 0.08);
    --bs-box-shadow-sm: 0 2px 6px rgba(27, 27, 29, 0.06);
    --bs-box-shadow-lg: 0 24px 48px rgba(27, 27, 29, 0.18);

    --bs-focus-ring-color: rgba(30, 79, 216, 0.25);
    --bs-focus-ring-width: 3px;
}

/* ----------------------------- Títulos ---------------------------- */

h1, .h1 { font-weight: 700; letter-spacing: -0.02em; }
h2, .h2, h3, .h3, h4, .h4 { font-weight: 600; }

/* Números, SKU, códigos e datas: monoespaçada, conforme o manual. */
.nr-mono {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------- Botões ----------------------------- */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 0.6875rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: 0.9375rem;
}

.btn-sm {
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.8125rem;
}

.btn-primary {
    --bs-btn-bg: #1E4FD8;
    --bs-btn-border-color: #1E4FD8;
    --bs-btn-hover-bg: #12328C;
    --bs-btn-hover-border-color: #12328C;
    --bs-btn-active-bg: #12328C;
    --bs-btn-active-border-color: #12328C;
    --bs-btn-disabled-bg: #1E4FD8;
    --bs-btn-disabled-border-color: #1E4FD8;
}

.btn-outline-secondary {
    --bs-btn-color: #1B1B1D;
    --bs-btn-border-color: #E3E3DF;
    --bs-btn-hover-color: #1B1B1D;
    --bs-btn-hover-bg: #F4F4F2;
    --bs-btn-hover-border-color: #1B1B1D;
    --bs-btn-active-color: #1B1B1D;
    --bs-btn-active-bg: #F4F4F2;
    --bs-btn-active-border-color: #1B1B1D;
}

/* Ação secundária de destaque, em azul claro (o "Filtrar" do manual). */
.btn-soft {
    --bs-btn-color: #1E4FD8;
    --bs-btn-bg: #EDF1FE;
    --bs-btn-border-color: #EDF1FE;
    --bs-btn-hover-color: #12328C;
    --bs-btn-hover-bg: #DCE4FD;
    --bs-btn-hover-border-color: #DCE4FD;
    --bs-btn-active-bg: #DCE4FD;
    --bs-btn-active-border-color: #DCE4FD;
}

/* --------------------------- Formulários -------------------------- */

.form-label {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.form-control,
.form-select {
    padding: 0.75rem 0.875rem;
    border-color: #E3E3DF;
    background-color: var(--nr-branco);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: #D6D6D1; }

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.form-control::placeholder { color: var(--bs-secondary-color); }

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-text { color: var(--bs-secondary-color); }

/* Campo com erro: borda vermelha e o rótulo junto, para o olho achar o campo
   antes de ler a mensagem. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--bs-danger);
    background-color: var(--nr-fundo-erro);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 3px rgba(168, 50, 50, 0.2);
}

.invalid-feedback {
    font-size: 0.8125rem;
    color: var(--bs-danger);
}

/* Marca de campo obrigatório no rótulo. */
.form-label.obrigatorio::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}

.input-group-text {
    background: var(--bs-body-bg);
    border-color: #E3E3DF;
    color: var(--bs-secondary-color);
}

/* ----------------------------- Cartões ---------------------------- */

/* O Bootstrap faz o cartão herdar o fundo do corpo. Como o corpo é o neutro
   #FAFAF8, cartão e página ficavam do mesmo tom e a tela perdia o relevo —
   por isso as superfícies são declaradas em branco. */
.card {
    --bs-card-bg: var(--nr-branco);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 1rem;
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
}

.offcanvas { --bs-offcanvas-bg: var(--nr-branco); }

.dropdown-menu { --bs-dropdown-bg: var(--nr-branco); }

.list-group { --bs-list-group-bg: var(--nr-branco); }

.toast { --bs-toast-bg: var(--nr-branco); }

/* Cartão de indicador. Sem levantar no hover: o cartão em si não é clicável,
   e movimento sugere um clique que não existe. */
.card-indicador { transition: border-color 160ms ease; }

.card-indicador:hover { border-color: #DEDED9; }

/* Cabeçalho de seção de formulário: ícone colorido + título + explicação.
   É o que tira o cinza dos formulários longos sem inventar cor nova. */
.nr-secao-titulo {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.nr-secao-titulo h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.nr-secao-titulo p {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Cabeçalho de página, acima do conteúdo. */
.nr-pagina-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Iniciais no lugar de foto — dá rosto à listagem sem depender de upload. */
.nr-iniciais {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

.nr-iniciais--grafite { background: var(--nr-fundo-neutro); color: var(--nr-grafite); }

/* Estado vazio com ícone, em vez de uma frase solta no meio do branco. */
.nr-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.nr-vazio .nr-chip { width: 3rem; height: 3rem; font-size: 1.5rem; }

/* ----------------------------- Tabelas ---------------------------- */

.table {
    /* Como no cartão, o Bootstrap faz a tabela herdar o fundo do corpo. Sem esta
       linha TODAS as células ficam no neutro #FAFAF8 e a zebra some — a listra
       das linhas pares seria exatamente a mesma cor do fundo. */
    --bs-table-bg: var(--nr-branco);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-hover-bg: var(--nr-linha-hover);
    margin-bottom: 0;
}

.table > thead th {
    padding: 0.75rem 1rem;
    background: var(--nr-branco);
    border-bottom: 1px solid var(--bs-border-color);
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.table > tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    /* A zebra já separa as linhas; a borda em cada uma só polui. */
    border-bottom-width: 0;
}

/* ----------------------------- Modal ------------------------------ */

.modal {
    --bs-modal-bg: var(--nr-branco);
    --bs-modal-border-color: var(--bs-border-color);
    --bs-modal-border-radius: 1rem;
    --bs-modal-box-shadow: var(--bs-box-shadow-lg);
    --bs-modal-header-padding: 1.5rem;
    --bs-modal-padding: 1.5rem;
}

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

.modal-backdrop { --bs-backdrop-bg: #1B1B1D; --bs-backdrop-opacity: 0.45; }

/* ----------------------------- Badges ----------------------------- */

.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-padding-y: 0.3125rem;
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-border-radius: var(--bs-border-radius-pill);
}

/* Estados de dado, conforme o manual (usar só em dados, não em decoração). */
.badge-estoque { background: var(--nr-fundo-ok); color: var(--bs-success); }
.badge-minimo { background: var(--nr-fundo-atencao); color: var(--bs-warning); }
.badge-esgotado { background: var(--nr-fundo-erro); color: var(--bs-danger); }
.badge-transito { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* ----------------------------- Alertas ---------------------------- */

.alert { --bs-alert-border-radius: 0.75rem; }

/* ------------------------- Acessibilidade ------------------------- */

:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}