/* ==============================================================================
   DESIGN SYSTEM GLOBAL — CONECTAR-PLUS® 2026
   Identidade Visual Oficial: "Sua oficina inteligente"
   Paleta de Cores, Design Tokens, Componentes e Padronização Universal
   ============================================================================== */

:root {
  /* ==========================================
     1. PALETA DE CORES PRINCIPAL (BOARD OFICIAL)
     ========================================== */
  /* Azul Principal: Títulos, cabeçalhos, navegação, links */
  --cp-azul-principal: #0F172A;
  /* Azul Escuro: Textos principais, conteúdos, ícones */
  --cp-azul-escuro: #0B132B;
  /* Azul Médio: Links, destaques, elementos ativos, ações principais */
  --cp-azul-medio: #1976D2;
  /* Azul Claro: Fundos de seções, destaques suaves */
  --cp-azul-claro: #E6F0FA;
  /* Cinza Escuro: Textos secundários, labels, metadados */
  --cp-cinza-escuro: #64748B;
  /* Cinza Médio: Informações auxiliares, placeholders */
  --cp-cinza-medio: #94A3B8;
  /* Cinza Claro: Bordas, divisórias, linhas */
  --cp-cinza-claro: #E2E8F0;
  /* Cinza Muito Claro: Fundo geral do sistema */
  --cp-cinza-muito-claro: #F7F9FB;
  /* Azul Navy: Headers / Footer, rodapés, seções escuras */
  --cp-azul-navy: #0B3D91;
  /* Laranja Escuro: Estados especiais, importante */
  --cp-laranja-escuro: #E65100;
  /* Verde Escuro: Sucesso, aprovação, estados ativos */
  --cp-verde-escuro: #16A34A;
  /* Cinza Azul: Ícones, gráficos, componentes */
  --cp-cinza-azul: #475569;

  /* ==========================================
     2. CORES DE AÇÃO E STATUS (BOARD OFICIAL)
     ========================================== */
  --cp-status-sucesso: #22C55E;
  --cp-status-atencao: #F59E0B;
  --cp-status-erro: #EF4444;
  --cp-status-info: #8B5CF6;
  --cp-status-primario: #1976D2;

  /* ==========================================
     3. TOKENS DE DESIGN PADRONIZADOS
     ========================================== */
  --cp-color-primary: #0B3D91;
  --cp-color-primary-hover: #1976D2;
  --cp-color-primary-active: #0F172A;
  --cp-color-primary-light: #E6F0FA;

  --cp-color-action: #1976D2;
  --cp-color-action-hover: #0B3D91;
  --cp-color-action-active: #0F172A;

  --cp-color-secondary: #16A34A;
  --cp-color-secondary-hover: #15803D;

  --cp-color-accent: #F59E0B;
  --cp-color-accent-orange: #E65100;

  --cp-color-success: #22C55E;
  --cp-color-success-dark: #16A34A;
  --cp-color-success-soft: #DCFCE7;
  --cp-color-success-border: #86EFAC;

  --cp-color-warning: #F59E0B;
  --cp-color-warning-dark: #D97706;
  --cp-color-warning-soft: #FEF3C7;
  --cp-color-warning-border: #FCD34D;

  --cp-color-danger: #EF4444;
  --cp-color-danger-dark: #DC2626;
  --cp-color-danger-soft: #FEE2E2;
  --cp-color-danger-border: #FCA5A5;

  --cp-color-info: #8B5CF6;
  --cp-color-info-dark: #7C3AED;
  --cp-color-info-soft: #EDE9FE;
  --cp-color-info-border: #C4B5FD;

  --cp-color-background: #F7F9FB;
  --cp-color-surface: #FFFFFF;
  --cp-color-border: #E2E8F0;
  --cp-color-border-soft: #F1F5F9;

  --cp-color-text: #0F172A;
  --cp-color-text-dark: #0B132B;
  --cp-color-text-secondary: #64748B;
  --cp-color-disabled: #94A3B8;

  /* Aliases compatíveis com classes anteriores */
  --cp-primary: #1976D2;
  --cp-primary-hover: #0B3D91;
  --cp-primary-active: #0F172A;
  --cp-primary-soft: #E6F0FA;
  --cp-primary-border: #BFDBFE;
  --cp-primary-text: #1E40AF;

  --cp-bg: #F7F9FB;
  --cp-bg-secondary: #F1F5F9;
  --cp-surface: #FFFFFF;
  --cp-surface-hover: #F8FAFC;
  --cp-surface-active: #E6F0FA;

  --cp-text: #0F172A;
  --cp-text-secondary: #64748B;
  --cp-text-muted: #94A3B8;
  --cp-text-placeholder: #94A3B8;

  --cp-border: #E2E8F0;
  --cp-border-soft: #F1F5F9;
  --cp-border-hover: #CBD5E1;
  --cp-border-focus: #1976D2;

  --cp-success: #22C55E;
  --cp-success-soft: #DCFCE7;
  --cp-warning: #F59E0B;
  --cp-warning-soft: #FEF3C7;
  --cp-danger: #EF4444;
  --cp-danger-soft: #FEE2E2;
  --cp-info: #8B5CF6;
  --cp-info-soft: #EDE9FE;

  /* ==========================================
     4. SOMBRAS & ELEVAÇÕES (BOARD OFICIAL)
     ========================================== */
  --cp-shadow-sm: 0 1px 3px rgba(11, 79, 138, 0.08);
  --cp-shadow-md: 0 4px 12px rgba(11, 79, 138, 0.08);
  --cp-shadow-lg: 0 10px 25px rgba(11, 79, 138, 0.12);
  --cp-shadow-xl: 0 20px 40px rgba(11, 79, 138, 0.16);

  /* ==========================================
     5. RAIOS DE BORDA (BORDER RADIUS)
     ========================================== */
  --cp-radius-sm: 6px;
  --cp-radius: 8px;
  --cp-radius-md: 8px;
  --cp-radius-lg: 12px;
  --cp-radius-xl: 16px;
  --cp-radius-pill: 9999px;

  /* ==========================================
     6. TIPOGRAFIA OFICIAL
     ========================================== */
  --cp-font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==============================================================================
   RESET VISUAL GLOBAL & BACKGROUND PADRÃO
   ============================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: var(--cp-color-background) !important;
  color: var(--cp-color-text) !important;
  margin: 0;
  font-family: var(--cp-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--cp-azul-principal) !important;
  font-family: var(--cp-font-family);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p, span, label, small {
  font-family: var(--cp-font-family);
}

::selection {
  background-color: var(--cp-azul-medio);
  color: #FFFFFF;
}

.cp-theme-light, #app {
  background-color: var(--cp-color-background);
  color: var(--cp-color-text);
  min-height: 100vh;
}

/* ==============================================================================
   COMPONENTES DE UI: BOTÕES (OFICIAL CONECTAR-PLUS 2026)
   ============================================================================== */
.cp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--cp-font-family) !important;
  border-radius: var(--cp-radius) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid transparent !important;
  outline: none !important;
  line-height: 1.3 !important;
}

/* Botão Primário (Azul Médio #1976D2 com hover #0B3D91) */
.cp-btn-primary, .btn-primary {
  background-color: var(--cp-azul-medio) !important;
  color: #FFFFFF !important;
  border-color: var(--cp-azul-medio) !important;
  box-shadow: var(--cp-shadow-sm) !important;
}
.cp-btn-primary:hover, .btn-primary:hover {
  background-color: var(--cp-azul-navy) !important;
  border-color: var(--cp-azul-navy) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-md) !important;
}
.cp-btn-primary:active, .btn-primary:active {
  background-color: var(--cp-azul-principal) !important;
  transform: translateY(0);
}

/* Botão Secundário (Outline com Borda #E2E8F0 e Texto Azul) */
.cp-btn-secondary, .btn-secondary {
  background-color: #FFFFFF !important;
  color: var(--cp-azul-principal) !important;
  border-color: var(--cp-cinza-claro) !important;
  box-shadow: var(--cp-shadow-sm) !important;
}
.cp-btn-secondary:hover, .btn-secondary:hover {
  background-color: var(--cp-cinza-muito-claro) !important;
  border-color: var(--cp-azul-medio) !important;
  color: var(--cp-azul-medio) !important;
  transform: translateY(-1px);
}
.cp-btn-secondary:active, .btn-secondary:active {
  background-color: var(--cp-azul-claro) !important;
  transform: translateY(0);
}

/* Botão Sucesso (Verde #22C55E / #16A34A) */
.cp-btn-success, .btn-success {
  background-color: var(--cp-status-sucesso) !important;
  color: #FFFFFF !important;
  border-color: var(--cp-status-sucesso) !important;
  box-shadow: var(--cp-shadow-sm) !important;
}
.cp-btn-success:hover, .btn-success:hover {
  background-color: var(--cp-verde-escuro) !important;
  border-color: var(--cp-verde-escuro) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-md) !important;
}

/* Botão Atenção / Alerta (Amarelo/Laranja #F59E0B) */
.cp-btn-warning, .btn-warning {
  background-color: #FFFBEB !important;
  color: #B45309 !important;
  border-color: #FCD34D !important;
}
.cp-btn-warning:hover, .btn-warning:hover {
  background-color: var(--cp-status-atencao) !important;
  color: #FFFFFF !important;
  border-color: var(--cp-status-atencao) !important;
  transform: translateY(-1px);
}

/* Botão Perigo / Erro (Vermelho #EF4444) */
.cp-btn-danger, .btn-danger {
  background-color: var(--cp-status-erro) !important;
  color: #FFFFFF !important;
  border-color: var(--cp-status-erro) !important;
  box-shadow: var(--cp-shadow-sm) !important;
}
.cp-btn-danger:hover, .btn-danger:hover {
  background-color: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: var(--cp-shadow-md) !important;
}

/* Botão Desabilitado (Cinza #E2E8F0 fundo / #94A3B8 texto) */
.cp-btn-disabled, .cp-btn:disabled, button:disabled {
  background-color: var(--cp-cinza-claro) !important;
  color: var(--cp-cinza-medio) !important;
  border-color: var(--cp-cinza-claro) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.85;
}

/* ==============================================================================
   COMPONENTES DE UI: INPUTS & FORMULÁRIOS
   ============================================================================== */
.cp-input,
.cp-select,
.cp-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
select,
textarea {
  background-color: var(--cp-color-surface) !important;
  color: var(--cp-azul-principal) !important;
  border: 1px solid var(--cp-cinza-claro) !important;
  border-radius: var(--cp-radius) !important;
  padding: 10px 14px;
  font-size: 13px !important;
  font-family: var(--cp-font-family) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  width: 100%;
}

/* Suporte prioritário para inputs com ícones (esquerda e direita) */
.has-icon-left,
.input-with-icon,
.input-with-both-icons,
input.pl-9, input.pl-10, input.pl-11, input.pl-12,
.relative > input.pl-9,
.relative > input.pl-10,
.relative > input.pl-11,
.relative > input.pl-12,
.relative > input[style*="padding-left"] {
  padding-left: 2.85rem !important;
}

.has-icon-right,
.input-with-both-icons,
input.pr-9, input.pr-10, input.pr-11, input.pr-12,
.relative > input.pr-9,
.relative > input.pr-10,
.relative > input.pr-11,
.relative > input.pr-12,
.relative > input[style*="padding-right"] {
  padding-right: 2.85rem !important;
}

.cp-input:focus,
.cp-select:focus,
.cp-textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--cp-azul-medio) !important;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18) !important;
  background-color: #FFFFFF !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--cp-cinza-medio) !important;
  font-weight: 400;
}

/* Estado de Erro no Campo */
.cp-input-error,
.has-error input,
.is-invalid {
  border-color: var(--cp-status-erro) !important;
  color: var(--cp-status-erro) !important;
  background-color: #FFF5F5 !important;
}
.cp-input-error:focus,
.has-error input:focus,
.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
.cp-error-message,
.text-error-feedback {
  color: var(--cp-status-erro) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Estado de Sucesso no Campo */
.cp-input-success,
.has-success input,
.is-valid {
  border-color: var(--cp-status-sucesso) !important;
  color: var(--cp-verde-escuro) !important;
  background-color: #F0FDF4 !important;
}
.cp-input-success:focus,
.has-success input:focus,
.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}
.cp-success-message,
.text-success-feedback {
  color: var(--cp-verde-escuro) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Labels e Títulos de Formulário */
label, .cp-label {
  color: var(--cp-azul-principal) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 6px;
  display: inline-block;
  letter-spacing: -0.01em;
}

/* ==============================================================================
   COMPONENTES DE UI: BADGES & TAGS
   ============================================================================== */
.cp-badge, .badge, .cp-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: var(--cp-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

/* Badges de Status (Board Oficial) */
.cp-badge-progress, .badge-em-andamento, .badge-progresso {
  background-color: var(--cp-azul-claro) !important;
  color: var(--cp-azul-medio) !important;
  border-color: #BFDBFE !important;
}

.cp-badge-success, .badge-concluido, .badge-aprovado {
  background-color: #DCFCE7 !important;
  color: var(--cp-verde-escuro) !important;
  border-color: #86EFAC !important;
}

.cp-badge-warning, .badge-pendente, .badge-atencao {
  background-color: #FEF3C7 !important;
  color: #D97706 !important;
  border-color: #FCD34D !important;
}

.cp-badge-danger, .badge-cancelado, .badge-erro {
  background-color: #FEE2E2 !important;
  color: #DC2626 !important;
  border-color: #FCA5A5 !important;
}

.cp-badge-new, .badge-novo, .badge-info {
  background-color: #EDE9FE !important;
  color: #7C3AED !important;
  border-color: #C4B5FD !important;
}

/* Tags de Categorias (Pills do Board) */
.cp-tag-servico {
  background-color: var(--cp-azul-claro) !important;
  color: var(--cp-azul-medio) !important;
  border-color: #BFDBFE !important;
}
.cp-tag-peca {
  background-color: #FFEDD5 !important;
  color: var(--cp-laranja-escuro) !important;
  border-color: #FED7AA !important;
}
.cp-tag-garantia {
  background-color: #DCFCE7 !important;
  color: var(--cp-verde-escuro) !important;
  border-color: #86EFAC !important;
}
.cp-tag-financeiro {
  background-color: #F3E8FF !important;
  color: #7E22CE !important;
  border-color: #E9D5FF !important;
}

/* ==============================================================================
   COMPONENTES DE UI: ALERTAS & NOTIFICAÇÕES
   ============================================================================== */
.cp-alert, .alert {
  padding: 14px 18px !important;
  border-radius: var(--cp-radius-lg) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--cp-shadow-sm) !important;
}

.cp-alert-success, .alert-success {
  background-color: #F0FDF4 !important;
  color: #14532D !important;
  border: 1px solid #86EFAC !important;
}

.cp-alert-warning, .alert-warning {
  background-color: #FFFBEB !important;
  color: #78350F !important;
  border: 1px solid #FCD34D !important;
}

.cp-alert-danger, .alert-danger {
  background-color: #FEF2F2 !important;
  color: #7F1D1D !important;
  border: 1px solid #FCA5A5 !important;
}

.cp-alert-info, .alert-info {
  background-color: #EFF6FF !important;
  color: #1E3A8A !important;
  border: 1px solid #BFDBFE !important;
}

/* ==============================================================================
   COMPONENTES DE UI: CARDS & SUPERFÍCIES
   ============================================================================== */
.cp-card, .card {
  background-color: var(--cp-color-surface) !important;
  color: var(--cp-color-text) !important;
  border: 1px solid var(--cp-color-border) !important;
  border-radius: var(--cp-radius-lg) !important;
  box-shadow: var(--cp-shadow-sm) !important;
  transition: all 0.2s ease !important;
}

.cp-card-interactive:hover {
  box-shadow: var(--cp-shadow-md) !important;
  border-color: var(--cp-azul-medio) !important;
}

/* ==============================================================================
   COMPONENTES DE UI: TABELAS GLOBAIS (ZEBRADAS E PADRONIZADAS)
   ============================================================================== */
.cp-table, table {
  width: 100%;
  background-color: var(--cp-color-surface) !important;
  color: var(--cp-color-text) !important;
  border-collapse: collapse;
  border-radius: var(--cp-radius-md);
  overflow: hidden;
}

thead, thead tr, thead th, .cp-table th {
  background-color: var(--cp-cinza-muito-claro) !important;
  color: var(--cp-cinza-escuro) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--cp-cinza-claro) !important;
  text-align: left;
}

tbody tr, .cp-table tbody tr {
  border-bottom: 1px solid var(--cp-border-soft) !important;
  transition: background-color 0.15s ease;
}

tbody tr:hover, .cp-table tbody tr:hover {
  background-color: #F8FAFC !important;
}

td, .cp-table td {
  color: var(--cp-color-text) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}

/* Paginação Ativa */
.cp-page-item.active, .pagination .active {
  background-color: var(--cp-azul-medio) !important;
  color: #FFFFFF !important;
  border-color: var(--cp-azul-medio) !important;
}

/* ==============================================================================
   COMPONENTES DE UI: MODAIS
   ============================================================================== */
.cp-modal, [role="dialog"], .modal-content {
  background-color: var(--cp-color-surface) !important;
  color: var(--cp-color-text) !important;
  border: 1px solid var(--cp-color-border) !important;
  border-radius: var(--cp-radius-xl) !important;
  box-shadow: var(--cp-shadow-xl) !important;
}

.cp-modal-overlay, .modal-backdrop {
  background-color: rgba(11, 19, 43, 0.45) !important;
  backdrop-filter: blur(6px) !important;
}

/* ==============================================================================
   SIDEBAR & NAVEGAÇÃO GLOBAL CONECTAR-PLUS 2026
   ============================================================================== */
.cp-sidebar, aside#main-sidebar, aside#master-sidebar, aside#forn-sidebar {
  background-color: var(--cp-color-surface) !important;
  color: var(--cp-cinza-escuro) !important;
  border-right: 1px solid var(--cp-cinza-claro) !important;
  box-shadow: var(--cp-shadow-sm) !important;
}

.cp-sidebar-link, .sidebar-link, .master-item {
  color: var(--cp-cinza-escuro) !important;
  transition: all 0.18s ease-in-out !important;
}

.cp-sidebar-link:hover, .sidebar-link:hover, .master-item:hover {
  background-color: var(--cp-cinza-muito-claro) !important;
  color: var(--cp-azul-principal) !important;
}

/* Item Ativo da Navegação (Estilo Conectar-Plus 2026) */
.cp-sidebar-link.active,
.sidebar-link.active,
.master-item.active {
  background-color: var(--cp-azul-claro) !important;
  color: var(--cp-azul-medio) !important;
  font-weight: 700 !important;
}

/* ==============================================================================
   TOPBAR & HEADER GLOBAL
   ============================================================================== */
.cp-header, .cp-topbar, header, [id*="header"] {
  background-color: var(--cp-color-surface) !important;
  color: var(--cp-azul-principal) !important;
  border-bottom: 1px solid var(--cp-cinza-claro) !important;
  box-shadow: var(--cp-shadow-sm) !important;
}

/* Search bar no topo */
.cp-search-input {
  background-color: var(--cp-cinza-muito-claro) !important;
  border: 1px solid var(--cp-cinza-claro) !important;
  border-radius: var(--cp-radius-pill) !important;
  padding: 8px 16px 8px 36px !important;
  font-size: 13px !important;
}
.cp-search-input:focus {
  background-color: #FFFFFF !important;
  border-color: var(--cp-azul-medio) !important;
}

/* ==============================================================================
   PROGRESS BARS
   ============================================================================== */
.progress, .progress-bar-bg {
  background-color: var(--cp-cinza-claro) !important;
  border-radius: var(--cp-radius-pill) !important;
}

.progress-value, .progress-bar-fill {
  background-color: var(--cp-azul-medio) !important;
  border-radius: var(--cp-radius-pill) !important;
}

/* ==============================================================================
   SUBSTITUIÇÃO DE ESTILOS LEGADOS / NEON RESIDUAL
   ============================================================================== */
/* Eliminação definitiva do verde-lima nos botões de submissão e ação */
button[type="submit"]:not(.cp-btn-success):not(.btn-success):not(.cp-btn-warning):not(.cp-btn-danger) {
  background-color: var(--cp-azul-medio) !important;
  color: #FFFFFF !important;
}
button[type="submit"]:not(.cp-btn-success):not(.btn-success):not(.cp-btn-warning):not(.cp-btn-danger):hover {
  background-color: var(--cp-azul-navy) !important;
  color: #FFFFFF !important;
}

/* Normalização de cards de gradiente antigos */
.bg-gradient-to-r.from-blue-900,
.bg-gradient-to-r.from-blue-800,
.bg-gradient-to-r.from-indigo-900,
.bg-gradient-to-r.from-slate-900 {
  background: var(--cp-color-surface) !important;
  border: 1px solid var(--cp-color-border) !important;
  box-shadow: var(--cp-shadow-sm) !important;
  color: var(--cp-color-text) !important;
}