/* ==========================================================================
   TEMA LARI DECOLA
   --------------------------------------------------------------------------
   Sobrescreve o tema WowDash pelas variáveis, não classe por classe. Assim o
   painel inteiro é recolorido de uma vez e páginas novas já nascem na marca.

   Cores amostradas do arquivo original da logo:
     laranja   #F4611B  (o "Lari")
     amarelo   #F8B71F  (o "Decola")
     petróleo  #0F535C  (contorno e aviãozinho)

   Carregar DEPOIS de style.css.
   ========================================================================== */

/* --------------------------------------------------------------- variáveis */
:root {
    /* Escala do laranja: o 600 é o tom da marca, usado em botão e link */
    --primary-50:  #FEF3EB;
    --primary-100: #FCE0CD;
    --primary-200: #FAC5A4;
    --primary-300: #F8A87A;
    --primary-400: #F68C52;
    --primary-500: #F5742A;
    --primary-600: #F4611B;
    --primary-700: #D64F0F;
    --primary-800: #AE3F0B;
    --primary-900: #883108;

    /* Amarelo da marca no lugar do "warning" */
    --warning-50:  #FEF8E7;
    --warning-100: #FDEFC2;
    --warning-200: #FCE296;
    --warning-300: #FAD469;
    --warning-400: #F9C744;
    --warning-500: #F8BC2A;
    --warning-600: #F8B71F;
    --warning-700: #D69A11;
    --warning-800: #A9780C;
    --warning-900: #7C5708;

    /* Petróleo no lugar do "info" */
    --info-50:  #E8F2F3;
    --info-100: #C6DFE2;
    --info-200: #9FC9CE;
    --info-300: #77B2BA;
    --info-400: #4E9BA6;
    --info-500: #1F7F8C;
    --info-600: #14707D;
    --info-700: #0F535C;
    --info-800: #0B4048;
    --info-900: #072D33;

    /* Neutros com viés de petróleo: cinza puro entrega tema não pensado */
    --neutral-50:  #FBF6EE;
    --neutral-100: #F5EDE1;
    --neutral-200: #E7DDCE;
    --neutral-300: #CBC3B7;
    --neutral-400: #98A4A6;
    --neutral-500: #6C7E81;
    --neutral-600: #4B5F63;
    --neutral-700: #2E464B;
    --neutral-800: #1B3438;
    --neutral-900: #123138;

    /* Fundo de papel quente no lugar do cinza-azulado */
    --bg-color: #FFF9F1;

    --lari-display: "Baloo 2", ui-rounded, "Segoe UI Variable Display", system-ui, sans-serif;
    --lari-corpo: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
    --lari-linha: rgba(15, 83, 92, .14);
}

[data-theme="dark"] {
    --neutral-50:  #123138;
    --neutral-100: #17414A;
    --neutral-200: #1D4E58;
    --neutral-300: #2B646E;
    --neutral-400: #4A8189;
    --neutral-500: #7CA3A8;
    --neutral-600: #A8C4C7;
    --neutral-700: #CDE0E1;
    --neutral-800: #E4F0F0;
    --neutral-900: #F3FAFA;

    --bg-color: #0A2A30;
    --lari-linha: rgba(234, 244, 243, .14);
}

/* -------------------------------------------------------------- tipografia */
body,
.dashboard-main {
    font-family: var(--lari-corpo);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--lari-display);
    font-weight: 700;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.display-4 {
    font-weight: 800;
}

/* Números de indicador em fonte tabular: coluna de dígitos alinhada */
.card h4, .card h5,
.fw-bold[class*="text-primary"],
td:has(> .text-end) {
    font-variant-numeric: tabular-nums;
}

/* Botões com a voz da marca: arredondados e com peso */
.btn {
    font-family: var(--lari-display);
    font-weight: 700;
    letter-spacing: .005em;
    border-radius: 12px;
}

.btn-lg {
    border-radius: 14px;
}

.btn-sm {
    border-radius: 10px;
}

/* --------------------------------------------------------------- superfície */
.card {
    border-radius: 18px;
    border-color: var(--lari-linha);
}

.card:not(.shadow-none) {
    box-shadow: 0 1px 2px rgba(15, 83, 92, .05), 0 10px 26px -14px rgba(15, 83, 92, .18);
}

.radius-12 { border-radius: 14px !important; }
.radius-8  { border-radius: 11px !important; }
.radius-4  { border-radius: 8px !important; }

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    border-radius: 12px;
    border-color: var(--lari-linha);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(244, 97, 27, .18);
}

.badge {
    border-radius: 999px;
    font-family: var(--lari-display);
    font-weight: 700;
    letter-spacing: .02em;
}

/* ------------------------------------------------------------------- botões */
.btn-primary,
.btn-primary-600 {
    background: linear-gradient(135deg, var(--warning-600) 0%, var(--primary-600) 58%, var(--primary-700) 100%);
    border: 0;
    color: #fff;
}

.btn-primary:hover,
.btn-primary-600:hover,
.btn-primary:focus,
.btn-primary-600:focus {
    background: linear-gradient(135deg, var(--warning-700) 0%, var(--primary-700) 58%, var(--primary-800) 100%);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-primary-600 {
    border-color: var(--primary-600);
    color: var(--primary-600);
}

.btn-outline-primary:hover,
.btn-outline-primary-600:hover {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

/* ---------------------------------------------- faixa de topo com o rastro */
/* Onde havia a faixa azul-clara agora entra o papel quente com o rastro
   tracejado do aviãozinho da logo, desenhado em SVG embutido. */
.bg-primary-50 {
    background-color: var(--primary-50) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='320' viewBox='0 0 1200 320' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230F535C' stroke-width='2' stroke-linecap='round' stroke-dasharray='7 9' opacity='.22'%3E%3Cpath d='M-40,250 C 200,180 320,300 500,215 S 800,60 1020,120 S 1200,20 1280,-40'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

[data-theme="dark"] .bg-primary-50 {
    background-color: var(--info-900) !important;
}

/* --------------------------------------------------------------- navegação */
.sidebar-menu li a.active-page,
.sidebar-menu li a:hover {
    color: var(--primary-600);
}

.sidebar-menu li a.active-page {
    background-color: var(--primary-50);
}

.sidebar-logo img {
    max-height: 46px;
    width: auto;
}

a {
    color: var(--info-600);
}

a:hover {
    color: var(--primary-600);
}

/* Links dentro de botão não devem virar laranja no hover */
.btn a,
a.btn:hover {
    color: inherit;
}

/* ------------------------------------------------------------------ tabela */
.table > :not(caption) > * > * {
    border-color: var(--lari-linha);
}

.table thead th {
    font-family: var(--lari-display);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--neutral-500);
}

/* ------------------------------------------------------- cartão de produto */
/* Um leve levantar no hover comunica que o cartão é clicável. */
.card.h-100:hover,
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -16px rgba(15, 83, 92, .32);
    border-color: rgba(244, 97, 27, .38);
}

.card.h-100,
.product-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Capas de produto sem distorcer, seja retrato ou paisagem */
.card img.card-img-top,
.product-card img {
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .card.h-100,
    .product-card,
    .btn {
        transition: none !important;
    }
    .card.h-100:hover,
    .product-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   STICKERS DA MARCA
   Ilustrações da identidade usadas como elemento de interface. Ficam em
   assets/images/lari/ e entram por classe, para poder trocar sem mexer no
   HTML de cada página.
   ========================================================================== */

.lari-sticker {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    margin-inline: auto;
    pointer-events: none;
    user-select: none;
}

.lari-sticker--sm { max-width: 76px; }
.lari-sticker--lg { max-width: 190px; }

/* Estado vazio: em vez de um parágrafo solto, a ilustração explica o momento */
.lari-vazio-ilustrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 42px 20px;
    color: var(--neutral-500);
}

.lari-vazio-ilustrado img {
    max-width: 150px;
    opacity: .92;
}

.lari-vazio-ilustrado strong {
    font-family: var(--lari-display);
    font-size: 1.15rem;
    color: var(--neutral-800);
}

/* Sticker decorativo no canto de um bloco, sem atrapalhar o conteúdo */
.lari-com-sticker {
    position: relative;
    overflow: hidden;
}

.lari-com-sticker > .lari-sticker-canto {
    position: absolute;
    right: -14px;
    bottom: -18px;
    width: 148px;
    opacity: .28;
    transform: rotate(-8deg);
    pointer-events: none;
}

@media (max-width: 720px) {
    .lari-com-sticker > .lari-sticker-canto { display: none; }
}

/* Capa da área de membros */
.lari-capa {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: var(--info-700);
    aspect-ratio: 1 / 1;
}

.lari-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Bloco de boas-vindas: a capa e quadrada (arte de post, com texto em cima
   e a marca embaixo), entao fica ao lado do texto em vez de virar faixa
   cortada. Em tela estreita ela vai para cima, inteira. */
.lari-hero {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 340px);
    gap: 26px;
    align-items: center;
    margin-bottom: 34px;
}

@media (max-width: 860px) {
    .lari-hero {
        grid-template-columns: 1fr;
    }
    .lari-capa {
        max-width: 340px;
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------------ logo
   A logo da Lari é uma assinatura desenhada, não um símbolo compacto: no
   tamanho que o template reserva ela fica ilegível. O !important vence as
   regras de largura do próprio template, que dimensiona pensando em logo
   quadrada. object-fit protege a proporção caso a arte seja trocada. */
.sidebar-logo img,
.sidebar-logo .light-logo,
.sidebar-logo .dark-logo {
    height: 62px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain;
}

/* Sidebar recolhida: só o ícone cabe, então a assinatura sai de cena. */
.sidebar.active .sidebar-logo img,
.sidebar-menu-collapse .sidebar-logo img {
    height: 40px !important;
}

@media (max-width: 767px) {
    .sidebar-logo img,
    .sidebar-logo .light-logo,
    .sidebar-logo .dark-logo {
        height: 48px !important;
    }
}