/* ========================
   Variáveis de Tema
======================== */

/* Tema Claro */
:root {
    --color-primary: #f38223;
    --color-primary-hover: #ef6c00;
    --color-background: #fff8f0;
    --color-foreground: #ffffff;
    --color-text: #212529;
    --color-border: #dee2e6;
    --color-muted: #6c757d;
    --color-light10: #ffffff10;
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-light20: #FFFFFF20;
  
    --focus-shadow: rgba(243, 130, 35, 0.25);
  }
  
  /* Tema Escuro */
  body.dark-mode {
    --color-primary: #f57c00;
    --color-primary-hover: #ff9800;
    --color-background: #1f1f1f;
    --color-foreground: #2b2b2b;
    --color-light10: #ffffff10;
    --color-light20: #ffffff20;
    --color-text: #f0f0f0;
    --color-border: #3a3a3a;
    --color-muted: #aaaaaa;
    --focus-shadow: rgba(255, 152, 0, 0.3);
    --color-success: #348861;
    --color-warning: #ffcd37;
    --color-danger: #dd5663;
    --color-blue: #4a90fa;
  }
  
  
  /* ========================
     Estilos Globais
  ======================== */
  
  body {
    background-color: var(--color-background);
    color: var(--color-text);
  }
  
  .bg-light-orange {
    background-color: var(--color-background);
  }

  .menu-orange {
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-foreground);
  }
  

  .text-orange {
    color: var(--color-primary);
  }
  
  .card {
    background-color: var(--color-foreground);
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }
  
  body.dark-mode .card {
    background-color: var(--color-foreground);
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }
  
  
  /* ========================
     Botões
  ======================== */
  
  .btn-orange {
    background-color: var(--color-primary);
    color: var(--color-foreground);
    border: none;
  }
  
  .btn-orange:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-foreground);
  }
  
  .btn-outline-orange {
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
  }
 
  .btn-outline-orange:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }

  div.menu-orange .btn-outline-orange {
    border: 1px solid var(--color-light20);
    background: transparent;
    color: var(--color-background);
  }

  div.menu-orange .btn-outline-orange:hover {
    border: 1px solid var(--color-light20);
    background: var(--color-light20);
    color: var(--color-foreground);
  }

  
  div.menu-orange a {
    color: var(--color-background);
  }
  
  div.menu-orange a:hover {
    color: var(--color-foreground);
  }
  
  /* ========================
     Inputs e Formulários
  ======================== */
  
  input,
  select,
  textarea {
    background-color: var(--color-foreground);
    color: var(--color-text);
    border: 1px solid var(--color-border);
  }
  
  input::placeholder,
  textarea::placeholder {
    color: var(--color-muted);
  }
  
  input:focus,
  select:focus,
  textarea:focus,
  button:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--focus-shadow) !important;
  }
  
  .log-action{
    cursor: pointer;  
  }

  .log-content {
    white-space: pre-wrap;
    background-color: #000;
    color: #0f0;
    padding: 1rem;
    height: 70vh;
    max-height: 70vh;
    overflow-y: scroll;
    font-family: monospace;
    border: 1px solid var(--color-border);
  }
  
  .log-content mark {
    background-color: yellow;
    color: black;
  }

  th.btnAcoes, td.btnAcoes{
    text-align: center;
    vertical-align: middle;
  }

  .btn-outline-secondary.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
  }
  

  body.dark-mode input,
  body.dark-mode textarea,
  body.dark-mode select,
  body.dark-mode table {
    background-color: var(--color-foreground);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    --bs-table-color: var(--color-text);
    --bs-table-bg: var(--color-background);
  }
  body.dark-mode .table-light {
    --bs-table-color: var(--color-text);
    --bs-table-bg: var(--color-light10);
    --bs-table-border-color: var(--color-foreground);
  }

  body.dark-mode .btn-outline-primary{
    --bs-btn-color: var(--color-blue);
    --bs-btn-border-color: var(--color-blue);
  }
  body.dark-mode .btn-outline-danger{
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
  }

  body.dark-mode input::placeholder,
  body.dark-mode textarea::placeholder {
    color: var(--color-muted);
  }
  
  body.dark-mode input:focus,
  body.dark-mode textarea:focus,
  body.dark-mode select:focus {
    background-color: var(--color-foreground);
    color: var(--color-text);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem var(--focus-shadow);
  }


  
  /* ========================
     Botão flutuante de Tema
  ======================== */
  
  #btnTema {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 999;
  }
  
  div.menu-orange #btnTema {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    z-index: 999;
  }

  body.dark-mode .menu-orange {
    background-color: color-mix(in srgb, var(--color-primary), rgba(255,255,255,0.5));
    /*background-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-background) 50%);*/
    color: var(--color-text);
  }
  body.dark-mode .div.menu-orange{
  }
  body.dark-mode div.menu-orange a {
    color: var(--color-text);
  }
    body.dark-mode div.menu-orange a:hover {
    color: var(--color-text);
  }

  body.dark-mode div.menu-orange .btn-outline-orange {
    border: 1px solid var(--color-light20);
    background: transparent;
    color: var(--color-text);
  }

  body.dark-mode div.menu-orange .btn-outline-orange:hover {
    border: 1px solid var(--color-light20);
    background: var(--color-light20);
    color: var(--color-white);
  }

  /* ========================
   Modal Customizada (Compatível com Tema)
======================== */

.modal-content {
  background-color: var(--color-foreground);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.modal-header,
.modal-footer {
  border-color: var(--color-border);
}

.modal-title {
  color: var(--color-text);
}

.modal-body {
  color: var(--color-text);
  background-color: var(--color-foreground);
}

/* Botões dentro da modal (caso tenha) */
.modal .btn {
  box-shadow: none !important;
}

/* Dark mode extra segurança */
body.dark-mode .modal-content {
  background-color: var(--color-foreground);
  color: var(--color-text);
  border-color: var(--color-border);
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--color-border);
}

body.dark-mode .modal-title,
body.dark-mode .modal-body {
  color: var(--color-text);
}

body.dark-mode .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

body.dark-mode .btn-close:hover {
  opacity: 1;
}