:root {
    --color-primary: #004B1C; /* Verde Escuro */
    --color-accent: #0DB04B; /* Verde Intermediário */
    --color-bg-light: #E5F5E5; /* Verde Claro Menta */
    
    /* Tons adicionais de verde */
    --color-green-light: #90EE90; /* Verde Claro */
    --color-green-lime: #32CD32; /* Verde Limão */
    --color-green-forest: #228B22; /* Verde Floresta */
    --color-green-sea: #2E8B57; /* Verde Mar */

    /* Cores de texto */
    --text-color-dark: #333;
    --text-color-light: #fff;

    /* Cores de feedback */
    --color-success: #28a745;
    --color-info: #17a2b8;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
}

body {
    font-family: 'Roboto', sans-serif; /* Placeholder for system font, assuming Roboto or similar */
    color: var(--text-color-dark);
    background-color: var(--color-bg-light);
}

/* Exemplo de uso das variáveis */
.btn-primary, .bg-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-color-light) !important;
}

.btn-primary:hover {
    background-color: #003a15 !important; /* Um tom mais escuro para hover */
    border-color: #003a15 !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.bg-light-green {
    background-color: var(--color-bg-light) !important;
}

.navbar {
    background-color: var(--color-primary);
}

.sidebar {
    background-color: var(--color-primary);
}

.sidebar .nav-link {
    color: var(--text-color-light);
}

.sidebar .nav-link.active {
    background-color: var(--color-accent);
}

.modal-header {
    background-color: var(--color-primary);
    color: var(--text-color-light);
}

.alert-danger-custom {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
    border-color: #f5c6cb; /* Red border */
}

/* LOGIN */

.login-container{

    background:var(--white);

}



.login-panel-left{

    background:#004B1C;

    color:white;

}



.login-panel-left i{

    color:white;

}



.login-panel-right{

    background:var(--surface);

}



.login-panel-right .form-control{

    background:var(--gray-light);

    border-color:var(--line);

    color:var(--text);

}



.login-panel-right label{

    color:var(--text);

}


/* Nova classe para cabeçalhos com cor de destaque */
.bg-accent-header {
    background-color: var(--color-accent) !important;
    color: var(--text-color-light) !important;
}

/* Tons de verde adicionais */
.bg-green-light {
    background-color: var(--color-green-light) !important;
}

.bg-green-lime {
    background-color: var(--color-green-lime) !important;
    color: var(--text-color-light) !important;
}

.bg-green-forest {
    background-color: var(--color-green-forest) !important;
    color: var(--text-color-light) !important;
}

.bg-green-sea {
    background-color: var(--color-green-sea) !important;
    color: var(--text-color-light) !important;
}

.text-green {
    color: var(--color-accent) !important;
}

.text-green-primary {
    color: var(--color-primary) !important;
}

.border-green {
    border-color: var(--color-accent) !important;
}
/* ==========================================================================
   COMPONENTES GLOBAIS: CAMPOS DE SENHA COM OLHO INTERNO (REUSÁVEL)
   ========================================================================== */

/* 1. Remove o olhinho nativo/automático dos navegadores para evitar duplicação */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none !important;
}

/* 2. Container do campo de senha para permitir o alinhamento absoluto do ícone */
.senha-container {
    position: relative;
    width: 100%;
}

/* 3. Garante que o texto digitado não fique por baixo do ícone do olho */
.senha-container .form-control {
    padding-right: 2.75rem !important;
}

/* 4. Estilização do botão invisível do olho, posicionado perfeitamente à direita */
.senha-icone-olho {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    z-index: 10;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 5. Efeito sutil de hover ao passar o mouse no olhinho */
.senha-icone-olho:hover {
    color: #1a7332;
}