/* ============================================================================
 * Identidade visual Panibrasil
 * Extraída do logo + Instagram @panibrasil
 * Carregada APÓS Tailwind CDN em todas as views.
 * Não refatora classes existentes — só substitui o azul institucional pelo
 * preto profundo da marca via override, e abre tokens semânticos.
 * ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* Utility: tipografia da marca (h1/h2/h3 de páginas) */
.font-brand {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.03em;
}

:root {
    /* Primitivas — escala do brand-yellow PaniBrasil */
    --pb-yellow-50: #FFF8E1;
    --pb-yellow-100: #FFECB3;
    --pb-yellow-200: #FFE082;
    --pb-yellow-300: #FFD54F;
    --pb-yellow-400: #FFCA28;
    --pb-yellow-500: #FFB800; /* cor principal do logo */
    --pb-yellow-600: #FFA000;
    --pb-yellow-700: #E69900;
    --pb-yellow-800: #CC8800;
    --pb-yellow-900: #8C6500;

    /* Primitivas — escala do preto profundo (feed Instagram da marca) */
    --pb-dark-50:  #F5F5F5;
    --pb-dark-100: #E0E0E0;
    --pb-dark-200: #BDBDBD;
    --pb-dark-300: #9E9E9E;
    --pb-dark-400: #616161;
    --pb-dark-500: #424242;
    --pb-dark-600: #2A2A2A;
    --pb-dark-700: #1A1A1A; /* botões primários */
    --pb-dark-800: #0F0F0F;
    --pb-dark-900: #000000;

    /* Semânticas */
    --brand-primary:           var(--pb-dark-700);  /* CTAs principais (fundo escuro) */
    --brand-primary-hover:     var(--pb-dark-800);
    --brand-primary-on:        #FFFFFF;
    --brand-accent:            var(--pb-yellow-500); /* logo + destaques de marca */
    --brand-accent-hover:      var(--pb-yellow-600);
    --brand-accent-on:         var(--pb-dark-700);
    --brand-surface-yellow:    var(--pb-yellow-50);  /* fundos suaves */
    --brand-text-on-yellow:    var(--pb-dark-700);
}

/* ----------------------------------------------------------------------------
 * Override do azul institucional anterior (#1F3A5F) → preto da marca
 * Cobre as classes Tailwind escritas inline nas views (bg-[#1F3A5F], etc).
 * Importante: Tailwind escapa # como \# nos seletores CSS.
 * --------------------------------------------------------------------------*/
.bg-\[\#1F3A5F\]                  { background-color: var(--brand-primary) !important; }
.hover\:bg-\[\#15294a\]:hover     { background-color: var(--brand-primary-hover) !important; }
.text-\[\#1F3A5F\]                { color: var(--brand-primary) !important; }
.border-\[\#1F3A5F\]              { border-color: var(--brand-primary) !important; }
.from-\[\#1F3A5F\]                { --tw-gradient-from: var(--brand-primary) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-\[\#15294a\]                  { --tw-gradient-to: var(--brand-primary-hover) !important; }

/* Ring focus do select/input que usa o azul */
.focus\:ring-\[\#1F3A5F\]:focus  { --tw-ring-color: var(--brand-primary) !important; }

/* ----------------------------------------------------------------------------
 * Logo PaniBrasil — usa PNG oficial com fundo amarelo embed
 * --------------------------------------------------------------------------*/
.pb-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    background-image: url('/img/panibrasil-logo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

/* Logo grande no cabeçalho do orçamento */
.pb-logo-lg {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    flex-shrink: 0;
    background-image: url('/img/panibrasil-logo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

/* Versão sobre fundo amarelo (caso queira o logo branco sem o "selo" amarelo extra) */
.pb-logo-trans {
    background-image: url('/img/panibrasil-logo-trans.png');
    background-color: var(--brand-accent);
}

/* Logo extra-grande (tela de login) */
.pb-logo-xl {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    background-image: url('/img/panibrasil-logo.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    box-shadow:
        0 10px 30px -10px rgba(255, 184, 0, 0.45),
        0 4px 12px -4px rgba(15, 15, 15, 0.15);
}

/* ----------------------------------------------------------------------------
 * Refinamentos globais — botões primários com hover smooth + glow amarelo sutil
 * Não muda layout. Aplica nas classes já existentes (bg-[#1F3A5F] override + nossa).
 * --------------------------------------------------------------------------*/
.bg-\[\#1F3A5F\],
button.bg-\[\#1F3A5F\],
a.bg-\[\#1F3A5F\] {
    transition: transform 180ms ease, box-shadow 200ms ease, background-color 180ms ease !important;
    box-shadow: 0 2px 8px -2px rgba(15, 15, 15, 0.15);
}
.bg-\[\#1F3A5F\]:hover,
button.bg-\[\#1F3A5F\]:hover,
a.bg-\[\#1F3A5F\]:hover {
    box-shadow:
        0 6px 18px -4px rgba(15, 15, 15, 0.25),
        0 0 0 1px rgba(255, 184, 0, 0.30),
        0 4px 16px -4px rgba(255, 184, 0, 0.20);
    transform: translateY(-1px);
}
.bg-\[\#1F3A5F\]:active,
button.bg-\[\#1F3A5F\]:active,
a.bg-\[\#1F3A5F\]:active { transform: translateY(0); }

/* Inputs focus com tint amarelo no painel (sem ser agressivo) */
input.focus\:ring-\[\#1F3A5F\]:focus,
select.focus\:ring-\[\#1F3A5F\]:focus,
textarea.focus\:ring-\[\#1F3A5F\]:focus {
    --tw-ring-color: rgba(255, 184, 0, 0.4) !important;
    border-color: var(--pb-yellow-500) !important;
}

/* Navbar: link ativo ganha sublinhado amarelo sutil */
nav a[href]:not([href="/painel"]):hover {
    color: var(--brand-primary) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bg-\[\#1F3A5F\],
    button.bg-\[\#1F3A5F\],
    a.bg-\[\#1F3A5F\] {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================================
 * Pontos de marca: amarelo aplicado em hover/active/badges (sem poluir)
 * ========================================================================== */

/* Navbar — hover dos itens em amarelo claro */
nav.bg-white a[href^="/painel"]:not([href="/painel"]):hover,
nav.bg-white a[href="/painel"]:not(.flex):hover {
    background-color: var(--pb-yellow-50) !important;
    color: var(--brand-primary) !important;
}

/* Navbar — item ativo (marcado via JS data-active="true") */
nav.bg-white a[data-active="true"] {
    background-color: var(--pb-yellow-50) !important;
    color: var(--brand-primary) !important;
    position: relative;
    font-weight: 600;
}
nav.bg-white a[data-active="true"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--pb-yellow-500);
    border-radius: 1px;
}

/* Tabs em /painel/perdas — aba ativa em amarelo PaniBrasil */
.tab-btn.active {
    background-color: var(--pb-yellow-500) !important;
    color: var(--brand-primary) !important;
    box-shadow: 0 1px 3px rgba(255, 184, 0, 0.30);
}
.tab-btn:not(.active):hover {
    background-color: var(--pb-yellow-50) !important;
    color: var(--brand-primary) !important;
}

/* Status badges com cor da marca (substitui indigo "confirmado" e amber "faturado") */
.badge-pb-confirmado {
    background-color: var(--pb-yellow-50) !important;
    color: var(--pb-yellow-800) !important;
}
.badge-pb-faturado {
    background-color: var(--pb-yellow-500) !important;
    color: var(--brand-primary) !important;
}

/* Card do dashboard com marcação de marca (border-left amarela 3px) */
.card-pb-highlight {
    border-left: 3px solid var(--pb-yellow-500);
}

/* Botão secundário com borda amarela em vez de slate */
.btn-pb-outline {
    border-color: var(--pb-yellow-500) !important;
    background-color: #FFFFFF !important;
    color: var(--brand-primary) !important;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}
.btn-pb-outline:hover {
    background-color: var(--pb-yellow-50) !important;
    box-shadow: 0 0 0 1px var(--pb-yellow-500), 0 4px 12px -2px rgba(255,184,0,0.20);
}

/* ----------------------------------------------------------------------------
 * Detalhe amarelo: borda inferior da navbar (touch de marca)
 * --------------------------------------------------------------------------*/
nav.bg-white {
    border-bottom-color: var(--pb-yellow-500) !important;
    border-bottom-width: 2px !important;
}

/* Cabeçalho do orçamento: troca o azul por uma divisão amarela */
.print-page > div.flex.justify-between.items-start.pb-6.border-b-2 {
    border-bottom-color: var(--brand-accent) !important;
}
.print-page h2.text-\[\#1F3A5F\] {
    color: var(--brand-primary) !important;
}

/* Selo amarelo discreto no link "Painel Panibrasil" da navbar  */
nav a[href="/painel"] p.font-semibold::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--brand-accent);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
}