/**
 * SISAUT - Sistema de Automação
 * CSS Customizado e Centralizado
 * Paleta de cores: Verde escuro profissional
 */

/* ===================================
   VARIÁVEIS DE CORES
   =================================== */
:root {
    --primary: #047857;        /* Verde escuro principal */
    --primary-hover: #064e3b;  /* Verde mais escuro no hover */
    --primary-light: #059669;  /* Verde médio */
    --secondary: #4b5563;      /* Cinza */
    --secondary-hover: #374151;/* Cinza escuro */
}

/* ===================================
   BOTÕES PRIMÁRIOS (VERDE)
   =================================== */
.btn-primary {
    background-color: var(--primary) !important;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

/* Botões grandes */
.btn-primary-lg {
    background-color: var(--primary) !important;
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-primary-lg:hover {
    background-color: var(--primary-hover) !important;
}

/* ===================================
   BOTÕES SECUNDÁRIOS (CINZA)
   =================================== */
.btn-secondary {
    background-color: var(--secondary) !important;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover) !important;
}

/* ===================================
   LINKS PRIMÁRIOS
   =================================== */
.link-primary {
    color: var(--primary) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.link-primary:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline;
}

/* ===================================
   BACKGROUNDS E GRADIENTES
   =================================== */
.bg-primary-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
}

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

.bg-primary-hover:hover {
    background-color: var(--primary-hover) !important;
}

/* ===================================
   ÍCONES E TEXTO COLORIDOS
   =================================== */
.text-primary {
    color: var(--primary) !important;
}

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

/* ===================================
   BADGES E PILLS
   =================================== */
.badge-primary {
    background-color: var(--primary) !important;
    color: white !important;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ===================================
   CARDS COM HEADER VERDE
   =================================== */
.card-primary-header {
    background: linear-gradient(to right, var(--primary), var(--primary-hover)) !important;
    color: white !important;
}

/* ===================================
   INPUTS E FORMS
   =================================== */
.input-primary {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid #9ca3af !important; /* gray-400 - borda mais visível */
    border-radius: 0.5rem;
    outline: none;
    transition: all 0.2s;
}

.input-primary:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1) !important;
}

input[type="checkbox"].checkbox-primary:checked,
input[type="radio"].radio-primary:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ===================================
   SIDEBAR ATIVA
   =================================== */
.sidebar-active {
    background-color: var(--primary) !important;
    border-radius: 0.5rem;
}

.sidebar-active:hover {
    background-color: var(--primary-hover) !important;
}

/* ===================================
   HOVER CARDS E BORDERS
   =================================== */
.hover-primary:hover {
    background-color: rgba(4, 120, 87, 0.05) !important;
    border-color: var(--primary) !important;
}

/* ===================================
   UTILIDADES
   =================================== */
.border-primary {
    border-color: var(--primary) !important;
}

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

/* ===================================
   RESPONSIVIDADE
   =================================== */
@media (max-width: 768px) {
    .btn-primary, .btn-primary-lg {
        width: 100%;
        text-align: center;
    }
}