/* theme.css - Sistema de temas claro/escuro para o site SuporteJD - Apenas modo automático */

/* Variáveis de cores para ambos os temas */
:root {
  /* Tema Claro (padrão) */
  --body-bg: #ffffff;
  --body-color: #333333;
  --text-muted: #555555;
  --text-dark: #000000;
  --text-light: #ffffff;
  
  /* Links */
  --link-color: #0056b3;
  --link-hover-color: #003d7a;
  
  /* Cabeçalho e Rodapé */
  --header-gradient-start: #43A9FF;
  --header-gradient-end: #0043A8;
  --header-shadow: rgba(0, 0, 0, 0.5);
  --header-text: #ffffff;
  
  /* Navegação */
  --navbar-bg: #0043A8;
  --navbar-text: #ffffff;
  --navbar-hover-gradient-start: #43A9FF;
  --navbar-hover-gradient-end: #0043A8;
  --navbar-border: rgba(255, 255, 255, 0.3);
  
  /* Cards e Containers */
  --card-bg: #f8f9fa;
  --card-border: #dee2e6;
  --card-shadow: rgba(0, 0, 0, 0.1);
  --card-header-bg: #0043A8;
  --card-header-text: #ffffff;
  
  /* Sidebar específico */
  --sidebar-title-color: #000000;
  --sidebar-text-color: #555555;
  --sidebar-link-color: #0056b3;
  --sidebar-bg: #f8f9fa;
  
  /* Botões */
  --btn-primary-gradient-start: #43A9FF;
  --btn-primary-gradient-end: #0043A8;
  --btn-primary-hover-start: #3CA0F0;
  --btn-primary-hover-end: #003A90;
  --btn-shadow: rgba(0, 0, 0, 0.2);
  --btn-text: #ffffff;
  
  /* Formulários */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-color: #495057;
  
  /* WhatsApp */
  --whatsapp-bg: #25D366;
  --whatsapp-shadow: rgba(0, 0, 0, 0.2);
  --whatsapp-text: #ffffff;
  
  /* Utilitários */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-dark: rgba(0, 0, 0, 0.3);
  
  /* Fonte padrão */
  --font-header: 'Montserrat', sans-serif;
  --font-body: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Tema Escuro - Aplicado automaticamente via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Cores base invertidas */
    --body-bg: #121212;
    --body-color: #e0e0e0;
    --text-muted: #b0b0b0;
    --text-dark: #f0f0f0;
    --text-light: #ffffff;
    
    /* Links */
    --link-color: #63a9ff;
    --link-hover-color: #8ebeff;
    
    /* Cabeçalho e Rodapé */
    --header-gradient-start: #0a4d8c;
    --header-gradient-end: #002a6e;
    --header-shadow: rgba(0, 0, 0, 0.7);
    --header-text: #ffffff;
    
    /* Navegação */
    --navbar-bg: #002a6e;
    --navbar-text: #ffffff;
    --navbar-hover-gradient-start: #0a4d8c;
    --navbar-hover-gradient-end: #002a6e;
    --navbar-border: rgba(255, 255, 255, 0.15);
    
    /* Cards e Containers */
    --card-bg: #1e1e1e;
    --card-border: #333333;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-header-bg: #002a6e;
    --card-header-text: #ffffff;
    
    /* Sidebar específico - cores mais claras para melhor legibilidade */
    --sidebar-title-color: #ffffff;
    --sidebar-text-color: #dddddd;
    --sidebar-link-color: #63a9ff;
    --sidebar-bg: #1e1e1e;
    
    /* Botões */
    --btn-primary-gradient-start: #0a4d8c;
    --btn-primary-gradient-end: #002a6e;
    --btn-primary-hover-start: #0c5aa3;
    --btn-primary-hover-end: #001f52;
    --btn-shadow: rgba(0, 0, 0, 0.4);
    --btn-text: #ffffff;
    
    /* Formulários */
    --input-bg: #2c2c2c;
    --input-border: #444444;
    --input-color: #e0e0e0;
    
    /* WhatsApp - mantido igual para reconhecimento da marca */
    --whatsapp-bg: #25D366;
    --whatsapp-shadow: rgba(0, 0, 0, 0.4);
    --whatsapp-text: #ffffff;
    
    /* Utilitários */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-dark: rgba(0, 0, 0, 0.5);
  }
}

/* Aplicação das variáveis aos elementos */
body {
  background-color: var(--body-bg);
  color: var(--body-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Tipografia */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
  transition: color 0.5s ease;
}

p {
  color: var(--text-muted);
  transition: color 0.3s ease;
}

/* Links */
a {
  color: var(--link-color);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover-color);
}

/* Cabeçalho */
header {
  background: linear-gradient(var(--header-gradient-start), var(--header-gradient-end));
  box-shadow: 0 0 5px var(--header-shadow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  font-family: var(--font-header);
}

header a, header a:hover, header p, header span {
  color: var(--header-text) !important;
  font-family: var(--font-header);
}

#strapline-info p a {
  color: var(--header-text) !important;
  font-family: var(--font-header);
}

/* Navegação */
.navbar {
  background-color: var(--navbar-bg) !important;
  box-shadow: 0 2px 5px var(--shadow-medium);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1035 !important;
  font-family: var(--font-header);
}

.navbar-nav .nav-link, .navbar-nav .nav-link:hover, .navbar-nav .active > .nav-link {
  color: var(--navbar-text) !important;
  transition: color 0.3s ease, background 0.3s ease;
  font-family: var(--font-header);
  font-weight: 500;
}

.navbar-nav .nav-link:hover, .navbar-nav .active > .nav-link {
  background: transparent;
}

.navbar-toggler {
  border-color: var(--navbar-border);
  transition: border-color 0.3s ease;
}

.navbar-collapse {
  background-color: var(--navbar-bg);
  transition: background-color 0.3s ease;
}

/* Cards e Containers */
.card, .content_container_responsive {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 3px var(--card-shadow);
  transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

/* Sidebar específico */
.sidebar_item_responsive {
  background-color: var(--sidebar-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 1px 3px var(--card-shadow);
  transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.sidebar_item_responsive h2, 
.sidebar_item_responsive h3, 
.sidebar_item_responsive .h5, 
.sidebar_item_responsive .h6, 
.sidebar_item_responsive strong {
  color: var(--sidebar-title-color) !important;
  transition: color 0.3s ease;
}

.sidebar_item_responsive p, 
.sidebar_item_responsive .small {
  color: var(--sidebar-text-color) !important;
  transition: color 0.3s ease;
}

.sidebar_item_responsive a:not(.btn) {
  color: var(--sidebar-link-color) !important;
  transition: color 0.3s ease;
}

.sidebar_item_responsive strong, 
.sidebar_item_responsive b {
  color: var(--sidebar-title-color) !important;
  transition: color 0.3s ease;
}

.card-header.bg-primary {
  background-color: var(--card-header-bg) !important;
  color: var(--card-header-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card-title, .card-text {
  color: var(--text-dark);
  transition: color 0.3s ease;
}

/* Botões */
.button_small, .btn-primary {
  background: linear-gradient(var(--btn-primary-gradient-start), var(--btn-primary-gradient-end));
  box-shadow: 0 2px 4px var(--btn-shadow);
  color: var(--btn-text) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.button_small:hover, .btn-primary:hover {
  background: linear-gradient(var(--btn-primary-hover-start), var(--btn-primary-hover-end));
  color: var(--btn-text) !important;
}

/* Formulários */
.form_settings input,
.form_settings textarea,
.form-control {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--input-color);
  transition: background-color 0.3s ease, border 0.3s ease, color 0.3s ease;
}

/* WhatsApp */
#whatsapp-float {
  background-color: var(--whatsapp-bg);
  box-shadow: 0 4px 8px var(--whatsapp-shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1030;
}

#whatsapp-float:hover {
  box-shadow: 0 6px 12px var(--shadow-dark);
}

#whatsapp-float span {
  color: var(--whatsapp-text);
}

/* Footer */
footer {
  background: linear-gradient(var(--header-gradient-start), var(--header-gradient-end));
  box-shadow: 0 -2px 5px var(--shadow-medium);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

footer a, footer a:hover, footer p {
  color: var(--header-text) !important;
}

/* Ajustes específicos para tema escuro via media query */
@media (prefers-color-scheme: dark) {
  .bg-light {
    background-color: #2c2c2c !important;
  }

  .text-dark {
    color: #e0e0e0 !important;
  }

  .text-primary {
    color: #63a9ff !important;
  }

  .border {
    border-color: var(--card-border) !important;
  }

  .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--body-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }

  .alert-info {
    background-color: #0f3a5f;
    border-color: #0c2e4a;
    color: #e0e0e0;
  }
  
  /* Ajustes para imagens em tema escuro */
  img:not([src*=".svg"]) {
    filter: brightness(0.9);
    transition: filter 0.3s ease;
  }
  
  /* Ajustes específicos para o sidebar no modo escuro */
  .sidebar_container_responsive .sidebar_item_responsive {
    background-color: #252525 !important; /* Um pouco mais claro que o fundo principal */
  }
  
  /* Garantir que textos do sidebar sejam bem legíveis no modo escuro */
  .sidebar_container_responsive h2,
  .sidebar_container_responsive h3,
  .sidebar_container_responsive .h5,
  .sidebar_container_responsive .h6 {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  
  .sidebar_container_responsive p,
  .sidebar_container_responsive .small {
    color: #dddddd !important;
  }
  
  .sidebar_container_responsive strong,
  .sidebar_container_responsive b {
    color: #ffffff !important;
    font-weight: 700;
  }
}

/* Garantir que classes utilitárias do Bootstrap funcionem em ambos os temas */
.text-white {
  color: #ffffff !important;
}

/* Ajustes para elementos específicos */
.lead {
  color: var(--text-dark);
}

strong, b {
  color: var(--text-dark);
}

.bi {
  color: inherit;
}

/* Ajustes para listas */
ul, ol, li {
  color: var(--text-muted);
}

/* Ajustes para tabelas */
table {
  color: var(--body-color);
}

/* Ajustes para formulários */
label {
  color: var(--text-dark);
}

/* Ajustes para links em cards */
.card a:not(.btn) {
  color: var(--link-color);
}

.card a:not(.btn):hover {
  color: var(--link-hover-color);
}