.container, .container-md, .container-sm {
          max-width: 95% !important;
      }

      :root {
          --bg-color: #ffffff;
          --text-color: #212529;
          --card-bg: #ffffff;
          --border-color: #ddd;
          --navbar-bg: #212529;
          --navbar-text-color: #ffffff;
          --footer-bg: #f8f9fa;
      }

      .dark-mode {
          --bg-color: #2b2b2b;
          --text-color: #e2e2e2;
          --card-bg: #383838;
          --border-color: #505050;
          --navbar-bg: #1c1c1c;
          --navbar-text-color: #e2e2e2;
          --footer-bg: #1c1c1c;
      }

      body {
          background-color: var(--bg-color);
          color: var(--text-color);
          transition: background-color 0.3s, color 0.3s;
      }

      .card {
          background-color: var(--card-bg);
          border: 1px solid var(--border-color);
          transition: background-color 0.3s, border-color 0.3s;
      }

      .navbar, .navbar-dark {
          background-color: var(--navbar-bg) !important;
      }

      .navbar .navbar-brand,
      .navbar .nav-link,
      .navbar .btn-outline-light {
          color: var(--navbar-text-color) !important;
      }

      footer {
          background-color: var(--footer-bg);
          color: var(--text-color);
          transition: background-color 0.3s, color 0.3s;
      }

      /* Inputs e selects para adequação do modo dark */
      input, select {
          background-color: var(--card-bg);
          color: var(--text-color);
          border-color: var(--border-color);
          transition: all 0.3s ease-in-out;
      }

      /* =============================================== */
      /* Trecho novo para deixar o texto branco no modo dark */
      /* =============================================== */

      .dark-mode, 
      .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5,
      .dark-mode p, .dark-mode small, .dark-mode label, .dark-mode div {
          color: #ffffff !important;
      }

      .dark-mode .btn-outline-light {
          color: #ffffff !important;
          border-color: #ffffff !important;
      }

      .dark-mode input, .dark-mode select {
          color: #ffffff !important;
      }

      .dark-mode ::placeholder {
          color: #ccc !important;
      }

      .dark-mode footer,
      .dark-mode footer.text-muted {
          color: #ffffff !important; /* cor branca para footer */
          border-color: var(--border-color) !important; /* borda ajustada */
          background-color: var(--footer-bg) !important; /* fundo coerente com modo escuro */
      }

      /* Ajustes específicos para tela de relatórios no modo escuro */

      .dark-mode .accordion-item {
          background-color: var(--card-bg);
          border-color: var(--border-color);
          color: #ffffff;
      }

      .dark-mode .accordion-button {
          background-color: var(--card-bg);
          color: #ffffff;
      }

      .dark-mode .accordion-button:not(.collapsed) {
          background-color: #454545;
          color: #ffffff;
      }

      .dark-mode .accordion-button::after {
          filter: invert(1); /* Ícone branco no accordion */
      }

      .dark-mode .list-group-item {
          background-color: var(--card-bg);
          border-color: var(--border-color);
          color: #ffffff;
      }

      .dark-mode .card {
          background-color: var(--card-bg);
          color: #ffffff;
          border-color: var(--border-color);
      }

      .dark-mode .form-control,
      .dark-mode .form-select {
          background-color: #454545;
          color: #ffffff;
          border-color: var(--border-color);
      }

      .dark-mode label {
          color: #ffffff;
      }

      .dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
          filter: invert(1);
      }

      .dark-mode hr {
          border-top-color: var(--border-color);
      }

      /* Ajuste específico para gráficos canvas */
      .dark-mode canvas {
          background-color: transparent;
      }

      /* Ajustes específicos para a tela Detalhes da Tarefa no modo dark */

      .dark-mode .card {
          background-color: var(--card-bg);
          color: #ffffff;
          border-color: var(--border-color);
      }

      .dark-mode .card-header {
          background-color: #0056b3 !important; /* Azul escuro para header do card */
          color: #ffffff !important;
      }

      .dark-mode .badge.bg-warning {
          background-color: #f5b942 !important;
          color: #000 !important;
      }

      .dark-mode .badge.bg-secondary {
          background-color: #6c757d !important;
          color: #ffffff !important;
      }

      .dark-mode .badge.bg-success {
          background-color: #28a745 !important;
          color: #ffffff !important;
      }

      .dark-mode .badge.bg-danger {
          background-color: #dc3545 !important;
          color: #ffffff !important;
      }

      .dark-mode .border.rounded.bg-light {
          background-color: #454545 !important;
          border-color: var(--border-color) !important;
          color: #ffffff !important;
      }

      .dark-mode .table,
      .dark-mode .table th,
      .dark-mode .table td {
          background-color: var(--card-bg) !important;
          color: #ffffff !important;
          border-color: var(--border-color) !important;
      }

      .dark-mode .table-light th {
          background-color: #454545 !important;
          color: #ffffff !important;
      }

      .dark-mode .alert {
          background-color: #454545 !important;
          color: #ffffff !important;
          border-color: var(--border-color) !important;
      }

      .dark-mode .text-muted {
          color: #cccccc !important;
      }

      .dark-mode .markdown-body {
          background-color: transparent !important;
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI {
          background-color: #454545 !important;
          color: #ffffff !important;
          border-color: var(--border-color) !important;
      }

      .dark-mode .toastui-editor-defaultUI-toolbar,
      .dark-mode .toastui-editor-defaultUI-toolbar button {
          background-color: #383838 !important;
          color: #ffffff !important;
      }

      .dark-mode video {
          background-color: transparent;
      }

      /* Ajustes finais para Toast UI no Modo Dark */

      .dark-mode .toastui-editor-defaultUI,
      .dark-mode .toastui-editor-contents,
      .dark-mode .toastui-editor-md-container,
      .dark-mode .toastui-editor-ww-container {
          background-color: #2c2c2c !important;
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI-toolbar {
          background-color: #1f1f1f !important;
          border-bottom-color: var(--border-color) !important;
      }

      .dark-mode .toastui-editor-defaultUI-toolbar button {
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI .ProseMirror,
      .dark-mode .toastui-editor-defaultUI .toastui-editor-md-preview {
          background-color: #2c2c2c !important;
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI .scroll-sync.active {
          color: #00bfff !important;
      }

      .dark-mode .toastui-editor-defaultUI .toastui-editor-mode-switch {
          background-color: #1f1f1f !important;
          border-color: var(--border-color) !important;
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI .toastui-editor-md-tab-container {
          background-color: #2c2c2c !important;
      }

      .dark-mode .toastui-editor-defaultUI .toastui-editor-statusbar {
          background-color: #1f1f1f !important;
          border-top-color: var(--border-color) !important;
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI .toastui-editor-statusbar .toastui-editor-mode-switch button {
          color: #ffffff !important;
      }

      .dark-mode .toastui-editor-defaultUI .toastui-editor-mode-switch button.active {
          background-color: #383838 !important;
      }


      /* Faz os cards terem o mesmo tamanho, alinhando os botões */
      .card {
        display: flex;
        flex-direction: column;
        height: auto;       /* cresce de acordo com o conteúdo */
        overflow: visible;
      }

      .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* distribui conteúdo e botões */
        padding: 0.76rem;
        gap: 0.1rem;
        overflow: visible;
      }

      /* Garante alinhamento dos botões no rodapé do card */
      .btn-group {
          margin-top: auto;
          display: flex;
          flex-wrap: wrap;
          gap: 2px;
      }

      .btn-group .btn {
          flex: 1 1 auto;
          white-space: nowrap;
      }
      /* Quebra de linha forçada para consistência */
      h5, small, .tempo {
        word-break: break-word;
      }

      /* Melhora scrollbar (opcional, mais elegante) */
      ::-webkit-scrollbar {
          width: 6px;
      }
      ::-webkit-scrollbar-thumb {
          background-color: rgba(0,0,0,0.2);
          border-radius: 3px;
      }

        /* Reseta todos os botões para branco */
        .navbar .btn,
        .navbar .btn-outline-light,
        .navbar .btn-outline-secondary {
            color: #fff !important;
            border-color: #fff !important;
        }

        /* Botão especial: Colmeia em amarelo */
        .navbar .btn-colmeia {
            color: var(--bs-warning) !important;
            border-color: var(--bs-warning) !important;
        }
        .navbar .btn-colmeia:hover {
            background-color: var(--bs-warning) !important;
            color: #000 !important;
        }

        /* Base dos cards de métrica */
        .card.stat {
        border-width: 2px !important;
        border-radius: .8rem;
        }

        /* Título menor em cinza leve, número em negrito */
        .card.stat h6 { margin-bottom: .25rem; opacity: .75; }
        .card.stat h4 { margin: 0; font-weight: 700; }

        /* Variantes por status (mantendo a paleta do gráfico) */
        .card.stat.total {
        border-color: var(--bs-secondary) !important;
        color: var(--bs-secondary) !important;
        }
        .card.stat.inicial {
        border-color: var(--bs-primary) !important;
        color: var(--bs-primary) !important;
        }
        .card.stat.andamento {
        border-color: var(--bs-warning) !important;
        color: var(--bs-warning) !important;
        }
        .card.stat.concluidas {
        border-color: var(--bs-success) !important;
        color: var(--bs-success) !important;
        }
        .card.stat.parada {
        border-color: var(--bs-danger) !important;
        color: var(--bs-danger) !important;
        }

        /* Hover sutil */
        .card.stat:hover {
        box-shadow: 0 0 0 3px rgba(255,193,7,.15); /* brilho do warning */
        }

        /* Modo dark: mantém contraste do título/valor */
        .dark-mode .card.stat h6,
        .dark-mode .card.stat h4 { color: currentColor !important; 
        }
        /* Navbar: borda inferior amarela só no modo dark */
        .dark-mode .navbar {
        border-bottom-color: var(--bs-warning) !important; /* amarelo */
        /* opcional: espessura */
        /* border-bottom-width: 2px; */
        }

/* ===== Menções (Tribute.js) – dark fix baseado em .dark-mode ===== */

/* Light (já está ok acima) */
:root {
  --mention-bg: #ffffff;
  --mention-fg: #111827;
  --mention-muted: #6b7280;
  --mention-border: #e5e7eb;
  --mention-hover: #f3f4f6;
  --mention-shadow: 0 10px 20px rgba(0,0,0,.12), 0 6px 6px rgba(0,0,0,.08);
}

/* Dark: use a classe que você já aplica no <body> */
.dark-mode {
  --mention-bg: #111827;      /* fundo do popup */
  --mention-fg: #e5e7eb;      /* texto principal */
  --mention-muted: #9ca3af;   /* texto "secundário" (nome) */
  --mention-border: #374151;  /* borda */
  --mention-hover: #1f2937;   /* item hover/selecionado */
  --mention-shadow: 0 12px 24px rgba(0,0,0,.45), 0 8px 12px rgba(0,0,0,.35);
}

/* Força as cores do popup (independente do Bootstrap) */
.tribute-container,
.tribute-container ul,
.tribute-container li {
  background: var(--mention-bg) !important;
  color: var(--mention-fg) !important;
  border-color: var(--mention-border) !important;
}

.tribute-container {
  z-index: 99999 !important;
  border: 1px solid var(--mention-border) !important;
  box-shadow: var(--mention-shadow) !important;
  border-radius: 8px;
  overflow: hidden;
  max-height: 280px;
}

.tribute-container li { padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.tribute-container li span,
.tribute-container li strong { color: var(--mention-fg) !important; }

/* item selecionado / hover */
.tribute-container li.highlight,
.tribute-container li:hover {
  background: var(--mention-hover) !important;
  color: var(--mention-fg) !important;
}

/* o "nome completo" que você coloca com .text-muted */
.tribute-container .text-muted { 
  color: var(--mention-muted) !important;
  opacity: 1 !important;
}

/* evita recorte do popup */
.toastui-editor-ww-container, .toastui-editor-ww-container .ProseMirror {
  overflow: visible !important;
}