/* PERSONALIZAÇÃO CORES */
.bg-sistema {
   background-color: #00A64B;
   color: white;
}

.icon i:hover {
   background-color: #00A64B;
}

.text-sistema {
   color: #00A64B;
}

.link-sistema {
   color: #00A64B !important;
   text-decoration: none !important;
}

.link-sistema:hover {
   color: #056631 !important;
   text-decoration: none !important;
}

.card-sistema.card-outline {
   border-top: 3px solid #00A64B;
}

.toTop {
   cursor: pointer;
   position: fixed;
   bottom: 20px;
   right: 20px;
   display: none;
   z-index: 10;
   opacity: 0.5;
}

.toTop:hover {
   opacity: 1;
}

/* Altera o fundo e a cor do texto ao passar o mouse nos itens da sidebar */
.main-sidebar .nav-link:hover {
   background-color: #037938 !important;
   /* Cor de fundo (verde do sistema) */
   color: white !important;
   /* Cor do texto icones */
}

/* Opcional: Altera o efeito nos sub-itens (se houver) */
.nav-treeview>.nav-item>.nav-link:hover {
   background-color: #037938 !important;
   color: #fff !important;
}



/* --- Report Cards Styling (The List Style) --- */
.category-header {
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.report-card {
   background: white;
   border: 1px solid #e2e8f0;
   border-radius: 0.75rem;
   padding: 1rem 1.25rem;
   margin-bottom: 0.75rem;
   transition: all 0.2s ease;
   cursor: pointer;
   display: flex;
   align-items: center;
   text-decoration: none;
   color: inherit;
}

.report-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
   border-color: transparent;
}

.icon-box {
   width: 48px;
   height: 48px;
   border-radius: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   flex-shrink: 0;
   margin-right: 1rem;
}

.card-title {
   font-size: 1rem;
   font-weight: 600;
   color: #1e293b;
   margin-bottom: 0.1rem;
}

.card-desc {
   font-size: 0.875rem;
   color: #64748b;
   margin-bottom: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.chevron-icon {
   color: #cbd5e1;
   transition: color 0.2s;
}

.report-card:hover .chevron-icon {
   color: #64748b;
}

/* --- Color Themes --- */
/* Blue (Gestão) */
.theme-blue .category-header {
   color: #2563eb;
}

.theme-blue .icon-box {
   background-color: #eff6ff;
   color: #2563eb;
}

.theme-blue .badge-custom {
   background-color: #eff6ff;
   color: #1e40af;
}

/* Amber (Documentação) */
.theme-amber .category-header {
   color: #d97706;
}

.theme-amber .icon-box {
   background-color: #fffbeb;
   color: #d97706;
}

.theme-amber .badge-custom {
   background-color: #fef3c7;
   color: #92400e;
}

/* Pink (Social) */
.theme-pink .category-header {
   color: #db2777;
}

.theme-pink .icon-box {
   background-color: #fdf2f8;
   color: #db2777;
}

/* Emerald (Financeiro) */
.theme-emerald .category-header {
   color: #059669;
}

.theme-emerald .icon-box {
   background-color: #ecfdf5;
   color: #059669;
}

/* ============================================================================
   COMPONENTE DE UPLOAD DE IMAGEM (padrão da tela de Configurações)
   Usado em todas as telas do painel que enviam imagem.

   Estrutura:
   <div class="cfg-upload">
      <div class="cfg-img-box">
         <img src="..." class="cfg-preview">
         <div class="cfg-img-vazia">...</div>       (opcional)
      </div>
      <label class="cfg-btn-file" for="ID">...</label>
      <input type="file" id="ID" class="d-none cfg-input">
      <span class="cfg-nome-arquivo">Nenhum arquivo</span>
   </div>
   ============================================================================ */
.cfg-img-box {
   border: 2px dashed #dfe3e8;
   border-radius: 14px;
   background: #fafbfc;
   min-height: 150px;
   display: flex; align-items: center; justify-content: center;
   padding: 14px; margin-bottom: 14px;
   transition: border-color .2s ease, background .2s ease;
}
.cfg-img-box:hover { border-color: #20c997; background: #f6fffb; }
.cfg-img-box img { max-width: 100%; max-height: 150px; object-fit: contain; }
.cfg-img-vazia { color: #b0b7c3; font-size: 13px; text-align: center; }
.cfg-img-vazia i { display: block; font-size: 26px; margin-bottom: 6px; }

.cfg-btn-file {
   display: inline-flex; align-items: center; gap: 8px;
   background: #f2f4f7; color: #344054;
   border: 1px solid #e4e7ec; border-radius: 10px;
   padding: 8px 14px; font-size: 13px; font-weight: 600;
   cursor: pointer; margin: 0; transition: all .2s ease;
}
.cfg-btn-file:hover { background: #e9ecf1; color: #101828; }
.cfg-nome-arquivo { font-size: 12px; color: #98a2b3; display: block; margin-top: 8px; word-break: break-all; }

/* Rótulo do bloco de upload */
.cfg-upload-label {
   font-size: 12.5px; font-weight: 600; color: #475467;
   margin-bottom: 6px; display: block;
}

/* Dica de tamanho / formato da imagem */
.cfg-dica {
   display: flex; align-items: flex-start; gap: 9px;
   background: #f0f9ff; border: 1px solid #d6ecfa;
   color: #2b6b8f; border-radius: 11px;
   padding: 10px 13px; font-size: 12.5px; line-height: 1.45;
   margin-bottom: 14px;
}
.cfg-dica i { margin-top: 2px; }

/* Link de remover a imagem */
.cfg-btn-remover {
   background: none; border: none; padding: 0;
   font-size: 12.5px; font-weight: 600; color: #dc3545;
   cursor: pointer; margin-left: 10px;
}
.cfg-btn-remover:hover { color: #a71d2a; text-decoration: underline; }