/* ==========================================================================
   PERFEX CRM — NEOBRUTALISM THEME
   Design System Principal — Variáveis, Temas, Presets de Cor
   Marca: Creative Core (navy/laranja) · Estrutura: Neobrutalism (borda+sombra dura)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts Import — Tektur (display) + DM Mono (texto/labels)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap');

/* --------------------------------------------------------------------------
   CSS Reset Neobrutalism
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important; /* CANTOS RETOS EM TUDO */
}

/* --------------------------------------------------------------------------
   Design Tokens — MODO ESCURO (padrão — referência Creative Core)
   -------------------------------------------------------------------------- */
[data-theme="dark"],
:root {
  /* Backgrounds — Deep Navy-Black Creative Core */
  --nb-bg:           #06090F;
  --nb-bg-secondary: #0B1018;
  --nb-bg-tertiary:  #111827;
  --nb-surface:      #0B1018;
  --nb-surface-hover:#111827;

  /* Texto */
  --nb-text-primary:   #E2E8F0;
  --nb-text-secondary: #94A3B8;
  --nb-text-muted:     #64748B;
  --nb-text-inverse:   #06090F;

  /* Bordas e Sombras — Dark usa borda off-white e sombra dupla (offset outline) */
  --nb-border:         #E2E8F0;
  --nb-border-light:   #1E2A3F;
  --nb-border-dim:     rgba(255,255,255,.09);
  --nb-shadow:         #06090F;
  --nb-border-width:   2px;
  --nb-shadow-sm:      3px 3px 0 0 var(--nb-bg), 3px 3px 0 1.5px var(--nb-border);
  --nb-shadow-md:      4px 4px 0 0 var(--nb-bg), 4px 4px 0 2px var(--nb-border);
  --nb-shadow-lg:      7px 7px 0 0 var(--nb-bg), 7px 7px 0 2px var(--nb-border);
  --nb-shadow-xl:      11px 11px 0 0 var(--nb-bg), 11px 11px 0 2px var(--nb-border);

  /* Accent — Laranja-vermelho Creative Core */
  --nb-accent:         #FF3D14;
  --nb-accent-hover:   #E0330F;
  --nb-accent-text:    #FFFFFF;

  /* Cores de marca auxiliares */
  --nb-cyan:           #00E5FF;
  --nb-purple:         #7C3AED;

  /* Status Colors — Dark variants */
  --nb-success:        #22C55E;
  --nb-success-bg:     #061410;
  --nb-success-text:   #4ADE80;
  --nb-danger:         #FF3B3B;
  --nb-danger-bg:      #140608;
  --nb-danger-text:    #F87171;
  --nb-warning:        #F59E0B;
  --nb-warning-bg:     #140E04;
  --nb-warning-text:   #FBBF24;
  --nb-info:           #00E5FF;
  --nb-info-bg:        #04161A;
  --nb-info-text:      #67E8F9;

  /* Sidebar */
  --nb-sidebar-bg:     #080B12;
  --nb-sidebar-text:   #CBD5E1;
  --nb-sidebar-border: #141C2B;
  --nb-sidebar-hover:  #0F1623;
  --nb-sidebar-active: var(--nb-accent);
  --nb-sidebar-active-text: #FFFFFF;

  /* Header */
  --nb-header-bg:      #080B12;
  --nb-header-border:  #141C2B;

  /* Scrollbar */
  --nb-scrollbar-track: #0F1623;
  --nb-scrollbar-thumb: #FF3D14;

  /* Transition */
  --nb-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* RGB-split (aberração cromática nos títulos) */
  --nb-rgbsplit: 1.5px 0 rgba(0,229,255,.40), -1.5px 0 rgba(255,61,20,.50);

  /* Camadas de fundo técnico */
  --nb-grid-line:  rgba(255,61,20,.07);
  --nb-grid-line2: rgba(255,255,255,.04);
}

/* --------------------------------------------------------------------------
   Design Tokens — MODO CLARO
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  /* Backgrounds */
  --nb-bg:           #FFFFFF;
  --nb-bg-secondary: #F4F5F9;
  --nb-bg-tertiary:  #E8EBF2;
  --nb-surface:      #FFFFFF;
  --nb-surface-hover:#F4F5F9;

  /* Texto — navy Creative Core */
  --nb-text-primary:   #031152;
  --nb-text-secondary: #334155;
  --nb-text-muted:     #475569;
  --nb-text-inverse:   #FFFFFF;

  /* Bordas e Sombras — Light usa navy sólido */
  --nb-border:         #031152;
  --nb-border-light:   #CBD5E1;
  --nb-border-dim:     rgba(3,17,82,.12);
  --nb-shadow:         #031152;
  --nb-shadow-sm:      3px 3px 0 var(--nb-shadow);
  --nb-shadow-md:      4px 4px 0 var(--nb-shadow);
  --nb-shadow-lg:      7px 7px 0 var(--nb-shadow);
  --nb-shadow-xl:      11px 11px 0 var(--nb-shadow);

  /* Accent herda do preset */
  --nb-accent-hover:   color-mix(in srgb, var(--nb-accent) 85%, black);

  /* Cores de marca auxiliares */
  --nb-cyan:           #0093A8;
  --nb-purple:         #7C3AED;

  /* Status Colors — light */
  --nb-success:        #16A34A;
  --nb-success-bg:     #DCFCE7;
  --nb-success-text:   #166534;
  --nb-danger:         #DC2626;
  --nb-danger-bg:      #FEE2E2;
  --nb-danger-text:    #991B1B;
  --nb-warning:        #B45309;
  --nb-warning-bg:     #FEF3C7;
  --nb-warning-text:   #92400E;
  --nb-info:           #0093A8;
  --nb-info-bg:        #CFFAFE;
  --nb-info-text:      #0E7490;

  /* Sidebar — light mantém navy escuro */
  --nb-sidebar-bg:     #031152;
  --nb-sidebar-text:   #CBD5E1;
  --nb-sidebar-border: #0A1C5E;
  --nb-sidebar-hover:  #0A1C5E;
  --nb-sidebar-active: var(--nb-accent);
  --nb-sidebar-active-text: #FFFFFF;

  /* Header */
  --nb-header-bg:      #FFFFFF;
  --nb-header-border:  #031152;

  /* Scrollbar */
  --nb-scrollbar-track: #F4F5F9;
  --nb-scrollbar-thumb: #031152;

  /* RGB-split desligado no claro (legibilidade) */
  --nb-rgbsplit: none;

  /* Camadas de fundo técnico */
  --nb-grid-line:  rgba(3,17,82,.06);
  --nb-grid-line2: rgba(3,17,82,.04);
}

/* --------------------------------------------------------------------------
   Presets de Cor — aplicados via data-color="*"
   -------------------------------------------------------------------------- */

/* Laranja-Vermelho (PADRÃO — Creative Core) */
[data-color="brand"]  { --nb-accent: #FF3D14; --nb-accent-text: #FFFFFF; }

/* Amarelo */
[data-color="yellow"] { --nb-accent: #FFE500; --nb-accent-text: #0A0A0A; }

/* Azul elétrico */
[data-color="blue"]   { --nb-accent: #2563EB; --nb-accent-text: #FFFFFF; }

/* Verde neon */
[data-color="green"]  { --nb-accent: #22C55E; --nb-accent-text: #0A0A0A; }

/* Roxo */
[data-color="purple"] { --nb-accent: #A855F7; --nb-accent-text: #FFFFFF; }

/* Coral */
[data-color="coral"]  { --nb-accent: #FF4D4D; --nb-accent-text: #FFFFFF; }

/* Laranja */
[data-color="orange"] { --nb-accent: #F97316; --nb-accent-text: #FFFFFF; }

/* Ciano */
[data-color="cyan"]   { --nb-accent: #06B6D4; --nb-accent-text: #0A0A0A; }

/* Rosa */
[data-color="pink"]   { --nb-accent: #EC4899; --nb-accent-text: #FFFFFF; }

/* --------------------------------------------------------------------------
   Tipografia Base — DM Mono (texto) + Tektur (display)
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Mono', ui-monospace, 'Space Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--nb-text-primary);
  background-color: var(--nb-bg);
  transition:
    background-color 300ms ease,
    color 300ms ease;
}

/* Display font — headings impactantes (Tektur) */
.nb-display,
h1, h2, h3, h4, h5,
.nb-h1, .nb-h2, .nb-h3, .nb-h4, .nb-h5 {
  font-family: 'Tektur', 'DM Mono', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Escala tipográfica */
h1, .nb-h1 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-shadow: var(--nb-rgbsplit);
}

h2, .nb-h2 {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
}

h3, .nb-h3 {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
}

h4, .nb-h4 {
  font-size: 1.05rem;
  font-weight: 700;
}

h5, .nb-h5 {
  font-size: 0.95rem;
  font-weight: 700;
}

.nb-mono {
  font-family: 'DM Mono', ui-monospace, 'Space Mono', monospace;
}

.nb-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-text-muted);
}

/* --------------------------------------------------------------------------
   Scrollbar customizada
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--nb-scrollbar-track);
  border-left: 2px solid var(--nb-border);
}

::-webkit-scrollbar-thumb {
  background: var(--nb-scrollbar-thumb);
  border: 1px solid var(--nb-border);
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Seleção de texto
   -------------------------------------------------------------------------- */
::selection {
  background: var(--nb-accent);
  color: var(--nb-accent-text);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
  color: var(--nb-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--nb-accent);
  text-underline-offset: 3px;
  transition: color var(--nb-transition), text-decoration-color var(--nb-transition);
}

a:hover {
  color: var(--nb-accent);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Utilitários Neobrutalism
   -------------------------------------------------------------------------- */
.nb-border {
  border: var(--nb-border-width) solid var(--nb-border);
}

.nb-shadow-sm { box-shadow: var(--nb-shadow-sm); }
.nb-shadow-md { box-shadow: var(--nb-shadow-md); }
.nb-shadow-lg { box-shadow: var(--nb-shadow-lg); }
.nb-shadow-xl { box-shadow: var(--nb-shadow-xl); }

.nb-surface {
  background: var(--nb-surface);
  border: var(--nb-border-width) solid var(--nb-border);
  box-shadow: var(--nb-shadow-md);
}

/* Bloco accent */
.nb-accent-block {
  background: var(--nb-accent);
  color: var(--nb-accent-text);
  border: var(--nb-border-width) solid var(--nb-border);
}

/* Tag/Badge */
.nb-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--nb-border);
  background: var(--nb-accent);
  color: var(--nb-accent-text);
}

.nb-tag-success {
  background: var(--nb-success-bg);
  color: var(--nb-success-text);
  border-color: var(--nb-success);
}

.nb-tag-danger {
  background: var(--nb-danger-bg);
  color: var(--nb-danger-text);
  border-color: var(--nb-danger);
}

.nb-tag-warning {
  background: var(--nb-warning-bg);
  color: var(--nb-warning-text);
  border-color: var(--nb-warning);
}

.nb-tag-info {
  background: var(--nb-info-bg);
  color: var(--nb-info-text);
  border-color: var(--nb-info);
}

/* Divider */
.nb-divider {
  border: none;
  border-top: 2px solid var(--nb-border);
  margin: 1.5rem 0;
}

/* Divisor laranja em gradiente (estilo Creative Core) */
.nb-divider-glow {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--nb-accent), transparent 60%);
  margin: 1.5rem 0;
}

/* Destaque de texto */
.nb-highlight {
  background: var(--nb-accent);
  color: var(--nb-accent-text);
  padding: 0.1em 0.3em;
}

/* --------------------------------------------------------------------------
   Theme Transition Helper — evita flash ao trocar tema
   -------------------------------------------------------------------------- */
.nb-no-transition * {
  transition: none !important;
}