/* ========================================
   TEMA - Cores extraídas da logo
   Verde: #00A056, #008656, #009D56
   ======================================== */

:root {
    /* ===== CORES PRIMÁRIAS (VERDE DA LOGO) ===== */
    --primary: #00A056;           /* Verde principal da logo */
    --primary-light: #00D06E;     /* Verde claro */
    --primary-dark: #008656;      /* Verde escuro da logo */
    --primary-bg: rgba(0, 160, 86, 0.12);
    --primary-hover: #008656;
    
    /* ===== CORES SECUNDÁRIAS ===== */
    --secondary: #6b7280;
    --secondary-light: #9ca3af;
    --secondary-dark: #4b5563;
    
    /* ===== FUNDO ===== */
    --bg-dark: #0f172a;
    --bg-panel: #1e293b;
    --bg-input: #1e293b;
    --bg-hover: #334155;
    
    /* ===== TEXTO ===== */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    
    /* ===== BORDAS ===== */
    --border-color: #334155;
    --border-light: #475569;
    
    /* ===== STATUS ===== */
    --success: #00A056;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    
    /* ===== ACTIVE ===== */
    --active-tab: rgba(0, 160, 86, 0.15);
}

/* ========================================
   ELEMENTOS DO SISTEMA
   ======================================== */

/* Header */
header {
    border-bottom-color: var(--primary) !important;
}
header .header-left span,
header .header-left .hamburger span {
    color: var(--primary) !important;
}

/* Botão primário */
.btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--primary-dark) !important;
}

/* Botão outline */
.btn-outline {
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.btn-outline:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-outline.active {
    border-color: var(--primary) !important;
    background: var(--primary-bg) !important;
    color: var(--primary) !important;
}

/* Botão de ação */
.action-btn {
    background: var(--primary) !important;
    color: #fff !important;
}
.action-btn:hover {
    background: var(--primary-dark) !important;
}

/* Tab bar */
.tab-btn.active {
    color: var(--primary) !important;
    background-color: var(--active-tab) !important;
    border-top-color: var(--primary) !important;
}

/* Indicadores */
.indicator {
    color: var(--primary) !important;
}

/* Cards */
.card h3 {
    color: var(--primary) !important;
}
.card .cabecalho-container input:focus {
    border-color: var(--primary) !important;
}

/* Inputs */
textarea:focus, input:focus, select:focus {
    border-color: var(--primary) !important;
}
input[type="range"] {
    accent-color: var(--primary) !important;
}
input[type="range"]::-webkit-slider-thumb {
    background: var(--primary) !important;
}
input[type="checkbox"] {
    accent-color: var(--primary) !important;
}

/* Face Status */
.face-status .dot.ready {
    background: var(--primary) !important;
}

/* Modal */
.modal-content h2 {
    color: var(--primary) !important;
}
.modal-btn {
    background: var(--primary) !important;
    color: #fff !important;
}
.modal-btn:hover {
    background: var(--primary-dark) !important;
}

/* Progress bar */
.modal-progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--primary-light)) !important;
}

/* Badges */
.status-ok {
    color: var(--primary) !important;
}
.face-detected-badge {
    color: var(--primary) !important;
    background: var(--primary-bg) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

/* PDF Button */
.top-pdf-btn {
    background: var(--primary) !important;
    color: #fff !important;
}
.top-pdf-btn:hover {
    background: var(--primary-dark) !important;
}

/* Face Detect */
.btn-face-detect {
    background: var(--primary-bg) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.btn-face-detect:hover {
    background: rgba(0, 160, 86, 0.25) !important;
}

/* Recorte */
.btn-outline[onclick="openModalCrop()"] {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* Links */
a, .forgot {
    color: var(--primary) !important;
}
a:hover, .forgot:hover {
    color: var(--primary-light) !important;
}

/* ========================================
   LOGIN ESPECÍFICO
   ======================================== */
.login-logo h1 {
    color: var(--primary) !important;
}
.btn-login {
    background: var(--primary) !important;
    color: #fff !important;
}
.btn-login:hover {
    background: var(--primary-dark) !important;
}
.login-box:hover {
    box-shadow: 0 30px 80px rgba(0, 160, 86, 0.08) !important;
}
.form-group .input-wrapper:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 160, 86, 0.1) !important;
}
.login-options .forgot:hover {
    color: var(--primary) !important;
}
.modal-actions .btn-send {
    background: var(--primary) !important;
    color: #fff !important;
}
.modal-actions .btn-send:hover {
    background: var(--primary-dark) !important;
}
.modal-actions .btn-cancel:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ========================================
   PEDIDOS ESPECÍFICO
   ======================================== */
.pedido-card .info .titulo .numero {
    color: var(--primary) !important;
}
.pedido-card .acoes .btn-editar {
    background: var(--primary) !important;
    color: #fff !important;
}
.pedido-card .acoes .btn-editar:hover {
    background: var(--primary-dark) !important;
}
.pedido-card .acoes .btn-detalhes:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.stats-grid .stat-card .number {
    color: var(--primary) !important;
}
.filtros-container .btn-filtrar {
    background: var(--primary) !important;
    color: #fff !important;
}
.filtros-container .btn-filtrar:hover {
    background: var(--primary-dark) !important;
}
.filtros-container input:focus,
.filtros-container select:focus {
    border-color: var(--primary) !important;
}
.modal-btn.success {
    background: var(--primary) !important;
    color: #fff !important;
}
.modal-btn.success:hover {
    background: var(--primary-dark) !important;
}
.empty-state .btn-novo {
    background: var(--primary) !important;
    color: #fff !important;
}
.empty-state .btn-novo:hover {
    background: var(--primary-dark) !important;
}