/**
 * NXERP - DESIGN SYSTEM GRV
 * 
 * Sistema profissional de Design Tokens com suporte Light/Dark
 * Baseado na paleta GRV com laranja energia para MAX app
 * 
 * Autor: Marcio Sistema NXERP
 * Versão: 2.0.0 - GRV Edition
 * Data: 2025-11-17
 */

/* 
   ROOT 1: VARIÁVEIS COMUNS (SEMPRE ATIVO)
   Inclui: Typography, Gray Scale, Color Scales, Overlays, Semantic Colors, Text Colors
*/
:root {
  
  /* === TYPOGRAPHY === */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* === NEUTRAL & GRAY SCALE === */
  --neutral-white: #ffffff;
  --neutral-black: #000000;
  --invert-neutral: var(--neutral-black);

  --gray-50: #f8f8f8;
  --gray-100: #f3f3f3;
  --gray-200: #ededed;
  --gray-300: #e2e2e2;
  --gray-400: #c7c7c7;
  --gray-500: #999999;
  --gray-600: #7c7c7c;
  --gray-700: #525252;
  --gray-800: #383838;
  --gray-900: #171717;

  /* === COLOR SCALES === */
  --blue-50: #f7fbfd;
  --blue-100: #edf6fd;
  --blue-200: #e3f1fd;
  --blue-300: #c9e7fc;
  --blue-400: #70b6f0;
  --blue-500: #0289f7;
  --blue-600: #007be0;
  --blue-700: #0070cc;
  --blue-800: #005ca3;
  --blue-900: #004880;

  --green-50: #f3fcf5;
  --green-100: #e4f5e9;
  --green-200: #daf0e1;
  --green-300: #cae5d4;
  --green-400: #b6dec5;
  --green-500: #59ba8b;
  --green-600: #30a66d;
  --green-700: #278f5e;
  --green-800: #16794c;
  --green-900: #173b2c;

  --red-50: #fff7f7;
  --red-100: #fff0f0;
  --red-200: #fcd7d7;
  --red-300: #f9c6c6;
  --red-400: #eb9091;
  --red-500: #e03636;
  --red-600: #cc2929;
  --red-700: #b52a2a;
  --red-800: #941f1f;
  --red-900: #6b1515;

  --orange-50: #fff9f5;
  --orange-100: #fff1e7;
  --orange-200: #fce6d5;
  --orange-300: #f7d6bd;
  --orange-400: #f0b58b;
  --orange-500: #e86c13;
  --orange-600: #d45a08;
  --orange-700: #bd3e0c;
  --orange-800: #9e3513;
  --orange-900: #6b2711;

  --amber-50: #fdfaed;
  --amber-100: #fcf3cf;
  --amber-200: #f7e28d;
  --amber-300: #f5d261;
  --amber-400: #f2be3a;
  --amber-500: #e79913;
  --amber-600: #db7706;
  --amber-700: #b35309;
  --amber-800: #91400d;
  --amber-900: #763813;

  --yellow-50: #fffcef;
  --yellow-100: #fff7d3;
  --yellow-200: #f7e9a8;
  --yellow-300: #f5e171;
  --yellow-400: #f2d14b;
  --yellow-500: #edba13;
  --yellow-600: #d1930d;
  --yellow-700: #ab6e05;
  --yellow-800: #8c5600;
  --yellow-900: #733f12;

  --cyan-50: #f5fbfc;
  --cyan-100: #e0f8ff;
  --cyan-200: #b3ecfc;
  --cyan-300: #94e6ff;
  --cyan-400: #6bd3f2;
  --cyan-500: #34bae3;
  --cyan-600: #32a4c7;
  --cyan-700: #267a94;
  --cyan-800: #125c73;
  --cyan-900: #164759;

  --teal-50: #f0fdfa;
  --teal-100: #e6f7f4;
  --teal-200: #bae8e1;
  --teal-300: #97ded4;
  --teal-400: #73d1c4;
  --teal-500: #36baad;
  --teal-600: #0b9e92;
  --teal-700: #0f736b;
  --teal-800: #115c57;
  --teal-900: #114541;

  --violet-50: #fbfaff;
  --violet-100: #f5f2ff;
  --violet-200: #e5e1fa;
  --violet-300: #dad2f7;
  --violet-400: #bdb1f0;
  --violet-500: #6846e3;
  --violet-600: #5f46c7;
  --violet-700: #4f3da1;
  --violet-800: #392980;
  --violet-900: #251959;

  --pink-50: #fff7fc;
  --pink-100: #feeef8;
  --pink-200: #f8e2f0;
  --pink-300: #f2d4e6;
  --pink-400: #e9c4da;
  --pink-500: #e34aa6;
  --pink-600: #cf3a96;
  --pink-700: #9c2671;
  --pink-800: #801458;
  --pink-900: #570f3e;

  --purple-50: #fdfaff;
  --purple-100: #f9f0ff;
  --purple-200: #f1e5fa;
  --purple-300: #e9d6f5;
  --purple-400: #d6c1e6;
  --purple-500: #9c45e3;
  --purple-600: #8642c2;
  --purple-700: #6e399d;
  --purple-800: #5c2f83;
  --purple-900: #401863;

  /* === OVERLAYS & GRADIENTS === */
  --white-overlay-50: rgba(255, 255, 255, 0.09);
  --white-overlay-100: rgba(255, 255, 255, 0.18);
  --white-overlay-200: rgba(255, 255, 255, 0.27);
  --white-overlay-300: rgba(255, 255, 255, 0.36);
  --white-overlay-400: rgba(255, 255, 255, 0.45);
  --white-overlay-500: rgba(255, 255, 255, 0.54);
  --white-overlay-600: rgba(255, 255, 255, 0.63);
  --white-overlay-700: rgba(255, 255, 255, 0.72);
  --white-overlay-800: rgba(255, 255, 255, 0.81);
  --white-overlay-900: rgba(255, 255, 255, 0.9);

  --black-overlay-50: rgba(0, 0, 0, 0.09);
  --black-overlay-100: rgba(0, 0, 0, 0.18);
  --black-overlay-200: rgba(0, 0, 0, 0.27);
  --black-overlay-300: rgba(0, 0, 0, 0.36);
  --black-overlay-400: rgba(0, 0, 0, 0.45);
  --black-overlay-500: rgba(0, 0, 0, 0.54);
  --black-overlay-600: rgba(0, 0, 0, 0.63);
  --black-overlay-700: rgba(0, 0, 0, 0.72);
  --black-overlay-800: rgba(0, 0, 0, 0.81);
  --black-overlay-900: rgba(0, 0, 0, 0.9);

  --linear-black: linear-gradient(to bottom, rgba(46, 46, 46, 0.18) 0%, rgba(36, 36, 36, 0.14) 100%);
  --linear-blue: linear-gradient(to bottom, rgba(17, 142, 245, 0.067) 0%, rgba(7, 127, 247, 0.029) 100%);
  --angular-white: conic-gradient(rgba(255, 255, 255, 1) 72.38%, rgba(255, 255, 255, 1) 99.87%);
  --angular-black: conic-gradient(rgba(56, 56, 56, 0.22) 72.38%, rgba(56, 56, 56, 0.22) 99.87%);
  --angular-green: conic-gradient(rgba(23, 117, 75, 0.092) 72.38%, rgba(23, 117, 75, 0.092) 99.87%);
  --angular-red: conic-gradient(rgba(205, 41, 41, 0.804) 72.38%, rgba(205, 41, 41, 0.804) 99.87%);
  --angular-blue: conic-gradient(rgba(0, 110, 219, 0) 72.38%, rgba(0, 110, 219, 0) 99.87%);

  /* === SEMANTIC COLORS === */
  --outline-gray-1: #ededed;
  --outline-gray-2: #e2e2e2;
  --outline-gray-3: #c7c7c7;
  --outline-gray-4: #999999;
  --outline-gray-5: #383838;
  --outline-red-1: #fdc2c2;
  --outline-red-2: #f79596;
  --outline-red-3: #e03636;
  --outline-green-1: #a6efc0;
  --outline-green-2: #86e0a8;
  --outline-amber-1: #fbdb73;
  --outline-amber-2: #fbcc55;
  --outline-blue-1: #a7d7fd;
  --outline-orange-1: #f4b07f;
  --outline-gray-modals: #ededed;

  --surface-gray-1: #f8f8f8;
  --surface-gray-2: #f3f3f3;
  --surface-gray-3: #ededed;
  --surface-gray-4: #e2e2e2;
  --surface-gray-5: #525252;
  --surface-gray-6: #383838;
  --surface-gray-7: #171717;
  --surface-red-1: #fff7f7;
  --surface-red-2: #ffe7e7;
  --surface-red-3: #ffd8d8;
  --surface-red-4: #fdc2c2;
  --surface-red-5: #cc2929;
  --surface-red-6: #b52a2a;
  --surface-red-7: #941f1f;
  --surface-green-1: #f2fdf4;
  --surface-green-2: #e4faeb;
  --surface-green-3: #278f5e;
  --surface-amber-1: #fdfaed;
  --surface-amber-2: #fff7d3;
  --surface-amber-3: #db7706;
  --surface-blue-1: #f2f9ff;
  --surface-blue-2: #e6f4ff;
  --surface-blue-3: #007be0;
  --surface-orange-1: #ffefe4;
  --surface-violet-1: #f0ebff;
  --surface-cyan-1: #ddf7ff;
  --surface-pink-1: #fde8f5;
  --surface-menu-bar: #f8f8f8;
  --surface-modal: #ffffff;
  --surface-white: #ffffff;

  --ink-gray-1: #ededed;
  --ink-gray-2: #e2e2e2;
  --ink-gray-3: #c7c7c7;
  --ink-gray-4: #999999;
  --ink-gray-5: #7c7c7c;
  --ink-gray-6: #525252;
  --ink-gray-7: #525252;
  --ink-gray-8: #383838;
  --ink-gray-9: #171717;
  --ink-red-1: #fff7f7;
  --ink-red-2: #f79596;
  --ink-red-3: #e03636;
  --ink-red-4: #cc2929;
  --ink-green-1: #f2fdf4;
  --ink-green-2: #46b37e;
  --ink-green-3: #278f5e;
  --ink-amber-1: #fdfaed;
  --ink-amber-2: #e79913;
  --ink-amber-3: #db7706;
  --ink-blue-1: #f2f9ff;
  --ink-blue-2: #0289f7;
  --ink-blue-3: #007be0;
  --ink-cyan-1: #3bbde5;
  --ink-pink-1: #e34aa6;
  --ink-violet-1: #6846e3;
  --ink-blue-link: #73bbf6;

  /* === TEXT COLORS === */
  --light-text-primary: #323232;
  --light-text-secondary: #4c4c4c;
  --light-text-color: #191919e0;
  --light-text-muted: #4c4c4c;
  --light-text-light: #7f7f7f;
  --light-text-disabled: #000000;
  --light-heading-color: #4c4c4c;
  --light-list-text: rgba(7, 3, 1, 0.9);
  --light-list-header-text: #ffffff;
  --dark-list-header-text: var(--gray-400);

  /* === VARIÁVEIS COMUNS A AMBAS PALETAS === */
  --borda-branca: #FFFFFF;
}


/* 
   ROOT 2: PALETA LARANJA GRV (ATIVA) ✓
*/
/* :root {
  --cor-principal: #FC4B08;
  --cor-principal-clara: #FFC78A;
  --cor-principal-escura: #E67A0D;
  --cor-principal-hover: #0a0909;
  --cor-principal-ativa: #35383b;
  
  --fundo-pagina-principal: #fffefd;
  --fundo-pagina-superficie: #fbfbf9;
  --fundo-pagina-superficie-hover: #ffe5cc9d;
  --fundo-pagina-elevado: #FFD9B3;
  
  --borda-geral: #ffebd8;
  --borda-sidebar: #FFE5CC;
  
  --fundo-botao-padrao: #FFE5CC;
  --fundo-botao-padrao-hover: #FFD9B3;
  
  --fundo-sutil: #FFF5EB;
  --sombra-principal: rgba(247, 139, 30, 0.25);
  
  --secondary: #FFA44D;
} */


/* 
   ROOT 3: PALETA AZUL ESCURO (DESATIVADA) ✗
*/

:root {
  --cor-principal: #000D3C;
  --cor-principal-clara: #4D5F8E;
  --cor-principal-escura: #000820;
  --cor-principal-hover: #001854;
  --cor-principal-ativa: #00246B;
  
  --fundo-pagina-principal: #F8F9FC;
  --fundo-pagina-superficie: #F0F2F8;
  --fundo-pagina-superficie-hover: #E6E9F3;
  --fundo-pagina-elevado: #D4DAF0;
  
  --borda-geral: #C5CEE8;
  --borda-sidebar: #A8B5DD;
  
  --fundo-botao-padrao: #E0E5F5;
  --fundo-botao-padrao-hover: #D4DAF0;
  
  --fundo-sutil: #EEF1F9;
  --sombra-principal: rgba(0, 13, 60, 0.15);
  
  --secondary: #4D7BA8;
}





:root,
[data-theme="light"] {

  /* === CORE NEUTRAL === */
  --neutral: #fbfbf9;                        /* Cor neutra base (usado em fundos) */
  --invert-neutral: var(--neutral-black);    /* Inversão da cor neutra */

  /* === GRAY OVERRIDES === */
  /* (Nenhuma sobrescrita necessária no light mode) */

  /* === COR PRIMÁRIA - DINÂMICA (Usa a paleta ativa) === */
  --primary: var(--cor-principal);                    /* Cor primária do tema - Aplica em: Botões primários, links, destaques */
  --primary-color: var(--cor-principal);              /* Alias da cor primária */
  --primary-light: var(--cor-principal-clara);        /* Variação clara - Aplica em: Backgrounds hover */
  --primary-dark: var(--cor-principal-escura);        /* Variação escura - Aplica em: Botões hover, borders de destaque */

  /* === SIDEBAR (BARRA LATERAL ESQUERDA) === */
  --sidebar-bg: var(--cor-principal);                 /* Fundo da sidebar lateral - Usa cor principal ativa */
  --sidebar-text: var(--neutral-white);               /* Texto dos itens da sidebar */
  --sidebar-hover: var(--cor-principal-hover);        /* Fundo ao passar mouse em item da sidebar */
  --sidebar-active: var(--cor-principal-ativa);       /* Fundo do item ativo/selecionado na sidebar */
  --sidebar-active-text: var(--neutral-white);        /* Texto do item ativo na sidebar */
  --sidebar-border-color: var(--borda-sidebar);       /* Borda da sidebar */

  /* === TEXTOS === */
  --text-neutral: var(--gray-900);           /* Texto neutro - Aplica em: Texto padrão */
  --text-dark: var(--gray-900);              /* Texto escuro - Aplica em: Títulos */
  --text-muted: var(--light-text-muted);     /* Texto mudo/secundário - Aplica em: Descrições, hints */
  --text-light: var(--light-text-light);     /* Texto claro - Aplica em: Texto sobre fundos escuros */
  --text-color: var(--light-text-color);     /* Cor de texto principal - Aplica em: Body, parágrafos */
  --text-primary: var(--light-text-primary); /* Texto primário - Aplica em: Conteúdo principal */
  --text-secondary: var(--light-text-secondary); /* Texto secundário - Aplica em: Legendas */
  --text-disabled: var(--light-text-disabled);   /* Texto desabilitado - Aplica em: Campos disabled */
  --heading-color: var(--light-heading-color);   /* Cor dos títulos - Aplica em: h1, h2, h3, h4, h5, h6 */

  /* === ÍCONES SVG === */
  --icon-fill: none;                         /* Preenchimento de ícones - Aplica em: SVG fill */
  --icon-stroke: var(--neutral-black);       /* Contorno de ícones - Aplica em: SVG stroke */

  /* === ERRO === */
  --error-bg: var(--red-100);                /* Fundo de mensagens de erro - Aplica em: Alertas de erro */
  --error-border: var(--red-400);            /* Borda de mensagens de erro - Aplica em: Alertas de erro */

  /* === BACKGROUNDS (FUNDOS DE PÁGINA E COMPONENTES) === */
  --bg-color: var(--fundo-pagina-principal);        /* Fundo principal da página - Aplica em: Body, background geral */
  --bg-surface: var(--fundo-pagina-superficie);     /* Fundo de superfícies - Aplica em: Cards, painéis */
  --bg-surface-hover: var(--fundo-pagina-superficie-hover); /* Fundo de superfícies ao hover - Aplica em: Cards ao passar mouse */
  --bg-elevated: var(--fundo-pagina-elevado);       /* Fundo de elementos elevados - Aplica em: Dropdowns, modais */

  /* === LAYOUT COLORS === */
  --fg-color: var(--neutral-white);          /* Foreground color - Aplica em: Background de elementos em primeiro plano */
  --subtle-accent: var(--fundo-pagina-principal);   /* Acento sutil - Aplica em: Backgrounds discretos */
  --subtle-fg: var(--cor-principal);                /* Foreground sutil - Aplica em: Elementos de apoio */
  --fg-hover-color: var(--fundo-pagina-superficie-hover); /* Foreground hover - Aplica em: Elementos ao hover */
  --card-bg: var(--bg-color);                       /* Background de cards - Aplica em: Cards, widgets */
  --disabled-text-color: var(--text-disabled);      /* Cor de texto desabilitado - Aplica em: Campos disabled */
  --disabled-control-bg: var(--white-overlay-100);  /* Background de controles desabilitados - Aplica em: Inputs, buttons disabled */
  
  /* === CONTROLES (INPUTS, SELECTS) === */
  --control-bg: var(--gray-200);             /* Background de controles - Aplica em: Inputs, textareas, selects */
  --control-bg-on-gray: var(--neutral-white); /* Background de controles sobre fundo cinza - Aplica em: Inputs em áreas cinzas */
  --control-bg-hover: var(--fundo-sutil);            /* Background de controles ao hover - Aplica em: Inputs ao passar mouse */
  
  /* === AWESOMEBAR (BARRA DE PESQUISA) === */
  --awesomebar-focus-bg: var(--control-bg);  /* Background do awesomebar com foco - Aplica em: Search bar focada */
  --awesomplete-hover-bg: var(--fundo-botao-padrao); /* Background de sugestões ao hover - Aplica em: Autocomplete hover */
  
  /* === MODAL, TOAST, POPOVER === */
  --modal-bg: var(--bg-color);               /* Background de modais - Aplica em: Janelas modais, popups */
  --toast-bg: var(--modal-bg);               /* Background de toast notifications - Aplica em: Notificações flutuantes */
  --popover-bg: var(--bg-color);             /* Background de popovers - Aplica em: Tooltips, popovers */
  
  /* === NAVBAR (BARRA SUPERIOR) === */
  --navbar-bg: var(--bg-color);              /* Background da navbar superior - Aplica em: Barra de navegação topo */
  --navbar-border: var(--secondary);         /* Borda da navbar - Aplica em: Borda inferior da navbar */

  /* === BOTÕES === */
  --btn-default-bg: var(--fundo-botao-padrao);      /* Background de botões padrão - Aplica em: Botões não primários */
  --btn-default-hover-bg: var(--fundo-botao-padrao-hover); /* Background de botões padrão ao hover - Aplica em: Botões ao passar mouse */
  --btn-primary: var(--cor-principal);              /* Background de botões primários - Aplica em: Botões de ação principal */
  --btn-primary-hover: var(--cor-principal-escura); /* Background de botões primários ao hover - Aplica em: Botões primários ao passar mouse */
  --btn-primary: #FC4B08;                           /* Background de botões primários (CUSTOMIZADO: Laranja independente do tema) - Aplica em: Botões de ação principal */
  --btn-primary-hover: #E67A0D;                     /* Background de botões primários ao hover (CUSTOMIZADO: Laranja escuro) - Aplica em: Botões primários ao passar mouse */

  /* === BORDAS === */
  --border-primary: var(--cor-principal);           /* Borda primária - Aplica em: Elementos de destaque */
  --border-color: var(--borda-geral);               /* Borda padrão - Aplica em: Cards, modais, tabelas */
  --border-form: var(--borda-branca);               /* Borda de formulários - Aplica em: Inputs, textareas */
  --border-color-light: var(--borda-geral);         /* Borda clara - Aplica em: Divisórias sutis */
  --border-color-dark: var(--borda-geral);          /* Borda escura - Aplica em: Divisórias com mais contraste */
  --dark-border-color: var(--secondary);            /* Borda escura alternativa - Aplica em: Bordas de destaque */
  --table-border-color: var(--border-color);        /* Borda de tabelas - Aplica em: Linhas e colunas de tabelas */
  --control-border: var(--secondary);               /* Borda de controles - Aplica em: Inputs, selects */

  /* === BACKGROUND TEXT COLOR PAIRS === */
  --bg-blue: var(--blue-500);
  --bg-light-blue: var(--blue-400);
  --bg-dark-blue: var(--blue-600);
  --bg-green: var(--green-600);
  --bg-yellow: var(--yellow-500);
  --bg-orange: var(--orange-500);
  --bg-red: var(--red-500);
  --bg-gray: var(--gray-400);
  --bg-grey: var(--gray-400);
  --bg-darkgrey: var(--gray-600);
  --bg-dark-gray: var(--gray-600);
  --bg-light-gray: var(--gray-200);
  --bg-purple: var(--purple-500);
  --bg-pink: var(--pink-500);
  --bg-cyan: var(--cyan-500);

  --text-on-blue: #ffffff;
  --text-on-light-blue: #ffffff;
  --text-on-dark-blue: #ffffff;
  --text-on-green: #ffffff;
  --text-on-yellow: var(--gray-900);
  --text-on-orange: #ffffff;
  --text-on-red: #ffffff;
  --text-on-gray: #ffffff;
  --text-on-grey: #ffffff;
  --text-on-darkgrey: #ffffff;
  --text-on-dark-gray: #ffffff;
  --text-on-light-gray: var(--gray-900);
  --text-on-purple: #ffffff;
  --text-on-pink: #ffffff;
  --text-on-cyan: #ffffff;

  /* === ALERT COLORS === */
  --alert-text-danger: var(--red-700);       /* Texto de alerta de perigo - Aplica em: Mensagens de erro */
  --alert-text-warning: var(--yellow-700);   /* Texto de alerta de aviso - Aplica em: Mensagens de warning */
  --alert-text-info: var(--blue-700);        /* Texto de alerta de info - Aplica em: Mensagens informativas */
  --alert-text-success: var(--green-700);    /* Texto de alerta de sucesso - Aplica em: Mensagens de sucesso */
  --alert-bg-danger: var(--red-50);          /* Fundo de alerta de perigo - Aplica em: Background de erro */
  --alert-bg-warning: var(--yellow-50);      /* Fundo de alerta de aviso - Aplica em: Background de warning */
  --alert-bg-info: var(--blue-50);           /* Fundo de alerta de info - Aplica em: Background de info */
  --alert-bg-success: var(--green-50);       /* Fundo de alerta de sucesso - Aplica em: Background de sucesso */

  /* === SIDEBAR SELECT === */
  --sidebar-select-color: var(--cor-principal-ativa); /* Cor de seleção na sidebar - Aplica em: Item selecionado */

  /* === SCROLLBAR === */
  --scrollbar-thumb-color: var(--cor-principal);      /* Cor do thumb da scrollbar - Aplica em: Barra de rolagem */
  --scrollbar-track-color: var(--fundo-sutil);        /* Cor do track da scrollbar - Aplica em: Trilha da barra */

  /* === TIMELINE === */
  --timeline-badge-color: var(--gray-400);   /* Cor dos badges da timeline - Aplica em: Círculos da timeline */
  --timeline-badge-bg: #ffffff;              /* Fundo dos badges da timeline - Aplica em: Background dos círculos */

  /* === SHADOWS & HIGHLIGHTS === */
  --shadow-inset: var(--gray-100);           /* Sombra interna - Aplica em: Sombras internas de elementos */
  --highlight-color: var(--fundo-botao-padrao);     /* Cor de realce - Aplica em: Elementos destacados */
  --yellow-highlight-color: var(--yellow-200);      /* Cor de realce amarelo - Aplica em: Marcações de texto */
  --highlight-shadow: 1px 1px 10px rgba(247, 139, 30, 0.2), 0px 0px 4px var(--sombra-principal); /* Sombra de realce - Aplica em: Elementos com destaque */
  --shadow-base: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.04); /* Sombra base - Aplica em: Cards, modais */

  /* === MISC === */
  --btn-group-border-color: var(--borda-geral);     /* Borda de grupos de botões - Aplica em: Button groups */
  --placeholder-color: var(--gray-500);             /* Cor de placeholder - Aplica em: Inputs placeholder */
  --progress-bar-bg: var(--fundo-botao-padrao);     /* Background de barra de progresso - Aplica em: Progress bars */
  --input-disabled-bg: var(--gray-100);             /* Background de input desabilitado - Aplica em: Inputs disabled */

  /* === DROPDOWN COLORS === */
  --dropdown-bg: var(--fundo-pagina-superficie);    /* Fundo de dropdowns - Aplica em: Menus dropdown */
  --dropdown-border: var(--borda-geral);            /* Borda de dropdowns - Aplica em: Borda de menus dropdown */
  --dropdown-text: var(--text-color);               /* Texto de dropdowns - Aplica em: Itens de menu */
  --dropdown-hover-bg: var(--fundo-botao-padrao);   /* Fundo de dropdown ao hover - Aplica em: Itens ao passar mouse */
  --dropdown-active-bg: var(--fundo-botao-padrao-hover); /* Fundo de dropdown ativo - Aplica em: Item selecionado */
  --dropdown-shadow: 0 4px 12px var(--sombra-principal);   /* Sombra de dropdown - Aplica em: Sombra do menu */

  /* === LIST COLORS === */
  --list-text-color: var(--light-list-text); /* Cor de texto em listas - Aplica em: Linhas de listagem */
  --list-header-text-color: var(--light-list-header-text); /* Cor de texto em cabeçalho de lista - Aplica em: Headers de tabelas */

  /* === DIFF COLORS === */
  --diff-added: var(--green-100);            /* Cor de adição em diff - Aplica em: Linhas adicionadas */
  --diff-removed: var(--red-100);            /* Cor de remoção em diff - Aplica em: Linhas removidas */

  /* === CHECKBOX === */
  --checkbox-color: var(--cor-principal);                     /* Cor de checkbox - Aplica em: Checkbox marcado */
  --checkbox-gradient: linear-gradient(180deg, var(--cor-principal) -124.51%, var(--cor-principal-escura) 100%); /* Gradiente de checkbox - Aplica em: Background do checkbox */
  --checkbox-disabled-gradient: linear-gradient(180deg, var(--gray-300) -124.51%, var(--gray-400) 100%); /* Gradiente de checkbox desabilitado - Aplica em: Checkbox disabled */
  --checkbox-focus-shadow: 0 0 0 3px var(--sombra-principal); /* Sombra de foco do checkbox - Aplica em: Checkbox com foco */

  /* === SWITCH === */
  --switch-bg: var(--gray-300);              /* Background de switch - Aplica em: Toggle switch */

  /* === DATE PICKER === */
  --date-active-text: #ffffff;               /* Texto de data ativa - Aplica em: Data selecionada no calendário */
  --date-active-bg: var(--cor-principal);    /* Fundo de data ativa - Aplica em: Background da data selecionada */
  --date-range-bg: var(--fundo-botao-padrao); /* Fundo de range de datas - Aplica em: Seleção de período */

  /* === SKELETON === */
  --skeleton-bg: var(--gray-200);            /* Background de skeleton loader - Aplica em: Loading placeholders */

  /* === RATING === */
  --star-fill: var(--cor-principal);         /* Cor de preenchimento de estrela - Aplica em: Rating stars */

  /* === ARROWS === */
  --right-arrow-svg: url("data:image/svg+xml;utf8,<svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%23323232' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --left-arrow-svg: url("data:image/svg+xml;utf8,<svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%23323232' stroke-linecap='round' stroke-linejoin='round'></path></svg>");

  /* === CODE BLOCKS === */
  --code-bg: var(--gray-100);
  --success-green: #25B84F;
  --warning-orange: #F5A71A;
  --info-blue: #049CCC;

  /* === FRAPPE SEMANTIC COLORS (Não necessário no Light Mode) === */

  /* === COLOR SCHEME === */
  color-scheme: light;
}

[data-theme="dark"] {
  /* === CORE NEUTRAL === */
  --neutral: var(--neutral-white);           /* Cor neutra base dark mode - Aplica em: Fundos */
  --invert-neutral: var(--neutral-white);    /* Inversão da cor neutra - Aplica em: Textos */

  /* === GRAY OVERRIDES === */
  --gray-700: #383838;                       /* Cinza 700 dark mode - Aplica em: Fundos médios */
  --gray-800: #232323;                       /* Cinza 800 dark mode - Aplica em: Fundos escuros */

  /* === COR PRIMÁRIA - DINÂMICA (Usa a paleta ativa) === */
  --primary: var(--cor-principal);             /* Cor primária dark mode - Aplica em: Botões primários, links */
  --primary-color: var(--cor-principal);       /* Alias da cor primária - Aplica em: Elementos de destaque */
  --primary-light: var(--cor-principal-clara); /* Variação clara - Aplica em: Backgrounds hover */
  --primary-dark: var(--cor-principal-escura); /* Variação escura - Aplica em: Botões hover */

  /* === SIDEBAR (BARRA LATERAL ESQUERDA) === */
  --sidebar-bg: var(--gray-900);             /* Fundo da sidebar dark mode - Aplica em: Sidebar lateral (Cor: Cinza escuro) */
  --sidebar-text: var(--gray-300);           /* Texto da sidebar dark mode - Aplica em: Itens da sidebar (Cor: Cinza claro) */
  --sidebar-hover: var(--gray-700);          /* Fundo ao hover sidebar dark mode - Aplica em: Itens ao passar mouse */
  --sidebar-active: var(--gray-700);         /* Fundo do item ativo sidebar - Aplica em: Item selecionado */
  --sidebar-active-text: var(--gray-50);     /* Texto do item ativo sidebar - Aplica em: Texto do item selecionado */
  --sidebar-border-color: var(--gray-800);   /* Borda da sidebar dark mode - Aplica em: Bordas internas */

  /* === TEXTOS === */
  --text-neutral: var(--gray-50);            /* Texto neutro - Aplica em: Texto padrão */
  --text-dark: var(--gray-900);              /* Texto escuro - Aplica em: Backgrounds claros */
  --text-muted: var(--gray-400);             /* Texto mudo - Aplica em: Descrições, hints */
  --text-light: var(--gray-300);             /* Texto claro - Aplica em: Texto sobre fundos escuros */
  --text-color: var(--gray-50);              /* Cor de texto principal - Aplica em: Body, parágrafos */
  --text-disabled: #ffffff;                  /* Texto desabilitado - Aplica em: Campos disabled */
  --heading-color: var(--gray-50);           /* Cor dos títulos - Aplica em: h1, h2, h3, h4, h5, h6 */

  /* === ÍCONES SVG === */
  --icon-fill: transparent;                  /* Preenchimento de ícones - Aplica em: SVG fill */
  --icon-stroke: var(--gray-300);            /* Contorno de ícones - Aplica em: SVG stroke */

  /* === ERRO === */
  --error-bg: var(--red-800);                /* Fundo de erro - Aplica em: Alertas de erro */
  --error-border: var(--red-400);            /* Borda de erro - Aplica em: Alertas de erro */

  /* === BACKGROUNDS (FUNDOS DE PÁGINA E COMPONENTES) === */
  /* (Não aplicável - Dark mode usa --bg-color diretamente) */

  /* === LAYOUT COLORS === */
  --bg-color: var(--gray-900);               /* Background principal - Aplica em: Body, background geral */
  --fg-color: var(--gray-900);               /* Foreground color - Aplica em: Elementos em primeiro plano */
  --subtle-accent: var(--gray-800);          /* Acento sutil - Aplica em: Backgrounds discretos */
  --subtle-fg: var(--gray-700);              /* Foreground sutil - Aplica em: Elementos de apoio */
  --fg-hover-color: var(--gray-800);         /* Foreground hover - Aplica em: Elementos ao hover */
  --card-bg: var(--gray-900);                /* Background de cards - Aplica em: Cards, widgets */
  --disabled-text-color: var(--gray-400);    /* Cor de texto desabilitado - Aplica em: Campos disabled */
  --disabled-control-bg: var(--gray-800);    /* Background de controles desabilitados - Aplica em: Inputs disabled */
  
  /* === CONTROLES (INPUTS, SELECTS) === */
  --control-bg: var(--gray-800);             /* Background de controles - Aplica em: Inputs, textareas, selects */
  --control-bg-on-gray: var(--gray-800);     /* Background de controles sobre cinza - Aplica em: Inputs em áreas cinzas */
  
  /* === AWESOMEBAR (BARRA DE PESQUISA) === */
  --awesomebar-focus-bg: var(--control-bg);  /* Background do awesomebar com foco - Aplica em: Search bar focada */
  --awesomplete-hover-bg: var(--gray-800);   /* Background de sugestões ao hover - Aplica em: Autocomplete hover */
  
  /* === MODAL, TOAST, POPOVER === */
  --modal-bg: var(--gray-900);               /* Background de modais - Aplica em: Janelas modais */
  --toast-bg: var(--modal-bg);               /* Background de toast - Aplica em: Notificações flutuantes */
  --popover-bg: var(--bg-color);             /* Background de popovers - Aplica em: Tooltips, popovers */
  
  /* === NAVBAR (BARRA SUPERIOR) === */
  /* (Não aplicável - Dark mode usa --bg-color) */

  /* === BOTÕES === */
  --btn-default-bg: var(--gray-800);         /* Background de botões padrão - Aplica em: Botões não primários */
  --btn-default-hover-bg: var(--gray-700);   /* Background de botões padrão ao hover - Aplica em: Botões ao passar mouse */
  --btn-primary: var(--cor-principal);       /* Background de botões primários - Aplica em: Botões de ação principal */

  /* === BORDAS === */
  --border-primary: var(--gray-200);         /* Borda primária - Aplica em: Elementos de destaque */
  --border-color: var(--gray-800);           /* Borda padrão - Aplica em: Cards, modais, tabelas */
  --dark-border-color: var(--gray-600);      /* Borda escura - Aplica em: Divisórias com contraste */
  --table-border-color: var(--border-color); /* Borda de tabelas - Aplica em: Linhas e colunas */

  /* === BACKGROUND TEXT COLOR PAIRS === */
  --bg-blue: var(--blue-600);
  --bg-light-blue: var(--blue-600);
  --bg-dark-blue: var(--blue-900);
  --bg-green: var(--green-900);
  --bg-yellow: var(--yellow-700);
  --bg-orange: var(--orange-700);
  --bg-red: var(--red-600);
  --bg-gray: var(--gray-600);
  --bg-grey: var(--gray-600);
  --bg-darkgrey: var(--gray-600);
  --bg-dark-gray: var(--gray-500);
  --bg-light-gray: var(--gray-800);
  --bg-purple: var(--purple-700);
  --bg-pink: var(--pink-700);
  --bg-cyan: var(--cyan-800);

  --text-on-blue: var(--blue-50);
  --text-on-light-blue: var(--blue-50);
  --text-on-dark-blue: var(--blue-300);
  --text-on-green: var(--green-100);
  --text-on-yellow: var(--yellow-50);
  --text-on-orange: var(--orange-100);
  --text-on-red: var(--red-50);
  --text-on-gray: var(--gray-50);
  --text-on-grey: var(--gray-50);
  --text-on-darkgrey: var(--gray-200);
  --text-on-dark-gray: var(--gray-200);
  --text-on-light-gray: var(--gray-100);
  --text-on-purple: var(--purple-100);
  --text-on-pink: var(--pink-100);
  --text-on-cyan: var(--cyan-100);

  /* === ALERT COLORS === */
  --alert-text-danger: var(--red-300);
  --alert-text-warning: var(--yellow-300);
  --alert-text-info: var(--blue-300);
  --alert-text-success: var(--green-300);
  --alert-bg-danger: var(--red-900);
  --alert-bg-warning: var(--yellow-900);
  --alert-bg-info: var(--blue-900);
  --alert-bg-success: var(--green-900);

  /* === SIDEBAR SELECT === */
  --sidebar-select-color: var(--gray-800);

  /* === SCROLLBAR === */
  --scrollbar-thumb-color: var(--gray-600);
  --scrollbar-track-color: var(--gray-700);

  /* === TIMELINE === */
  --timeline-badge-color: var(--gray-500);
  --timeline-badge-bg: var(--gray-900);

  /* === SHADOWS & HIGHLIGHTS === */
  --shadow-inset: var(--fg-color);
  --highlight-color: var(--gray-700);
  --yellow-highlight-color: var(--yellow-700);
  --highlight-shadow: 1px 1px 10px var(--blue-900), 0px 0px 4px var(--blue-500);
  --shadow-base: 0px 4px 8px rgba(114, 176, 233, 0.06), 0px 0px 4px rgba(112, 172, 228, 0.12);

  /* === MISC === */
  --btn-group-border-color: var(--gray-700);
  --placeholder-color: var(--gray-700);
  --progress-bar-bg: var(--light);
  --input-disabled-bg: none;

  /* === DROPDOWN COLORS === */
  --dropdown-bg: var(--gray-800);
  --dropdown-border: var(--gray-700);
  --dropdown-text: var(--gray-50);
  --dropdown-hover-bg: var(--gray-700);
  --dropdown-active-bg: var(--gray-600);
  --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* === LIST COLORS === */
  --list-text-color: var(--gray-200);
  --list-header-text-color: var(--dark-list-header-text);

  /* === DIFF COLORS === */
  --diff-added: var(--green-800);
  --diff-removed: var(--red-800);

  /* === CHECKBOX === */
  --checkbox-color: var(--neutral-white);
  --checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
  --checkbox-disabled-gradient: linear-gradient(180deg, var(--gray-600) -124.51%, var(--gray-600) 100%);
  --checkbox-focus-shadow: var(--focus-default);

  /* === SWITCH === */
  --switch-bg: var(--gray-500);

  /* === DATE PICKER === */
  --date-active-text: var(--gray-100);
  --date-active-bg: var(--gray-700);
  --date-range-bg: var(--subtle-fg);

  /* === SKELETON === */
  --skeleton-bg: var(--gray-800);

  /* === RATING === */
  --star-fill: var(--gray-500);

  /* === ARROWS === */
  --right-arrow-svg: url("data:image/svg+xml;utf8,<svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --left-arrow-svg: url("data:image/svg+xml;utf8,<svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'></path></svg>");

  /* === CODE BLOCKS === */
  --code-bg: #232323;
  --success-green: #5BE584;
  --warning-orange: #FFD274;
  --info-blue: #4DDBFF;

  /* === FRAPPE SEMANTIC COLORS - DARK MODE (_colors.scss) === */
  --outline-white: #1c1c1c;
  --outline-gray-1: #232323;
  --outline-gray-2: #343434;
  --outline-gray-3: #424242;
  --outline-gray-4: #808080;
  --outline-red-1: #521515;
  --outline-red-2: #681916;
  --outline-red-3: #901818;
  --outline-green-1: #0a3f27;
  --outline-green-2: #035831;
  --outline-amber-1: #4b2606;
  --outline-amber-2: #603007;
  --outline-blue-1: #052b53;
  --outline-orange-1: #683108;
  --outline-gray-modals: #343434;

  --surface-white: #0f0f0f;
  --surface-gray-1: #232323;
  --surface-gray-2: #2b2b2b;
  --surface-gray-3: #343434;
  --surface-gray-4: #424242;
  --surface-gray-5: #afafaf;
  --surface-gray-6: #d4d4d4;
  --surface-gray-7: #f8f8f8;
  --surface-red-1: #361515;
  --surface-red-2: #361515e6;
  --surface-red-3: #521515e6;
  --surface-red-4: #681916;
  --surface-red-5: #e43838;
  --surface-red-6: #c12020;
  --surface-red-7: #901818;
  --surface-green-1: #0b2e1c;
  --surface-green-2: #0a3f27;
  --surface-green-3: #1ba964;
  --surface-amber-1: #371e06;
  --surface-amber-2: #4b2606;
  --surface-amber-3: #e37d00;
  --surface-blue-1: #0e2037;
  --surface-blue-2: #052b53;
  --surface-blue-3: #3294e3;
  --surface-orange-1: #401f07cc;
  --surface-violet-1: #221c42;
  --surface-cyan-1: #0b252d;
  --surface-pink-1: #471432cc;
  --surface-menu-bar: #0f0f0f;
  --surface-cards: #1c1c1c;
  --surface-modal: #232323;
  --surface-selected: #424242;

  --ink-white: #0f0f0f;
  --ink-gray-1: #232323;
  --ink-gray-2: #424242;
  --ink-gray-3: #717171;
  --ink-gray-4: #717171;
  --ink-gray-5: #808080;
  --ink-gray-6: #999999;
  --ink-gray-7: #afafaf;
  --ink-gray-8: #d4d4d4;
  --ink-gray-9: #f8f8f8;
  --ink-red-2: #681916;
  --ink-red-3: #e43838;
  --ink-red-4: #fc7474;
  --ink-green-2: #1ba964;
  --ink-green-3: #58c08e;
  --ink-amber-2: #e37d00;
  --ink-amber-3: #e79913;
  --ink-blue-2: #3294e3;
  --ink-blue-3: #5aaef2;
  --ink-cyan-1: #3cb8dc;
  --ink-pink-1: #e359ab;
  --ink-violet-1: #9d7cea;
  --ink-blue-link: #1580d8;

  /* === COLOR SCHEME === */
  color-scheme: dark;
}

/* === DARK MODE SPECIFIC OVERRIDES === */

[data-theme="dark"] ::selection {
  color: var(--text-color);
  background: var(--gray-500);
}

[data-theme=dark] .btn-primary-light {
    background-color: #363434;
    box-shadow: none;
}

[data-theme="dark"] .progress {
  background-color: var(--gray-700);
}

[data-theme="dark"] .grid-body .editable-row {
  --control-bg: var(--gray-900);
  --input-disabled-bg: var(--gray-800);
}

[data-theme="dark"] .frappe-card .btn-default {
  background-color: var(--control-bg);
}

[data-theme="dark"] .frappe-card .btn-default:hover {
  background-color: var(--fg-hover-color);
}

[data-theme="dark"] .modal,
[data-theme="dark"] .form-in-grid {
  --control-bg: var(--gray-800);
  --border-color: var(--gray-800);
}

[data-theme="dark"] .print-format {
  --text-color: var(--gray-900);
  --border-color: var(--gray-100);
}

[data-theme="dark"] .ql-editor {
  color: var(--text-on-gray);
}

[data-theme="dark"] .ql-editor.read-mode span:not(.mention),
[data-theme="dark"] .ql-editor.read-mode p,
[data-theme="dark"] .ql-editor.read-mode u,
[data-theme="dark"] .ql-editor.read-mode strong {
  background-color: inherit !important;
  color: inherit !important;
}

[data-theme="dark"] .comment-input-wrapper .ql-editor.ql-blank::before {
  color: var(--text-color);
}

[data-theme="dark"] .chart-container {
  --charts-label-color: var(--gray-300);
  --charts-axis-line-color: var(--subtle-fg);
  --charts-stroke-width: 5px;
  --charts-dataset-circle-stroke: #ffffff;
  --charts-dataset-circle-stroke-width: var(--charts-stroke-width);
  --charts-tooltip-title: var(--charts-label-color);
  --charts-tooltip-label: var(--charts-label-color);
  --charts-tooltip-value: white;
  --charts-tooltip-bg: var(--gray-900);
  --charts-legend-label: var(--charts-label-color);
}

[data-theme="dark"] .heatmap-chart g > rect[fill="#ebedf0"] {
  fill: var(--gray-700);
}

[data-theme="dark"] .rating {
  --star-fill: var(--gray-500);
}

[data-theme="dark"] .rating .star-hover {
  --star-fill: var(--gray-400);
}

[data-theme="dark"] .page-title .sidebar-toggle-btn {
  --icon-stroke: var(--gray-300);
}

/* 
   SECTION 14: FORM COMPONENTS - GRID HEADER, FORM TABS, LIST ROWS
   Altera: Cabeçalhos de grid, abas de formulário, linhas de lista
*/

/* Grid Heading Row - Cabeçalho de tabelas grid */
.grid-heading-row {
    border-bottom: 1px solid var(--border-color);
    color: var(--neutral);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    letter-spacing: .02em;
    height: 32px;
    padding: 0 !important;
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
}

/* Form Tabs - Abas de navegação em formulários */
.nav.form-tabs .nav-link,
.nav.form-tabs .nav-item button.nav-link {
  color: var(--text-color) !important;
}

.nav.form-tabs .nav-link.active,
.nav.form-tabs .nav-item button.nav-link.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.nav.form-tabs .nav-link:hover,
.nav.form-tabs .nav-item button.nav-link:hover {
  color: var(--primary) !important;
}

/* Form Tabs Dark Mode - Orange Energia accent */
[data-theme="dark"] .nav.form-tabs .nav-link,
[data-theme="dark"] .nav.form-tabs .nav-item button.nav-link {
  color: var(--gray-300) !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease;
}

[data-theme="dark"] .nav.form-tabs .nav-link.active,
[data-theme="dark"] .nav.form-tabs .nav-item button.nav-link.active {
  color: var(--cor-principal) !important;             /* Texto da aba ativa - Aplica em: Tab ativa no dark mode */
  border-bottom-color: var(--cor-principal) !important; /* Borda inferior da aba ativa - Aplica em: Tab ativa no dark mode */
}

[data-theme="dark"] .nav.form-tabs .nav-link:hover,
[data-theme="dark"] .nav.form-tabs .nav-item button.nav-link:hover {
  color: var(--cor-principal) !important;             /* Texto da aba ao hover - Aplica em: Tab ao passar mouse no dark mode */
  border-bottom-color: var(--cor-principal) !important; /* Borda inferior da aba ao hover - Aplica em: Tab ao passar mouse no dark mode */
}

/* List Rows - Linhas de listagem */
.level.list-row,
.list-row {
  border-bottom: 0px solid var(--border-color) !important;
}

/* List Header Text Color - Usa variável dedicada (branco light / cinza dark) */
.list-header-subject .list-row-col,
.list-header-subject .list-row-col span,
.list-row-head .list-row-col,
.list-row-head .list-row-col span,
.list-row-head span,
.list-row-head.text-muted,
.list-row-head.text-muted .list-row-col,
.list-row-head.text-muted .list-row-col span,
.list-row-head.text-muted span {
  color: var(--list-header-text-color) !important;
  stroke: white !important;
}

/* Checkbox da Grid - Light Mode background */
[data-theme="light"] .grid-row-check,
[data-theme="light"] input[type="checkbox"].grid-row-check {
  background-color: #ffffff !important;
  border: 1.5px solid var(--border-color) !important;
}

[data-theme="light"]  .form-links .document-link .document-link-badge .count, .form-links .document-link .report-link-badge .count {
    font-size: var(--text-xs);
    font-weight: bold;
    background-color: var(--subtle-fg);
    border-radius: var(--border-radius-full);
    color: white !important;
    padding: 0 var(--padding-xs);
    margin-right: var(--margin-xs);
}

/* Settings Icon in Grid - Light Mode */
[data-theme="light"] .grid-static-col svg,
[data-theme="light"] .grid-static-col .icon {
  stroke: #ffffff !important;
  color: #ffffff !important;
}


/* List Column Text Color - Para linhas de dados (não headers) */
.list-row-col,
.list-row-col a:not(.indicator-pill):not(.badge),
.list-row-col span:not(.indicator-pill):not(.indicator-pill *):not(.badge) {
  color: var(--list-text-color);
}

/* List Column Hover - Acentua com cor primária */
.list-row-col a:hover:not(.indicator-pill) {
  color: var(--primary) !important;
}


/* Dark mode override para checkbox desabilitado */
[data-theme="dark"] input[type="checkbox"].disabled-deselected {
  background-color: var(--gray-700) !important;
  border-width: initial !important;
  border-style: none !important;
  border-color: initial !important;
  border-image: initial !important;
}


/* 
   SECTION 15: DOCUMENT LINKS
   Altera: Badges de documento, links de referências, botões dentro de document links
*/

/* === DOCUMENT LINK === */
.document-link,
.document-link-badge {
  color: var(--text-color) !important;
  background: var(--control-bg) !important;
}

.document-link-badge a.badge-link,
.document-link a,
.document-link .badge-link {
  color: var(--text-color) !important;
}

.document-link-badge a.badge-link:hover,
.document-link a:hover,
.document-link .badge-link:hover {
  color: var(--primary) !important;
}

/* Document Link Badge - Hover com mudança de background */
[data-theme="light"] .document-link-badge:hover {
  background-color: #FFF5EB !important;
  border-radius: 4px !important;
  transition: all 0.2s ease;
}

[data-theme="light"] .document-link-badge:hover a.badge-link,
[data-theme="light"] .document-link-badge:hover .badge-link {
  color: var(--primary) !important;
}

[data-theme="dark"] .document-link-badge:hover {
  background-color: var(--control-bg-hover) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease;
}

[data-theme="dark"] .document-link-badge:hover a.badge-link,
[data-theme="dark"] .document-link-badge:hover .badge-link {
  color: var(--primary) !important;
}

.document-link .btn-new,
.document-link .btn-secondary {
  background: var(--btn-default-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

.document-link .btn-new:hover,
.document-link .btn-secondary:hover {
  background: var(--control-bg-hover) !important;
  border-color: var(--border-color-dark) !important;
}

/* Document Link - Hover com efeito visual do widget */
[data-theme="light"] .document-link:hover {
  background-color: #FFF5EB !important;
  border-color: #F78B1E !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(247, 139, 30, 0.25) !important;
  transition: all 0.2s ease;
}

/* Badge acompanha hover do pai - Light Mode */
[data-theme="light"] .document-link:hover .document-link-badge {
  background-color: #FFF5EB !important;
}

[data-theme="light"] .document-link:hover .document-link-badge a.badge-link,
[data-theme="light"] .document-link:hover .document-link-badge .badge-link,
[data-theme="light"] .document-link:hover .document-link-badge .count {
  color: var(--primary) !important;
}

[data-theme="dark"] .document-link:hover {
  background-color: var(--control-bg-hover) !important;
  border-color: var(--border-color-dark) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease;
}

/* Badge acompanha hover do pai - Dark Mode */
[data-theme="dark"] .document-link:hover .document-link-badge {
  background-color: var(--control-bg-hover) !important;
}

[data-theme="dark"] .document-link:hover .document-link-badge a.badge-link,
[data-theme="dark"] .document-link:hover .document-link-badge .badge-link,
[data-theme="dark"] .document-link:hover .document-link-badge .count {
  color: var(--primary) !important;
}

/* 
   SECTION 16: BUTTONS - DEFAULT, PRIMARY, PRIMARY-LIGHT
   Altera: Todos os botões, efeitos hover, cores, ícones dentro de botões
   IMPORTANTE: Dark mode hover agora cinza em vez de branco (evita desaparecer texto)
*/

[data-theme="light"] .input[type=checkbox] {
  background-color: white !important;
}

/* Button Default - Universal */
.btn.btn-default,
div#driver-popover-item .driver-popover-footer button.btn-default {
  background-color: var(--control-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

.btn.btn-default:hover {
  background-color: var(--control-bg-hover) !important;
  border-color: var(--border-color-dark) !important;
}

/* Button Default - Dark Mode - Gray hover (não branco) */
[data-theme="dark"] .btn.btn-default,
[data-theme="dark"] div#driver-popover-item .driver-popover-footer button.btn-default {
  background-color: var(--gray-800) !important;
  color: var(--gray-50) !important;
  border: 1px solid var(--gray-700) !important;
}

[data-theme="dark"] .btn.btn-default:hover {
  background-color: var(--gray-700) !important;
  border-color: var(--gray-600) !important;
  color: var(--gray-50) !important;
}

[data-theme="dark"] .btn.btn-default .text-muted {
  color: var(--gray-300) !important;
}

/* Button Primary - Laranja energia */
.btn.btn-primary,
div#driver-popover-item .driver-popover-footer button.btn-primary,
div#driver-popover-item .driver-popover-footer button.driver-next-btn {
  background-color: var(--btn-primary) !important;
  color: var(--neutral) !important;
}

.btn.btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
}

/* Button Primary Light - Light Mode */
[data-theme="light"] .btn.btn-primary-light {
  background-color: var(--btn-default-bg) !important;
  color: var(--text-color) !important;
  box-shadow: none !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .btn.btn-primary-light:hover {
  background-color: var(--control-bg-hover) !important;
  border-color: var(--border-color-dark) !important;
}

/* Icons in Button Primary Light - Light Mode */
/* [data-theme="light"] .btn.btn-primary-light svg,
[data-theme="light"] .btn.btn-primary-light svg path,
[data-theme="light"] .btn.btn-primary-light .es-icon,
[data-theme="light"] .btn.btn-primary-light .es-icon path,
[data-theme="light"] .btn.btn-primary-light .filter-icon svg,
[data-theme="light"] .btn.btn-primary-light .filter-icon svg path {
  color: var(--text-color) !important;
  stroke: var(--text-color) !important;
  fill: var(--text-color) !important;
} */

/* 
   SECTION 17: BUTTON ICONS - SVG STROKE MAINTENANCE
   Altera: Cores de ícones dentro de botões, mantém propriedades de stroke
   Importante: Não remover fill: none, não sobrescrever stroke-width
*/

/* Icons in Default Buttons - Light Mode */
[data-theme="light"] .btn.btn-default .es-icon
{
  stroke: var(--text-color) !important;
  color: var(--text-color) !important;
  fill: var(--text-color) !important;
}

/* [data-theme="light"] .btn.btn-default:hover svg,
[data-theme="light"] .btn.btn-default:hover .es-icon,
[data-theme="light"] .btn.btn-default:hover .icon {
  stroke: var(--primary) !important;
  color: var(--primary) !important;
} */

/* Icons in Default Buttons - Dark Mode */
[data-theme="dark"] .btn.btn-default svg,
[data-theme="dark"] .btn.btn-default .es-icon,
[data-theme="dark"] .btn.btn-default .icon {
  stroke: var(--gray-300) !important;
  color: var(--gray-300) !important;
}

[data-theme="dark"] .btn.btn-default:hover svg,
[data-theme="dark"] .btn.btn-default:hover .es-icon,
[data-theme="dark"] .btn.btn-default:hover .icon {
  stroke: var(--gray-50) !important;
  color: var(--gray-50) !important;
}

/* Icon Buttons - Específico para .icon-btn com data-theme="light" */
/* [data-theme="light"] .btn.icon-btn .icon,
[data-theme="light"] .btn.icon-btn svg {
  fill: var(--icon-fill) !important;
  stroke: #000000 !important;
  stroke-width: 1.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: inherit !important;
} */

/* Icon Buttons - Específico para .icon-btn com data-theme="dark" */
[data-theme="dark"] .btn.icon-btn .icon,
[data-theme="dark"] .btn.icon-btn svg {
  fill: var(--icon-fill) !important;
  stroke: #000000 !important;
  stroke-width: 1.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: inherit !important;
}

/* Icons in Primary Buttons - Light Mode */
[data-theme="light"] .btn.btn-primary svg,
[data-theme="light"] .btn.btn-primary .es-icon,
[data-theme="light"] .btn.btn-primary .icon {
  stroke: #ffffff !important;
  fill: none !important;
  color: #ffffff !important;
}

/* Icons in Primary Buttons - Dark Mode */
[data-theme="dark"] .btn.btn-primary svg,
[data-theme="dark"] .btn.btn-primary .es-icon,
[data-theme="dark"] .btn.btn-primary .icon {
  stroke: var(--neutral) !important;
  fill: none !important;
  color: var(--neutral) !important;
}

/* 
   SECTION 18: SIDEBAR & NAVIGATION
   Altera: Cor de fundo sidebar, textos, hover, ícones, logo header
   Light: Laranja energia | Dark: Cinza escuro com ícones brancos
*/

.body-sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
}

.body-sidebar .sidebar-header {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  transition: background-color 0.2s ease;
}

.body-sidebar .sidebar-header:hover {
  background: var(--sidebar-hover) !important;
}

.body-sidebar .standard-sidebar-item {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  transition: background-color 0.2s ease;
}

.body-sidebar .standard-sidebar-item:hover,
.body-sidebar .desk-sidebar .standard-sidebar-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text) !important;
}

.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .desk-sidebar .standard-sidebar-item.selected,
.body-sidebar .search-dialog .search-results .search-sidebar .standard-sidebar-item.selected {
  background: var(--sidebar-active) !important;
  color: var(--sidebar-active-text) !important;
}

.body-sidebar  .active-sidebar {
    background: var(--sidebar-active) !important;
    box-shadow: var(--shadow-sm);
    border-radius: 8px;
}

.body-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item,
.body-sidebar .app-item-title,
.body-sidebar .standard-sidebar-item a,
.body-sidebar .header-title,
.body-sidebar .header-subtitle {
  color: var(--sidebar-text) !important;
}

/* Sidebar Icons - Stroke based, round caps */
.body-sidebar .sidebar-item-icon svg,
.body-sidebar .sidebar-item-icon svg path,
.body-sidebar .es-icon,
.body-sidebar .es-icon path {
  color: var(--sidebar-text) !important;
  stroke: var(--sidebar-text) !important;
  fill: none !important;
  stroke-width: 1.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.body-sidebar .sidebar-item-icon svg[fill]:not([fill="none"]),
.body-sidebar .sidebar-item-icon svg path[fill]:not([fill="none"]) {
  fill: var(--sidebar-text) !important;
  stroke: none !important;
}

/* ES Icons - Line style (stroke-based icons) */
.es-icon.es-line {
  fill: none !important;
  stroke: var(--text-color) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* List Row Activity - Icons with text color */
/* Chat icon - sempre com stroke */
.list-row-activity .es-icon.es-line {
    fill: none !important;
    stroke: var(--text-color) !important;
    stroke-width: 1px !important;
    color: var(--text-color) !important;
}

/* Like icon - Estados not-liked (outline) e liked (filled) */
.list-row-activity .like-action {
  cursor: pointer !important;
}

.list-row-activity .like-action.not-liked .icon {
  fill: none !important;
  stroke: var(--text-color) !important;
  stroke-width: 1.5px !important;
  color: var(--text-color) !important;
}

.list-row-activity .like-action:not(.not-liked) .icon,
.list-row-activity .like-action.liked .icon {
  fill: var(--text-color) !important;
  stroke: none !important;
  color: var(--text-color) !important;
}

.list-row-activity .like-action:hover .icon {
  opacity: 0.7;
}

.like-icon {
  fill: white !important;
  stroke: rgba(0, 0, 0, 0.082) !important;
  color: white !important;
}

/* Logo Header - Light Mode red stroke, dark mode normal */
[data-theme="light"] .header-logo svg,
[data-theme="light"] .body-sidebar .header-logo svg,
[data-theme="light"] .sidebar-header .header-logo svg {
  stroke: var(--light-text-color) !important;
  fill: none !important;
  stroke-width: 0.5px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: var(--light-text-color) !important;
}

[data-theme="dark"] .header-logo svg,
[data-theme="dark"] .body-sidebar .header-logo svg {
  opacity: 1 !important;
  filter: none !important;
}

/* Sidebar Bottom Items */
.body-sidebar-bottom {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
}

.body-sidebar-bottom a {
  color: var(--sidebar-text) !important;
}

.body-sidebar-bottom svg,
.body-sidebar-bottom svg path,
.body-sidebar-bottom .icon,
.body-sidebar-bottom .icon path {
  stroke: var(--sidebar-text) !important;
  fill: none !important;
  color: var(--sidebar-text) !important;
}

.body-sidebar-bottom a:hover {
  color: var(--sidebar-hover) !important;
}

.body-sidebar-bottom a:hover svg,
.body-sidebar-bottom a:hover svg path {
  stroke: var(--sidebar-hover) !important;
}

/* Sidebar Header Dropdown */
.body-sidebar .sidebar-header-menu {
  background: var(--sidebar-bg) !important;
  border: 1px solid var(--border-color) !important;
}

.body-sidebar .dropdown-menu-item {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  transition: background-color 0.2s ease;
}

.body-sidebar .dropdown-menu-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text) !important;
}

.standard-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.selected,
.search-dialog .search-results .search-sidebar .standard-sidebar-item.selected {
  background-color: var(--sidebar-active) !important;
  color: var(--sidebar-active-text) !important;
}

.standard-sidebar .standard-sidebar-item:hover,
.desk-sidebar .standard-sidebar-item:hover {
  background-color: var(--sidebar-hover) !important;
}

/* 
   SECTION 19: DROPDOWNS & INPUT CONTROLS
   Altera: Awesomplete lists, form controls, focus states, placeholders
*/

/* === INPUT WITH FEEDBACK (Link Field Icon) === */
/* Garante que o ícone de link fica dentro do input e segue as cores do tema */
.frappe-control[data-fieldtype=Link] .input-with-feedback,
.awesomplete .input-with-feedback {
  background-color: var(--control-bg) !important;
  color: var(--text-color) !important;
  padding-right: 32px !important; /* Espaço para o ícone */
  position: relative !important;
}

/* Link Button dentro do input - keep inside bounds */
.frappe-control[data-fieldtype=Link] .link-btn,
.awesomplete .link-btn {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0px 6px !important;
  background-color: var(--control-bg) !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  display: none !important; /* Hidden by default */
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

/* Show link button on hover of the input container */
.frappe-control[data-fieldtype=Link]:hover .link-btn,
.frappe-control[data-fieldtype=Link].control-focused .link-btn,
.awesomplete:hover .link-btn,
.awesomplete.control-focused .link-btn {
  display: flex !important;
}

/* Link Button icon colors - match input theme */
.frappe-control[data-fieldtype=Link] .link-btn svg,
.frappe-control[data-fieldtype=Link] .link-btn svg path,
.frappe-control[data-fieldtype=Link] .link-btn .es-icon,
.awesomplete .link-btn svg,
.awesomplete .link-btn svg path,
.awesomplete .link-btn .es-icon {
  stroke: var(--text-color) !important;
  color: var(--text-color) !important;
  fill: none !important;
  stroke-width: 1.5px !important;
}

.awesomplete>ul,
.awesomplete-list,
[role="listbox"] {
  background-color: var(--dropdown-bg) !important;
  border: 1px solid var(--dropdown-border) !important;
  border-radius: 6px !important;
  box-shadow: var(--dropdown-shadow) !important;
  z-index: 1000 !important;
}

.awesomplete>ul>li,
.awesomplete-list>li,
[role="listbox"]>li,
[role="option"] {
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border-bottom: 1px solid var(--dropdown-border) !important;
  padding: 8px 12px !important;
}

.awesomplete>ul>li:hover,
.awesomplete-list>li:hover,
[role="listbox"]>li:hover,
[role="option"]:hover,
.awesomplete>ul>li[aria-selected="true"],
.awesomplete-list>li[aria-selected="true"] {
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-text) !important;
}

.awesomplete>ul>li[aria-selected="true"],
.awesomplete-list>li[aria-selected="true"] {
  background-color: var(--dropdown-active-bg) !important;
  font-weight: 600 !important;
}

/* ============================================================ */
/* NX AWESOMPLETE - Dropdowns com role="option" (DIV elements) */
/* ============================================================ */

/* Estado padrão */
.nx-awesomplete-host div[role="option"] {
  background: var(--dropdown-bg) !important;
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border-bottom: 1px solid var(--dropdown-border) !important;
  padding: 8px 12px !important;
}

:is(.nx-awesomplete-host) div[role="option"] {
  background: var(--dropdown-bg) !important;
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
}

/* Estado hover */
.nx-awesomplete-host div[role="option"]:hover {
  background: var(--dropdown-hover-bg) !important;
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-text) !important;
}

:is(.nx-awesomplete-host) div[role="option"]:hover {
  background: var(--dropdown-hover-bg) !important;
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-text) !important;
}

/* Estado selecionado (aria-selected="true") */
.nx-awesomplete-host div[role="option"][aria-selected="true"] {
  background: var(--dropdown-hover-bg) !important;
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-text) !important;
}

:is(.nx-awesomplete-host) div[role="option"][aria-selected="true"] {
  background: var(--dropdown-hover-bg) !important;
  background-color: var(--dropdown-hover-bg) !important;
  color: var(--dropdown-text) !important;
}

/* Form Controls & Inputs */
input.form-control,
.form-control {
  border: 2px solid var(--white-energia-border) !important;
  box-shadow: none !important;
  color: var(--text-color) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s;
  background-color: #9ca3af2e !important;
}

/* Select - Mesmos estilos que inputs */
select.form-control,
select.input-with-feedback,
.frappe-control[data-fieldtype="Select"] select {
  border: 1.5px solid var(--border-color) !important;
  box-shadow: none !important;
  color: var(--text-color) !important;
  background-color: var(--control-bg) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s;
}

/* Select focus - Mesma borda que inputs */
select.form-control:focus,
select.input-with-feedback:focus,
.frappe-control[data-fieldtype="Select"] select:focus,
select:focus-visible {
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}

/* Select dropdown options - Segue tema */
select option {
  background-color: var(--control-bg) !important;
  color: var(--text-color) !important;
  padding: 8px !important;
}

/* select option:checked,
select option:hover {
  background-color: var(--dropdown-active-bg) !important;
  color: var(--primary) !important;
} */

/* Input focus states */
input.form-control:focus,
.form-control:focus,
input.form-control:focus-visible,
.form-control:focus-visible {
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}

input.form-control::placeholder,
.form-control::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 1 !important;
}

/* Navbar search placeholder mais claro */
#navbar-search::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.9 !important;
  font-weight: 400 !important;
}

.list-sidebar .list-filters input:not([data-fieldtype="Check"]) {
  background: var(--control-bg) !important;
}

/* Disabled Inputs - EXCLUI checkboxes para manter estilo nativo do Frappe */
input:disabled:not([type="checkbox"]),
textarea:disabled,
textarea[readonly],
.like-disabled-input,
.control-value,
.like-disabled {
  border: 1.5px solid var(--border-color-dark) !important;
  background: var(--control-bg) !important;
  color: var(--text-disabled) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}


input[readonly] {
  border: 1.5px solid var(--border-color-dark) !important;
  background: white !important;
  color: var(--text-disabled) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}


/* Disabled Buttons */
.btn:disabled,
.btn[disabled],
.btn.disabled,
button:disabled,
button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: var(--control-bg) !important;
  color: var(--text-disabled) !important;
  border-color: var(--border-color) !important;
}

.btn.btn-primary:disabled,
.btn.btn-primary[disabled],
.btn.btn-primary.disabled {
  background-color: var(--btn-default-bg) !important;
  color: var(--text-disabled) !important;
}

.btn.btn-default:disabled,
.btn.btn-default[disabled],
.btn.btn-default.disabled {
  background-color: var(--control-bg) !important;
  color: var(--text-disabled) !important;
  border-color: var(--border-color) !important;
}

/* 
   SECTION 20: WIDGETS
   Altera: Widget hover states, transformações, sombras
   Light mode: Laranja energia hover effect
*/

[data-theme="light"] .widget.shortcut-widget-box:hover,
[data-theme="light"] .widget.number-widget-box:hover,
[data-theme="light"] .widget.chart-widget:hover,
[data-theme="light"] .widget-widget-box:hover {
  background-color: #FFF5EB !important;
  border-color: #F78B1E !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(247, 139, 30, 0.25) !important;
  transition: all 0.2s ease;
}

.widget-control:hover {
  opacity: 1 !important;
}

/* 
   SECTION 21: TYPOGRAPHY
   Altera: Fonts, headings, body text, monospace
*/

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading,
.page-title,
.title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--heading-color);
}

code,
pre,
.monospace {
  font-family: var(--font-mono);
}

/* Code blocks com syntax highlighting - Segue tema */
.hljs,
pre.hljs,
code.hljs {
  display: block;
  overflow-x: auto;
  background-color: var(--code-bg) !important;
  color: var(--text-color) !important;
  padding: 0.5em !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-color) !important;
}

/* Syntax highlighting colors - Theme aware */
.hljs-comment {
  color: var(--text-muted) !important;
  font-style: italic !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

.hljs-string,
.hljs-attr {
  color: var(--success-green) !important;
}

.hljs-number,
.hljs-params {
  color: var(--warning-orange) !important;
}

.hljs-function,
.hljs-title {
  color: var(--info-blue) !important;
  font-weight: 600 !important;
}

/* 
   SECTION 22: UTILITY CLASSES
   Altera: Text colors, background colors, border colors, semantic classes
*/

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-light { color: var(--text-light) !important; }
.text-on-primary { color: var(--text-on-primary) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-elevated { background-color: var(--bg-elevated) !important; }

.border-primary { border-color: var(--primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-default { border-color: var(--border-color) !important; }

.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-info { color: var(--blue-500) !important; }

.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-info { background-color: var(--blue-500) !important; }

/* 
   SECTION 23: LAYOUT COMPONENTS
   Altera: Page head sticky, main section background (FORÇA THEME COLORS)
   Importante: Main section usa !important para override inline styles
*/

.page-head {
  z-index: 6;
  position: sticky;
  top: var(--navbar-height);
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--border-color);
  transition: .5s top;
}

/* Main Section - Força seguir tema, não usa inline red background */
.main-section {
  background-color: var(--bg-color) !important;
}

[data-theme="light"] .main-section {
  background-color: var(--orange-energia-bg) !important;
}

[data-theme="dark"] .main-section {
  background-color: var(--gray-900) !important;
}

/* Workspaces Scrollbar */
[data-theme="dark"] [data-page-route="Workspaces"] .layout-main .layout-side-section,
[data-theme="dark"] [data-page-route="Workspaces"] .layout-main .layout-main-section-wrapper {
  scrollbar-color: #6B7280 transparent;
}

/* 
   SECTION 24: GRV CUSTOM COMPONENTS
   Altera: Cards, buttons, badges customizadas com estilo GRV
*/

.card-grv {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.card-grv:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-grv-primary {
  background: var(--primary);
  color: var(--neutral) !important;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-grv-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.badge-grv {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 12px;
  font-family: var(--font-body);
}

.badge-grv.success {
  background: rgba(46, 219, 96, 0.1);
  color: var(--color-success);
}

.badge-grv.warning {
  background: rgba(255, 194, 71, 0.1);
  color: var(--color-warning);
}

.badge-grv.error {
  background: rgba(255, 13, 79, 0.1);
  color: var(--color-error);
}

.badge-grv.info {
  background: rgba(6, 194, 255, 0.1);
  color: var(--blue-500);
}

/* 
   SECTION 25: TRANSITIONS & ANIMATIONS
   Altera: Duração, timing function, desabilita durante troca de tema
*/

a, button, input, textarea, select,
.btn, .card, .modal, .dropdown,
.standard-sidebar-item,
[class*="hover"],
[class*="active"] {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

html.theme-transitioning * {
  transition: none !important;
}

/* 
   SECTION 26: SCROLLBAR PERSONALIZADA
   Altera: Largura, cores, hover effects em WebKit browsers
*/

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 5px;
  border: 2px solid var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* 
   SECTION 26.5: GRID INPUT/DROPDOWN FOCUS - DARK MODE
   Altera: Foco de inputs e dropdowns dentro do Syncfusion Grid
*/

/* === GRID INPUT FOCUS - DARK MODE === */
[data-theme="dark"] .e-grid .e-inputbox input:focus,
[data-theme="dark"] .e-grid .e-inputbox input:focus-visible,
[data-theme="dark"] .e-grid input[type="text"]:focus,
[data-theme="dark"] .e-grid input[type="number"]:focus {
  border-color: var(--primary) !important;
  background-color: var(--control-bg) !important;
  color: var(--text-color) !important;
}

/* === GRID DROPDOWN FOCUS - DARK MODE === */
[data-theme="dark"] .e-grid .e-inputbox .e-dropdownlist:focus,
[data-theme="dark"] .e-grid .e-inputbox select:focus,
[data-theme="dark"] .e-grid select:focus {
  border-color: var(--primary) !important;
  background-color: var(--control-bg) !important;
  color: var(--text-color) !important;
}

/* === GRID DROPDOWN OPTIONS SELECIONADAS - DARK MODE === */
[data-theme="dark"] .e-grid .e-inputbox .e-dropdownlist option:checked,
[data-theme="dark"] .e-grid .e-inputbox .e-dropdownlist option:selected,
[data-theme="dark"] .e-grid select option:checked,
[data-theme="dark"] .e-grid select option:selected {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* === GRID DROPDOWN POPUP OPTIONS - DARK MODE === */
[data-theme="dark"] .e-grid .e-popup .e-list-item,
[data-theme="dark"] .e-grid .e-list-item {
  background-color: var(--control-bg) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .e-grid .e-popup .e-list-item.e-active,
[data-theme="dark"] .e-grid .e-list-item.e-active {
  background-color: var(--primary-light) !important;
  color: var(--primary) !important;
}

[data-theme="dark"] .e-grid .e-popup .e-list-item:hover,
[data-theme="dark"] .e-grid .e-list-item:hover {
  background-color: var(--hover-bg) !important;
}

/* 
   SECTION 27: FOCUS STATES - ACESSIBILIDADE
   Altera: Outline removal, focus-ring shadows em inputs e botões
*/

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: var(--focus-ring);
}

/* 
   SECTION 28: OVERRIDES FINAIS
   Altera: Dark mode html/body backgrounds, configurações finais de tema
*/

[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: #04162F;
  color: #F9FAFB;
}

.nx-awesomplete-host [role="option"][aria-selected="true"] {
    background: var(--dropdown-bg) !important;
    color: inherit !important;
}