/* WorkFlow Hub - Bush Villa Collection */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f8f9fa; color: #333; line-height: 1.6; }
.header { background: white; border-bottom: 1px solid #e9ecef; padding: 0 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-left { display: flex; align-items: center; gap: 2rem; }
.logo { font-size: 1.25rem; font-weight: 600; color: #2E7D32; text-decoration: none; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { text-decoration: none; color: #666; font-weight: 500; padding: 0.5rem 1rem; border-radius: 6px; transition: all 0.3s ease; }
.nav-links a:hover, .nav-links a.active { color: #2E7D32; background: #f1f8e9; }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.user-info { color: #666; font-size: 0.875rem; }
.main { padding: 2rem; max-width: 1400px; margin: 0 auto; }
.safari-branding { background: linear-gradient(135deg, #2E7D32, #4CAF50); color: white; padding: 2rem; border-radius: 12px; margin-bottom: 2rem; text-align: center; box-shadow: 0 4px 20px rgba(46, 125, 50, 0.3); }
.safari-branding h2 { margin-bottom: 0.5rem; font-size: 1.75rem; }
.safari-branding p { opacity: 0.9; font-size: 1.1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 4px solid #2E7D32; transition: transform 0.3s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.stat-card h3 { color: #666; font-size: 0.875rem; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.stat-number { font-size: 2.5rem; font-weight: 700; color: #2E7D32; margin-bottom: 0.5rem; }
.stat-trend { font-size: 0.875rem; color: #4CAF50; font-weight: 500; }
.content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.card h3 { margin-bottom: 1.5rem; color: #333; font-size: 1.125rem; font-weight: 600; }
.workflow-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border: 1px solid #f0f0f0; border-radius: 8px; margin-bottom: 0.75rem; transition: all 0.3s ease; cursor: pointer; }
.workflow-item:hover { border-color: #2E7D32; background: #f8fff8; transform: translateX(4px); }
.workflow-info { display: flex; align-items: center; gap: 1rem; flex: 1; }
.workflow-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2E7D32, #4CAF50); color: white; font-weight: 600; font-size: 0.875rem; }
.workflow-details h4 { margin: 0; color: #333; font-size: 0.95rem; font-weight: 600; }
.workflow-details p { margin: 0; color: #666; font-size: 0.8rem; margin-top: 0.25rem; }
.workflow-actions { display: flex; gap: 0.75rem; }
.workflow-actions a { color: #2E7D32; text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 4px; transition: background 0.3s ease; }
.workflow-actions a:hover { background: #f1f8e9; }
.execution-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; transition: background 0.3s ease; }
.execution-item:hover { background: #f8f9fa; }
.execution-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; }
.execution-icon.success { background: #d4edda; color: #155724; }
.execution-icon.running { background: #fff3cd; color: #856404; }
.execution-icon.error { background: #f8d7da; color: #721c24; }
.execution-details { flex: 1; }
.execution-details h5 { margin: 0; font-size: 0.9rem; color: #333; font-weight: 600; }
.execution-details p { margin: 0; font-size: 0.75rem; color: #666; margin-top: 0.25rem; }
.execution-time { font-size: 0.75rem; color: #999; }
.status-badge { padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.status-active, .status-success { background: #d4edda; color: #155724; }
.status-inactive { background: #f8f9fa; color: #6c757d; }
.status-running { background: #fff3cd; color: #856404; }
.status-error { background: #f8d7da; color: #721c24; }
.btn { background: #2E7D32; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; transition: all 0.3s ease; font-size: 0.875rem; font-weight: 500; box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2); }
.btn:hover { background: #1B5E20; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.75rem; }
.btn-secondary { background: #6c757d; box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2); }
.btn-secondary:hover { background: #5a6268; }
.btn-danger { background: #dc3545; box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); }
.btn-danger:hover { background: #c82333; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.page-header h1 { color: #333; font-size: 1.875rem; font-weight: 700; }
.workflows-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; }
.workflow-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; transition: all 0.3s ease; }
.workflow-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.workflow-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.workflow-header h3 { color: #333; font-size: 1.125rem; font-weight: 600; margin: 0; flex: 1; }
.workflow-description { color: #666; margin-bottom: 1.5rem; line-height: 1.5; font-size: 0.9rem; }
.workflow-stats { display: flex; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.875rem; color: #666; }
.workflow-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2E7D32, #4CAF50); }
.login-container { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); width: 100%; max-width: 400px; }
.login-header { text-align: center; margin-bottom: 2rem; }
.login-header h1 { color: #2E7D32; margin-bottom: 0.5rem; font-size: 1.75rem; }
.login-header p { color: #666; font-size: 1rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #333; font-size: 0.875rem; }
.form-group input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; }
.form-group input:focus { outline: none; border-color: #2E7D32; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1); }
.success { background: #d4edda; color: #155724; padding: 2rem; border-radius: 12px; margin: 2rem 0; border-left: 4px solid #2E7D32; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.success h2 { margin-bottom: 1rem; color: #2E7D32; }
.error { background: #f8d7da; color: #721c24; padding: 1rem 1.5rem; border-radius: 8px; margin: 1rem 0; border-left: 4px solid #dc3545; }
.quick-actions { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.quick-actions h3 { margin-bottom: 1rem; color: #333; font-size: 1.125rem; font-weight: 600; }
.action-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.builder-container { display: flex; height: 75vh; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border: 1px solid #e9ecef; }
.node-palette { width: 320px; background: #f8f9fa; border-right: 1px solid #e9ecef; padding: 1.5rem; overflow-y: auto; }
.workflow-canvas { flex: 1; background: radial-gradient(circle at 1px 1px, rgba(46, 125, 50, 0.15) 1px, transparent 0); background-size: 20px 20px; position: relative; overflow: auto; }
@media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; } .workflows-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 768px) { .main { padding: 1rem; } .stats-grid { grid-template-columns: 1fr; } .nav-links { display: none; } .page-header { flex-direction: column; gap: 1rem; align-items: stretch; } .builder-container { flex-direction: column; height: auto; } .node-palette { width: 100%; max-height: 250px; } .workflow-canvas { height: 400px; } .action-buttons { flex-direction: column; } }