/* ==========================================================================
   DL Lab 3D Print — CRM
   Identidade visual: base monocromática sobre o preto da marca,
   com o degradê do logo usado apenas como detalhe de destaque.
   ========================================================================== */

:root {
    --preto-marca: #141414;
    --preto-suave: #2a2a2e;
    --fundo-app: #f7f7f8;
    --branco: #ffffff;
    --cinza-borda: #e9e9ec;
    --cinza-texto: #6b6b70;
    --degrade-marca: linear-gradient(
        90deg,
        #16a34a,
        #eab308,
        #f97316,
        #ef4444,
        #d946ef,
        #4f46e5
    );
    --raio: 12px;
}

/* ---- Base ---- */

body {
    background-color: var(--fundo-app);
    color: var(--preto-marca);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    color: var(--preto-marca);
}

/* ---- Navbar ---- */

.navbar.bg-dark {
    background-color: var(--preto-marca) !important;
    border-bottom: 2px solid transparent;
    border-image: var(--degrade-marca) 1;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.navbar-brand img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--branco);
}

/* ---- Cards ---- */

.card {
    background-color: var(--branco);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    box-shadow: none;
}

.card-header {
    background-color: var(--branco);
    border-bottom: 1px solid var(--cinza-borda);
    border-radius: var(--raio) var(--raio) 0 0 !important;
    font-weight: 600;
    padding: 0.9rem 1.25rem;
}

.card-header.bg-dark {
    background-color: var(--preto-marca) !important;
}

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

.btn {
    border-radius: 8px;
    font-weight: 500;
}

.btn-dark {
    background-color: var(--preto-marca);
    border-color: var(--preto-marca);
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--preto-suave);
    border-color: var(--preto-suave);
}

.btn-outline-dark {
    border-color: var(--preto-marca);
    color: var(--preto-marca);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--preto-marca);
    border-color: var(--preto-marca);
}

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

.form-control,
.form-select {
    border-color: var(--cinza-borda);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--preto-marca);
    box-shadow: 0 0 0 0.2rem rgba(20, 20, 20, 0.08);
}

.form-label {
    color: var(--cinza-texto);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

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

.table thead th {
    border-bottom: 1px solid var(--cinza-borda);
    color: var(--cinza-texto);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table td {
    border-color: var(--cinza-borda);
}

/* ---- Painel: cartões de indicadores ---- */

.card-indicador {
    overflow: hidden;
    position: relative;
}

.card-indicador::before {
    background: var(--degrade-marca);
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

/* ---- Login ---- */

.card-login {
    margin-top: 4rem;
}

.card-login .logo-login {
    display: block;
    margin: 0 auto 0.75rem;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

/* ---- Impressão ---- */

@media print {
    .navbar,
    .no-print,
    .alert {
        display: none !important;
    }

    body {
        background: var(--branco);
    }
}